/**
 * Section 4: Datenschutz-Folgenabschaetzung (Art. 35 DSGVO)
 * Subsections: 4.1-4.5
 */

import { Table } from '../Table'
import { CodeBlock } from '../CodeBlock'

export function DatenschutzFolgen() {
  return (
    <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>
  )
}
