import React, { useEffect, useState } from 'react';

const MyTable = ({ filterValues }) => {
  const [intradata, setIntradata] = useState(null);
  const [data, setData] = useState(null);
  const [selectedGroup, setSelectedGroup] = useState('summary');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [columns, setColumns] = useState([]);
  const [validGroups, setValidGroups] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        // Fetch intradatacols
        const intradatacolsResponse = await fetch('http://5.34.198.87:8000/api/options/intradatacols');
        if (!intradatacolsResponse.ok) {
          throw new Error(`HTTP error! Status: ${intradatacolsResponse.status}`);
        }

        const intradatacolsData = await intradatacolsResponse.json();
        console.log('API Response for intradatacols:', intradatacolsData);
        setData(intradatacolsData);

        const groups = Object.keys(intradatacolsData.groups);
        setValidGroups(groups);

        const initialColumns = intradatacolsData.groupscolumn[selectedGroup] || [];
        setColumns(initialColumns);

        if (!groups.includes(selectedGroup)) {
          console.error(`Invalid selectedGroup: ${selectedGroup}`);
          return;
        }

        // Fetch intradata
        const intradataResponse = await fetch('http://5.34.198.87:8000/api/options/intradata');
        if (!intradataResponse.ok) {
          throw new Error(`HTTP error! Status: ${intradataResponse.status}`);
        }

        const intradataData = await intradataResponse.json();
        console.log('API Response for intradata:', intradataData);

        setIntradata(intradataData.data);
      } catch (error) {
        console.error('Error fetching data:', error);
        setError(error.message || 'An error occurred while fetching data.');
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [selectedGroup]);

  useEffect(() => {
    console.log('intradata:', intradata);
    console.log('columns:', columns);
    console.log('data:', data);
  }, [intradata, columns, data]);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  if (!intradata || !data || !data.groups || !data.groupscolumn) {
    return <div>No data available</div>;
  }

  // Filter the intradata based on filterValues
  const filteredData = intradata.filter((item) => {
    // Check filter01
    if (filterValues.filter01 && item.ua_instrument_id.toString().toLowerCase() !== filterValues.filter01.toString().toLowerCase()) {
      console.log(`ua_instrument_id Filter: ${item.ua_instrument_id} !== ${filterValues.filter01}`);
      return false;
    }

    // Custom function to parse date in the format "yyyyMMdd"
const parseCustomDate = (dateString) => {
  const year = dateString.substr(0, 4);
  const month = dateString.substr(4, 2) - 1; // Months are zero-based
  const day = dateString.substr(6, 2);

  return new Date(year, month, day);
};

// Check date range filter
if (filterValues.startDate && filterValues.endDate) {
  const itemDate = parseCustomDate(item.end_date); // Parse using custom function

  if (isNaN(itemDate.getTime())) {
    console.error(`Invalid date format for end_date: ${item.end_date}`);
    return false;
  }

  const startDate = parseInt(filterValues.startDate, 10);
  const endDate = parseInt(filterValues.endDate, 10);

  console.log('Item Date:', itemDate);
  console.log('Start Date:', startDate);
  console.log('End Date:', endDate);

  console.log('Column Values:', item[columns[0]]);

  return itemDate >= startDate && itemDate <= endDate;
}
return true;
});

console.log('Filtered Data:', filteredData);
  console.log('Filtered Data for Rendering:', filteredData);

return (
<div className="container mt-4">
  <div className="btn-group mb-3">
    {validGroups.map((groupKey) => (
      <button
        key={groupKey}
        type="button"
        className={`btn ${selectedGroup === groupKey ? 'bg-blue-500 text-white' : 'bg-blue-200'}`}
        onClick={() => setSelectedGroup(groupKey)}
      >
        {data.groups[groupKey]}
      </button>
    ))}
  </div>

  <div className="table-container overflow-x-auto" style={{ maxHeight: '400px' }}>
    <table className="table-auto w-full border-collapse border border-gray-800">
      <thead className="bg-gray-800 text-white">
        <tr>
          {columns.map((column, index) => (
            <th key={index} className="py-2 px-4 border border-gray-800">
              {data.fields[column]}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {filteredData.length > 0 ? (
          filteredData.map((item, itemIndex) => (
            <tr key={itemIndex} className={itemIndex % 2 === 0 ? 'bg-gray-100' : 'bg-white'}>
              {columns.map((column, columnIndex) => (
                <td key={columnIndex} className="py-2 px-4 border border-gray-800">
                  {item[column] instanceof Date ? item[column].toLocaleDateString() : item[column]}
                </td>
              ))}
            </tr>
          ))
        ) : (
          <tr>
            <td colSpan={columns.length} className="py-2 px-4 border border-gray-800">
              No matching data
            </td>
          </tr>
        )}
      </tbody>
    </table>
  </div>
</div>
);
};

export default MyTable;