'use client'

import { useEffect, useState } from 'react'
import {
  getModules, getMatrix, getAssignments, getStats, getDeadlines, getModuleMedia,
  getAuditLog, generateContent, generateQuiz,
  publishContent, checkEscalation, getContent,
  generateAllContent, generateAllQuizzes,
  createModule, updateModule, deleteModule,
  deleteMatrixEntry, setMatrixEntry,
  startAssignment, completeAssignment, updateAssignment,
  listBlockConfigs, createBlockConfig, deleteBlockConfig,
  previewBlock, generateBlock, getCanonicalMeta,
  generateInteractiveVideo,
} from '@/lib/sdk/training/api'
import type {
  TrainingModule, TrainingAssignment,
  MatrixResponse, TrainingStats, DeadlineInfo, AuditLogEntry, ModuleContent, TrainingMedia,
  TrainingBlockConfig, CanonicalControlMeta, BlockPreview, BlockGenerateResult,
} from '@/lib/sdk/training/types'
import {
  REGULATION_LABELS, REGULATION_COLORS, FREQUENCY_LABELS,
  STATUS_LABELS, STATUS_COLORS, ROLE_LABELS, ALL_ROLES, TARGET_AUDIENCE_LABELS,
} from '@/lib/sdk/training/types'
import AudioPlayer from '@/components/training/AudioPlayer'
import VideoPlayer from '@/components/training/VideoPlayer'
import ScriptPreview from '@/components/training/ScriptPreview'
type Tab = 'overview' | 'modules' | 'matrix' | 'assignments' | 'content' | 'audit'

