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

const MyTable = () => {
  const [data, setData] = useState(null);
  const [selectedGroup, setSelectedGroup] = useState('summary');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('http://5.34.198.87:8000/api/options/intradatacols');

        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }

        const contentType = response.headers.get('content-type');
        if (!contentType || !contentType.includes('application/json')) {
          throw new Error('Invalid content type. Expected JSON.');
        }

        const jsonData = await response.json();
        console.log(jsonData);
        setData(jsonData);
      } catch (error) {
        console.error('Error fetching data:', error);
        setError(error.message || 'An error occurred while fetching data.');
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

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

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

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

  const validGroups = Object.keys(data.groups);

  if (!validGroups.includes(selectedGroup)) {
    console.error(`Invalid selectedGroup: ${selectedGroup}`);
    return <div>No data available</div>;
  }

  const columns = data.groupscolumn[selectedGroup] || [];
  const groupData = data[selectedGroup] || {};

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

      <div className="table-container" style={{ overflowY: 'auto', maxHeight: '500px' }}>
        <table className="table table-bordered table-striped">
          {/* Table headers */}
          <thead className="thead-dark">
            <tr>
              {columns.map((column, index) => (
                <th key={index}>{data.fields[column]}</th>
              ))}
            </tr>
          </thead>
          {/* Table body */}
          <tbody>
            {Object.values(groupData).map((group, groupIndex) => (
              <tr key={groupIndex}>
                {Array.isArray(group) ? (
                  group.map((item, itemIndex) => (
                    <td key={itemIndex}>{item}</td>
                  ))
                ) : (
                  <td>{group}</td>
                )}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default MyTable;