breakpilot-compliance/admin-compliance/app/(sdk)/sdk/notfallplan/page.tsx

'use client'

/**
 * Notfallplan & Breach Response (Art. 33/34 DSGVO)
 *
 * 4 Tabs:
 * 1. Notfallplan-Konfiguration (Meldewege, Zustaendigkeiten, Eskalation)
 * 2. Incident-Register (Art. 33 Abs. 5)
 * 3. Melde-Templates (Art. 33 + Art. 34)
 * 4. Uebungen & Tests
 */

import { useState, useEffect, useCallback } from 'react'
import { useSDK } from '@/lib/sdk'
import StepHeader from '@/components/sdk/StepHeader/StepHeader'

// =============================================================================
// TYPES
// =============================================================================

type Tab = 'config' | 'incidents' | 'templates' | 'exercises'

type IncidentStatus = 'detected' | 'classified' | 'assessed' | 'reported' | 'not_reportable' | 'closed'
type IncidentSeverity = 'low' | 'medium' | 'high' | 'critical'

interface NotfallplanConfig {
  meldewege: MeldeStep[]
  zustaendigkeiten: Zustaendigkeit[]
  aufsichtsbehoerde: {
    name: string
    state: string
    email: string
    phone: string
    url: string
  }
  eskalationsstufen: Eskalationsstufe[]
  sofortmassnahmen: string[]
}

interface MeldeStep {
  id: string
  order: number
  role: string
  name: string
  action: string
  maxHours: number
}

interface Zustaendigkeit {
  id: string
  role: string
  name: string
  email: string
  phone: string
}

interface Eskalationsstufe {
  id: string
  level: number
  label: string
  triggerCondition: string
  actions: string[]
}

interface Incident {
  id: string
  title: string
  description: string
  detectedAt: string
  detectedBy: string
  status: IncidentStatus
  severity: IncidentSeverity
  affectedDataCategories: string[]
  estimatedAffectedPersons: number
  measures: string[]
  art34Required: boolean
  art34Justification: string
  reportedToAuthorityAt?: string
  notifiedAffectedAt?: string
  closedAt?: string
  closedBy?: string
  lessonsLearned?: string
}

interface MeldeTemplate {
  id: string
  type: 'art33' | 'art34'
  title: string
  content: string
}

interface Exercise {
  id: string
  title: string
  type: 'tabletop' | 'simulation' | 'full_drill'
  scenario: string
  scheduledDate: string
  completedDate?: string
  participants: string[]
  lessonsLearned: string
  nextExerciseDate?: string
}

// =============================================================================
// INITIAL DATA
// =============================================================================

const DEFAULT_CONFIG: NotfallplanConfig = {
  meldewege: [
    { id: '1', order: 1, role: 'Entdecker', name: '', action: 'Incident melden an IT-Sicherheit', maxHours: 0 },
    { id: '2', order: 2, role: 'IT-Sicherheit', name: '', action: 'Erstbewertung und Klassifizierung', maxHours: 4 },
    { id: '3', order: 3, role: 'Datenschutzbeauftragter', name: '', action: 'Meldepflicht pruefen (Art. 33)', maxHours: 12 },
    { id: '4', order: 4, role: 'Geschaeftsfuehrung', name: '', action: 'Freigabe der Meldung', maxHours: 24 },
    { id: '5', order: 5, role: 'DSB', name: '', action: 'Meldung an Aufsichtsbehoerde', maxHours: 72 },
  ],
  zustaendigkeiten: [
    { id: '1', role: 'Incident Owner', name: '', email: '', phone: '' },
    { id: '2', role: 'Datenschutzbeauftragter', name: '', email: '', phone: '' },
    { id: '3', role: 'IT-Sicherheit', name: '', email: '', phone: '' },
    { id: '4', role: 'Recht / Legal', name: '', email: '', phone: '' },
    { id: '5', role: 'Kommunikation / PR', name: '', email: '', phone: '' },
  ],
  aufsichtsbehoerde: {
    name: '',
    state: '',
    email: '',
    phone: '',
    url: '',
  },
  eskalationsstufen: [
    { id: '1', level: 1, label: 'Standard', triggerCondition: 'Einzelfall, keine sensiblen Daten', actions: ['IT-Sicherheit informieren', 'DSB benachrichtigen'] },
    { id: '2', level: 2, label: 'Erhoehte Prioritaet', triggerCondition: 'Sensible Daten oder > 100 Betroffene', actions: ['Geschaeftsfuehrung informieren', 'Notfallteam einberufen'] },
    { id: '3', level: 3, label: 'Kritisch', triggerCondition: 'Besondere Kategorien Art. 9 oder > 1000 Betroffene', actions: ['Sofortige Krisensitzung', 'Art. 34 Benachrichtigung vorbereiten', 'PR/Kommunikation einbinden'] },
  ],
  sofortmassnahmen: [
    'Betroffene Systeme isolieren / vom Netz nehmen',
    'Zugriffsrechte pruefen und ggf. sperren',
    'Beweise sichern (Logs, Screenshots)',
    'Zeitleiste der Ereignisse dokumentieren',
    'Erstbewertung: Art der Daten, Anzahl Betroffene, Schaden',
    'DSB unverzueglich informieren',
  ],
}

