'use client'

export function TabArchitecture() {
  return (
    <div className="space-y-6">
      {/* Architecture Diagram */}
      <ArchitectureDiagram />

      {/* Components */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <ComponentCard
          icon="🔍"
          title="TrOCR Service"
          description="Das TrOCR-Modell von Microsoft ist speziell fuer Handschrifterkennung trainiert. Es verwendet eine Vision-Transformer (ViT) Architektur fuer Bildverarbeitung und einen Text-Decoder fuer die Textgenerierung."
          specs={[
            { label: 'Modell', value: 'microsoft/trocr-base-handwritten' },
            { label: 'Groesse', value: '~350 MB' },
            { label: 'Lizenz', value: 'MIT' },
            { label: 'Framework', value: 'PyTorch / Transformers' },
          ]}
        />
        <ComponentCard
          icon="🎯"
          title="LoRA Fine-Tuning"
          description="LoRA fuegt kleine, trainierbare Matrizen zu bestimmten Schichten hinzu, ohne das Basismodell zu veraendern. Dies ermoeglicht effizientes Fine-Tuning mit minimaler Speichernutzung."
          specs={[
            { label: 'Methode', value: 'Low-Rank Adaptation' },
            { label: 'Adapter-Groesse', value: '~10 MB' },
            { label: 'Trainingszeit', value: '5-15 Min (CPU)' },
            { label: 'Min. Beispiele', value: '10' },
          ]}
        />
        <ComponentCard
          icon="🔒"
          title="Pseudonymisierung"
          description="Schuelernamen werden durch anonyme Tokens ersetzt, bevor Daten die lokale Umgebung verlassen. Das Mapping wird ausschliesslich lokal gespeichert."
          specs={[
            { label: 'Methode', value: 'QR-Code Tokens' },
            { label: 'Token-Format', value: 'UUID v4' },
            { label: 'Mapping', value: 'Lokal beim Lehrer' },
            { label: 'Cloud-Daten', value: 'Nur Tokens + Text' },
          ]}
        />
        <ComponentCard
          icon="☁️"
          title="Cloud LLM"
          description="Die KI-Korrektur erfolgt auf deutschen Servern mit strikter Mandantentrennung. Es werden keine Klarnamen oder identifizierenden Informationen uebertragen."
          specs={[
            { label: 'Provider', value: 'SysEleven (DE)' },
            { label: 'Standort', value: 'Deutschland' },
            { label: 'Isolation', value: 'Namespace pro Schule' },
            { label: 'Datenverarbeitung', value: 'Nur pseudonymisiert' },
          ]}
        />
      </div>

      {/* Data Flow */}
      <DataFlowCard />
    </div>
  )
}

/* ------------------------------------------------------------------ */

function ArchitectureDiagram() {
  return (
    <div className="bg-white rounded-xl shadow-sm border p-6">
      <h2 className="text-lg font-semibold text-slate-900 mb-6">Systemarchitektur</h2>

      <div className="bg-slate-900 rounded-lg p-6 font-mono text-xs overflow-x-auto">
        <pre className="text-slate-300">
{`┌─────────────────────────────────────────────────────────────────────────────┐
│                          MAGIC HELP ARCHITEKTUR                              │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                             │
│  ┌───────────────┐         ┌──────────────────┐         ┌───────────────┐  │
│  │   FRONTEND    │         │    BACKEND       │         │    STORAGE    │  │
│  │   (Next.js)   │         │    (FastAPI)     │         │               │  │
│  │               │         │                  │         │               │  │
│  │  ┌─────────┐  │  REST   │  ┌────────────┐  │         │  ┌─────────┐  │  │
│  │  │ Admin   │──┼─────────┼──│ TrOCR      │  │         │  │ Models  │  │  │
│  │  │ Panel   │  │         │  │ Service    │──┼─────────┼──│ (ONNX)  │  │  │
│  │  └─────────┘  │         │  └────────────┘  │         │  └─────────┘  │  │
│  │               │         │        │         │         │               │  │
│  │  ┌─────────┐  │  WebSocket│  ┌────────────┐  │         │  ┌─────────┐  │  │
│  │  │ Lehrer  │──┼─────────┼──│ Klausur    │  │         │  │ LoRA    │  │  │
│  │  │ Portal  │  │         │  │ Processor  │──┼─────────┼──│ Adapter │  │  │
│  │  └─────────┘  │         │  └────────────┘  │         │  └─────────┘  │  │
│  │               │         │        │         │         │               │  │
│  └───────────────┘         │  ┌────────────┐  │         │  ┌─────────┐  │  │
│                            │  │ Pseudo-    │  │         │  │Training │  │  │
│                            │  │ nymizer    │──┼─────────┼──│ Data    │  │  │
│                            │  └────────────┘  │         │  └─────────┘  │  │
│                            │                  │         │               │  │
│                            └──────────────────┘         └───────────────┘  │
│                                     │                                      │
│                                     │ (nur pseudonymisiert)                │
│                                     ▼                                      │
│                            ┌──────────────────┐                            │
│                            │  CLOUD LLM       │                            │
│                            │  (SysEleven)     │                            │
│                            │  Namespace-      │                            │
│                            │  Isolation       │                            │
│                            └──────────────────┘                            │
│                                                                             │
└─────────────────────────────────────────────────────────────────────────────┘`}
        </pre>
      </div>
    </div>
  )
}

interface ComponentCardProps {
  icon: string
  title: string
  description: string
  specs: Array<{ label: string; value: string }>
}

function ComponentCard({ icon, title, description, specs }: ComponentCardProps) {
  return (
    <div className="bg-white rounded-xl shadow-sm border p-6">
      <h3 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
        <span>{icon}</span> {title}
      </h3>
      <div className="space-y-3 text-sm">
        {specs.map((spec) => (
          <div key={spec.label} className="flex justify-between">
            <span className="text-slate-500">{spec.label}</span>
            <span className="text-slate-900">{spec.value}</span>
          </div>
        ))}
      </div>
      <p className="text-slate-500 text-sm mt-4">{description}</p>
    </div>
  )
}

const DATA_FLOW_STEPS = [
  {
    num: 1,
    color: 'bg-blue-100 text-blue-600',
    title: 'Lokale Header-Extraktion',
    desc: 'TrOCR erkennt Schuelernamen, Klasse und Fach direkt im Browser/PWA (offline-faehig)',
  },
  {
    num: 2,
    color: 'bg-purple-100 text-purple-600',
    title: 'Pseudonymisierung',
    desc: 'Namen werden durch QR-Code Tokens ersetzt, Mapping bleibt lokal',
  },
  {
    num: 3,
    color: 'bg-green-100 text-green-600',
    title: 'Cloud-Korrektur',
    desc: 'Nur pseudonymisierte Dokument-Tokens werden an die KI gesendet',
  },
  {
    num: 4,
    color: 'bg-yellow-100 text-yellow-600',
    title: 'Re-Identifikation',
    desc: 'Ergebnisse werden lokal mit dem Mapping wieder den echten Namen zugeordnet',
  },
]

function DataFlowCard() {
  return (
    <div className="bg-white rounded-xl shadow-sm border p-6">
      <h2 className="text-lg font-semibold text-slate-900 mb-4">Datenfluss</h2>
      <div className="space-y-4">
        {DATA_FLOW_STEPS.map((step) => (
          <div key={step.num} className="flex items-start gap-4 bg-slate-50 rounded-lg p-4">
            <div className={`w-8 h-8 rounded-full ${step.color} flex items-center justify-center font-bold`}>
              {step.num}
            </div>
            <div>
              <div className="font-medium text-slate-900">{step.title}</div>
              <div className="text-sm text-slate-500">{step.desc}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}