'use client'

import type { TrainingModule } from '@/lib/sdk/training/types'
import { REGULATION_LABELS, REGULATION_COLORS, FREQUENCY_LABELS } from '@/lib/sdk/training/types'

export default function ModulesTab({
  modules,
  regulationFilter,
  onRegulationFilterChange,
  onCreateClick,
  onModuleClick,
}: {
  modules: TrainingModule[]
  regulationFilter: string
  onRegulationFilterChange: (v: string) => void
  onCreateClick: () => void
  onModuleClick: (module: TrainingModule) => void
}) {
  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <select
            value={regulationFilter}
            onChange={e => onRegulationFilterChange(e.target.value)}
            className="px-3 py-2 text-sm border rounded-lg bg-white"
          >
            <option value="">Alle Regulierungen</option>
            {Object.entries(REGULATION_LABELS).map(([k, v]) => (
              <option key={k} value={k}>{v}</option>
            ))}
          </select>
          <span className="text-sm text-gray-500">{modules.length} Module</span>
        </div>
        <button
          onClick={onCreateClick}
          className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700"
        >
          + Neues Modul
        </button>
      </div>

      {modules.length === 0 ? (
        <div className="text-center py-12 text-gray-500 text-sm">Keine Module gefunden.</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">Code</th>
                <th className="px-4 py-3 text-left font-medium text-gray-600">Titel</th>
                <th className="px-4 py-3 text-left font-medium text-gray-600">Regulierung</th>
                <th className="px-4 py-3 text-left font-medium text-gray-600">Frequenz</th>
                <th className="px-4 py-3 text-left font-medium text-gray-600">Dauer</th>
                <th className="px-4 py-3 text-left font-medium text-gray-600">Status</th>
              </tr>
            </thead>
            <tbody className="divide-y">
              {modules.map(m => {
                const reg = m.regulation_area
                const colors = REGULATION_COLORS[reg] ?? { bg: 'bg-gray-100', text: 'text-gray-700', border: 'border-gray-300' }
                return (
                  <tr
                    key={m.id}
                    onClick={() => onModuleClick(m)}
                    className="hover:bg-gray-50 cursor-pointer"
                  >
                    <td className="px-4 py-3">
                      <code className="text-xs bg-gray-100 px-1.5 py-0.5 rounded">{m.module_code}</code>
                    </td>
                    <td className="px-4 py-3">
                      <div className="font-medium text-gray-900">{m.title}</div>
                      {m.description && <div className="text-xs text-gray-500 truncate max-w-xs">{m.description}</div>}
                    </td>
                    <td className="px-4 py-3">
                      <span className={`text-xs px-2 py-0.5 rounded-full border ${colors.bg} ${colors.text} ${colors.border}`}>
                        {REGULATION_LABELS[reg] ?? reg}
                      </span>
                    </td>
                    <td className="px-4 py-3 text-gray-600">{FREQUENCY_LABELS[m.frequency_type] ?? m.frequency_type}</td>
                    <td className="px-4 py-3 text-gray-600">{m.duration_minutes} Min</td>
                    <td className="px-4 py-3">
                      <span className={`text-xs px-2 py-0.5 rounded-full ${m.is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'}`}>
                        {m.is_active ? 'Aktiv' : 'Inaktiv'}
                      </span>
                    </td>
                  </tr>
                )
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  )
}