const DEFAULT_TEMPLATES: MeldeTemplate[] = [
  {
    id: 'tpl-art33',
    type: 'art33',
    title: 'Meldung an Aufsichtsbehoerde (Art. 33 DSGVO)',
    content: `Meldung einer Verletzung des Schutzes personenbezogener Daten
gemaess Art. 33 DSGVO

1. Beschreibung der Verletzung:
[Art der Verletzung, betroffene Kategorien personenbezogener Daten]

2. Kategorien und ungefaehre Zahl der betroffenen Personen:
[Anzahl und Kategorien der Betroffenen]

3. Kategorien und ungefaehre Zahl der betroffenen Datensaetze:
[Datensatz-Kategorien und Anzahl]

4. Name und Kontaktdaten des Datenschutzbeauftragten:
[Name, E-Mail, Telefon]

5. Beschreibung der wahrscheinlichen Folgen:
[Moegliche Auswirkungen auf die Betroffenen]

6. Beschreibung der ergriffenen/vorgeschlagenen Massnahmen:
[Sofortmassnahmen und geplante Abhilfemassnahmen]

7. Zeitpunkt der Feststellung:
[Datum, Uhrzeit]

8. Begruendung bei verspaeteter Meldung (falls > 72h):
[Begruendung]`,
  },
  {
    id: 'tpl-art34',
    type: 'art34',
    title: 'Benachrichtigung Betroffene (Art. 34 DSGVO)',
    content: `Benachrichtigung ueber eine Verletzung des Schutzes
Ihrer personenbezogenen Daten

Sehr geehrte/r [Name/Betroffene],

wir informieren Sie gemaess Art. 34 DSGVO ueber eine Verletzung
des Schutzes personenbezogener Daten, die Ihre Daten betrifft.

Was ist passiert?
[Beschreibung in klarer, einfacher Sprache]

Welche Daten sind betroffen?
[Betroffene Datenkategorien]

Welche Folgen sind moeglich?
[Moegliche Auswirkungen]

Was haben wir unternommen?
[Ergriffene Massnahmen]

Was koennen Sie tun?
[Empfehlungen fuer Betroffene, z.B. Passwort aendern]

Kontakt:
Unser Datenschutzbeauftragter steht Ihnen fuer Rueckfragen
zur Verfuegung:
[Name, E-Mail, Telefon]

Mit freundlichen Gruessen
[Verantwortlicher]`,
  },
]

const INCIDENT_STATUS_LABELS: Record<IncidentStatus, string> = {
  detected: 'Erkannt',
  classified: 'Klassifiziert',
  assessed: 'Bewertet',
  reported: 'Gemeldet',
  not_reportable: 'Nicht meldepflichtig',
  closed: 'Abgeschlossen',
}

const INCIDENT_STATUS_COLORS: Record<IncidentStatus, string> = {
  detected: 'bg-red-100 text-red-800',
  classified: 'bg-yellow-100 text-yellow-800',
  assessed: 'bg-blue-100 text-blue-800',
  reported: 'bg-green-100 text-green-800',
  not_reportable: 'bg-gray-100 text-gray-800',
  closed: 'bg-gray-100 text-gray-600',
}

const SEVERITY_LABELS: Record<IncidentSeverity, string> = {
  low: 'Niedrig',
  medium: 'Mittel',
  high: 'Hoch',
  critical: 'Kritisch',
}

const SEVERITY_COLORS: Record<IncidentSeverity, string> = {
  low: 'bg-green-100 text-green-800',
  medium: 'bg-yellow-100 text-yellow-800',
  high: 'bg-orange-100 text-orange-800',
  critical: 'bg-red-100 text-red-800',
}

// =============================================================================
// LOCAL STORAGE HELPERS
// =============================================================================

const STORAGE_KEY = 'bp_notfallplan'

function loadFromStorage(): {
  config: NotfallplanConfig
  incidents: Incident[]
  templates: MeldeTemplate[]
  exercises: Exercise[]
} {
  if (typeof window === 'undefined') {
    return { config: DEFAULT_CONFIG, incidents: [], templates: DEFAULT_TEMPLATES, exercises: [] }
  }
  try {
    const stored = localStorage.getItem(STORAGE_KEY)
    if (stored) {
      return JSON.parse(stored)
    }
  } catch {
    // ignore
  }
  return { config: DEFAULT_CONFIG, incidents: [], templates: DEFAULT_TEMPLATES, exercises: [] }
}

function saveToStorage(data: {
  config: NotfallplanConfig
  incidents: Incident[]
  templates: MeldeTemplate[]
  exercises: Exercise[]
}) {
  if (typeof window === 'undefined') return
  localStorage.setItem(STORAGE_KEY, JSON.stringify(data))
}

// =============================================================================
// COMPONENT: 72h Countdown
// =============================================================================