export default function TrainingPage() {
  const [activeTab, setActiveTab] = useState<Tab>('overview')
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  const [stats, setStats] = useState<TrainingStats | null>(null)
  const [modules, setModules] = useState<TrainingModule[]>([])
  const [matrix, setMatrix] = useState<MatrixResponse | null>(null)
  const [assignments, setAssignments] = useState<TrainingAssignment[]>([])
  const [deadlines, setDeadlines] = useState<DeadlineInfo[]>([])
  const [auditLog, setAuditLog] = useState<AuditLogEntry[]>([])

  const [selectedModuleId, setSelectedModuleId] = useState<string>('')
  const [generatedContent, setGeneratedContent] = useState<ModuleContent | null>(null)
  const [generating, setGenerating] = useState(false)
  const [bulkGenerating, setBulkGenerating] = useState(false)
  const [bulkResult, setBulkResult] = useState<{ generated: number; skipped: number; errors: string[] } | null>(null)
  const [moduleMedia, setModuleMedia] = useState<TrainingMedia[]>([])
  const [interactiveGenerating, setInteractiveGenerating] = useState(false)

  const [statusFilter, setStatusFilter] = useState<string>('')
  const [regulationFilter, setRegulationFilter] = useState<string>('')

  // Modal/Drawer states
  const [showModuleCreate, setShowModuleCreate] = useState(false)
  const [selectedModule, setSelectedModule] = useState<TrainingModule | null>(null)
  const [matrixAddRole, setMatrixAddRole] = useState<string | null>(null)
  const [selectedAssignment, setSelectedAssignment] = useState<TrainingAssignment | null>(null)
  const [escalationResult, setEscalationResult] = useState<{ total_checked: number; escalated: number } | null>(null)

  // Block (Controls → Module) state
  const [blocks, setBlocks] = useState<TrainingBlockConfig[]>([])
  const [canonicalMeta, setCanonicalMeta] = useState<CanonicalControlMeta | null>(null)
  const [showBlockCreate, setShowBlockCreate] = useState(false)
  const [blockPreview, setBlockPreview] = useState<BlockPreview | null>(null)
  const [blockPreviewId, setBlockPreviewId] = useState<string>('')
  const [blockGenerating, setBlockGenerating] = useState(false)
  const [blockResult, setBlockResult] = useState<BlockGenerateResult | null>(null)

  useEffect(() => {
    loadData()
  }, [])

  useEffect(() => {
    if (selectedModuleId) {
      loadModuleMedia(selectedModuleId)
    }
  }, [selectedModuleId])

  async function loadData() {
    setLoading(true)
    setError(null)
    try {
      const [statsRes, modulesRes, matrixRes, assignmentsRes, deadlinesRes, auditRes, blocksRes, metaRes] = await Promise.allSettled([
        getStats(),
        getModules(),
        getMatrix(),
        getAssignments({ limit: 50 }),
        getDeadlines(10),
        getAuditLog({ limit: 30 }),
        listBlockConfigs(),
        getCanonicalMeta(),
      ])

      if (statsRes.status === 'fulfilled') setStats(statsRes.value)
      if (modulesRes.status === 'fulfilled') setModules(modulesRes.value.modules)
      if (matrixRes.status === 'fulfilled') setMatrix(matrixRes.value)
      if (assignmentsRes.status === 'fulfilled') setAssignments(assignmentsRes.value.assignments)
      if (deadlinesRes.status === 'fulfilled') setDeadlines(deadlinesRes.value.deadlines)
      if (auditRes.status === 'fulfilled') setAuditLog(auditRes.value.entries)
      if (blocksRes.status === 'fulfilled') setBlocks(blocksRes.value.blocks)
      if (metaRes.status === 'fulfilled') setCanonicalMeta(metaRes.value)
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Fehler beim Laden')
    } finally {
      setLoading(false)
    }
  }

  async function handleGenerateContent() {
    if (!selectedModuleId) return
    setGenerating(true)
    try {
      const content = await generateContent(selectedModuleId)
      setGeneratedContent(content)
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Fehler bei der Content-Generierung')
    } finally {
      setGenerating(false)
    }
  }

  async function handleGenerateQuiz() {
    if (!selectedModuleId) return
    setGenerating(true)
    try {
      await generateQuiz(selectedModuleId, 5)
      await loadData()
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Fehler bei der Quiz-Generierung')
    } finally {
      setGenerating(false)
    }
  }

  async function handleGenerateInteractiveVideo() {
    if (!selectedModuleId) return
    setInteractiveGenerating(true)
    try {
      await generateInteractiveVideo(selectedModuleId)
      await loadModuleMedia(selectedModuleId)
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Fehler bei der interaktiven Video-Generierung')
    } finally {
      setInteractiveGenerating(false)
    }
  }

  async function handlePublishContent(contentId: string) {
    try {
      await publishContent(contentId)
      setGeneratedContent(null)
      await loadData()
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Fehler beim Veroeffentlichen')
    }
  }

  async function handleCheckEscalation() {
    try {
      const result = await checkEscalation()
      setEscalationResult({ total_checked: result.total_checked, escalated: result.escalated })
      await loadData()
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Fehler bei der Eskalationspruefung')
    }
  }

  async function handleDeleteMatrixEntry(roleCode: string, moduleId: string) {
    if (!window.confirm('Modulzuordnung entfernen?')) return
    try {
      await deleteMatrixEntry(roleCode, moduleId)
      await loadData()
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Fehler beim Entfernen')
    }
  }

  async function handleLoadContent(moduleId: string) {
    try {
      const content = await getContent(moduleId)
      setGeneratedContent(content)
    } catch {
      setGeneratedContent(null)
    }
  }

  async function handleBulkContent() {
    setBulkGenerating(true)
    setBulkResult(null)
    try {
      const result = await generateAllContent('de')
      setBulkResult({ generated: result.generated ?? 0, skipped: result.skipped ?? 0, errors: result.errors ?? [] })
      await loadData()
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Fehler bei der Bulk-Generierung')
    } finally {
      setBulkGenerating(false)
    }
  }

  async function loadModuleMedia(moduleId: string) {
    try {
      const result = await getModuleMedia(moduleId)
      setModuleMedia(result.media)
    } catch {
      setModuleMedia([])
    }
  }

  async function handleBulkQuiz() {
    setBulkGenerating(true)
    setBulkResult(null)
    try {
      const result = await generateAllQuizzes()
      setBulkResult({ generated: result.generated ?? 0, skipped: result.skipped ?? 0, errors: result.errors ?? [] })
      await loadData()
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Fehler bei der Bulk-Quiz-Generierung')
    } finally {
      setBulkGenerating(false)
    }
  }

  // Block handlers
  async function handleCreateBlock(data: {
    name: string; description?: string; domain_filter?: string; category_filter?: string;
    severity_filter?: string; target_audience_filter?: string; regulation_area: string;
    module_code_prefix: string; max_controls_per_module?: number;
  }) {
    try {
      await createBlockConfig(data)
      setShowBlockCreate(false)
      const res = await listBlockConfigs()
      setBlocks(res.blocks)
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Fehler beim Erstellen')
    }
  }

  async function handleDeleteBlock(id: string) {
    if (!confirm('Block-Konfiguration wirklich loeschen?')) return
    try {
      await deleteBlockConfig(id)
      const res = await listBlockConfigs()
      setBlocks(res.blocks)
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Fehler beim Loeschen')
    }
  }

  async function handlePreviewBlock(id: string) {
    setBlockPreviewId(id)
    setBlockPreview(null)
    setBlockResult(null)
    try {
      const preview = await previewBlock(id)
      setBlockPreview(preview)
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Fehler beim Preview')
    }
  }

  async function handleGenerateBlock(id: string) {
    setBlockGenerating(true)
    setBlockResult(null)
    try {
      const result = await generateBlock(id, { language: 'de', auto_matrix: true })
      setBlockResult(result)
      await loadData()
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Fehler bei der Block-Generierung')
    } finally {
      setBlockGenerating(false)
    }
  }

  const tabs: { id: Tab; label: string }[] = [
    { id: 'overview', label: 'Uebersicht' },
    { id: 'modules', label: 'Modulkatalog' },
    { id: 'matrix', label: 'Training Matrix' },
    { id: 'assignments', label: 'Zuweisungen' },
    { id: 'content', label: 'Content-Generator' },
    { id: 'audit', label: 'Audit Trail' },
  ]

  const filteredModules = modules.filter(m =>
    (!regulationFilter || m.regulation_area === regulationFilter)
  )

  const filteredAssignments = assignments.filter(a =>
    (!statusFilter || a.status === statusFilter)
  )

  if (loading) {
    return (
      <div className="p-6">
        <div className="animate-pulse space-y-4">
          <div className="h-8 bg-gray-200 rounded w-1/3"></div>
          <div className="grid grid-cols-4 gap-4">
            {[1,2,3,4].map(i => <div key={i} className="h-24 bg-gray-200 rounded"></div>)}
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className="p-6 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Compliance Training Engine</h1>
          <p className="text-sm text-gray-500 mt-1">
            Training-Module, Zuweisungen und Compliance-Schulungen verwalten
          </p>
        </div>
        <button
          onClick={handleCheckEscalation}
          className="px-4 py-2 text-sm bg-orange-50 text-orange-700 border border-orange-200 rounded-lg hover:bg-orange-100"
        >
          Eskalation pruefen
        </button>
      </div>

      {error && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
          {error}
          <button onClick={() => setError(null)} className="ml-2 underline">Schliessen</button>
        </div>
      )}

      {/* Tabs */}
      <div className="border-b border-gray-200">
        <nav className="flex -mb-px space-x-6">
          {tabs.map(tab => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`pb-3 px-1 text-sm font-medium border-b-2 transition-colors ${
                activeTab === tab.id
                  ? 'border-blue-500 text-blue-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
              }`}
            >
              {tab.label}
            </button>
          ))}
        </nav>
      </div>

      {/* Tab Content */}
      {activeTab === 'overview' && stats && (
        <div className="space-y-6">
          {escalationResult && (
            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-center justify-between">
              <div>
                <span className="font-medium text-blue-900">Eskalation abgeschlossen: </span>
                <span className="text-blue-700">
                  {escalationResult.total_checked} Zuweisungen geprueft, {escalationResult.escalated} eskaliert
                </span>
              </div>
              <button onClick={() => setEscalationResult(null)} className="text-blue-400 hover:text-blue-600 text-lg font-bold">×</button>
            </div>
          )}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <KPICard label="Module" value={stats.total_modules} />
            <KPICard label="Zuweisungen" value={stats.total_assignments} />
            <KPICard label="Abschlussrate" value={`${stats.completion_rate.toFixed(1)}%`} color={stats.completion_rate >= 80 ? 'green' : stats.completion_rate >= 50 ? 'yellow' : 'red'} />
            <KPICard label="Ueberfaellig" value={stats.overdue_count} color={stats.overdue_count > 0 ? 'red' : 'green'} />
          </div>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <KPICard label="Ausstehend" value={stats.pending_count} />
            <KPICard label="In Bearbeitung" value={stats.in_progress_count} />
            <KPICard label="Avg. Quiz-Score" value={`${stats.avg_quiz_score.toFixed(1)}%`} />
            <KPICard label="Deadlines (7d)" value={stats.upcoming_deadlines} color={stats.upcoming_deadlines > 5 ? 'yellow' : 'green'} />
          </div>

          {/* Status Bar */}
          <div className="bg-white border rounded-lg p-4">
            <h3 className="text-sm font-medium text-gray-700 mb-3">Status-Verteilung</h3>
            {stats.total_assignments > 0 && (
              <div className="flex gap-1 h-6 rounded-full overflow-hidden bg-gray-100">
                {stats.completed_count > 0 && <div className="bg-green-500" style={{ width: `${(stats.completed_count / stats.total_assignments) * 100}%` }} title={`Abgeschlossen: ${stats.completed_count}`} />}
                {stats.in_progress_count > 0 && <div className="bg-blue-500" style={{ width: `${(stats.in_progress_count / stats.total_assignments) * 100}%` }} title={`In Bearbeitung: ${stats.in_progress_count}`} />}
                {stats.pending_count > 0 && <div className="bg-gray-400" style={{ width: `${(stats.pending_count / stats.total_assignments) * 100}%` }} title={`Ausstehend: ${stats.pending_count}`} />}
                {stats.overdue_count > 0 && <div className="bg-red-500" style={{ width: `${(stats.overdue_count / stats.total_assignments) * 100}%` }} title={`Ueberfaellig: ${stats.overdue_count}`} />}
              </div>
            )}
            <div className="flex gap-4 mt-2 text-xs text-gray-500">
              <span className="flex items-center gap-1"><span className="w-3 h-3 rounded-full bg-green-500 inline-block" /> Abgeschlossen</span>
              <span className="flex items-center gap-1"><span className="w-3 h-3 rounded-full bg-blue-500 inline-block" /> In Bearbeitung</span>
              <span className="flex items-center gap-1"><span className="w-3 h-3 rounded-full bg-gray-400 inline-block" /> Ausstehend</span>
              <span className="flex items-center gap-1"><span className="w-3 h-3 rounded-full bg-red-500 inline-block" /> Ueberfaellig</span>
            </div>
          </div>

          {/* Deadlines */}
          {deadlines.length > 0 && (
            <div className="bg-white border rounded-lg p-4">
              <h3 className="text-sm font-medium text-gray-700 mb-3">Naechste Deadlines</h3>
              <div className="space-y-2">
                {deadlines.slice(0, 5).map(d => (
                  <div key={d.assignment_id} className="flex items-center justify-between text-sm">
                    <div>
                      <span className="font-medium">{d.module_title}</span>
                      <span className="text-gray-500 ml-2">({d.user_name})</span>
                    </div>
                    <span className={`px-2 py-0.5 rounded text-xs ${
                      d.days_left <= 0 ? 'bg-red-100 text-red-700' :
                      d.days_left <= 7 ? 'bg-yellow-100 text-yellow-700' :
                      'bg-gray-100 text-gray-600'
                    }`}>
                      {d.days_left <= 0 ? `${Math.abs(d.days_left)} Tage ueberfaellig` : `${d.days_left} Tage`}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      )}

      {activeTab === 'modules' && (
        <div className="space-y-4">
          <div className="flex gap-3 items-center">
            <select value={regulationFilter} onChange={e => setRegulationFilter(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={() => setShowModuleCreate(true)}
              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">
            {filteredModules.map(m => (
              <div
                key={m.id}
                onClick={() => setSelectedModule(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>
          {filteredModules.length === 0 && <p className="text-center text-gray-500 py-8">Keine Module gefunden</p>}
        </div>
      )}

      {activeTab === 'matrix' && matrix && (
        <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={() => handleDeleteMatrixEntry(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={() => setMatrixAddRole(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>
      )}

      {activeTab === 'assignments' && (
        <div className="space-y-4">
          <div className="flex gap-3">
            <select value={statusFilter} onChange={e => setStatusFilter(e.target.value)} className="px-3 py-1.5 text-sm border rounded-lg bg-white">
              <option value="">Alle Status</option>
              {Object.entries(STATUS_LABELS).map(([key, label]) => (
                <option key={key} value={key}>{label}</option>
              ))}
            </select>
          </div>

          <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">Modul</th>
                  <th className="text-left p-2 border font-medium text-gray-700">Mitarbeiter</th>
                  <th className="text-left p-2 border font-medium text-gray-700">Rolle</th>
                  <th className="text-center p-2 border font-medium text-gray-700">Fortschritt</th>
                  <th className="text-center p-2 border font-medium text-gray-700">Status</th>
                  <th className="text-center p-2 border font-medium text-gray-700">Quiz</th>
                  <th className="text-left p-2 border font-medium text-gray-700">Deadline</th>
                  <th className="text-center p-2 border font-medium text-gray-700">Eskalation</th>
                </tr>
              </thead>
              <tbody>
                {filteredAssignments.map(a => (
                  <tr
                    key={a.id}
                    onClick={() => setSelectedAssignment(a)}
                    className="border-b hover:bg-gray-50 cursor-pointer"
                  >
                    <td className="p-2 border">
                      <div className="font-medium">{a.module_title || a.module_code}</div>
                      <div className="text-xs text-gray-500">{a.module_code}</div>
                    </td>
                    <td className="p-2 border">
                      <div>{a.user_name}</div>
                      <div className="text-xs text-gray-500">{a.user_email}</div>
                    </td>
                    <td className="p-2 border text-xs">{a.role_code || '-'}</td>
                    <td className="p-2 border text-center">
                      <div className="flex items-center gap-2">
                        <div className="flex-1 bg-gray-200 rounded-full h-2">
                          <div className="bg-blue-500 h-2 rounded-full" style={{ width: `${a.progress_percent}%` }} />
                        </div>
                        <span className="text-xs w-8">{a.progress_percent}%</span>
                      </div>
                    </td>
                    <td className="p-2 border text-center">
                      <span className={`px-2 py-0.5 rounded text-xs ${STATUS_COLORS[a.status]?.bg || ''} ${STATUS_COLORS[a.status]?.text || ''}`}>
                        {STATUS_LABELS[a.status] || a.status}
                      </span>
                    </td>
                    <td className="p-2 border text-center text-xs">
                      {a.quiz_score != null ? (
                        <span className={`font-medium ${a.quiz_passed ? 'text-green-600' : 'text-red-600'}`}>{a.quiz_score.toFixed(0)}%</span>
                      ) : '-'}
                    </td>
                    <td className="p-2 border text-xs">{new Date(a.deadline).toLocaleDateString('de-DE')}</td>
                    <td className="p-2 border text-center">
                      {a.escalation_level > 0 ? <span className="px-2 py-0.5 rounded text-xs bg-red-100 text-red-700">L{a.escalation_level}</span> : '-'}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          {filteredAssignments.length === 0 && <p className="text-center text-gray-500 py-8">Keine Zuweisungen</p>}
        </div>
      )}

      {activeTab === 'content' && (
        <div className="space-y-6">

          {/* Training Blocks — Controls → Schulungsmodule */}
          <div className="bg-white border rounded-lg p-4">
            <div className="flex items-center justify-between mb-3">
              <div>
                <h3 className="text-sm font-medium text-gray-700">Schulungsbloecke aus Controls</h3>
                <p className="text-xs text-gray-500">
                  Canonical Controls nach Kriterien filtern und automatisch Schulungsmodule generieren
                  {canonicalMeta && <span className="ml-2 text-gray-400">({canonicalMeta.total} Controls verfuegbar)</span>}
                </p>
              </div>
              <button
                onClick={() => setShowBlockCreate(true)}
                className="px-3 py-1.5 text-xs bg-blue-600 text-white rounded-lg hover:bg-blue-700"
              >
                + Neuen Block erstellen
              </button>
            </div>

            {/* Block list */}
            {blocks.length > 0 ? (
              <div className="border rounded-lg overflow-hidden">
                <table className="w-full text-sm">
                  <thead className="bg-gray-50">
                    <tr>
                      <th className="px-3 py-2 text-left font-medium text-gray-600">Name</th>
                      <th className="px-3 py-2 text-left font-medium text-gray-600">Domain</th>
                      <th className="px-3 py-2 text-left font-medium text-gray-600">Zielgruppe</th>
                      <th className="px-3 py-2 text-left font-medium text-gray-600">Severity</th>
                      <th className="px-3 py-2 text-left font-medium text-gray-600">Prefix</th>
                      <th className="px-3 py-2 text-left font-medium text-gray-600">Letzte Generierung</th>
                      <th className="px-3 py-2 text-right font-medium text-gray-600">Aktionen</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y">
                    {blocks.map(block => (
                      <tr key={block.id} className="hover:bg-gray-50">
                        <td className="px-3 py-2">
                          <div className="font-medium text-gray-900">{block.name}</div>
                          {block.description && <div className="text-xs text-gray-500">{block.description}</div>}
                        </td>
                        <td className="px-3 py-2 text-gray-600">{block.domain_filter || 'Alle'}</td>
                        <td className="px-3 py-2 text-gray-600">{block.target_audience_filter ? (TARGET_AUDIENCE_LABELS[block.target_audience_filter] || block.target_audience_filter) : 'Alle'}</td>
                        <td className="px-3 py-2 text-gray-600">{block.severity_filter || 'Alle'}</td>
                        <td className="px-3 py-2"><code className="text-xs bg-gray-100 px-1.5 py-0.5 rounded">{block.module_code_prefix}</code></td>
                        <td className="px-3 py-2 text-gray-500 text-xs">{block.last_generated_at ? new Date(block.last_generated_at).toLocaleString('de-DE') : 'Noch nie'}</td>
                        <td className="px-3 py-2 text-right">
                          <div className="flex gap-1 justify-end">
                            <button
                              onClick={() => handlePreviewBlock(block.id)}
                              className="px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200"
                            >
                              Preview
                            </button>
                            <button
                              onClick={() => handleGenerateBlock(block.id)}
                              disabled={blockGenerating}
                              className="px-2 py-1 text-xs bg-green-600 text-white rounded hover:bg-green-700 disabled:opacity-50"
                            >
                              {blockGenerating ? 'Generiert...' : 'Generieren'}
                            </button>
                            <button
                              onClick={() => handleDeleteBlock(block.id)}
                              className="px-2 py-1 text-xs bg-red-100 text-red-700 rounded hover:bg-red-200"
                            >
                              Loeschen
                            </button>
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            ) : (
              <div className="text-center py-8 text-gray-500 text-sm">
                Noch keine Schulungsbloecke konfiguriert. Erstelle einen Block, um Controls automatisch in Module umzuwandeln.
              </div>
            )}

            {/* Preview result */}
            {blockPreview && blockPreviewId && (
              <div className="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                <h4 className="text-sm font-medium text-blue-800 mb-2">Preview: {blocks.find(b => b.id === blockPreviewId)?.name}</h4>
                <div className="flex gap-6 text-sm mb-3">
                  <span className="text-blue-700">Controls: <strong>{blockPreview.control_count}</strong></span>
                  <span className="text-blue-700">Module: <strong>{blockPreview.module_count}</strong></span>
                  <span className="text-blue-700">Rollen: <strong>{blockPreview.proposed_roles.map(r => ROLE_LABELS[r] || r).join(', ')}</strong></span>
                </div>
                {blockPreview.controls.length > 0 && (
                  <details className="text-xs">
                    <summary className="cursor-pointer text-blue-600 hover:text-blue-800">Passende Controls anzeigen ({blockPreview.control_count})</summary>
                    <div className="mt-2 max-h-48 overflow-y-auto">
                      {blockPreview.controls.slice(0, 50).map(ctrl => (
                        <div key={ctrl.control_id} className="flex gap-2 py-1 border-b border-blue-100">
                          <code className="text-xs bg-blue-100 px-1 rounded shrink-0">{ctrl.control_id}</code>
                          <span className="text-gray-700 truncate">{ctrl.title}</span>
                          <span className={`text-xs px-1.5 rounded shrink-0 ${ctrl.severity === 'critical' ? 'bg-red-100 text-red-700' : ctrl.severity === 'high' ? 'bg-orange-100 text-orange-700' : 'bg-gray-100 text-gray-600'}`}>{ctrl.severity}</span>
                        </div>
                      ))}
                      {blockPreview.control_count > 50 && <div className="text-gray-500 py-1">... und {blockPreview.control_count - 50} weitere</div>}
                    </div>
                  </details>
                )}
              </div>
            )}

            {/* Generate result */}
            {blockResult && (
              <div className="mt-4 p-4 bg-green-50 border border-green-200 rounded-lg">
                <h4 className="text-sm font-medium text-green-800 mb-2">Generierung abgeschlossen</h4>
                <div className="flex gap-6 text-sm">
                  <span className="text-green-700">Module erstellt: <strong>{blockResult.modules_created}</strong></span>
                  <span className="text-green-700">Controls verknuepft: <strong>{blockResult.controls_linked}</strong></span>
                  <span className="text-green-700">Matrix-Eintraege: <strong>{blockResult.matrix_entries_created}</strong></span>
                  <span className="text-green-700">Content generiert: <strong>{blockResult.content_generated}</strong></span>
                </div>
                {blockResult.errors && blockResult.errors.length > 0 && (
                  <div className="mt-2 text-xs text-red-600">
                    {blockResult.errors.map((err, i) => <div key={i}>{err}</div>)}
                  </div>
                )}
              </div>
            )}
          </div>

          {/* Block Create Modal */}
          {showBlockCreate && (
            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
              <div className="bg-white rounded-xl shadow-xl w-full max-w-lg p-6">
                <h3 className="text-lg font-semibold mb-4">Neuen Schulungsblock erstellen</h3>
                <form onSubmit={e => {
                  e.preventDefault()
                  const fd = new FormData(e.currentTarget)
                  handleCreateBlock({
                    name: fd.get('name') as string,
                    description: fd.get('description') as string || undefined,
                    domain_filter: fd.get('domain_filter') as string || undefined,
                    category_filter: fd.get('category_filter') as string || undefined,
                    severity_filter: fd.get('severity_filter') as string || undefined,
                    target_audience_filter: fd.get('target_audience_filter') as string || undefined,
                    regulation_area: fd.get('regulation_area') as string,
                    module_code_prefix: fd.get('module_code_prefix') as string,
                    max_controls_per_module: parseInt(fd.get('max_controls_per_module') as string) || 20,
                  })
                }} className="space-y-3">
                  <div>
                    <label className="text-xs text-gray-600 block mb-1">Name *</label>
                    <input name="name" required className="w-full px-3 py-2 text-sm border rounded-lg" placeholder="z.B. Authentifizierung fuer Geschaeftsfuehrung" />
                  </div>
                  <div>
                    <label className="text-xs text-gray-600 block mb-1">Beschreibung</label>
                    <textarea name="description" className="w-full px-3 py-2 text-sm border rounded-lg" rows={2} />
                  </div>
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <label className="text-xs text-gray-600 block mb-1">Domain-Filter</label>
                      <select name="domain_filter" className="w-full px-3 py-2 text-sm border rounded-lg bg-white">
                        <option value="">Alle Domains</option>
                        {canonicalMeta?.domains.map(d => (
                          <option key={d.domain} value={d.domain}>{d.domain} ({d.count})</option>
                        ))}
                      </select>
                    </div>
                    <div>
                      <label className="text-xs text-gray-600 block mb-1">Kategorie-Filter</label>
                      <select name="category_filter" className="w-full px-3 py-2 text-sm border rounded-lg bg-white">
                        <option value="">Alle Kategorien</option>
                        {canonicalMeta?.categories.filter(c => c.category !== 'uncategorized').map(c => (
                          <option key={c.category} value={c.category}>{c.category} ({c.count})</option>
                        ))}
                      </select>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <label className="text-xs text-gray-600 block mb-1">Zielgruppe</label>
                      <select name="target_audience_filter" className="w-full px-3 py-2 text-sm border rounded-lg bg-white">
                        <option value="">Alle Zielgruppen</option>
                        {canonicalMeta?.audiences.filter(a => a.audience !== 'unset').map(a => (
                          <option key={a.audience} value={a.audience}>{TARGET_AUDIENCE_LABELS[a.audience] || a.audience} ({a.count})</option>
                        ))}
                      </select>
                    </div>
                    <div>
                      <label className="text-xs text-gray-600 block mb-1">Severity</label>
                      <select name="severity_filter" className="w-full px-3 py-2 text-sm border rounded-lg bg-white">
                        <option value="">Alle</option>
                        <option value="critical">Critical</option>
                        <option value="high">High</option>
                        <option value="medium">Medium</option>
                        <option value="low">Low</option>
                      </select>
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <label className="text-xs text-gray-600 block mb-1">Regulierungsbereich *</label>
                      <select name="regulation_area" required className="w-full px-3 py-2 text-sm border rounded-lg bg-white">
                        {Object.entries(REGULATION_LABELS).map(([k, v]) => (
                          <option key={k} value={k}>{v}</option>
                        ))}
                      </select>
                    </div>
                    <div>
                      <label className="text-xs text-gray-600 block mb-1">Modul-Code-Prefix *</label>
                      <input name="module_code_prefix" required className="w-full px-3 py-2 text-sm border rounded-lg" placeholder="z.B. CB-AUTH" />
                    </div>
                  </div>
                  <div>
                    <label className="text-xs text-gray-600 block mb-1">Max. Controls pro Modul</label>
                    <input name="max_controls_per_module" type="number" defaultValue={20} min={1} max={50} className="w-full px-3 py-2 text-sm border rounded-lg" />
                  </div>
                  <div className="flex gap-3 pt-2">
                    <button type="submit" className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700">Erstellen</button>
                    <button type="button" onClick={() => setShowBlockCreate(false)} className="px-4 py-2 text-sm bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200">Abbrechen</button>
                  </div>
                </form>
              </div>
            </div>
          )}

          {/* Bulk Generation */}
          <div className="bg-white border rounded-lg p-4">
            <h3 className="text-sm font-medium text-gray-700 mb-3">Bulk-Generierung</h3>
            <p className="text-xs text-gray-500 mb-4">Generiere Inhalte und Quiz-Fragen fuer alle Module auf einmal</p>
            <div className="flex gap-3">
              <button
                onClick={handleBulkContent}
                disabled={bulkGenerating}
                className="px-4 py-2 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50"
              >
                {bulkGenerating ? 'Generiere...' : 'Alle Inhalte generieren'}
              </button>
              <button
                onClick={handleBulkQuiz}
                disabled={bulkGenerating}
                className="px-4 py-2 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 disabled:opacity-50"
              >
                {bulkGenerating ? 'Generiere...' : 'Alle Quizfragen generieren'}
              </button>
            </div>
            {bulkResult && (
              <div className="mt-4 p-3 bg-gray-50 rounded-lg text-sm">
                <div className="flex gap-6">
                  <span className="text-green-700">Generiert: {bulkResult.generated}</span>
                  <span className="text-gray-500">Uebersprungen: {bulkResult.skipped}</span>
                  {bulkResult.errors?.length > 0 && (
                    <span className="text-red-600">Fehler: {bulkResult.errors.length}</span>
                  )}
                </div>
                {bulkResult.errors?.length > 0 && (
                  <div className="mt-2 text-xs text-red-600">
                    {bulkResult.errors.map((err, i) => <div key={i}>{err}</div>)}
                  </div>
                )}
              </div>
            )}
          </div>

          <div className="bg-white border rounded-lg p-4">
            <h3 className="text-sm font-medium text-gray-700 mb-3">LLM-Content-Generator</h3>
            <p className="text-xs text-gray-500 mb-4">Generiere Schulungsinhalte und Quiz-Fragen automatisch via KI</p>
            <div className="flex gap-3 items-end">
              <div className="flex-1">
                <label className="text-xs text-gray-600 block mb-1">Modul auswaehlen</label>
                <select
                  value={selectedModuleId}
                  onChange={e => { setSelectedModuleId(e.target.value); setGeneratedContent(null); setModuleMedia([]); if (e.target.value) { handleLoadContent(e.target.value); loadModuleMedia(e.target.value); } }}
                  className="w-full px-3 py-2 text-sm border rounded-lg bg-white"
                >
                  <option value="">Modul waehlen...</option>
                  {modules.map(m => <option key={m.id} value={m.id}>{m.module_code} - {m.title}</option>)}
                </select>
              </div>
              <button onClick={handleGenerateContent} disabled={!selectedModuleId || generating} className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50">
                {generating ? 'Generiere...' : 'Inhalt generieren'}
              </button>
              <button onClick={handleGenerateQuiz} disabled={!selectedModuleId || generating} className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50">
                {generating ? 'Generiere...' : 'Quiz generieren'}
              </button>
            </div>
          </div>

          {generatedContent && (
            <div className="bg-white border rounded-lg p-4">
              <div className="flex items-center justify-between mb-3">
                <div>
                  <h3 className="text-sm font-medium text-gray-700">Generierter Inhalt (v{generatedContent.version})</h3>
                  <p className="text-xs text-gray-500">Generiert von: {generatedContent.generated_by} ({generatedContent.llm_model})</p>
                </div>
                {!generatedContent.is_published ? (
                  <button onClick={() => handlePublishContent(generatedContent.id)} className="px-3 py-1.5 text-xs bg-green-600 text-white rounded hover:bg-green-700">Veroeffentlichen</button>
                ) : (
                  <span className="px-3 py-1.5 text-xs bg-green-100 text-green-700 rounded">Veroeffentlicht</span>
                )}
              </div>
              <div className="prose prose-sm max-w-none border rounded p-4 bg-gray-50 max-h-96 overflow-y-auto">
                <pre className="whitespace-pre-wrap text-sm text-gray-800">{generatedContent.content_body}</pre>
              </div>
            </div>
          )}

          {/* Audio Player */}
          {selectedModuleId && generatedContent?.is_published && (
            <AudioPlayer
              moduleId={selectedModuleId}
              audio={moduleMedia.find(m => m.media_type === 'audio') || null}
              onMediaUpdate={() => loadModuleMedia(selectedModuleId)}
            />
          )}

          {/* Video Player */}
          {selectedModuleId && generatedContent?.is_published && (
            <VideoPlayer
              moduleId={selectedModuleId}
              video={moduleMedia.find(m => m.media_type === 'video') || null}
              onMediaUpdate={() => loadModuleMedia(selectedModuleId)}
            />
          )}

          {/* Interactive Video */}
          {selectedModuleId && generatedContent?.is_published && (
            <div className="bg-white border rounded-lg p-4">
              <div className="flex items-center justify-between mb-3">
                <div>
                  <h3 className="text-sm font-medium text-gray-700">Interaktives Video</h3>
                  <p className="text-xs text-gray-500">Video mit Narrator-Persona und Checkpoint-Quizzes</p>
                </div>
                {moduleMedia.some(m => m.media_type === 'interactive_video' && m.status === 'completed') ? (
                  <span className="px-3 py-1.5 text-xs bg-purple-100 text-purple-700 rounded-full">Interaktiv erstellt</span>
                ) : (
                  <button
                    onClick={handleGenerateInteractiveVideo}
                    disabled={interactiveGenerating}
                    className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
                  >
                    {interactiveGenerating ? 'Generiere interaktives Video...' : 'Interaktives Video generieren'}
                  </button>
                )}
              </div>
              {moduleMedia.filter(m => m.media_type === 'interactive_video' && m.status === 'completed').map(m => (
                <div key={m.id} className="text-xs text-gray-500 space-y-1 bg-gray-50 rounded p-3">
                  <p>Dauer: {Math.round(m.duration_seconds / 60)} Min | Groesse: {(m.file_size_bytes / 1024 / 1024).toFixed(1)} MB</p>
                  <p>Generiert: {new Date(m.created_at).toLocaleString('de-DE')}</p>
                </div>
              ))}
            </div>
          )}

          {/* Script Preview */}
          {selectedModuleId && generatedContent?.is_published && (
            <ScriptPreview moduleId={selectedModuleId} />
          )}
        </div>
      )}

      {activeTab === 'audit' && (
        <div className="space-y-4">
          <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">Zeitpunkt</th>
                  <th className="text-left p-2 border font-medium text-gray-700">Aktion</th>
                  <th className="text-left p-2 border font-medium text-gray-700">Entitaet</th>
                  <th className="text-left p-2 border font-medium text-gray-700">Details</th>
                </tr>
              </thead>
              <tbody>
                {auditLog.map(entry => (
                  <tr key={entry.id} className="border-b hover:bg-gray-50">
                    <td className="p-2 border text-xs text-gray-600">{new Date(entry.created_at).toLocaleString('de-DE')}</td>
                    <td className="p-2 border"><span className="px-2 py-0.5 rounded text-xs bg-gray-100 text-gray-700">{entry.action}</span></td>
                    <td className="p-2 border text-xs">{entry.entity_type}</td>
                    <td className="p-2 border text-xs text-gray-600">{JSON.stringify(entry.details).substring(0, 100)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          {auditLog.length === 0 && <p className="text-center text-gray-500 py-8">Keine Audit-Eintraege</p>}
        </div>
      )}

      {/* Modals & Drawers */}
      {showModuleCreate && (
        <ModuleCreateModal
          onClose={() => setShowModuleCreate(false)}
          onSaved={() => { setShowModuleCreate(false); loadData() }}
        />
      )}
      {selectedModule && (
        <ModuleEditDrawer
          module={selectedModule}
          onClose={() => setSelectedModule(null)}
          onSaved={() => { setSelectedModule(null); loadData() }}
        />
      )}
      {matrixAddRole && (
        <MatrixAddModal
          roleCode={matrixAddRole}
          modules={modules}
          onClose={() => setMatrixAddRole(null)}
          onSaved={() => { setMatrixAddRole(null); loadData() }}
        />
      )}
      {selectedAssignment && (
        <AssignmentDetailDrawer
          assignment={selectedAssignment}
          onClose={() => setSelectedAssignment(null)}
          onSaved={() => { setSelectedAssignment(null); loadData() }}
        />
      )}
    </div>
  )
}

// =============================================================================
// MODULE CREATE MODAL
// =============================================================================

function ModuleCreateModal({ onClose, onSaved }: { onClose: () => void; onSaved: () => void }) {
  const [moduleCode, setModuleCode] = useState('')
  const [title, setTitle] = useState('')
  const [description, setDescription] = useState('')
  const [regulationArea, setRegulationArea] = useState('dsgvo')
  const [frequencyType, setFrequencyType] = useState('annual')
  const [durationMinutes, setDurationMinutes] = useState(45)
  const [passThreshold, setPassThreshold] = useState(70)
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const handleSave = async () => {
    if (!moduleCode || !title) return
    setSaving(true)
    setError(null)
    try {
      await createModule({ module_code: moduleCode, title, description, regulation_area: regulationArea, frequency_type: frequencyType, duration_minutes: durationMinutes, pass_threshold: passThreshold })
      onSaved()
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Fehler beim Erstellen')
    } finally {
      setSaving(false)
    }
  }

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-xl shadow-xl w-full max-w-lg">
        <div className="flex items-center justify-between p-6 border-b border-gray-200">
          <h2 className="text-lg font-semibold text-gray-900">Neues Trainingsmodul</h2>
          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
        <div className="p-6 space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Modul-Code *</label>
              <input type="text" value={moduleCode} onChange={e => setModuleCode(e.target.value.toUpperCase())} placeholder="DSGVO-BASICS" className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Regelungsbereich</label>
              <select value={regulationArea} onChange={e => setRegulationArea(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                {Object.entries(REGULATION_LABELS).map(([k, l]) => <option key={k} value={k}>{l}</option>)}
              </select>
            </div>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Titel *</label>
            <input type="text" value={title} onChange={e => setTitle(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
            <textarea value={description} onChange={e => setDescription(e.target.value)} rows={2} className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
          </div>
          <div className="grid grid-cols-3 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Frequenz</label>
              <select value={frequencyType} onChange={e => setFrequencyType(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                {Object.entries(FREQUENCY_LABELS).map(([k, l]) => <option key={k} value={k}>{l}</option>)}
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Dauer (Min.)</label>
              <input type="number" min={1} value={durationMinutes} onChange={e => setDurationMinutes(Number(e.target.value))} className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Bestehensgrenze (%)</label>
              <input type="number" min={0} max={100} value={passThreshold} onChange={e => setPassThreshold(Number(e.target.value))} className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
            </div>
          </div>
          {error && <p className="text-sm text-red-600">{error}</p>}
        </div>
        <div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200">
          <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">Abbrechen</button>
          <button onClick={handleSave} disabled={saving || !moduleCode || !title} className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors">
            {saving ? 'Erstelle...' : 'Modul erstellen'}
          </button>
        </div>
      </div>
    </div>
  )
}

// =============================================================================
// MODULE EDIT DRAWER
// =============================================================================

function ModuleEditDrawer({ module, onClose, onSaved }: { module: TrainingModule; onClose: () => void; onSaved: () => void }) {
  const [title, setTitle] = useState(module.title)
  const [description, setDescription] = useState(module.description || '')
  const [durationMinutes, setDurationMinutes] = useState(module.duration_minutes)
  const [passThreshold, setPassThreshold] = useState(module.pass_threshold)
  const [isActive, setIsActive] = useState(module.is_active)
  const [saving, setSaving] = useState(false)
  const [deleting, setDeleting] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const handleSave = async () => {
    setSaving(true)
    setError(null)
    try {
      await updateModule(module.id, { title, description, duration_minutes: durationMinutes, pass_threshold: passThreshold, is_active: isActive })
      onSaved()
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Fehler beim Speichern')
    } finally {
      setSaving(false)
    }
  }

  const handleDelete = async () => {
    if (!window.confirm(`Modul "${module.title}" wirklich loeschen?`)) return
    setDeleting(true)
    try {
      await deleteModule(module.id)
      onSaved()
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Fehler beim Loeschen')
      setDeleting(false)
    }
  }

  return (
    <div className="fixed inset-0 bg-black/50 z-50 flex items-start justify-end">
      <div className="h-full w-full max-w-lg bg-white shadow-xl flex flex-col">
        <div className="flex items-center justify-between p-6 border-b border-gray-200">
          <div>
            <div className="flex items-center gap-2">
              <span className={`px-2 py-0.5 rounded text-xs font-medium ${REGULATION_COLORS[module.regulation_area]?.bg || 'bg-gray-100'} ${REGULATION_COLORS[module.regulation_area]?.text || 'text-gray-700'}`}>
                {REGULATION_LABELS[module.regulation_area] || module.regulation_area}
              </span>
              {module.nis2_relevant && <span className="text-xs px-1.5 py-0.5 bg-purple-100 text-purple-700 rounded">NIS2</span>}
            </div>
            <h2 className="text-lg font-semibold text-gray-900 mt-1">{module.module_code}</h2>
          </div>
          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
        <div className="flex-1 overflow-y-auto p-6 space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Titel</label>
            <input type="text" value={title} onChange={e => setTitle(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
            <textarea value={description} onChange={e => setDescription(e.target.value)} rows={3} className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Dauer (Minuten)</label>
              <input type="number" min={1} value={durationMinutes} onChange={e => setDurationMinutes(Number(e.target.value))} className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Bestehensgrenze (%)</label>
              <input type="number" min={0} max={100} value={passThreshold} onChange={e => setPassThreshold(Number(e.target.value))} className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
            </div>
          </div>
          <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
            <span className="text-sm font-medium text-gray-700">Modul aktiv</span>
            <button
              onClick={() => setIsActive(!isActive)}
              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${isActive ? 'bg-blue-600' : 'bg-gray-200'}`}
            >
              <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${isActive ? 'translate-x-6' : 'translate-x-1'}`} />
            </button>
          </div>
          {error && <p className="text-sm text-red-600">{error}</p>}
        </div>
        <div className="p-6 border-t border-gray-200 space-y-3">
          <button onClick={handleSave} disabled={saving} className="w-full px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors">
            {saving ? 'Speichern...' : 'Aenderungen speichern'}
          </button>
          <button onClick={handleDelete} disabled={deleting} className="w-full px-4 py-2 text-sm bg-red-50 text-red-600 border border-red-200 rounded-lg hover:bg-red-100 disabled:opacity-50 transition-colors">
            {deleting ? 'Loeschen...' : 'Modul loeschen'}
          </button>
        </div>
      </div>
    </div>
  )
}

// =============================================================================
// MATRIX ADD MODAL
// =============================================================================

function MatrixAddModal({ roleCode, modules, onClose, onSaved }: {
  roleCode: string
  modules: TrainingModule[]
  onClose: () => void
  onSaved: () => void
}) {
  const activeModules = modules.filter(m => m.is_active).sort((a, b) => a.module_code.localeCompare(b.module_code))
  const [moduleId, setModuleId] = useState(activeModules[0]?.id || '')
  const [isMandatory, setIsMandatory] = useState(true)
  const [priority, setPriority] = useState(1)
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const handleSave = async () => {
    if (!moduleId) return
    setSaving(true)
    setError(null)
    try {
      await setMatrixEntry({ role_code: roleCode, module_id: moduleId, is_mandatory: isMandatory, priority })
      onSaved()
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Fehler beim Hinzufuegen')
    } finally {
      setSaving(false)
    }
  }

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-xl shadow-xl w-full max-w-md">
        <div className="flex items-center justify-between p-6 border-b border-gray-200">
          <h2 className="text-lg font-semibold text-gray-900">Modul zu Rolle hinzufuegen</h2>
          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
        <div className="p-6 space-y-4">
          <p className="text-sm text-gray-500">Rolle: <span className="font-medium text-gray-900">{roleCode}</span></p>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Modul</label>
            <select value={moduleId} onChange={e => setModuleId(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
              {activeModules.map(m => <option key={m.id} value={m.id}>{m.module_code} — {m.title}</option>)}
            </select>
          </div>
          <div className="flex items-center justify-between">
            <label className="text-sm font-medium text-gray-700">Pflichtmodul</label>
            <button onClick={() => setIsMandatory(!isMandatory)} className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${isMandatory ? 'bg-blue-600' : 'bg-gray-200'}`}>
              <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${isMandatory ? 'translate-x-6' : 'translate-x-1'}`} />
            </button>
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Prioritaet</label>
            <input type="number" min={1} value={priority} onChange={e => setPriority(Number(e.target.value))} className="w-24 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500" />
          </div>
          {error && <p className="text-sm text-red-600">{error}</p>}
        </div>
        <div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200">
          <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">Abbrechen</button>
          <button onClick={handleSave} disabled={saving || !moduleId} className="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors">
            {saving ? 'Hinzufuegen...' : 'Hinzufuegen'}
          </button>
        </div>
      </div>
    </div>
  )
}

// =============================================================================
// ASSIGNMENT DETAIL DRAWER
// =============================================================================

function AssignmentDetailDrawer({ assignment, onClose, onSaved }: {
  assignment: TrainingAssignment
  onClose: () => void
  onSaved: () => void
}) {
  const [deadline, setDeadline] = useState(assignment.deadline ? assignment.deadline.split('T')[0] : '')
  const [savingDeadline, setSavingDeadline] = useState(false)
  const [actionLoading, setActionLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const handleAction = async (action: () => Promise<unknown>) => {
    setActionLoading(true)
    setError(null)
    try {
      await action()
      onSaved()
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Fehler')
      setActionLoading(false)
    }
  }

  const handleSaveDeadline = async () => {
    setSavingDeadline(true)
    setError(null)
    try {
      await updateAssignment(assignment.id, { deadline: new Date(deadline).toISOString() })
      onSaved()
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Fehler beim Speichern')
      setSavingDeadline(false)
    }
  }

  const statusActions: Record<string, { label: string; action: () => Promise<unknown> } | null> = {
    pending: { label: 'Starten', action: () => startAssignment(assignment.id) },
    in_progress: { label: 'Als abgeschlossen markieren', action: () => completeAssignment(assignment.id) },
    overdue: { label: 'Als erledigt markieren', action: () => completeAssignment(assignment.id) },
    completed: null,
    expired: null,
  }
  const currentAction = statusActions[assignment.status] || null

  return (
    <div className="fixed inset-0 bg-black/50 z-50 flex items-start justify-end">
      <div className="h-full w-full max-w-lg bg-white shadow-xl flex flex-col">
        <div className="flex items-center justify-between p-6 border-b border-gray-200">
          <div>
            <h2 className="text-lg font-semibold text-gray-900">{assignment.module_title || assignment.module_code}</h2>
            <p className="text-sm text-gray-500 mt-0.5">{assignment.module_code}</p>
          </div>
          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
        <div className="flex-1 overflow-y-auto p-6 space-y-5">
          {/* Employee */}
          <div className="bg-gray-50 rounded-lg p-4">
            <div className="font-medium text-gray-900">{assignment.user_name}</div>
            <div className="text-sm text-gray-500">{assignment.user_email}</div>
            {assignment.role_code && <div className="text-xs text-gray-400 mt-1">Rolle: {assignment.role_code}</div>}
          </div>

          {/* Timestamps */}
          <div className="space-y-1 text-sm">
            <div className="flex justify-between"><span className="text-gray-500">Erstellt:</span><span>{new Date(assignment.created_at).toLocaleString('de-DE')}</span></div>
            {assignment.started_at && <div className="flex justify-between"><span className="text-gray-500">Gestartet:</span><span>{new Date(assignment.started_at).toLocaleString('de-DE')}</span></div>}
            {assignment.completed_at && <div className="flex justify-between"><span className="text-gray-500">Abgeschlossen:</span><span className="text-green-600">{new Date(assignment.completed_at).toLocaleString('de-DE')}</span></div>}
          </div>

          {/* Progress */}
          <div>
            <div className="flex justify-between text-sm mb-1">
              <span className="text-gray-500">Fortschritt</span>
              <span className="font-medium">{assignment.progress_percent}%</span>
            </div>
            <div className="w-full h-3 bg-gray-200 rounded-full overflow-hidden">
              <div className="bg-blue-500 h-full rounded-full transition-all" style={{ width: `${assignment.progress_percent}%` }} />
            </div>
          </div>

          {/* Quiz Score */}
          <div className="flex items-center justify-between">
            <span className="text-sm text-gray-500">Quiz-Score</span>
            {assignment.quiz_score != null ? (
              <span className={`px-2 py-1 rounded text-sm font-medium ${assignment.quiz_passed ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
                {assignment.quiz_score.toFixed(0)}% {assignment.quiz_passed ? '(Bestanden)' : '(Nicht bestanden)'}
              </span>
            ) : (
              <span className="px-2 py-1 rounded text-sm bg-gray-100 text-gray-500">Noch kein Quiz</span>
            )}
          </div>

          {/* Escalation */}
          {assignment.escalation_level > 0 && (
            <div className="flex items-center justify-between">
              <span className="text-sm text-gray-500">Eskalationslevel</span>
              <span className="px-2 py-1 rounded text-sm font-medium bg-orange-100 text-orange-700">
                Level {assignment.escalation_level}
              </span>
            </div>
          )}

          {/* Certificate */}
          {assignment.certificate_id && (
            <div className="flex items-center justify-between">
              <span className="text-sm text-gray-500">Zertifikat</span>
              <span className="text-sm text-blue-600">Zertifikat vorhanden</span>
            </div>
          )}

          {/* Status Action */}
          {currentAction && (
            <button
              onClick={() => handleAction(currentAction.action)}
              disabled={actionLoading}
              className="w-full px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
            >
              {actionLoading ? 'Bitte warten...' : currentAction.label}
            </button>
          )}

          {/* Deadline Edit */}
          <div className="border-t border-gray-200 pt-4">
            <label className="block text-sm font-medium text-gray-700 mb-1">Deadline bearbeiten</label>
            <div className="flex gap-2">
              <input
                type="date"
                value={deadline}
                onChange={e => setDeadline(e.target.value)}
                className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
              />
              <button
                onClick={handleSaveDeadline}
                disabled={savingDeadline || !deadline}
                className="px-4 py-2 text-sm bg-gray-800 text-white rounded-lg hover:bg-gray-900 disabled:opacity-50 transition-colors"
              >
                {savingDeadline ? 'Speichern...' : 'Deadline speichern'}
              </button>
            </div>
          </div>

          {error && <p className="text-sm text-red-600">{error}</p>}
        </div>
      </div>
    </div>
  )
}

function KPICard({ label, value, color }: { label: string; value: string | number; color?: string }) {
  const colorMap: Record<string, string> = {
    green: 'bg-green-50 border-green-200',
    yellow: 'bg-yellow-50 border-yellow-200',
    red: 'bg-red-50 border-red-200',
  }
  const textMap: Record<string, string> = {
    green: 'text-green-700',
    yellow: 'text-yellow-700',
    red: 'text-red-700',
  }
  return (
    <div className={`border rounded-lg p-4 ${color ? colorMap[color] || 'bg-white border-gray-200' : 'bg-white border-gray-200'}`}>
      <p className="text-xs text-gray-500">{label}</p>
      <p className={`text-2xl font-bold mt-1 ${color ? textMap[color] || 'text-gray-900' : 'text-gray-900'}`}>{value}</p>
    </div>
  )
}