/**
 * Section 16: Kontakte
 * Section 17: Voice Service DSGVO-Compliance
 */

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

export function KontakteAndVoice() {
  return (
    <>
      {/* Section 16 */}
      <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 */}
      <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>
    </>
  )
}