function CountdownTimer({ detectedAt }: { detectedAt: string }) {
  const [remaining, setRemaining] = useState('')
  const [overdue, setOverdue] = useState(false)

  useEffect(() => {
    function update() {
      const detected = new Date(detectedAt).getTime()
      const deadline = detected + 72 * 60 * 60 * 1000
      const now = Date.now()
      const diff = deadline - now

      if (diff <= 0) {
        const overdueMs = Math.abs(diff)
        const hours = Math.floor(overdueMs / (1000 * 60 * 60))
        const mins = Math.floor((overdueMs % (1000 * 60 * 60)) / (1000 * 60))
        setRemaining(`${hours}h ${mins}min ueberfaellig`)
        setOverdue(true)
      } else {
        const hours = Math.floor(diff / (1000 * 60 * 60))
        const mins = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
        setRemaining(`${hours}h ${mins}min verbleibend`)
        setOverdue(false)
      }
    }
    update()
    const interval = setInterval(update, 60000)
    return () => clearInterval(interval)
  }, [detectedAt])

  return (
    <span className={`text-sm font-medium ${overdue ? 'text-red-600' : 'text-orange-600'}`}>
      72h-Frist: {remaining}
    </span>
  )
}

// =============================================================================
// MAIN PAGE
// =============================================================================

