'use client'

/**
 * DSGVO-Audit-Dokumentation Seite
 *
 * Zeigt die vollständige Audit-Dokumentation für Datenschutzbeauftragte
 * und Auditoren mit schöner Markdown-Darstellung inkl. Tabellen.
 */

import { useState, useEffect, useRef } from 'react'
import AdminLayout from '@/components/admin/AdminLayout'

// Table of contents sections for navigation
const SECTIONS = [
  { id: '1', title: 'Management Summary', level: 2 },
  { id: '1-1', title: 'Systemübersicht', level: 3 },
  { id: '1-2', title: 'Datenschutz-Garantien', level: 3 },
  { id: '1-3', title: 'Compliance-Status', level: 3 },
  { id: '2', title: 'Verzeichnis der Verarbeitungstätigkeiten', level: 2 },
  { id: '2-1', title: 'Verantwortlicher', level: 3 },
  { id: '2-2', title: 'Datenschutzbeauftragter', level: 3 },
  { id: '2-3', title: 'Verarbeitungstätigkeiten', level: 3 },
  { id: '3', title: 'Rechtsgrundlagen (Art. 6)', level: 2 },
  { id: '3-1', title: 'Primäre Rechtsgrundlagen', level: 3 },
  { id: '3-2', title: 'Landesrechtliche Grundlagen', level: 3 },
  { id: '3-3', title: 'Besondere Kategorien (Art. 9)', level: 3 },
  { id: '4', title: 'Datenschutz-Folgenabschätzung', level: 2 },
  { id: '4-1', title: 'Schwellwertanalyse', level: 3 },
  { id: '4-2', title: 'Systematische Beschreibung', level: 3 },
  { id: '4-3', title: 'Notwendigkeit und Verhältnismäßigkeit', level: 3 },
  { id: '4-4', title: 'Risikobewertung', level: 3 },
  { id: '4-5', title: 'Maßnahmen zur Risikominderung', level: 3 },
  { id: '5', title: 'Informationspflichten', level: 2 },
  { id: '6', title: 'Automatisierte Entscheidungsfindung', level: 2 },
  { id: '7', title: 'Privacy by Design', level: 2 },
  { id: '8', title: 'Technisch-Organisatorische Maßnahmen', level: 2 },
  { id: '9', title: 'BSI-Anforderungen', level: 2 },
  { id: '10', title: 'EU AI Act Compliance', level: 2 },
  { id: '11', title: 'ML/AI Training Dokumentation', level: 2 },
  { id: '12', title: 'Betroffenenrechte', level: 2 },
  { id: '13', title: 'Schulung und Awareness', level: 2 },
  { id: '14', title: 'Review und Audit', level: 2 },
  { id: '15', title: 'Vorfallmanagement', level: 2 },
  { id: '16', title: 'Kontakte', level: 2 },
  { id: '17', title: 'Voice Service DSGVO', level: 2 },
  { id: '17-1', title: 'Architektur & Datenfluss', level: 3 },
  { id: '17-2', title: 'Datenklassifizierung', level: 3 },
  { id: '17-3', title: 'Verschlüsselung', level: 3 },
  { id: '17-4', title: 'TTL & Auto-Löschung', level: 3 },
  { id: '17-5', title: 'Audit-Logs', level: 3 },
  { id: '18', title: 'BQAS Lokaler Scheduler', level: 2 },
  { id: '18-1', title: 'GitHub Actions Alternative', level: 3 },
  { id: '18-2', title: 'Datenschutz-Vorteile', level: 3 },
  { id: '18-3', title: 'Komponenten', level: 3 },
  { id: '18-4', title: 'Datenverarbeitung', level: 3 },
  { id: '18-5', title: 'Benachrichtigungen', level: 3 },
]

