frontend/src/components/LanguageLevelTable.tsx

import React, { FC, useState } from 'react';
import { AllModelsData, ModelMetrics } from '../types';

interface Props {
  data: AllModelsData;
  selectedModels: string[];
  metrics: string[];
  colors: string[];
}

const LanguageLevelTable: FC<Props> = ({ data, selectedModels, metrics, colors }) => {
  const [selectedLanguage, setSelectedLanguage] = useState<string | null>(null);
  const [selectedMetric, setSelectedMetric] = useState<string>(metrics[0]);

  const languagePairs = selectedModels.length
    ? Object.keys(data[selectedModels[0]] || {}).filter(k => k !== 'averages')
    : [];

  const filteredData = selectedLanguage
    ? languagePairs.filter(pair => pair === selectedLanguage)
    : languagePairs;

  return (
    <div className="bg-white rounded-xl shadow-lg p-6 mb-8">
      <h2 className="text-2xl font-bold text-gray-800 mb-6">Language-Level Table</h2>

      {/* Filters */}
      <div className="flex space-x-4 mb-4">
        <select
          value={selectedLanguage || ''}
          onChange={e => setSelectedLanguage(e.target.value || null)}
          className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
        >
          <option value="">All Languages</option>
          {languagePairs.map(pair => (
            <option key={pair} value={pair}>
              {pair.toUpperCase()}
            </option>
          ))}
        </select>

        <select
          value={selectedMetric}
          onChange={e => setSelectedMetric(e.target.value)}
          className="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
        >
          {metrics.map(metric => (
            <option key={metric} value={metric}>
              {metric.toUpperCase()}
            </option>
          ))}
        </select>
      </div>

      {/* Table */}
      <div className="overflow-x-auto">
        <table className="w-full text-sm">
          <thead>
            <tr className="border-b border-gray-200">
              <th className="text-left py-3 px-4 font-semibold">Language Pair</th>
              {selectedModels.map((model, index) => (
                <th
                  key={model}
                  className="text-center py-3 px-4 font-semibold"
                  style={{ color: colors[index % colors.length] }}
                >
                  {model}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {filteredData.map(pair => (
              <tr key={pair} className="border-b border-gray-100 hover:bg-gray-50">
                <td className="py-3 px-4 font-medium">{pair.toUpperCase()}</td>
                {selectedModels.map(model => (
                  <td key={model} className="text-center py-3 px-4">
                    {data[model]?.[pair]?.[selectedMetric as keyof ModelMetrics]?.toFixed(3) || '-'}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default LanguageLevelTable;