'use client'

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

interface ModulesTabProps {
  modules: TrainingModule[]
  regulationFilter: string
  onRegulationFilterChange: (value: string) => void
  onCreateClick: () => void
  onModuleClick: (m: TrainingModule) => void
}

export function ModulesTab({ modules, regulationFilter, onRegulationFilterChange, onCreateClick, onModuleClick }: ModulesTabProps) {
  return (
    <div className="space-y-4">
      <div className="flex gap-3 items-center">
        <select value={regulationFilter} onChange={e => onRegulationFilterChange(e.target.value)} className="px-3 py-1.5 text-sm border rounded-lg bg-white">
          <option value="">Alle Bereiche</option>
          {Object.entries(REGULATION_LABELS).map(([key, label]) => (
            <option key={key} value={key}>{label}</option>
          ))}
        </select>
        <button
          onClick={onCreateClick}
          className="ml-auto px-4 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700 transition-colors"
        >
          + Neues Modul
        </button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {modules.map(m => (
          <div
            key={m.id}
            onClick={() => onModuleClick(m)}
            className="bg-white border rounded-lg p-4 hover:shadow-md cursor-pointer transition-shadow"
          >
            <div className="flex items-start justify-between">
              <div>
                <span className={`inline-block px-2 py-0.5 rounded text-xs font-medium ${REGULATION_COLORS[m.regulation_area]?.bg || 'bg-gray-100'} ${REGULATION_COLORS[m.regulation_area]?.text || 'text-gray-700'}`}>
                  {REGULATION_LABELS[m.regulation_area] || m.regulation_area}
                </span>
                <h3 className="mt-2 font-medium text-gray-900">{m.title}</h3>
                <p className="text-xs text-gray-500 mt-0.5">{m.module_code}</p>
              </div>
              <div className="flex flex-col items-end gap-1">
                {m.nis2_relevant && (
                  <span className="text-xs px-1.5 py-0.5 bg-purple-100 text-purple-700 rounded">NIS2</span>
                )}
                {!m.is_active && (
                  <span className="text-xs px-1.5 py-0.5 bg-gray-100 text-gray-500 rounded">Inaktiv</span>
                )}
              </div>
            </div>
            {m.description && <p className="text-sm text-gray-600 mt-2 line-clamp-2">{m.description}</p>}
            <div className="flex items-center gap-3 mt-3 text-xs text-gray-500">
              <span>{m.duration_minutes} Min.</span>
              <span>{FREQUENCY_LABELS[m.frequency_type]}</span>
              <span>Quiz: {m.pass_threshold}%</span>
            </div>
          </div>
        ))}
      </div>
      {modules.length === 0 && <p className="text-center text-gray-500 py-8">Keine Module gefunden</p>}
    </div>
  )
}