export default function NotfallplanPage() {
  const { state } = useSDK()
  const [activeTab, setActiveTab] = useState<Tab>('config')
  const [config, setConfig] = useState<NotfallplanConfig>(DEFAULT_CONFIG)
  const [incidents, setIncidents] = useState<Incident[]>([])
  const [templates, setTemplates] = useState<MeldeTemplate[]>(DEFAULT_TEMPLATES)
  const [exercises, setExercises] = useState<Exercise[]>([])
  const [showAddIncident, setShowAddIncident] = useState(false)
  const [showAddExercise, setShowAddExercise] = useState(false)
  const [saved, setSaved] = useState(false)

  useEffect(() => {
    const data = loadFromStorage()
    setConfig(data.config)
    setIncidents(data.incidents)
    setTemplates(data.templates)
    setExercises(data.exercises)
  }, [])

  const handleSave = useCallback(() => {
    saveToStorage({ config, incidents, templates, exercises })
    setSaved(true)
    setTimeout(() => setSaved(false), 2000)
  }, [config, incidents, templates, exercises])

  const tabs: { id: Tab; label: string; count?: number }[] = [
    { id: 'config', label: 'Notfallplan' },
    { id: 'incidents', label: 'Incident-Register', count: incidents.filter(i => i.status !== 'closed').length || undefined },
    { id: 'templates', label: 'Melde-Templates' },
    { id: 'exercises', label: 'Uebungen & Tests', count: exercises.filter(e => !e.completedDate).length || undefined },
  ]

  return (
    <div className="space-y-6">
      <StepHeader stepId="notfallplan" />

      {/* Tab Navigation */}
      <div className="border-b border-gray-200">
        <nav className="-mb-px flex space-x-8">
          {tabs.map(tab => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm ${
                activeTab === tab.id
                  ? 'border-blue-500 text-blue-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
              }`}
            >
              {tab.label}
              {tab.count && (
                <span className="ml-2 bg-red-100 text-red-800 text-xs font-medium px-2 py-0.5 rounded-full">
                  {tab.count}
                </span>
              )}
            </button>
          ))}
        </nav>
      </div>

      {/* Save Button */}
      <div className="flex justify-end">
        <button
          onClick={handleSave}
          className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
            saved
              ? 'bg-green-600 text-white'
              : 'bg-blue-600 text-white hover:bg-blue-700'
          }`}
        >
          {saved ? 'Gespeichert!' : 'Speichern'}
        </button>
      </div>

      {/* Tab Content */}
      {activeTab === 'config' && (
        <ConfigTab config={config} setConfig={setConfig} />
      )}
      {activeTab === 'incidents' && (
        <IncidentsTab
          incidents={incidents}
          setIncidents={setIncidents}
          showAdd={showAddIncident}
          setShowAdd={setShowAddIncident}
        />
      )}
      {activeTab === 'templates' && (
        <TemplatesTab templates={templates} setTemplates={setTemplates} />
      )}
      {activeTab === 'exercises' && (
        <ExercisesTab
          exercises={exercises}
          setExercises={setExercises}
          showAdd={showAddExercise}
          setShowAdd={setShowAddExercise}
        />
      )}
    </div>
  )
}

// =============================================================================
// TAB 1: Notfallplan-Konfiguration
// =============================================================================

function ConfigTab({
  config,
  setConfig,
}: {
  config: NotfallplanConfig
  setConfig: React.Dispatch<React.SetStateAction<NotfallplanConfig>>
}) {
  return (
    <div className="space-y-8">
      {/* Meldewege */}
      <section className="bg-white rounded-lg border p-6">
        <h3 className="text-lg font-semibold mb-4">Meldewege (intern → Aufsichtsbehoerde)</h3>
        <p className="text-sm text-gray-500 mb-4">
          Definieren Sie die interne Eskalationskette bei einer Datenpanne.
        </p>
        <div className="space-y-3">
          {config.meldewege.map((step, idx) => (
            <div key={step.id} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
              <span className="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 text-blue-800 flex items-center justify-center text-sm font-bold">
                {step.order}
              </span>
              <div className="flex-1 grid grid-cols-3 gap-2">
                <input
                  type="text"
                  value={step.role}
                  onChange={e => {
                    const updated = [...config.meldewege]
                    updated[idx] = { ...updated[idx], role: e.target.value }
                    setConfig(prev => ({ ...prev, meldewege: updated }))
                  }}
                  placeholder="Rolle"
                  className="text-sm border rounded px-2 py-1"
                />
                <input
                  type="text"
                  value={step.name}
                  onChange={e => {
                    const updated = [...config.meldewege]
                    updated[idx] = { ...updated[idx], name: e.target.value }
                    setConfig(prev => ({ ...prev, meldewege: updated }))
                  }}
                  placeholder="Name"
                  className="text-sm border rounded px-2 py-1"
                />
                <input
                  type="text"
                  value={step.action}
                  onChange={e => {
                    const updated = [...config.meldewege]
                    updated[idx] = { ...updated[idx], action: e.target.value }
                    setConfig(prev => ({ ...prev, meldewege: updated }))
                  }}
                  placeholder="Aktion"
                  className="text-sm border rounded px-2 py-1"
                />
              </div>
              <div className="flex-shrink-0 text-xs text-gray-500">
                max. {step.maxHours}h
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Zustaendigkeiten */}
      <section className="bg-white rounded-lg border p-6">
        <h3 className="text-lg font-semibold mb-4">Zustaendigkeiten</h3>
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b">
                <th className="text-left py-2 pr-4">Rolle</th>
                <th className="text-left py-2 pr-4">Name</th>
                <th className="text-left py-2 pr-4">E-Mail</th>
                <th className="text-left py-2">Telefon</th>
              </tr>
            </thead>
            <tbody>
              {config.zustaendigkeiten.map((z, idx) => (
                <tr key={z.id} className="border-b last:border-0">
                  <td className="py-2 pr-4 font-medium">{z.role}</td>
                  <td className="py-2 pr-4">
                    <input
                      type="text"
                      value={z.name}
                      onChange={e => {
                        const updated = [...config.zustaendigkeiten]
                        updated[idx] = { ...updated[idx], name: e.target.value }
                        setConfig(prev => ({ ...prev, zustaendigkeiten: updated }))
                      }}
                      placeholder="Name eingeben"
                      className="w-full text-sm border rounded px-2 py-1"
                    />
                  </td>
                  <td className="py-2 pr-4">
                    <input
                      type="email"
                      value={z.email}
                      onChange={e => {
                        const updated = [...config.zustaendigkeiten]
                        updated[idx] = { ...updated[idx], email: e.target.value }
                        setConfig(prev => ({ ...prev, zustaendigkeiten: updated }))
                      }}
                      placeholder="email@example.com"
                      className="w-full text-sm border rounded px-2 py-1"
                    />
                  </td>
                  <td className="py-2">
                    <input
                      type="tel"
                      value={z.phone}
                      onChange={e => {
                        const updated = [...config.zustaendigkeiten]
                        updated[idx] = { ...updated[idx], phone: e.target.value }
                        setConfig(prev => ({ ...prev, zustaendigkeiten: updated }))
                      }}
                      placeholder="+49..."
                      className="w-full text-sm border rounded px-2 py-1"
                    />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>

      {/* Aufsichtsbehoerde */}
      <section className="bg-white rounded-lg border p-6">
        <h3 className="text-lg font-semibold mb-4">Zustaendige Aufsichtsbehoerde</h3>
        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
            <input
              type="text"
              value={config.aufsichtsbehoerde.name}
              onChange={e => setConfig(prev => ({
                ...prev,
                aufsichtsbehoerde: { ...prev.aufsichtsbehoerde, name: e.target.value },
              }))}
              placeholder="z.B. LfD Niedersachsen"
              className="w-full text-sm border rounded px-3 py-2"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Bundesland</label>
            <input
              type="text"
              value={config.aufsichtsbehoerde.state}
              onChange={e => setConfig(prev => ({
                ...prev,
                aufsichtsbehoerde: { ...prev.aufsichtsbehoerde, state: e.target.value },
              }))}
              placeholder="z.B. Niedersachsen"
              className="w-full text-sm border rounded px-3 py-2"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">E-Mail</label>
            <input
              type="email"
              value={config.aufsichtsbehoerde.email}
              onChange={e => setConfig(prev => ({
                ...prev,
                aufsichtsbehoerde: { ...prev.aufsichtsbehoerde, email: e.target.value },
              }))}
              placeholder="poststelle@lfd.niedersachsen.de"
              className="w-full text-sm border rounded px-3 py-2"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Telefon</label>
            <input
              type="tel"
              value={config.aufsichtsbehoerde.phone}
              onChange={e => setConfig(prev => ({
                ...prev,
                aufsichtsbehoerde: { ...prev.aufsichtsbehoerde, phone: e.target.value },
              }))}
              placeholder="+49..."
              className="w-full text-sm border rounded px-3 py-2"
            />
          </div>
        </div>
      </section>

      {/* Eskalationsstufen */}
      <section className="bg-white rounded-lg border p-6">
        <h3 className="text-lg font-semibold mb-4">Eskalationsstufen</h3>
        <div className="space-y-4">
          {config.eskalationsstufen.map((stufe) => (
            <div key={stufe.id} className="p-4 bg-gray-50 rounded-lg">
              <div className="flex items-center gap-3 mb-2">
                <span className={`px-2 py-1 rounded text-xs font-bold ${
                  stufe.level === 1 ? 'bg-yellow-100 text-yellow-800' :
                  stufe.level === 2 ? 'bg-orange-100 text-orange-800' :
                  'bg-red-100 text-red-800'
                }`}>
                  Stufe {stufe.level}
                </span>
                <span className="font-medium">{stufe.label}</span>
              </div>
              <p className="text-sm text-gray-600 mb-2">Ausloeser: {stufe.triggerCondition}</p>
              <ul className="list-disc list-inside text-sm text-gray-700">
                {stufe.actions.map((action, i) => (
                  <li key={i}>{action}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </section>

      {/* Sofortmassnahmen-Checkliste */}
      <section className="bg-white rounded-lg border p-6">
        <h3 className="text-lg font-semibold mb-4">Sofortmassnahmen-Checkliste</h3>
        <p className="text-sm text-gray-500 mb-4">
          Diese Massnahmen sind sofort bei Entdeckung einer Datenpanne durchzufuehren.
        </p>
        <ul className="space-y-2">
          {config.sofortmassnahmen.map((m, idx) => (
            <li key={idx} className="flex items-start gap-3 p-2">
              <span className="flex-shrink-0 w-6 h-6 rounded border-2 border-gray-300 mt-0.5" />
              <span className="text-sm">{m}</span>
            </li>
          ))}
        </ul>
      </section>
    </div>
  )
}

// =============================================================================
// TAB 2: Incident-Register
// =============================================================================

function IncidentsTab({
  incidents,
  setIncidents,
  showAdd,
  setShowAdd,
}: {
  incidents: Incident[]
  setIncidents: React.Dispatch<React.SetStateAction<Incident[]>>
  showAdd: boolean
  setShowAdd: (v: boolean) => void
}) {
  const [newIncident, setNewIncident] = useState<Partial<Incident>>({
    title: '',
    description: '',
    severity: 'medium',
    affectedDataCategories: [],
    estimatedAffectedPersons: 0,
    measures: [],
    art34Required: false,
    art34Justification: '',
  })

  function addIncident() {
    if (!newIncident.title) return
    const incident: Incident = {
      id: `INC-${Date.now()}`,
      title: newIncident.title || '',
      description: newIncident.description || '',
      detectedAt: new Date().toISOString(),
      detectedBy: 'Admin',
      status: 'detected',
      severity: newIncident.severity as IncidentSeverity || 'medium',
      affectedDataCategories: newIncident.affectedDataCategories || [],
      estimatedAffectedPersons: newIncident.estimatedAffectedPersons || 0,
      measures: newIncident.measures || [],
      art34Required: newIncident.art34Required || false,
      art34Justification: newIncident.art34Justification || '',
    }
    setIncidents(prev => [incident, ...prev])
    setShowAdd(false)
    setNewIncident({
      title: '', description: '', severity: 'medium',
      affectedDataCategories: [], estimatedAffectedPersons: 0,
      measures: [], art34Required: false, art34Justification: '',
    })
  }

  function updateStatus(id: string, status: IncidentStatus) {
    setIncidents(prev => prev.map(inc =>
      inc.id === id
        ? {
            ...inc,
            status,
            ...(status === 'reported' ? { reportedToAuthorityAt: new Date().toISOString() } : {}),
            ...(status === 'closed' ? { closedAt: new Date().toISOString(), closedBy: 'Admin' } : {}),
          }
        : inc
    ))
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h3 className="text-lg font-semibold">Incident-Register (Art. 33 Abs. 5)</h3>
          <p className="text-sm text-gray-500">Alle Datenpannen dokumentieren — auch nicht-meldepflichtige.</p>
        </div>
        <button
          onClick={() => setShowAdd(true)}
          className="px-4 py-2 bg-red-600 text-white rounded-lg text-sm font-medium hover:bg-red-700"
        >
          + Datenpanne melden
        </button>
      </div>

      {/* Add Incident Form */}
      {showAdd && (
        <div className="bg-white rounded-lg border p-6 space-y-4">
          <h4 className="font-medium">Neue Datenpanne erfassen</h4>
          <div className="grid grid-cols-2 gap-4">
            <div className="col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-1">Titel</label>
              <input
                type="text"
                value={newIncident.title}
                onChange={e => setNewIncident(prev => ({ ...prev, title: e.target.value }))}
                placeholder="Kurzbeschreibung der Datenpanne"
                className="w-full border rounded px-3 py-2 text-sm"
              />
            </div>
            <div className="col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
              <textarea
                value={newIncident.description}
                onChange={e => setNewIncident(prev => ({ ...prev, description: e.target.value }))}
                placeholder="Detaillierte Beschreibung: Was ist passiert, wie wurde es entdeckt?"
                rows={3}
                className="w-full border rounded px-3 py-2 text-sm"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Schweregrad</label>
              <select
                value={newIncident.severity}
                onChange={e => setNewIncident(prev => ({ ...prev, severity: e.target.value as IncidentSeverity }))}
                className="w-full border rounded px-3 py-2 text-sm"
              >
                <option value="low">Niedrig</option>
                <option value="medium">Mittel</option>
                <option value="high">Hoch</option>
                <option value="critical">Kritisch</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Geschaetzte Betroffene</label>
              <input
                type="number"
                value={newIncident.estimatedAffectedPersons}
                onChange={e => setNewIncident(prev => ({ ...prev, estimatedAffectedPersons: parseInt(e.target.value) || 0 }))}
                className="w-full border rounded px-3 py-2 text-sm"
              />
            </div>
            <div className="col-span-2 flex items-center gap-2">
              <input
                type="checkbox"
                checked={newIncident.art34Required}
                onChange={e => setNewIncident(prev => ({ ...prev, art34Required: e.target.checked }))}
                className="rounded"
              />
              <label className="text-sm">Hohes Risiko fuer Betroffene (Art. 34 Benachrichtigungspflicht)</label>
            </div>
          </div>
          <div className="flex gap-2 justify-end">
            <button
              onClick={() => setShowAdd(false)}
              className="px-4 py-2 border rounded-lg text-sm"
            >
              Abbrechen
            </button>
            <button
              onClick={addIncident}
              disabled={!newIncident.title}
              className="px-4 py-2 bg-red-600 text-white rounded-lg text-sm font-medium hover:bg-red-700 disabled:opacity-50"
            >
              Datenpanne erfassen
            </button>
          </div>
        </div>
      )}

      {/* Incidents List */}
      {incidents.length === 0 ? (
        <div className="bg-white rounded-lg border p-12 text-center text-gray-500">
          <p className="text-lg mb-2">Keine Datenpannen erfasst</p>
          <p className="text-sm">Dokumentieren Sie hier alle Datenpannen — auch solche, die nicht meldepflichtig sind (Art. 33 Abs. 5).</p>
        </div>
      ) : (
        <div className="space-y-4">
          {incidents.map(incident => (
            <div key={incident.id} className="bg-white rounded-lg border p-6">
              <div className="flex items-start justify-between mb-3">
                <div>
                  <div className="flex items-center gap-2 mb-1">
                    <span className="text-xs text-gray-500 font-mono">{incident.id}</span>
                    <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${INCIDENT_STATUS_COLORS[incident.status]}`}>
                      {INCIDENT_STATUS_LABELS[incident.status]}
                    </span>
                    <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${SEVERITY_COLORS[incident.severity]}`}>
                      {SEVERITY_LABELS[incident.severity]}
                    </span>
                    {incident.art34Required && (
                      <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                        Art. 34
                      </span>
                    )}
                  </div>
                  <h4 className="font-medium">{incident.title}</h4>
                </div>
                {incident.status !== 'closed' && incident.status !== 'reported' && incident.status !== 'not_reportable' && (
                  <CountdownTimer detectedAt={incident.detectedAt} />
                )}
              </div>
              <p className="text-sm text-gray-600 mb-3">{incident.description}</p>
              <div className="flex items-center gap-4 text-xs text-gray-500 mb-3">
                <span>Entdeckt: {new Date(incident.detectedAt).toLocaleString('de-DE')}</span>
                <span>Betroffene: ~{incident.estimatedAffectedPersons}</span>
                {incident.reportedToAuthorityAt && (
                  <span>Gemeldet: {new Date(incident.reportedToAuthorityAt).toLocaleString('de-DE')}</span>
                )}
              </div>
              {incident.status !== 'closed' && (
                <div className="flex gap-2">
                  {incident.status === 'detected' && (
                    <button onClick={() => updateStatus(incident.id, 'classified')} className="text-xs px-3 py-1 bg-yellow-100 text-yellow-800 rounded hover:bg-yellow-200">
                      Klassifizieren
                    </button>
                  )}
                  {incident.status === 'classified' && (
                    <button onClick={() => updateStatus(incident.id, 'assessed')} className="text-xs px-3 py-1 bg-blue-100 text-blue-800 rounded hover:bg-blue-200">
                      Bewerten
                    </button>
                  )}
                  {incident.status === 'assessed' && (
                    <>
                      <button onClick={() => updateStatus(incident.id, 'reported')} className="text-xs px-3 py-1 bg-green-100 text-green-800 rounded hover:bg-green-200">
                        Als gemeldet markieren
                      </button>
                      <button onClick={() => updateStatus(incident.id, 'not_reportable')} className="text-xs px-3 py-1 bg-gray-100 text-gray-800 rounded hover:bg-gray-200">
                        Nicht meldepflichtig
                      </button>
                    </>
                  )}
                  {(incident.status === 'reported' || incident.status === 'not_reportable') && (
                    <button onClick={() => updateStatus(incident.id, 'closed')} className="text-xs px-3 py-1 bg-gray-100 text-gray-600 rounded hover:bg-gray-200">
                      Abschliessen
                    </button>
                  )}
                </div>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

// =============================================================================
// TAB 3: Melde-Templates
// =============================================================================

function TemplatesTab({
  templates,
  setTemplates,
}: {
  templates: MeldeTemplate[]
  setTemplates: React.Dispatch<React.SetStateAction<MeldeTemplate[]>>
}) {
  return (
    <div className="space-y-6">
      <div>
        <h3 className="text-lg font-semibold">Melde-Templates</h3>
        <p className="text-sm text-gray-500">
          Vorlagen fuer Meldungen an die Aufsichtsbehoerde (Art. 33) und Benachrichtigung Betroffener (Art. 34).
        </p>
      </div>

      {templates.map(template => (
        <div key={template.id} className="bg-white rounded-lg border p-6">
          <div className="flex items-center gap-2 mb-3">
            <span className={`px-2 py-1 rounded text-xs font-bold ${
              template.type === 'art33'
                ? 'bg-blue-100 text-blue-800'
                : 'bg-purple-100 text-purple-800'
            }`}>
              {template.type === 'art33' ? 'Art. 33' : 'Art. 34'}
            </span>
            <h4 className="font-medium">{template.title}</h4>
          </div>
          <textarea
            value={template.content}
            onChange={e => {
              setTemplates(prev => prev.map(t =>
                t.id === template.id ? { ...t, content: e.target.value } : t
              ))
            }}
            rows={12}
            className="w-full border rounded px-3 py-2 text-sm font-mono"
          />
        </div>
      ))}
    </div>
  )
}

// =============================================================================
// TAB 4: Uebungen & Tests
// =============================================================================

function ExercisesTab({
  exercises,
  setExercises,
  showAdd,
  setShowAdd,
}: {
  exercises: Exercise[]
  setExercises: React.Dispatch<React.SetStateAction<Exercise[]>>
  showAdd: boolean
  setShowAdd: (v: boolean) => void
}) {
  const [newExercise, setNewExercise] = useState<Partial<Exercise>>({
    title: '',
    type: 'tabletop',
    scenario: '',
    scheduledDate: '',
    participants: [],
    lessonsLearned: '',
  })

  const SCENARIO_PRESETS = [
    { label: 'Ransomware-Angriff', scenario: 'Ein Ransomware-Angriff verschluesselt saemtliche Produktivdaten. Backups sind vorhanden, aber der letzte Restore-Test liegt 6 Monate zurueck.' },
    { label: 'Datenabfluss durch Mitarbeiter', scenario: 'Ein ausscheidender Mitarbeiter hat vor seinem letzten Arbeitstag umfangreiche Kundendaten auf einen privaten USB-Stick kopiert.' },
    { label: 'Cloud-Provider-Ausfall', scenario: 'Ihr primaerer Cloud-Provider meldet einen groesseren Ausfall. Die Wiederherstellungszeit ist unbekannt. Betroffene koennen keine DSGVO-Rechte ausueben.' },
    { label: 'Phishing-Angriff', scenario: 'Mehrere Mitarbeiter haben auf einen Phishing-Link geklickt. Es besteht Verdacht, dass Anmeldedaten kompromittiert wurden und auf Personaldaten zugegriffen wurde.' },
  ]

  function addExercise() {
    if (!newExercise.title || !newExercise.scheduledDate) return
    const exercise: Exercise = {
      id: `EX-${Date.now()}`,
      title: newExercise.title || '',
      type: (newExercise.type as Exercise['type']) || 'tabletop',
      scenario: newExercise.scenario || '',
      scheduledDate: newExercise.scheduledDate || '',
      participants: newExercise.participants || [],
      lessonsLearned: '',
    }
    setExercises(prev => [...prev, exercise])
    setShowAdd(false)
    setNewExercise({ title: '', type: 'tabletop', scenario: '', scheduledDate: '', participants: [], lessonsLearned: '' })
  }

  function completeExercise(id: string, lessonsLearned: string) {
    setExercises(prev => prev.map(ex =>
      ex.id === id
        ? { ...ex, completedDate: new Date().toISOString(), lessonsLearned }
        : ex
    ))
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h3 className="text-lg font-semibold">Notfalluebungen & Tests</h3>
          <p className="text-sm text-gray-500">Planen und dokumentieren Sie regelmaessige Notfalluebungen.</p>
        </div>
        <button
          onClick={() => setShowAdd(true)}
          className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700"
        >
          + Uebung planen
        </button>
      </div>

      {/* Add Exercise Form */}
      {showAdd && (
        <div className="bg-white rounded-lg border p-6 space-y-4">
          <h4 className="font-medium">Neue Uebung planen</h4>
          <div className="grid grid-cols-2 gap-4">
            <div className="col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-1">Titel</label>
              <input
                type="text"
                value={newExercise.title}
                onChange={e => setNewExercise(prev => ({ ...prev, title: e.target.value }))}
                placeholder="z.B. Tabletop: Ransomware-Angriff"
                className="w-full border rounded px-3 py-2 text-sm"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Typ</label>
              <select
                value={newExercise.type}
                onChange={e => setNewExercise(prev => ({ ...prev, type: e.target.value as Exercise['type'] }))}
                className="w-full border rounded px-3 py-2 text-sm"
              >
                <option value="tabletop">Tabletop-Uebung</option>
                <option value="simulation">Simulation</option>
                <option value="full_drill">Vollstaendige Uebung</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Geplantes Datum</label>
              <input
                type="date"
                value={newExercise.scheduledDate}
                onChange={e => setNewExercise(prev => ({ ...prev, scheduledDate: e.target.value }))}
                className="w-full border rounded px-3 py-2 text-sm"
              />
            </div>
            <div className="col-span-2">
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Szenario
                <span className="text-gray-400 font-normal ml-2">oder Vorlage waehlen:</span>
              </label>
              <div className="flex flex-wrap gap-2 mb-2">
                {SCENARIO_PRESETS.map(preset => (
                  <button
                    key={preset.label}
                    onClick={() => setNewExercise(prev => ({
                      ...prev,
                      scenario: preset.scenario,
                      title: prev.title || `Tabletop: ${preset.label}`,
                    }))}
                    className="text-xs px-3 py-1 bg-gray-100 rounded-full hover:bg-gray-200"
                  >
                    {preset.label}
                  </button>
                ))}
              </div>
              <textarea
                value={newExercise.scenario}
                onChange={e => setNewExercise(prev => ({ ...prev, scenario: e.target.value }))}
                placeholder="Beschreiben Sie das Uebungsszenario..."
                rows={3}
                className="w-full border rounded px-3 py-2 text-sm"
              />
            </div>
          </div>
          <div className="flex gap-2 justify-end">
            <button onClick={() => setShowAdd(false)} className="px-4 py-2 border rounded-lg text-sm">
              Abbrechen
            </button>
            <button
              onClick={addExercise}
              disabled={!newExercise.title || !newExercise.scheduledDate}
              className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 disabled:opacity-50"
            >
              Uebung planen
            </button>
          </div>
        </div>
      )}

      {/* Exercises List */}
      {exercises.length === 0 ? (
        <div className="bg-white rounded-lg border p-12 text-center text-gray-500">
          <p className="text-lg mb-2">Keine Uebungen geplant</p>
          <p className="text-sm">Regelmaessige Notfalluebungen sind essentiell fuer ein funktionierendes Datenpannen-Management.</p>
        </div>
      ) : (
        <div className="space-y-4">
          {exercises.map(exercise => (
            <div key={exercise.id} className="bg-white rounded-lg border p-6">
              <div className="flex items-center gap-2 mb-2">
                <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${
                  exercise.completedDate ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
                }`}>
                  {exercise.completedDate ? 'Abgeschlossen' : 'Geplant'}
                </span>
                <span className="text-xs text-gray-500 capitalize">
                  {exercise.type === 'tabletop' ? 'Tabletop' : exercise.type === 'simulation' ? 'Simulation' : 'Vollstaendige Uebung'}
                </span>
              </div>
              <h4 className="font-medium mb-1">{exercise.title}</h4>
              <p className="text-sm text-gray-600 mb-2">{exercise.scenario}</p>
              <div className="flex items-center gap-4 text-xs text-gray-500">
                <span>Geplant: {new Date(exercise.scheduledDate).toLocaleDateString('de-DE')}</span>
                {exercise.completedDate && (
                  <span>Durchgefuehrt: {new Date(exercise.completedDate).toLocaleDateString('de-DE')}</span>
                )}
              </div>
              {exercise.lessonsLearned && (
                <div className="mt-3 p-3 bg-blue-50 rounded text-sm">
                  <span className="font-medium text-blue-800">Lessons Learned:</span>
                  <p className="text-blue-700 mt-1">{exercise.lessonsLearned}</p>
                </div>
              )}
              {!exercise.completedDate && (
                <div className="mt-3">
                  <button
                    onClick={() => {
                      const lessons = prompt('Lessons Learned aus der Uebung:')
                      if (lessons !== null) {
                        completeExercise(exercise.id, lessons)
                      }
                    }}
                    className="text-xs px-3 py-1 bg-green-100 text-green-800 rounded hover:bg-green-200"
                  >
                    Als durchgefuehrt markieren
                  </button>
                </div>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  )
}