import { CodeBlock } from '@/components/DevPortalLayout'

export function RagKeySharingSection() {
  return (
    <>
      <h2 id="rag-pipeline">8. RAG-Pipeline: KI-Verarbeitung mit Kundenkontext</h2>
      <p>
        Die KI nutzt die vom Kunden hochgeladenen Referenzdokumente als Wissensbasis.
        Dieser Prozess heisst <strong>RAG (Retrieval Augmented Generation)</strong>.
      </p>

      <h3>8.1 Indexierung der Referenzdokumente</h3>
      <CodeBlock language="text" filename="Indexierung: Vom Upload zum durchsuchbaren Referenzdokument">
{`Referenzdokument (verschluesselt auf Server)
     |
     v
┌────────────────────────────────────┐
│  1. Passphrase-Verifikation        │  ← SDK sendet Schluessel-Hash
└──────────┬─────────────────────────┘
           v
┌────────────────────────────────────┐
│  2. Entschluesselung               │  ← Temporaer im Arbeitsspeicher
└──────────┬─────────────────────────┘
           v
┌────────────────────────────────────┐
│  3. Text-Extraktion                │  ← PDF → Klartext
└──────────┬─────────────────────────┘
           v
┌────────────────────────────────────┐
│  4. Chunking                       │  ← ~1.000-Zeichen-Abschnitte
└──────────┬─────────────────────────┘
           v
┌────────────────────────────────────┐
│  5. Embedding                      │  ← Text → 1.536 Zahlen
└──────────┬─────────────────────────┘
           v
┌────────────────────────────────────┐
│  6. Re-Encryption                  │  ← Jeder Chunk wird erneut verschluesselt
└──────────┬─────────────────────────┘
           v
┌────────────────────────────────────┐
│  7. Qdrant-Indexierung              │  ← Vektor + verschluesselter Chunk
│  tenant_id: "firma-alpha-001"      │     mit Tenant-Filter gespeichert
│  training_allowed: false           │
└────────────────────────────────────┘`}
      </CodeBlock>

      <h3>8.2 Wie die KI eine Anfrage bearbeitet (RAG-Query)</h3>
      <ol>
        <li><strong>Anfrage formulieren:</strong> Das SDK sendet eine Suchanfrage mit dem zu verarbeitenden Dokument.</li>
        <li><strong>Semantische Suche:</strong> Die Anfrage wird in einen Vektor umgewandelt und gegen die Referenz-Vektoren in Qdrant gesucht -- <em>nur im Namespace des Kunden</em>.</li>
        <li><strong>Entschluesselung:</strong> Die gefundenen Chunks werden mit der Passphrase des Kunden entschluesselt.</li>
        <li><strong>KI-Antwort:</strong> Die entschluesselten Referenzpassagen werden als Kontext an die KI uebergeben.</li>
      </ol>

      <h2 id="key-sharing">9. Key Sharing: Zusammenarbeit ermoeglichen</h2>
      <p>
        Das Key-Sharing-System ermoeglicht es dem Eigentuemer, seinen Namespace sicher mit
        anderen zu teilen (z.B. fuer Vier-Augen-Prinzip, Qualitaetskontrolle oder externe Audits).
      </p>

      <h3>9.1 Einladungs-Workflow</h3>
      <CodeBlock language="text" filename="Key Sharing: Sicheres Teilen zwischen Bearbeitern">
{`Eigentuemer                        Server                     Eingeladener
     │                                │                             │
     │  1. Einladung senden            │                             │
     │─────────────────────────────────▶                             │
     │                                │  2. Einladung erstellt       │
     │                                │     (14 Tage gueltig)        │
     │                                │  3. Benachrichtigung ──────▶│
     │                                │                 4. Einladung annehmen
     │                                │◀─────────────────────────────│
     │                                │  5. Key-Share erstellt       │
     │                                │  6. Eingeladener kann ──────▶│
     │                                │     Daten im Namespace        │
     │                                │     abfragen                 │
     │  7. Zugriff widerrufen          │                             │
     │─────────────────────────────────▶  Share deaktiviert          │`}
      </CodeBlock>

      <h3>9.2 Rollen beim Key-Sharing</h3>
      <div className="not-prose my-4 overflow-x-auto">
        <table className="min-w-full divide-y divide-gray-200 text-sm">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Rolle</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Typischer Nutzer</th>
              <th className="px-4 py-3 text-left font-medium text-gray-500">Rechte</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-200">
            <tr><td className="px-4 py-3 font-medium">Owner</td><td className="px-4 py-3">Projektverantwortlicher</td><td className="px-4 py-3">Vollzugriff, kann teilen &amp; widerrufen</td></tr>
            <tr><td className="px-4 py-3 font-medium">Reviewer</td><td className="px-4 py-3">Qualitaetssicherung</td><td className="px-4 py-3">Lesen, RAG-Queries, eigene Anmerkungen</td></tr>
            <tr><td className="px-4 py-3 font-medium">Auditor</td><td className="px-4 py-3">Externer Pruefer</td><td className="px-4 py-3">Nur Lesen (Aufsichtsfunktion)</td></tr>
          </tbody>
        </table>
      </div>
    </>
  )
}