'use client'

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

interface MatrixTabProps {
  matrix: MatrixResponse
  onDeleteEntry: (roleCode: string, moduleId: string) => void
  onAddEntry: (roleCode: string) => void
}

export function MatrixTab({ matrix, onDeleteEntry, onAddEntry }: MatrixTabProps) {
  return (
    <div className="space-y-4">
      <p className="text-sm text-gray-600">Compliance Training Matrix (CTM): Welche Rollen benoetigen welche Schulungsmodule</p>
      <div className="overflow-x-auto">
        <table className="w-full text-sm border-collapse">
          <thead>
            <tr className="bg-gray-50">
              <th className="text-left p-2 border font-medium text-gray-700 w-48">Rolle</th>
              <th className="text-left p-2 border font-medium text-gray-700">Module</th>
              <th className="text-center p-2 border font-medium text-gray-700 w-20">Anzahl</th>
            </tr>
          </thead>
          <tbody>
            {ALL_ROLES.map(role => {
              const entries = matrix.entries[role] || []
              return (
                <tr key={role} className="border-b hover:bg-gray-50">
                  <td className="p-2 border font-medium">
                    <span className="text-gray-900">{role}</span>
                    <span className="text-gray-500 ml-1 text-xs">{ROLE_LABELS[role]}</span>
                  </td>
                  <td className="p-2 border">
                    <div className="flex flex-wrap gap-2 items-center">
                      {entries.map(e => (
                        <span
                          key={e.id || e.module_id}
                          className={`inline-flex items-center gap-1 px-2 py-1 text-xs rounded-full ${e.is_mandatory ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-600'}`}
                          title={`${e.module_title} (${e.is_mandatory ? 'Pflicht' : 'Optional'})`}
                        >
                          {e.is_mandatory ? '🔴' : '🔵'} {e.module_code}
                          <button
                            onClick={() => onDeleteEntry(role, e.module_id)}
                            className="ml-1 text-gray-400 hover:text-red-500 font-bold leading-none"
                            title="Zuordnung entfernen"
                          >×</button>
                        </span>
                      ))}
                      {entries.length === 0 && <span className="text-gray-400 text-xs">Keine Module</span>}
                      <button
                        onClick={() => onAddEntry(role)}
                        className="px-2 py-1 text-xs text-blue-600 border border-blue-300 rounded-full hover:bg-blue-50 transition-colors"
                      >
                        + Hinzufuegen
                      </button>
                    </div>
                  </td>
                  <td className="p-2 border text-center">{entries.length}</td>
                </tr>
              )
            })}
          </tbody>
        </table>
      </div>
    </div>
  )
}