'use client'

import type { MatrixResponse } from '@/lib/sdk/training/types'
import { ALL_ROLES, ROLE_LABELS } from '@/lib/sdk/training/types'

export default function MatrixTab({
  matrix,
  onDeleteEntry,
  onAddEntry,
}: {
  matrix: MatrixResponse
  onDeleteEntry: (roleCode: string, moduleId: string) => void
  onAddEntry: (roleCode: string) => void
}) {
  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <p className="text-sm text-gray-500">Pflichtzuordnung von Schulungsmodulen zu Rollen</p>
      </div>

      <div className="bg-white border rounded-lg overflow-hidden">
        <table className="w-full text-sm">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-4 py-3 text-left font-medium text-gray-600 w-48">Rolle</th>
              <th className="px-4 py-3 text-left font-medium text-gray-600">Zugewiesene Module</th>
              <th className="px-4 py-3 text-right font-medium text-gray-600 w-24">Aktion</th>
            </tr>
          </thead>
          <tbody className="divide-y">
            {ALL_ROLES.map(role => {
              const entries = matrix.entries[role] ?? []
              return (
                <tr key={role} className="hover:bg-gray-50">
                  <td className="px-4 py-3">
                    <div className="font-medium text-gray-900">{ROLE_LABELS[role] ?? role}</div>
                    <div className="text-xs text-gray-400">{role}</div>
                  </td>
                  <td className="px-4 py-3">
                    {entries.length === 0 ? (
                      <span className="text-gray-400 text-xs">Keine Module zugewiesen</span>
                    ) : (
                      <div className="flex flex-wrap gap-1.5">
                        {entries.map(entry => (
                          <span
                            key={entry.id}
                            className="inline-flex items-center gap-1 text-xs bg-blue-50 text-blue-700 border border-blue-200 px-2 py-0.5 rounded-full"
                          >
                            <code className="text-xs">{entry.module_code ?? entry.module_id.slice(0, 8)}</code>
                            {entry.is_mandatory && <span className="text-red-500 font-bold">*</span>}
                            <button
                              onClick={() => onDeleteEntry(role, entry.module_id)}
                              className="ml-0.5 text-blue-400 hover:text-red-600"
                              title="Entfernen"
                            >
                              ×
                            </button>
                          </span>
                        ))}
                      </div>
                    )}
                  </td>
                  <td className="px-4 py-3 text-right">
                    <button
                      onClick={() => onAddEntry(role)}
                      className="px-2 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700"
                    >
                      + Modul
                    </button>
                  </td>
                </tr>
              )
            })}
          </tbody>
        </table>
      </div>
      <p className="text-xs text-gray-400">* = Pflichtmodul</p>
    </div>
  )
}