'use client'

import { GCIMatrixResponse, getScoreColor } from '@/lib/sdk/gci/types'
import { LoadingSpinner } from './GCIHelpers'

export function MatrixTab({ matrix }: { matrix: GCIMatrixResponse | null }) {
  if (!matrix || !matrix.matrix) return <LoadingSpinner />

  const regulations = matrix.matrix.length > 0 ? Object.keys(matrix.matrix[0].regulations) : []

  return (
    <div className="space-y-6">
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        <h3 className="text-base font-semibold text-gray-900 mb-4">Compliance-Matrix (Rollen x Regulierungen)</h3>
        <div className="overflow-x-auto">
          <table className="min-w-full text-sm">
            <thead>
              <tr className="border-b border-gray-200">
                <th className="text-left py-2 pr-4 font-medium text-gray-600">Rolle</th>
                {regulations.map(r => (
                  <th key={r} className="text-center py-2 px-3 font-medium text-gray-600 uppercase">{r}</th>
                ))}
                <th className="text-center py-2 px-3 font-medium text-gray-600">Gesamt</th>
                <th className="text-center py-2 px-3 font-medium text-gray-600">Module</th>
              </tr>
            </thead>
            <tbody>
              {matrix.matrix.map(entry => (
                <tr key={entry.role} className="border-b border-gray-100 hover:bg-gray-50">
                  <td className="py-2 pr-4 font-medium text-gray-900">{entry.role_name}</td>
                  {regulations.map(r => (
                    <td key={r} className="py-2 px-3 text-center">
                      <span className={`font-semibold ${getScoreColor(entry.regulations[r])}`}>
                        {entry.regulations[r].toFixed(0)}%
                      </span>
                    </td>
                  ))}
                  <td className="py-2 px-3 text-center">
                    <span className={`font-bold ${getScoreColor(entry.overall_score)}`}>
                      {entry.overall_score.toFixed(0)}%
                    </span>
                  </td>
                  <td className="py-2 px-3 text-center text-gray-500">
                    {entry.completed_modules}/{entry.required_modules}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}