// Helper component for tables
function Table({ headers, rows }: { headers: string[], rows: string[][] }) {
  return (
    <div className="overflow-x-auto my-4">
      <table className="min-w-full border-collapse border border-slate-300">
        <thead>
          <tr className="bg-slate-100">
            {headers.map((header, i) => (
              <th key={i} className="border border-slate-300 px-4 py-2 text-left text-sm font-semibold text-slate-700">
                {header}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row, i) => (
            <tr key={i} className={i % 2 === 0 ? 'bg-white' : 'bg-slate-50'}>
              {row.map((cell, j) => (
                <td key={j} className="border border-slate-300 px-4 py-2 text-sm text-slate-600">
                  {cell}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

// Helper for code blocks
function CodeBlock({ children }: { children: string }) {
  return (
    <pre className="bg-slate-900 text-slate-100 p-4 rounded-lg overflow-x-auto text-sm font-mono my-4 whitespace-pre">
      {children}
    </pre>
  )
}

export default function AuditDocumentationPage() {
  const [showToc, setShowToc] = useState(true)
  const [activeSection, setActiveSection] = useState<string>('1')
  const contentRef = useRef<HTMLDivElement>(null)

  const scrollToSection = (sectionId: string) => {
    const element = document.getElementById(`section-${sectionId}`)
    if (element) {
      element.scrollIntoView({ behavior: 'smooth', block: 'start' })
      setActiveSection(sectionId)
    }
  }

  // Track active section on scroll
  useEffect(() => {
    const handleScroll = () => {
      const sections = SECTIONS.map(s => ({
        id: s.id,
        element: document.getElementById(`section-${s.id}`)
      })).filter(s => s.element)

      for (const section of sections.reverse()) {
        if (section.element) {
          const rect = section.element.getBoundingClientRect()
          if (rect.top <= 150) {
            setActiveSection(section.id)
            break
          }
        }
      }
    }

    window.addEventListener('scroll', handleScroll)
    return () => window.removeEventListener('scroll', handleScroll)
  }, [])

  return (
    <AdminLayout>
      <div className="flex min-h-screen">
        {/* Table of Contents Sidebar */}
        {showToc && (
          <aside className="w-64 flex-shrink-0 border-r border-slate-200 bg-slate-50 overflow-y-auto fixed left-64 top-16 bottom-0 z-20">
            <div className="p-4">
              <h2 className="text-sm font-semibold text-slate-900 uppercase tracking-wider mb-4">
                Inhaltsverzeichnis
              </h2>
              <nav className="space-y-0.5">
                {SECTIONS.map((section) => (
                  <button
                    key={section.id}
                    onClick={() => scrollToSection(section.id)}
                    className={`w-full text-left px-2 py-1.5 text-sm rounded transition-colors ${
                      section.level === 2 ? 'font-medium' : 'ml-3 text-xs'
                    } ${
                      activeSection === section.id
                        ? 'bg-primary-100 text-primary-700'
                        : 'text-slate-600 hover:bg-slate-200 hover:text-slate-900'
                    }`}
                  >
                    {section.id.includes('-') ? '' : `${section.id}. `}{section.title}
                  </button>
                ))}
              </nav>
            </div>
          </aside>
        )}

        {/* Main Content */}
        <main className={`flex-1 ${showToc ? 'ml-64' : ''}`}>
          {/* Header */}
          <div className="bg-white border-b border-slate-200 px-8 py-4 sticky top-16 z-10">
            <div className="flex items-center justify-between max-w-4xl">
              <div>
                <h1 className="text-xl font-bold text-slate-900">DSGVO-Audit-Dokumentation</h1>
                <p className="text-sm text-slate-500">OCR-Labeling-System | Version 1.0.0 | 21. Januar 2026</p>
              </div>
              <div className="flex items-center gap-3">
                <button
                  onClick={() => setShowToc(!showToc)}
                  className="px-3 py-1.5 text-sm text-slate-600 hover:text-slate-900 border border-slate-300 rounded-lg hover:bg-slate-50"
                >
                  {showToc ? 'TOC ausblenden' : 'TOC anzeigen'}
                </button>
                <button
                  onClick={() => window.print()}
                  className="px-3 py-1.5 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700"
                >
                  PDF drucken
                </button>
              </div>
            </div>
          </div>

          {/* Document Content */}
          <div ref={contentRef} className="px-8 py-8 max-w-4xl">
            {/* Title */}
            <div className="mb-8 pb-6 border-b-2 border-slate-200">
              <h1 className="text-3xl font-bold text-slate-900 mb-4">
                DSGVO-Audit-Dokumentation: OCR-Labeling-System für Handschrifterkennung
              </h1>
              <div className="grid grid-cols-2 gap-4 text-sm">
                <div><span className="font-semibold">Dokumentversion:</span> 1.0.0</div>
                <div><span className="font-semibold">Datum:</span> 21. Januar 2026</div>
                <div><span className="font-semibold">Klassifizierung:</span> Vertraulich - Nur für internen Gebrauch und Auditoren</div>
                <div><span className="font-semibold">Nächste Überprüfung:</span> 21. Januar 2027</div>
              </div>
            </div>

            {/* Section 1: Management Summary */}
            <section id="section-1" className="mb-10 scroll-mt-32">
              <h2 className="text-2xl font-bold text-slate-800 mb-6 pb-2 border-b border-slate-200">
                1. Management Summary
              </h2>

              <div id="section-1-1" className="mb-6 scroll-mt-32">
                <h3 className="text-xl font-semibold text-slate-700 mb-3">1.1 Systemübersicht</h3>
                <p className="text-slate-600 mb-4">
                  Das OCR-Labeling-System ist eine <strong>vollständig lokal betriebene</strong> Lösung zur Digitalisierung und Auswertung handschriftlicher Schülerarbeiten (Klausuren, Aufsätze). Das System nutzt:
                </p>
                <ul className="list-disc list-inside text-slate-600 space-y-1 ml-4">
                  <li><strong>llama3.2-vision:11b</strong> - Open-Source Vision-Language-Modell für OCR (lokal via Ollama)</li>
                  <li><strong>TrOCR</strong> - Microsoft Transformer OCR für Handschrifterkennung (lokal)</li>
                  <li><strong>qwen2.5:14b</strong> - Open-Source LLM für Korrekturassistenz (lokal via Ollama)</li>
                </ul>
              </div>

              <div id="section-1-2" className="mb-6 scroll-mt-32">
                <h3 className="text-xl font-semibold text-slate-700 mb-3">1.2 Datenschutz-Garantien</h3>
                <Table
                  headers={['Merkmal', 'Umsetzung']}
                  rows={[
                    ['Verarbeitungsort', '100% lokal auf schuleigenem Mac Mini'],
                    ['Cloud-Dienste', 'Keine - vollständig offline-fähig'],
                    ['Datenübertragung', 'Keine Übertragung an externe Server'],
                    ['KI-Modelle', 'Open-Source, lokal ausgeführt, keine Telemetrie'],
                    ['Speicherung', 'Lokale PostgreSQL-Datenbank, MinIO Object Storage'],
                  ]}
                />
              </div>

              <div id="section-1-3" className="mb-6 scroll-mt-32">
                <h3 className="text-xl font-semibold text-slate-700 mb-3">1.3 Compliance-Status</h3>
                <p className="text-slate-600 mb-2">Das System erfüllt die Anforderungen der:</p>
                <ul className="list-disc list-inside text-slate-600 space-y-1 ml-4">
                  <li>DSGVO (Verordnung (EU) 2016/679)</li>
                  <li>BDSG (Bundesdatenschutzgesetz)</li>
                  <li>Niedersächsisches Schulgesetz (NSchG) §31</li>
                  <li>EU AI Act (Verordnung (EU) 2024/1689)</li>
                </ul>
              </div>
            </section>

            {/* Section 2: Verzeichnis der Verarbeitungstätigkeiten */}
            <section id="section-2" className="mb-10 scroll-mt-32">
              <h2 className="text-2xl font-bold text-slate-800 mb-6 pb-2 border-b border-slate-200">
                2. Verzeichnis der Verarbeitungstätigkeiten (Art. 30 DSGVO)
              </h2>

              <div id="section-2-1" className="mb-6 scroll-mt-32">
                <h3 className="text-xl font-semibold text-slate-700 mb-3">2.1 Verantwortlicher</h3>
                <Table
                  headers={['Feld', 'Inhalt']}
                  rows={[
                    ['Verantwortlicher', '[Schulname], [Schuladresse]'],
                    ['Vertreter', 'Schulleitung: [Name]'],
                    ['Kontakt', '[E-Mail], [Telefon]'],
                  ]}
                />
              </div>

              <div id="section-2-2" className="mb-6 scroll-mt-32">
                <h3 className="text-xl font-semibold text-slate-700 mb-3">2.2 Datenschutzbeauftragter</h3>
                <Table
                  headers={['Feld', 'Inhalt']}
                  rows={[
                    ['Name', '[Name DSB]'],
                    ['Organisation', '[Behördlicher/Externer DSB]'],
                    ['Kontakt', '[E-Mail], [Telefon]'],
                  ]}
                />
              </div>

              <div id="section-2-3" className="mb-6 scroll-mt-32">
                <h3 className="text-xl font-semibold text-slate-700 mb-3">2.3 Verarbeitungstätigkeiten</h3>

                <h4 className="text-lg font-medium text-slate-700 mt-4 mb-2">2.3.1 OCR-Verarbeitung von Klausuren</h4>
                <Table
                  headers={['Attribut', 'Beschreibung']}
                  rows={[
                    ['Zweck', 'Digitalisierung handschriftlicher Prüfungsantworten mittels KI-gestützter Texterkennung zur Unterstützung der Lehrkräfte bei der Korrektur'],
                    ['Rechtsgrundlage', 'Art. 6 Abs. 1 lit. e DSGVO i.V.m. §31 NSchG (öffentliche Aufgabe der Leistungsbewertung)'],
                    ['Betroffene Personen', 'Schülerinnen und Schüler (Prüfungsarbeiten)'],
                    ['Datenkategorien', 'Handschriftproben, Prüfungsantworten, Schülerkennung (optional)'],
                    ['Empfänger', 'Ausschließlich berechtigte Lehrkräfte der Schule'],
                    ['Drittlandübermittlung', 'Keine'],
                    ['Löschfrist', 'Gem. Aufbewahrungspflichten für Prüfungsunterlagen (i.d.R. 2-10 Jahre je nach Bundesland)'],
                  ]}
                />

                <h4 className="text-lg font-medium text-slate-700 mt-6 mb-2">2.3.2 Labeling für Modell-Training</h4>
                <Table
                  headers={['Attribut', 'Beschreibung']}
                  rows={[
                    ['Zweck', 'Erstellung von Trainingsdaten für lokales Fine-Tuning der OCR-Modelle zur Verbesserung der Handschrifterkennung'],
                    ['Rechtsgrundlage', 'Art. 6 Abs. 1 lit. f DSGVO (berechtigtes Interesse) oder Art. 6 Abs. 1 lit. a DSGVO (Einwilligung)'],
                    ['Betroffene Personen', 'Schülerinnen und Schüler (anonymisierte Handschriftproben)'],
                    ['Datenkategorien', 'Anonymisierte/pseudonymisierte Handschriftbilder, korrigierter Text'],
                    ['Empfänger', 'Lokales ML-System, keine externen Empfänger'],
                    ['Drittlandübermittlung', 'Keine'],
                    ['Löschfrist', 'Trainingsdaten: Nach Abschluss des Trainings oder auf Widerruf'],
                  ]}
                />
              </div>
            </section>

            {/* Section 3: Rechtsgrundlagen */}
            <section id="section-3" className="mb-10 scroll-mt-32">
              <h2 className="text-2xl font-bold text-slate-800 mb-6 pb-2 border-b border-slate-200">
                3. Rechtsgrundlagen (Art. 6 DSGVO)
              </h2>

              <div id="section-3-1" className="mb-6 scroll-mt-32">
                <h3 className="text-xl font-semibold text-slate-700 mb-3">3.1 Primäre Rechtsgrundlagen</h3>
                <Table
                  headers={['Verarbeitungsschritt', 'Rechtsgrundlage', 'Begründung']}
                  rows={[
                    ['Scan von Klausuren', 'Art. 6 Abs. 1 lit. e DSGVO', 'Öffentliche Aufgabe der schulischen Leistungsbewertung'],
                    ['OCR-Verarbeitung', 'Art. 6 Abs. 1 lit. e DSGVO', 'Teil der Bewertungsaufgabe, Effizienzsteigerung'],
                    ['Lehrerkorrektur', 'Art. 6 Abs. 1 lit. e DSGVO', 'Kernaufgabe der Leistungsbewertung'],
                    ['Export für Training', 'Art. 6 Abs. 1 lit. f DSGVO', 'Berechtigtes Interesse an Modellverbesserung'],
                  ]}
                />
              </div>

              <div id="section-3-2" className="mb-6 scroll-mt-32">
                <h3 className="text-xl font-semibold text-slate-700 mb-3">3.2 Landesrechtliche Grundlagen</h3>
                <p className="text-slate-600 mb-2"><strong>Niedersachsen:</strong></p>
                <ul className="list-disc list-inside text-slate-600 space-y-1 ml-4 mb-4">
                  <li>§31 NSchG: Erhebung, Verarbeitung und Nutzung personenbezogener Daten</li>
                  <li>Ergänzende Bestimmungen zur VO-DV I</li>
                </ul>
                <p className="text-slate-600 mb-2"><strong>Interesse-Abwägung für Training (Art. 6 Abs. 1 lit. f):</strong></p>
                <Table
                  headers={['Aspekt', 'Bewertung']}
                  rows={[
                    ['Interesse des Verantwortlichen', 'Verbesserung der OCR-Qualität für effizientere Klausurkorrektur'],
                    ['Erwartung der Betroffenen', 'Schüler erwarten, dass Prüfungsarbeiten für schulische Zwecke verarbeitet werden'],
                    ['Auswirkung auf Betroffene', 'Minimal - Daten werden pseudonymisiert, rein lokale Verarbeitung'],
                    ['Schutzmaßnahmen', 'Pseudonymisierung, keine Weitergabe, lokale Verarbeitung'],
                    ['Ergebnis', 'Berechtigtes Interesse überwiegt'],
                  ]}
                />
              </div>

              <div id="section-3-3" className="mb-6 scroll-mt-32">
                <h3 className="text-xl font-semibold text-slate-700 mb-3">3.3 Besondere Kategorien (Art. 9 DSGVO)</h3>
                <p className="text-slate-600 mb-2"><strong>Prüfung auf besondere Kategorien:</strong></p>
                <p className="text-slate-600 mb-4">
                  Handschriftproben könnten theoretisch Rückschlüsse auf Gesundheitszustände ermöglichen (z.B. Tremor). Dies wird wie folgt adressiert:
                </p>
                <ul className="list-disc list-inside text-slate-600 space-y-1 ml-4 mb-4">
                  <li>OCR-Modelle analysieren ausschließlich Textinhalt, nicht Handschriftcharakteristiken</li>
                  <li>Keine Speicherung von Handschriftanalysen</li>
                  <li>Bei Training werden nur Textinhalte verwendet, keine biometrischen Merkmale</li>
                </ul>
                <div className="bg-green-50 border border-green-200 rounded-lg p-4">
                  <p className="text-green-800 font-medium">
                    <strong>Ergebnis:</strong> Art. 9 ist nicht anwendbar, da keine Verarbeitung besonderer Kategorien erfolgt.
                  </p>
                </div>
              </div>
            </section>

            {/* Section 4: DSFA */}
            <section id="section-4" className="mb-10 scroll-mt-32">
              <h2 className="text-2xl font-bold text-slate-800 mb-6 pb-2 border-b border-slate-200">
                4. Datenschutz-Folgenabschätzung (Art. 35 DSGVO)
              </h2>

              <div id="section-4-1" className="mb-6 scroll-mt-32">
                <h3 className="text-xl font-semibold text-slate-700 mb-3">4.1 Schwellwertanalyse - Erforderlichkeit der DSFA</h3>
                <Table
                  headers={['Kriterium', 'Erfüllt', 'Begründung']}
                  rows={[
                    ['Neue Technologien (KI/ML)', '✓', 'Vision-LLM für OCR'],
                    ['Umfangreiche Verarbeitung', '✗', 'Begrenzt auf einzelne Schule'],
                    ['Daten von Minderjährigen', '✓', 'Schülerarbeiten'],
                    ['Systematische Überwachung', '✗', 'Keine Überwachung'],
                    ['Scoring/Profiling', '✗', 'Keine automatische Bewertung'],
                  ]}
                />
                <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 mt-4">
                  <p className="text-amber-800 font-medium">
                    <strong>Ergebnis:</strong> DSFA erforderlich aufgrund KI-Einsatz und Verarbeitung von Daten Minderjähriger.
                  </p>
                </div>
              </div>

              <div id="section-4-2" className="mb-6 scroll-mt-32">
                <h3 className="text-xl font-semibold text-slate-700 mb-3">4.2 Systematische Beschreibung der Verarbeitung</h3>
                <h4 className="text-lg font-medium text-slate-700 mt-4 mb-2">Datenfluss-Diagramm</h4>
                <CodeBlock>{`┌─────────────────────────────────────────────────────────────────────────────────┐
│                         OCR-LABELING DATENFLUSS                                  │
├─────────────────────────────────────────────────────────────────────────────────┤
│                                                                                  │
│  ┌──────────────┐    ┌──────────────┐    ┌──────────────┐    ┌──────────────┐  │
│  │  1. SCAN     │───►│  2. UPLOAD   │───►│  3. OCR      │───►│  4. LABELING │  │
│  │  (Lehrkraft) │    │  (MinIO)     │    │  (Ollama)    │    │  (Lehrkraft) │  │
│  └──────────────┘    └──────────────┘    └──────────────┘    └──────────────┘  │
│         │                   │                   │                   │           │
│         ▼                   ▼                   ▼                   ▼           │
│  Papierdokument      Verschlüsselte      Lokale LLM-         Bestätigung/      │
│  → digitaler Scan    Bildspeicherung     Verarbeitung        Korrektur         │
│                                                                                  │
│  ┌──────────────────────────────────────────────────────────────────────────┐  │
│  │                         SPEICHERUNG (PostgreSQL)                         │  │
│  │  • Session-ID (UUID)           • Status (pending/confirmed/corrected)    │  │
│  │  • Bild-Hash (SHA256)          • Ground Truth (korrigierter Text)       │  │
│  │  • OCR-Text                    • Zeitstempel                             │  │
│  └──────────────────────────────────────────────────────────────────────────┘  │
│                                                                                  │
│  ┌──────────────┐                                                               │
│  │  5. EXPORT   │  Pseudonymisierte Trainingsdaten (JSONL)                     │
│  │  (Optional)  │  → Lokal gespeichert für Fine-Tuning                         │
│  └──────────────┘                                                               │
└─────────────────────────────────────────────────────────────────────────────────┘`}</CodeBlock>

                <h4 className="text-lg font-medium text-slate-700 mt-6 mb-2">Verarbeitungsschritte im Detail</h4>
                <Table
                  headers={['Schritt', 'Beschreibung', 'Datenschutzmaßnahme']}
                  rows={[
                    ['1. Scan', 'Lehrkraft scannt Papierklausur', 'Physischer Zugang nur für Lehrkräfte'],
                    ['2. Upload', 'Bild wird in lokales MinIO hochgeladen', 'SHA256-Deduplizierung, verschlüsselte Speicherung'],
                    ['3. OCR', 'llama3.2-vision erkennt Text', '100% lokal, kein Internet'],
                    ['4. Labeling', 'Lehrkraft prüft/korrigiert OCR-Ergebnis', 'Protokollierung aller Aktionen'],
                    ['5. Export', 'Optional: Pseudonymisierte Trainingsdaten', 'Entfernung direkter Identifikatoren'],
                  ]}
                />
              </div>

              <div id="section-4-3" className="mb-6 scroll-mt-32">
                <h3 className="text-xl font-semibold text-slate-700 mb-3">4.3 Notwendigkeit und Verhältnismäßigkeit</h3>
                <h4 className="text-lg font-medium text-slate-700 mt-4 mb-2">Prüfung der Erforderlichkeit</h4>
                <Table
                  headers={['Prinzip', 'Umsetzung']}
                  rows={[
                    ['Zweckbindung', 'Ausschließlich für schulische Leistungsbewertung und Modelltraining'],
                    ['Datenminimierung', 'Nur Bildausschnitte mit Text, keine vollständigen Klausuren nötig'],
                    ['Speicherbegrenzung', 'Automatische Löschung nach definierter Aufbewahrungsfrist'],
                  ]}
                />

                <h4 className="text-lg font-medium text-slate-700 mt-6 mb-2">Alternativenprüfung</h4>
                <Table
                  headers={['Alternative', 'Bewertung']}
                  rows={[
                    ['Manuelle Transkription', 'Zeitaufwändig, fehleranfällig, nicht praktikabel'],
                    ['Cloud-OCR (Google, Azure)', 'Datenschutzrisiken durch Drittlandübermittlung'],
                    ['Kommerzielles lokales OCR', 'Hohe Kosten, Lizenzabhängigkeit'],
                    ['Gewählte Lösung', 'Open-Source lokal - optimale Balance'],
                  ]}
                />
              </div>

              <div id="section-4-4" className="mb-6 scroll-mt-32">
                <h3 className="text-xl font-semibold text-slate-700 mb-3">4.4 Risikobewertung</h3>
                <h4 className="text-lg font-medium text-slate-700 mt-4 mb-2">Identifizierte Risiken</h4>
                <Table
                  headers={['Risiko', 'Eintrittswahrscheinlichkeit', 'Schwere', 'Risikostufe', 'Mitigationsmaßnahme']}
                  rows={[
                    ['R1: Unbefugter Zugriff auf Schülerdaten', 'Gering', 'Hoch', 'Mittel', 'Rollenbasierte Zugriffskontrolle, MFA'],
                    ['R2: Datenleck durch Systemkompromittierung', 'Gering', 'Hoch', 'Mittel', 'Verschlüsselung, Netzwerkisolation'],
                    ['R3: Fehlerhaftes OCR beeinflusst Bewertung', 'Mittel', 'Mittel', 'Mittel', 'Pflicht-Review durch Lehrkraft'],
                    ['R4: Re-Identifizierung aus Handschrift', 'Gering', 'Mittel', 'Gering', 'Pseudonymisierung, keine Handschriftanalyse'],
                    ['R5: Bias im OCR-Modell', 'Mittel', 'Mittel', 'Mittel', 'Regelmäßige Qualitätsprüfung'],
                  ]}
                />
              </div>

              <div id="section-4-5" className="mb-6 scroll-mt-32">
                <h3 className="text-xl font-semibold text-slate-700 mb-3">4.5 Maßnahmen zur Risikominderung</h3>
                <Table
                  headers={['Risiko', 'Maßnahme', 'Umsetzungsstatus']}
                  rows={[
                    ['R1', 'RBAC, MFA, Audit-Logging', '✓ Implementiert'],
                    ['R2', 'FileVault-Verschlüsselung, lokales Netz', '✓ Implementiert'],
                    ['R3', 'Pflicht-Bestätigung durch Lehrkraft', '✓ Implementiert'],
                    ['R4', 'Pseudonymisierung bei Export', '✓ Implementiert'],
                    ['R5', 'Diverse Trainingssamples, manuelle Reviews', '○ In Entwicklung'],
                  ]}
                />
              </div>
            </section>

            {/* Section 5: Informationspflichten */}
            <section id="section-5" className="mb-10 scroll-mt-32">
              <h2 className="text-2xl font-bold text-slate-800 mb-6 pb-2 border-b border-slate-200">
                5. Informationspflichten (Art. 13/14 DSGVO)
              </h2>

              <h3 className="text-xl font-semibold text-slate-700 mb-3">5.1 Pflichtangaben nach Art. 13 DSGVO</h3>
              <Table
                headers={['Information', 'Bereitstellung']}
                rows={[
                  ['Identität des Verantwortlichen', 'Schulwebsite, Datenschutzerklärung'],
                  ['Kontakt DSB', 'Schulwebsite, Aushang'],
                  ['Verarbeitungszwecke', 'Datenschutzinformation bei Einschulung'],
                  ['Rechtsgrundlage', 'Datenschutzinformation'],
                  ['Empfänger/Kategorien', 'Datenschutzinformation'],
                  ['Speicherdauer', 'Datenschutzinformation'],
                  ['Betroffenenrechte', 'Datenschutzinformation, auf Anfrage'],
                  ['Beschwerderecht', 'Datenschutzinformation'],
                ]}
              />

              <h3 className="text-xl font-semibold text-slate-700 mt-6 mb-3">5.2 KI-spezifische Transparenz</h3>
              <Table
                headers={['Information', 'Inhalt']}
                rows={[
                  ['Art der KI', 'Vision-LLM für Texterkennung, kein automatisches Bewerten'],
                  ['Menschliche Aufsicht', 'Jedes OCR-Ergebnis wird von Lehrkraft geprüft'],
                  ['Keine automatische Entscheidung', 'System macht Vorschläge, Lehrkraft entscheidet'],
                  ['Widerspruchsrecht', 'Opt-out von Training-Verwendung möglich'],
                ]}
              />
            </section>

            {/* Section 6: Automatisierte Entscheidungsfindung */}
            <section id="section-6" className="mb-10 scroll-mt-32">
              <h2 className="text-2xl font-bold text-slate-800 mb-6 pb-2 border-b border-slate-200">
                6. Automatisierte Entscheidungsfindung (Art. 22 DSGVO)
              </h2>

              <h3 className="text-xl font-semibold text-slate-700 mb-3">6.1 Anwendbarkeitsprüfung</h3>
              <Table
                headers={['Merkmal', 'Erfüllt', 'Begründung']}
                rows={[
                  ['Automatisierte Verarbeitung', 'Ja', 'KI-gestützte Texterkennung'],
                  ['Entscheidung', 'Nein', 'OCR liefert nur Vorschlag'],
                  ['Rechtliche Wirkung/erhebliche Beeinträchtigung', 'Nein', 'Lehrkraft trifft finale Bewertungsentscheidung'],
                ]}
              />
              <div className="bg-green-50 border border-green-200 rounded-lg p-4 mt-4">
                <p className="text-green-800 font-medium">
                  <strong>Ergebnis:</strong> Art. 22 DSGVO ist <strong>nicht anwendbar</strong>, da keine automatisierte Entscheidung mit rechtlicher Wirkung erfolgt.
                </p>
              </div>

              <h3 className="text-xl font-semibold text-slate-700 mt-6 mb-3">6.2 Teacher-in-the-Loop Garantie</h3>
              <p className="text-slate-600 mb-4">Das System implementiert obligatorische menschliche Aufsicht:</p>
              <CodeBlock>{`┌──────────────┐     ┌──────────────┐     ┌──────────────┐
│  OCR-System  │────►│  Lehrkraft   │────►│   Bewertung  │
│  (Vorschlag) │     │  (Prüfung)   │     │   (Final)    │
└──────────────┘     └──────────────┘     └──────────────┘
       │                    │                    │
       │                    ▼                    │
       │            ┌──────────────┐            │
       └───────────►│  Korrektur   │◄───────────┘
                    │  (Optional)  │
                    └──────────────┘`}</CodeBlock>

              <p className="text-slate-600 mt-4 mb-2"><strong>Workflow-Garantien:</strong></p>
              <ol className="list-decimal list-inside text-slate-600 space-y-1 ml-4">
                <li>Kein OCR-Ergebnis wird automatisch als korrekt übernommen</li>
                <li>Lehrkraft muss explizit bestätigen ODER korrigieren</li>
                <li>Bewertungsentscheidung liegt ausschließlich bei der Lehrkraft</li>
                <li>System gibt keine Notenvorschläge</li>
              </ol>
            </section>

            {/* Section 7: Privacy by Design */}
            <section id="section-7" className="mb-10 scroll-mt-32">
              <h2 className="text-2xl font-bold text-slate-800 mb-6 pb-2 border-b border-slate-200">
                7. Privacy by Design und Default (Art. 25 DSGVO)
              </h2>

              <h3 className="text-xl font-semibold text-slate-700 mb-3">7.1 Design-Prinzipien</h3>
              <Table
                headers={['Prinzip', 'Implementierung']}
                rows={[
                  ['Proaktive Maßnahmen', 'Datenschutz von Anfang an im System-Design berücksichtigt'],
                  ['Standard-Datenschutz', 'Minimale Datenerhebung als Default'],
                  ['Eingebetteter Datenschutz', 'Technische Maßnahmen nicht umgehbar'],
                  ['Volle Funktionalität', 'Kein Trade-off Datenschutz vs. Funktionalität'],
                  ['End-to-End Sicherheit', 'Verschlüsselung vom Upload bis zur Löschung'],
                  ['Sichtbarkeit/Transparenz', 'Alle Verarbeitungen protokolliert und nachvollziehbar'],
                  ['Nutzerzentrierung', 'Betroffenenrechte einfach ausübbar'],
                ]}
              />

              <h3 className="text-xl font-semibold text-slate-700 mt-6 mb-3">7.2 Vendor-Auswahl</h3>
              <p className="text-slate-600 mb-4">Die verwendeten KI-Modelle wurden nach Datenschutzkriterien ausgewählt:</p>
              <Table
                headers={['Modell', 'Anbieter', 'Lizenz', 'Lokale Ausführung', 'Telemetrie']}
                rows={[
                  ['llama3.2-vision:11b', 'Meta', 'Llama 3.2 Community', '✓', 'Keine'],
                  ['qwen2.5:14b', 'Alibaba', 'Apache 2.0', '✓', 'Keine'],
                  ['TrOCR', 'Microsoft', 'MIT', '✓', 'Keine'],
                ]}
              />
            </section>

            {/* Section 8: TOM */}
            <section id="section-8" className="mb-10 scroll-mt-32">
              <h2 className="text-2xl font-bold text-slate-800 mb-6 pb-2 border-b border-slate-200">
                8. Technisch-Organisatorische Maßnahmen (Art. 32 DSGVO)
              </h2>

              <h3 className="text-xl font-semibold text-slate-700 mb-3">8.1 Vertraulichkeit</h3>

              <h4 className="text-lg font-medium text-slate-700 mt-4 mb-2">8.1.1 Zutrittskontrolle</h4>
              <Table
                headers={['Maßnahme', 'Umsetzung']}
                rows={[
                  ['Physische Sicherung', 'Server in abgeschlossenem Raum'],
                  ['Zugangsprotokoll', 'Elektronisches Schloss mit Protokollierung'],
                  ['Berechtigte Personen', 'IT-Administrator, Schulleitung'],
                ]}
              />

              <h4 className="text-lg font-medium text-slate-700 mt-6 mb-2">8.1.2 Zugangskontrolle</h4>
              <Table
                headers={['Maßnahme', 'Umsetzung']}
                rows={[
                  ['Authentifizierung', 'Benutzername + Passwort'],
                  ['Passwort-Policy', 'Min. 12 Zeichen, Komplexitätsanforderungen'],
                  ['Session-Timeout', '30 Minuten Inaktivität'],
                  ['Fehlversuche', 'Account-Sperrung nach 5 Fehlversuchen'],
                ]}
              />

              <h4 className="text-lg font-medium text-slate-700 mt-6 mb-2">8.1.3 Zugriffskontrolle (RBAC)</h4>
              <Table
                headers={['Rolle', 'Berechtigungen']}
                rows={[
                  ['Admin', 'Vollzugriff, Benutzerverwaltung'],
                  ['Lehrkraft', 'Eigene Sessions, Labeling, Export'],
                  ['Viewer', 'Nur Lesezugriff auf Statistiken'],
                ]}
              />

              <h4 className="text-lg font-medium text-slate-700 mt-6 mb-2">8.1.4 Verschlüsselung</h4>
              <Table
                headers={['Bereich', 'Maßnahme']}
                rows={[
                  ['Festplatte', 'FileVault 2 (AES-256)'],
                  ['Datenbank', 'Transparent Data Encryption'],
                  ['MinIO Storage', 'Server-Side Encryption (SSE)'],
                  ['Netzwerk', 'TLS 1.3 für lokale Verbindungen'],
                ]}
              />

              <h3 className="text-xl font-semibold text-slate-700 mt-8 mb-3">8.2 Integrität</h3>
              <Table
                headers={['Maßnahme', 'Umsetzung']}
                rows={[
                  ['Audit-Log', 'Alle Aktionen mit Timestamp und User-ID'],
                  ['Unveränderlichkeit', 'Append-only Logging'],
                  ['Log-Retention', '1 Jahr'],
                  ['Netzwerkisolation', 'Lokales Netz, keine Internet-Verbindung erforderlich'],
                ]}
              />

              <h3 className="text-xl font-semibold text-slate-700 mt-8 mb-3">8.3 Verfügbarkeit</h3>
              <Table
                headers={['Maßnahme', 'Umsetzung']}
                rows={[
                  ['Backup', 'Tägliches inkrementelles Backup'],
                  ['USV', 'Unterbrechungsfreie Stromversorgung'],
                  ['RAID', 'RAID 1 Spiegelung für Datenträger'],
                  ['Recovery-Test', 'Halbjährlich'],
                ]}
              />
            </section>

            {/* Section 9: BSI */}
            <section id="section-9" className="mb-10 scroll-mt-32">
              <h2 className="text-2xl font-bold text-slate-800 mb-6 pb-2 border-b border-slate-200">
                9. BSI-Anforderungen und Sicherheitsrichtlinien
              </h2>

              <h3 className="text-xl font-semibold text-slate-700 mb-3">9.1 Angewandte BSI-Publikationen</h3>
              <Table
                headers={['Publikation', 'Relevanz', 'Umsetzung']}
                rows={[
                  ['IT-Grundschutz-Kompendium', 'Basis-Absicherung', 'TOM nach Abschnitt 8'],
                  ['BSI TR-03116-4', 'Kryptographische Verfahren', 'AES-256, TLS 1.3'],
                  ['Kriterienkatalog KI (Juni 2025)', 'KI-Sicherheit', 'Siehe 9.2'],
                  ['QUAIDAL (Juli 2025)', 'Trainingsdaten-Qualität', 'Siehe 9.3'],
                ]}
              />

              <h3 className="text-xl font-semibold text-slate-700 mt-6 mb-3">9.2 KI-Sicherheitsanforderungen (BSI Kriterienkatalog)</h3>
              <Table
                headers={['Kriterium', 'Anforderung', 'Umsetzung']}
                rows={[
                  ['Modellintegrität', 'Schutz vor Manipulation', 'Lokale Modelle, keine Updates ohne Review'],
                  ['Eingabevalidierung', 'Schutz vor Adversarial Attacks', 'Bildformat-Prüfung, Größenlimits'],
                  ['Ausgabevalidierung', 'Plausibilitätsprüfung', 'Konfidenz-Schwellwerte'],
                  ['Protokollierung', 'Nachvollziehbarkeit', 'Vollständiges Audit-Log'],
                  ['Incident Response', 'Reaktion auf Fehlfunktionen', 'Eskalationsprozess definiert'],
                ]}
              />

              <h3 className="text-xl font-semibold text-slate-700 mt-6 mb-3">9.3 Trainingsdaten-Qualität (QUAIDAL)</h3>
              <Table
                headers={['Qualitätskriterium', 'Umsetzung']}
                rows={[
                  ['Herkunftsdokumentation', 'Alle Trainingsdaten aus eigenem Labeling-Prozess'],
                  ['Repräsentativität', 'Diverse Handschriften aus verschiedenen Klassenstufen'],
                  ['Qualitätskontrolle', 'Lehrkraft-Verifikation jedes Samples'],
                  ['Bias-Prüfung', 'Regelmäßige Stichproben-Analyse'],
                  ['Versionierung', 'Git-basierte Versionskontrolle für Datasets'],
                ]}
              />
            </section>

            {/* Section 10: EU AI Act */}
            <section id="section-10" className="mb-10 scroll-mt-32">
              <h2 className="text-2xl font-bold text-slate-800 mb-6 pb-2 border-b border-slate-200">
                10. EU AI Act Compliance (KI-Verordnung)
              </h2>

              <h3 className="text-xl font-semibold text-slate-700 mb-3">10.1 Risikoklassifizierung</h3>
              <p className="text-slate-600 mb-4"><strong>Prüfung nach Anhang III der KI-Verordnung:</strong></p>
              <Table
                headers={['Hochrisiko-Kategorie', 'Anwendbar', 'Begründung']}
                rows={[
                  ['3(a) Biometrische Identifizierung', 'Nein', 'Keine biometrische Verarbeitung'],
                  ['3(b) Kritische Infrastruktur', 'Nein', 'Keine kritische Infrastruktur'],
                  ['3(c) Allgemeine/berufliche Bildung', 'Prüfen', 'Bildungsbereich'],
                  ['3(d) Beschäftigung', 'Nein', 'Nicht anwendbar'],
                ]}
              />
              <p className="text-slate-600 mt-4 mb-2">Das System wird <strong>nicht</strong> für folgende Hochrisiko-Anwendungen genutzt:</p>
              <ul className="list-disc list-inside text-slate-600 space-y-1 ml-4 mb-4">
                <li>✗ Entscheidung über Zugang zu Bildungseinrichtungen</li>
                <li>✗ Zuweisung zu Bildungseinrichtungen oder -programmen</li>
                <li>✗ Bewertung von Lernergebnissen (nur Unterstützung, keine automatische Bewertung)</li>
                <li>✗ Überwachung von Prüfungen</li>
              </ul>
              <div className="bg-green-50 border border-green-200 rounded-lg p-4">
                <p className="text-green-800 font-medium">
                  <strong>Ergebnis:</strong> Kein Hochrisiko-KI-System nach aktuellem Stand.
                </p>
              </div>

              <h3 className="text-xl font-semibold text-slate-700 mt-6 mb-3">10.2 Verbotsprüfung (Art. 5)</h3>
              <Table
                headers={['Verbotene Praxis', 'Geprüft', 'Ergebnis']}
                rows={[
                  ['Unterschwellige Manipulation', '✓', 'Nicht vorhanden'],
                  ['Ausnutzung von Schwächen', '✓', 'Nicht vorhanden'],
                  ['Social Scoring', '✓', 'Nicht vorhanden'],
                  ['Echtzeit-Biometrie', '✓', 'Nicht vorhanden'],
                  ['Emotionserkennung in Bildung', '✓', 'Nicht vorhanden'],
                ]}
              />
            </section>

            {/* Section 11: ML/AI Training */}
            <section id="section-11" className="mb-10 scroll-mt-32">
              <h2 className="text-2xl font-bold text-slate-800 mb-6 pb-2 border-b border-slate-200">
                11. ML/AI Training Dokumentation
              </h2>

              <h3 className="text-xl font-semibold text-slate-700 mb-3">11.1 Trainingsdaten-Quellen</h3>
              <Table
                headers={['Datensatz', 'Quelle', 'Rechtsgrundlage', 'Volumen']}
                rows={[
                  ['Klausur-Scans', 'Schulinterne Prüfungen', 'Art. 6(1)(e) + Einwilligung', 'Variabel'],
                  ['Lehrer-Korrekturen', 'Labeling-System', 'Art. 6(1)(e)', 'Variabel'],
                ]}
              />

              <h3 className="text-xl font-semibold text-slate-700 mt-6 mb-3">11.2 Datenqualitätsmaßnahmen</h3>
              <Table
                headers={['Maßnahme', 'Beschreibung']}
                rows={[
                  ['Deduplizierung', 'SHA256-Hash zur Vermeidung von Duplikaten'],
                  ['Qualitätskontrolle', 'Jedes Sample von Lehrkraft geprüft'],
                  ['Repräsentativität', 'Samples aus verschiedenen Fächern/Klassenstufen'],
                  ['Dokumentation', 'Metadaten zu jedem Sample'],
                ]}
              />

              <h3 className="text-xl font-semibold text-slate-700 mt-6 mb-3">11.3 Labeling-Prozess</h3>
              <CodeBlock>{`┌─────────────────────────────────────────────────────────────────────┐
│                     LABELING WORKFLOW                                │
├─────────────────────────────────────────────────────────────────────┤
│                                                                      │
│  1. Bild-Upload            2. OCR-Vorschlag           3. Review     │
│  ┌─────────────┐          ┌─────────────┐          ┌─────────────┐  │
│  │   Scan      │─────────►│   LLM-OCR   │─────────►│  Lehrkraft  │  │
│  │   Upload    │          │   (lokal)   │          │   prüft     │  │
│  └─────────────┘          └─────────────┘          └──────┬──────┘  │
│                                                           │         │
│                                    ┌──────────────────────┴─────┐   │
│                                    ▼                            ▼   │
│                           ┌─────────────┐              ┌─────────┐  │
│                           │  Bestätigt  │              │Korrigiert│  │
│                           │  (korrekt)  │              │(manuell) │  │
│                           └─────────────┘              └─────────┘  │
│                                    │                            │   │
│                                    └──────────┬─────────────────┘   │
│                                               ▼                     │
│                                    ┌─────────────────┐              │
│                                    │  Ground Truth   │              │
│                                    │  (verifiziert)  │              │
│                                    └─────────────────┘              │
└─────────────────────────────────────────────────────────────────────┘`}</CodeBlock>

              <h3 className="text-xl font-semibold text-slate-700 mt-6 mb-3">11.4 Export-Prozeduren</h3>
              <Table
                headers={['Schritt', 'Beschreibung', 'Datenschutzmaßnahme']}
                rows={[
                  ['1. Auswahl', 'Sessions/Items für Export wählen', 'Nur bestätigte/korrigierte Items'],
                  ['2. Pseudonymisierung', 'Entfernung direkter Identifikatoren', 'UUID statt Schüler-ID'],
                  ['3. Format-Konvertierung', 'TrOCR/Llama/Generic Format', 'Nur notwendige Felder'],
                  ['4. Speicherung', 'Lokal in /app/ocr-exports/', 'Verschlüsselt, zugriffsbeschränkt'],
                ]}
              />
            </section>

            {/* Section 12: Betroffenenrechte */}
            <section id="section-12" className="mb-10 scroll-mt-32">
              <h2 className="text-2xl font-bold text-slate-800 mb-6 pb-2 border-b border-slate-200">
                12. Betroffenenrechte
              </h2>

              <h3 className="text-xl font-semibold text-slate-700 mb-3">12.1 Implementierte Rechte</h3>
              <Table
                headers={['Recht', 'Art. DSGVO', 'Umsetzung']}
                rows={[
                  ['Auskunft', '15', 'Schriftliche Anfrage an DSB'],
                  ['Berichtigung', '16', 'Korrektur falscher OCR-Ergebnisse'],
                  ['Löschung', '17', 'Nach Aufbewahrungsfrist oder auf Antrag'],
                  ['Einschränkung', '18', 'Sperrung der Verarbeitung auf Antrag'],
                  ['Datenportabilität', '20', 'Export eigener Daten in JSON'],
                  ['Widerspruch', '21', 'Opt-out von Training-Verwendung'],
                ]}
              />

              <h3 className="text-xl font-semibold text-slate-700 mt-6 mb-3">12.2 Sonderrechte bei KI-Training</h3>
              <Table
                headers={['Recht', 'Umsetzung']}
                rows={[
                  ['Widerspruch gegen Training', 'Daten werden nicht für Fine-Tuning verwendet'],
                  ['Löschung aus Trainingsset', '"Machine Unlearning" durch Re-Training ohne betroffene Daten'],
                ]}
              />
            </section>

            {/* Section 13: Schulung */}
            <section id="section-13" className="mb-10 scroll-mt-32">
              <h2 className="text-2xl font-bold text-slate-800 mb-6 pb-2 border-b border-slate-200">
                13. Schulung und Awareness
              </h2>

              <h3 className="text-xl font-semibold text-slate-700 mb-3">13.1 Schulungskonzept</h3>
              <Table
                headers={['Schulung', 'Zielgruppe', 'Frequenz', 'Dokumentation']}
                rows={[
                  ['DSGVO-Grundlagen', 'Alle Lehrkräfte', 'Jährlich', 'Teilnehmerliste'],
                  ['OCR-System-Nutzung', 'Nutzende Lehrkräfte', 'Bei Einführung', 'Zertifikat'],
                  ['KI-Kompetenz (AI Act Art. 4)', 'Alle Nutzenden', 'Jährlich', 'Nachweis'],
                ]}
              />
            </section>

            {/* Section 14: Review */}
            <section id="section-14" className="mb-10 scroll-mt-32">
              <h2 className="text-2xl font-bold text-slate-800 mb-6 pb-2 border-b border-slate-200">
                14. Review und Audit
              </h2>

              <h3 className="text-xl font-semibold text-slate-700 mb-3">14.1 Regelmäßige Überprüfungen</h3>
              <Table
                headers={['Prüfung', 'Frequenz', 'Verantwortlich']}
                rows={[
                  ['DSFA-Review', 'Jährlich', 'DSB'],
                  ['TOM-Wirksamkeit', 'Jährlich', 'IT-Administrator'],
                  ['Zugriffsrechte', 'Halbjährlich', 'IT-Administrator'],
                  ['Backup-Test', 'Halbjährlich', 'IT-Administrator'],
                  ['Modell-Bias-Prüfung', 'Jährlich', 'IT + Lehrkräfte'],
                ]}
              />

              <h3 className="text-xl font-semibold text-slate-700 mt-6 mb-3">14.2 Audit-Trail</h3>
              <Table
                headers={['Protokollierte Daten', 'Aufbewahrung', 'Format']}
                rows={[
                  ['Benutzeraktionen', '1 Jahr', 'PostgreSQL'],
                  ['Systemereignisse', '1 Jahr', 'Syslog'],
                  ['Sicherheitsvorfälle', '3 Jahre', 'Incident-Dokumentation'],
                ]}
              />
            </section>

            {/* Section 15: Vorfallmanagement */}
            <section id="section-15" className="mb-10 scroll-mt-32">
              <h2 className="text-2xl font-bold text-slate-800 mb-6 pb-2 border-b border-slate-200">
                15. Vorfallmanagement
              </h2>

              <h3 className="text-xl font-semibold text-slate-700 mb-3">15.1 Datenpannen-Prozess</h3>
              <CodeBlock>{`┌─────────────────────────────────────────────────────────────────────┐
│                    INCIDENT RESPONSE                                 │
├─────────────────────────────────────────────────────────────────────┤
│                                                                      │
│  Erkennung ──► Bewertung ──► Meldung ──► Eindämmung ──► Behebung   │
│      │            │            │             │              │       │
│      ▼            ▼            ▼             ▼              ▼       │
│  Monitoring    Risiko-     72h an LfD    Isolation      Ursachen-  │
│  Audit-Log    einschätzung  (Art.33)    Forensik       analyse    │
└─────────────────────────────────────────────────────────────────────┘`}</CodeBlock>

              <h3 className="text-xl font-semibold text-slate-700 mt-6 mb-3">15.2 Meldepflichten</h3>
              <Table
                headers={['Ereignis', 'Frist', 'Empfänger']}
                rows={[
                  ['Datenpanne mit Risiko', '72 Stunden', 'Landesbeauftragte/r für Datenschutz'],
                  ['Hohes Risiko für Betroffene', 'Unverzüglich', 'Betroffene Personen'],
                ]}
              />

              <h3 className="text-xl font-semibold text-slate-700 mt-6 mb-3">15.3 KI-spezifische Vorfälle</h3>
              <Table
                headers={['Vorfall', 'Reaktion']}
                rows={[
                  ['Systematisch falsche OCR-Ergebnisse', 'Modell-Rollback, Analyse'],
                  ['Bias-Erkennung', 'Untersuchung, ggf. Re-Training'],
                  ['Adversarial Attack', 'System-Isolierung, Forensik'],
                ]}
              />
            </section>

            {/* Section 16: Kontakte */}
            <section id="section-16" className="mb-10 scroll-mt-32">
              <h2 className="text-2xl font-bold text-slate-800 mb-6 pb-2 border-b border-slate-200">
                16. Kontakte
              </h2>

              <h3 className="text-xl font-semibold text-slate-700 mb-3">16.1 Interne Kontakte</h3>
              <Table
                headers={['Rolle', 'Name', 'Kontakt']}
                rows={[
                  ['Schulleitung', '[Name]', '[E-Mail]'],
                  ['IT-Administrator', '[Name]', '[E-Mail]'],
                  ['Datenschutzbeauftragter', '[Name]', '[E-Mail]'],
                ]}
              />

              <h3 className="text-xl font-semibold text-slate-700 mt-6 mb-3">16.2 Externe Kontakte</h3>
              <Table
                headers={['Institution', 'Kontakt']}
                rows={[
                  ['LfD Niedersachsen', 'poststelle@lfd.niedersachsen.de'],
                  ['BSI', 'bsi@bsi.bund.de'],
                ]}
              />
            </section>

            {/* Section 17: Voice Service DSGVO */}
            <section id="section-17" className="mb-10 scroll-mt-32">
              <h2 className="text-2xl font-bold text-slate-800 mb-6 pb-2 border-b border-slate-200">
                17. Voice Service DSGVO-Compliance
              </h2>

              <div className="bg-teal-50 border border-teal-200 rounded-lg p-4 mb-6">
                <p className="text-teal-800">
                  <strong>NEU:</strong> Das Voice Service implementiert eine Voice-First Schnittstelle fuer Lehrkraefte mit
                  PersonaPlex-7B (Full-Duplex Speech-to-Speech) und TaskOrchestrator (Agent-Orchestrierung).
                  <strong> Alle Audiodaten werden ausschliesslich transient im RAM verarbeitet und niemals persistiert.</strong>
                </p>
              </div>

              <div id="section-17-1" className="mb-6 scroll-mt-32">
                <h3 className="text-xl font-semibold text-slate-700 mb-3">17.1 Architektur & Datenfluss</h3>
                <CodeBlock>{`┌──────────────────────────────────────────────────────────────────┐
│                    LEHRERGERÄT (PWA / App)                        │
│  ┌────────────────────────────────────────────────────────────┐  │
│  │ VoiceCapture.tsx │ voice-encryption.ts │ voice-api.ts      │  │
│  │ Mikrofon         │ AES-256-GCM         │ WebSocket Client  │  │
│  └────────────────────────────────────────────────────────────┘  │
│  Namespace-Key: NIEMALS verlässt dieses Gerät                    │
└───────────────────────────┬──────────────────────────────────────┘
                            │ WebSocket (wss://) - verschlüsselt
                            ▼
┌──────────────────────────────────────────────────────────────────┐
│                    VOICE SERVICE (Port 8091)                      │
│  ┌────────────────────────────────────────────────────────────┐  │
│  │ TRANSIENT ONLY: Audio nur im RAM, nie persistiert!         │  │
│  │ Kein Klartext-PII: Nur Pseudonyme serverseitig erlaubt     │  │
│  └────────────────────────────────────────────────────────────┘  │
└───────────────────────────┬──────────────────────────────────────┘
                            │
         ┌──────────────────┼──────────────────┐
         ▼                  ▼                  ▼
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ PersonaPlex-7B  │ │ Ollama Fallback │ │ Valkey Cache    │
│ (A100 GPU)      │ │ (Mac Mini)      │ │ (nur Session-   │
│ Full-Duplex     │ │ Text-only       │ │ Metadaten)      │
└─────────────────┘ └─────────────────┘ └─────────────────┘`}</CodeBlock>
              </div>

              <div id="section-17-2" className="mb-6 scroll-mt-32">
                <h3 className="text-xl font-semibold text-slate-700 mb-3">17.2 Datenklassifizierung</h3>
                <Table
                  headers={['Datenklasse', 'Verarbeitung', 'Speicherort', 'Beispiele']}
                  rows={[
                    ['PII (Personenbezogen)', 'NUR auf Lehrergerät', 'Client-side IndexedDB', 'Schülernamen, Noten, Vorfälle'],
                    ['Pseudonyme', 'Server erlaubt', 'Valkey Cache', 'student_ref, class_ref'],
                    ['Content (Transkripte)', 'NUR verschlüsselt', 'Valkey (TTL 7d)', 'Voice-Transkripte'],
                    ['Audio-Daten', 'NIEMALS persistiert', 'NUR RAM (transient)', 'Sprachaufnahmen'],
                  ]}
                />
                <div className="bg-red-50 border border-red-200 rounded-lg p-4 mt-4">
                  <p className="text-red-800 font-medium">
                    <strong>KRITISCH:</strong> Audio-Daten dürfen unter keinen Umständen persistiert werden (AUDIO_PERSISTENCE=false).
                    Dies ist eine harte DSGVO-Anforderung zum Schutz der Privatsphäre.
                  </p>
                </div>
              </div>

              <div id="section-17-3" className="mb-6 scroll-mt-32">
                <h3 className="text-xl font-semibold text-slate-700 mb-3">17.3 Verschlüsselung</h3>
                <Table
                  headers={['Bereich', 'Verfahren', 'Key-Management']}
                  rows={[
                    ['Client-side Encryption', 'AES-256-GCM', 'Master-Key in IndexedDB (nie Server)'],
                    ['Key-Identifikation', 'SHA-256 Hash', 'Nur Hash wird zum Server gesendet'],
                    ['Transport', 'TLS 1.3 + WSS', 'Standard-Zertifikate'],
                    ['Namespace-Isolation', 'Pro-Lehrer-Namespace', 'Schlüssel verlässt nie das Gerät'],
                  ]}
                />
                <p className="text-slate-600 mt-4">
                  <strong>Wichtig:</strong> Der Server erhält niemals den Klartext-Schlüssel. Es wird nur ein SHA-256 Hash
                  zur Verifizierung übermittelt. Alle sensiblen Daten werden <em>vor</em> der Übertragung client-seitig verschlüsselt.
                </p>
              </div>

              <div id="section-17-4" className="mb-6 scroll-mt-32">
                <h3 className="text-xl font-semibold text-slate-700 mb-3">17.4 TTL & Automatische Löschung</h3>
                <Table
                  headers={['Datentyp', 'TTL', 'Löschung', 'Beschreibung']}
                  rows={[
                    ['Audio-Frames', '0 (keine Speicherung)', 'Sofort nach Verarbeitung', 'Nur transient im RAM'],
                    ['Voice-Transkripte', '7 Tage', 'Automatisch', 'Verschlüsselte Transkripte in Valkey'],
                    ['Task State', '30 Tage', 'Automatisch', 'Workflow-Daten (Draft, Queued, etc.)'],
                    ['Audit Logs', '90 Tage', 'Automatisch', 'Compliance-Nachweise (ohne PII)'],
                  ]}
                />
                <div className="bg-green-50 border border-green-200 rounded-lg p-4 mt-4">
                  <p className="text-green-800 font-medium">
                    <strong>Compliance:</strong> Die TTL-basierte Auto-Löschung ist durch Valkey-Mechanismen sichergestellt und
                    erfordert keine manuelle Intervention.
                  </p>
                </div>
              </div>

              <div id="section-17-5" className="mb-6 scroll-mt-32">
                <h3 className="text-xl font-semibold text-slate-700 mb-3">17.5 Audit-Logs (ohne PII)</h3>
                <p className="text-slate-600 mb-4">Audit-Logs enthalten ausschließlich nicht-personenbezogene Metadaten:</p>
                <Table
                  headers={['Erlaubt', 'Verboten']}
                  rows={[
                    ['ref_id (truncated hash)', 'user_name'],
                    ['content_type', 'content / transcript'],
                    ['size_bytes', 'email'],
                    ['ttl_hours', 'student_name'],
                    ['timestamp', 'Klartext-Audio'],
                  ]}
                />
                <CodeBlock>{`// Beispiel: Erlaubter Audit-Log-Eintrag
{
  "ref_id": "abc123...",      // truncated
  "content_type": "transcript",
  "size_bytes": 1234,
  "ttl_hours": 168,           // 7 Tage
  "timestamp": "2026-01-26T10:30:00Z"
}

// VERBOTEN:
// user_name, content, transcript, email, student_name, audio_data`}</CodeBlock>
              </div>
            </section>

            {/* Section 18: BQAS Lokaler Scheduler */}
            <section id="section-18" className="mb-10 scroll-mt-32">
              <h2 className="text-2xl font-bold text-slate-800 mb-6 pb-2 border-b border-slate-200">
                18. BQAS Lokaler Scheduler (QA-System)
              </h2>

              <div id="section-18-1" className="mb-6 scroll-mt-32">
                <h3 className="text-xl font-semibold text-slate-700 mb-3">18.1 GitHub Actions Alternative</h3>
                <p className="text-slate-600 mb-4">
                  Das BQAS (Breakpilot Quality Assurance System) nutzt einen <strong>lokalen Scheduler</strong> anstelle von GitHub Actions.
                  Dies gewährleistet, dass <strong>keine Testdaten oder Ergebnisse</strong> an externe Cloud-Dienste übertragen werden.
                </p>
                <Table
                  headers={['Feature', 'GitHub Actions', 'Lokaler Scheduler', 'DSGVO-Relevanz']}
                  rows={[
                    ['Tägliche Tests', 'schedule: cron', 'macOS launchd', 'Keine Datenübertragung'],
                    ['Push-Tests', 'on: push (Cloud)', 'Git post-commit Hook (lokal)', 'Keine Datenübertragung'],
                    ['PR-Tests', 'on: pull_request', 'Nicht verfügbar', '-'],
                    ['Benachrichtigungen', 'GitHub Issues (US)', 'Desktop/Slack/Email', 'Konfigurierbar'],
                    ['Datenverarbeitung', 'GitHub Server (US)', '100% lokal', 'DSGVO-konform'],
                  ]}
                />
              </div>

              <div id="section-18-2" className="mb-6 scroll-mt-32">
                <h3 className="text-xl font-semibold text-slate-700 mb-3">18.2 Datenschutz-Vorteile</h3>
                <div className="bg-green-50 border border-green-200 rounded-lg p-4 mb-4">
                  <p className="text-green-800 font-medium">
                    <strong>DSGVO-Konformität:</strong> Der lokale Scheduler verarbeitet alle Testdaten ausschließlich auf dem schuleigenen Mac Mini.
                    Es erfolgt keine Übertragung von Schülerdaten, Testergebnissen oder Modell-Outputs an externe Server.
                  </p>
                </div>
                <Table
                  headers={['Aspekt', 'Umsetzung']}
                  rows={[
                    ['Verarbeitungsort', '100% auf lokalem Mac Mini'],
                    ['Drittlandübermittlung', 'Keine'],
                    ['Cloud-Abhängigkeit', 'Keine - vollständig offline-fähig'],
                    ['Testdaten', 'Verbleiben lokal, keine Synchronisation'],
                    ['Logs', '/var/log/bqas/ - lokal, ohne PII'],
                  ]}
                />
              </div>

              <div id="section-18-3" className="mb-6 scroll-mt-32">
                <h3 className="text-xl font-semibold text-slate-700 mb-3">18.3 Komponenten</h3>
                <p className="text-slate-600 mb-4">Der lokale Scheduler besteht aus folgenden Komponenten:</p>
                <Table
                  headers={['Komponente', 'Beschreibung', 'Datenschutz']}
                  rows={[
                    ['run_bqas.sh', 'Hauptscript für Test-Ausführung', 'Keine Netzwerk-Calls außer lokalem API'],
                    ['launchd Job', 'macOS-nativer Scheduler (07:00 täglich)', 'System-Level, keine Cloud'],
                    ['Git Hook', 'post-commit für automatische Quick-Tests', 'Rein lokal'],
                    ['Notifier', 'Benachrichtigungsmodul (Python)', 'Desktop lokal, Slack/Email optional'],
                    ['LLM Judge', 'Qwen2.5-32B via lokalem Ollama', 'Keine externe API'],
                    ['RAG Judge', 'Korrektur-Evaluierung lokal', 'Keine externe API'],
                  ]}
                />
                <CodeBlock>{`# Dateistruktur
voice-service/
├── scripts/
│   ├── run_bqas.sh              # Haupt-Runner
│   ├── install_bqas_scheduler.sh # Installation
│   ├── com.breakpilot.bqas.plist # launchd Template
│   └── post-commit.hook         # Git Hook
│
└── bqas/
    ├── judge.py                 # LLM Judge
    ├── rag_judge.py             # RAG Judge
    ├── notifier.py              # Benachrichtigungen
    └── regression_tracker.py    # Score-Historie`}</CodeBlock>
              </div>

              <div id="section-18-4" className="mb-6 scroll-mt-32">
                <h3 className="text-xl font-semibold text-slate-700 mb-3">18.4 Datenverarbeitung</h3>
                <p className="text-slate-600 mb-4">Folgende Daten werden während der Test-Ausführung verarbeitet:</p>
                <Table
                  headers={['Datentyp', 'Verarbeitung', 'Speicherung', 'Löschung']}
                  rows={[
                    ['Test-Inputs (Golden Suite)', 'Lokal via pytest', 'Im Speicher während Test', 'Nach Test-Ende'],
                    ['LLM-Antworten', 'Lokales Ollama', 'Temporär im Speicher', 'Nach Bewertung'],
                    ['Test-Ergebnisse', 'SQLite DB', 'bqas_history.db (lokal)', 'Nach Konfiguration'],
                    ['Logs', 'Dateisystem', '/var/log/bqas/', 'Manuelle Rotation'],
                    ['Benachrichtigungen', 'Log + Optional Slack/Email', 'notifications.log', 'Manuelle Rotation'],
                  ]}
                />
                <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 mt-4">
                  <p className="text-amber-800">
                    <strong>Wichtig:</strong> Die Test-Inputs (Golden Suite YAML-Dateien) enthalten <strong>keine echten Schülerdaten</strong>,
                    sondern ausschließlich synthetische Beispiele zur Qualitätssicherung der Intent-Erkennung und RAG-Funktionalität.
                  </p>
                </div>
              </div>

              <div id="section-18-5" className="mb-6 scroll-mt-32">
                <h3 className="text-xl font-semibold text-slate-700 mb-3">18.5 Benachrichtigungen</h3>
                <p className="text-slate-600 mb-4">Das Notifier-Modul unterstützt verschiedene Benachrichtigungskanäle:</p>
                <Table
                  headers={['Kanal', 'Standard', 'Konfiguration', 'Datenschutz-Hinweis']}
                  rows={[
                    ['Desktop (macOS)', 'Aktiviert', 'BQAS_NOTIFY_DESKTOP=true', 'Rein lokal, keine Übertragung'],
                    ['Log-Datei', 'Immer', '/var/log/bqas/notifications.log', 'Lokal, nur Metadaten'],
                    ['Slack Webhook', 'Deaktiviert', 'BQAS_NOTIFY_SLACK=true', 'Externe Übertragung - nur Status, keine PII'],
                    ['E-Mail', 'Deaktiviert', 'BQAS_NOTIFY_EMAIL=true', 'Via lokalen Mailserver möglich'],
                  ]}
                />
                <p className="text-slate-600 mt-4 mb-2"><strong>Empfohlene Konfiguration für maximale Datenschutz-Konformität:</strong></p>
                <CodeBlock>{`# Nur lokale Benachrichtigungen (Standard)
BQAS_NOTIFY_DESKTOP=true
BQAS_NOTIFY_SLACK=false
BQAS_NOTIFY_EMAIL=false

# Benachrichtigungs-Inhalt (ohne PII):
# - Status: success/failure/warning
# - Anzahl bestandener/fehlgeschlagener Tests
# - Test-IDs (keine Schülernamen oder Inhalte)`}</CodeBlock>
              </div>
            </section>

            {/* Anhänge */}
            <section className="mb-10">
              <h2 className="text-2xl font-bold text-slate-800 mb-6 pb-2 border-b border-slate-200">
                Anhänge
              </h2>

              <h3 className="text-xl font-semibold text-slate-700 mb-3">Anhang B: TOM-Checkliste</h3>
              <Table
                headers={['Kategorie', 'Maßnahme', 'Status']}
                rows={[
                  ['Zutrittskontrolle', 'Serverraum verschlossen', '✓'],
                  ['Zugangskontrolle', 'Passwort-Policy', '✓'],
                  ['Zugriffskontrolle', 'RBAC implementiert', '✓'],
                  ['Weitergabekontrolle', 'Netzwerkisolation', '✓'],
                  ['Eingabekontrolle', 'Audit-Logging', '✓'],
                  ['Verfügbarkeit', 'Backup + USV', '✓'],
                  ['Trennungskontrolle', 'Mandantentrennung', '✓'],
                  ['Verschlüsselung', 'FileVault + TLS', '✓'],
                ]}
              />

              <h3 className="text-xl font-semibold text-slate-700 mt-6 mb-3">Anhang E: Vendor-Dokumentation</h3>
              <ul className="list-disc list-inside text-slate-600 space-y-1 ml-4">
                <li><strong>llama3.2-vision:</strong> https://llama.meta.com/</li>
                <li><strong>TrOCR:</strong> https://github.com/microsoft/unilm/tree/master/trocr</li>
                <li><strong>Ollama:</strong> https://ollama.ai/</li>
                <li><strong>PersonaPlex-7B:</strong> https://developer.nvidia.com (MIT + NVIDIA Open Model License)</li>
                <li><strong>TaskOrchestrator:</strong> Proprietary - Agent-Orchestrierung</li>
                <li><strong>Mimi Codec:</strong> MIT License - 24kHz Audio, 80ms Frames</li>
              </ul>

              <h3 className="text-xl font-semibold text-slate-700 mt-6 mb-3">Anhang F: Voice Service TOM</h3>
              <Table
                headers={['Maßnahme', 'Umsetzung', 'Status']}
                rows={[
                  ['Audio-Persistenz verboten', 'AUDIO_PERSISTENCE=false (zwingend)', '✓'],
                  ['Client-side Encryption', 'AES-256-GCM vor Übertragung', '✓'],
                  ['Namespace-Isolation', 'Pro-Lehrer-Schlüssel', '✓'],
                  ['TTL-basierte Löschung', 'Valkey mit automatischem Expire', '✓'],
                  ['Transport-Verschlüsselung', 'TLS 1.3 + WSS', '✓'],
                  ['Audit ohne PII', 'Nur Metadaten protokolliert', '✓'],
                  ['Key-Hash statt Klartext', 'SHA-256 Hash zum Server', '✓'],
                ]}
              />
            </section>

            {/* Footer */}
            <div className="border-t-2 border-slate-200 pt-6 mt-10 text-center text-slate-500 text-sm">
              <p><strong>Dokumentende</strong></p>
              <p className="mt-2">Diese Dokumentation wird jährlich oder bei wesentlichen Änderungen aktualisiert.</p>
              <p className="mt-1">Letzte Aktualisierung: 26. Januar 2026</p>
            </div>
          </div>
        </main>
      </div>
    </AdminLayout>
  )
}