'use client'

/**
 * Magic Help Admin Page - Admin v2 Migration
 *
 * Comprehensive admin interface for TrOCR Handwriting Recognition and Exam Correction.
 * Features:
 * - Model status monitoring
 * - OCR testing with image upload
 * - Training data management
 * - Fine-tuning controls
 * - Architecture documentation
 * - Configuration settings
 *
 * Phase 1 Enhancements:
 * - Clipboard Paste (Ctrl+V) support
 * - Global Drag & Drop anywhere on window
 * - Skeleton loading states
 * - Live OCR preview with debounce
 * - Keyboard shortcuts
 *
 * Phase 2-4 Enhancements:
 * - Batch processing with SSE progress
 * - Confidence heatmap visualization
 * - Training metrics dashboard
 * - Model export functionality
 */

import { useState, useEffect, useCallback, useRef } from 'react'
import Link from 'next/link'
import { SkeletonOCRResult, SkeletonText, SkeletonDots } from '@/components/common/SkeletonText'
import { ConfidenceHeatmap, ConfidenceStats } from '@/components/ai/ConfidenceHeatmap'
import { TrainingMetrics } from '@/components/ai/TrainingMetrics'
import { BatchUploader } from '@/components/ai/BatchUploader'
import { AIModuleSidebarResponsive } from '@/components/ai/AIModuleSidebar'
import { PagePurpose } from '@/components/common/PagePurpose'

type TabId = 'overview' | 'test' | 'batch' | 'training' | 'architecture' | 'settings'

interface TrOCRStatus {
  status: 'available' | 'not_installed' | 'error'
  model_name?: string
  model_id?: string
  device?: string
  is_loaded?: boolean
  has_lora_adapter?: boolean
  training_examples_count?: number
  error?: string
  install_command?: string
}

interface OCRResult {
  text: string
  confidence: number
  processing_time_ms: number
  model: string
  has_lora_adapter: boolean
  char_confidences?: number[]
  word_boxes?: Array<{ text: string; confidence: number; bbox: number[] }>
}

interface TrainingExample {
  image_path: string
  ground_truth: string
  teacher_id: string
  created_at: string
}

interface MagicSettings {
  autoDetectLines: boolean
  confidenceThreshold: number
  maxImageSize: number
  loraRank: number
  loraAlpha: number
  learningRate: number
  epochs: number
  batchSize: number
  enableCache: boolean
  cacheMaxAge: number
  livePreview: boolean
  soundFeedback: boolean
}

const DEFAULT_SETTINGS: MagicSettings = {
  autoDetectLines: true,
  confidenceThreshold: 0.7,
  maxImageSize: 4096,
  loraRank: 8,
  loraAlpha: 32,
  learningRate: 0.00005,
  epochs: 3,
  batchSize: 4,
  enableCache: true,
  cacheMaxAge: 3600,
  livePreview: true,
  soundFeedback: false,
}

export default function MagicHelpPage() {
  const [activeTab, setActiveTab] = useState<TabId>('overview')
  const [status, setStatus] = useState<TrOCRStatus | null>(null)
  const [loading, setLoading] = useState(true)
  const [ocrResult, setOcrResult] = useState<OCRResult | null>(null)
  const [ocrLoading, setOcrLoading] = useState(false)
  const [examples, setExamples] = useState<TrainingExample[]>([])
  const [trainingImage, setTrainingImage] = useState<File | null>(null)
  const [trainingText, setTrainingText] = useState('')
  const [fineTuning, setFineTuning] = useState(false)
  const [settings, setSettings] = useState<MagicSettings>(DEFAULT_SETTINGS)
  const [settingsSaved, setSettingsSaved] = useState(false)

  // Phase 1: New state for enhanced features
  const [globalDragActive, setGlobalDragActive] = useState(false)
  const [uploadedImage, setUploadedImage] = useState<File | null>(null)
  const [imagePreview, setImagePreview] = useState<string | null>(null)
  const [showShortcutHint, setShowShortcutHint] = useState(false)
  const debounceTimer = useRef<NodeJS.Timeout | null>(null)
  const dragCounter = useRef(0)

  // Use same-origin nginx proxy to avoid CORS issues
  const API_BASE = '/klausur-api'

  const fetchStatus = useCallback(async () => {
    try {
      const res = await fetch(`${API_BASE}/api/klausur/trocr/status`)
      const data = await res.json()
      setStatus(data)
    } catch {
      setStatus({ status: 'error', error: 'Failed to fetch status' })
    } finally {
      setLoading(false)
    }
  }, [API_BASE])

  const fetchExamples = useCallback(async () => {
    try {
      const res = await fetch(`${API_BASE}/api/klausur/trocr/training/examples`)
      const data = await res.json()
      setExamples(data.examples || [])
    } catch (error) {
      console.error('Failed to fetch examples:', error)
    }
  }, [API_BASE])

  // Phase 1: Live OCR with debounce
  const triggerOCR = useCallback(async (file: File) => {
    setOcrLoading(true)
    setOcrResult(null)

    const formData = new FormData()
    formData.append('file', file)

    try {
      const res = await fetch(`${API_BASE}/api/klausur/trocr/extract?detect_lines=${settings.autoDetectLines}`, {
        method: 'POST',
        body: formData,
      })
      const data = await res.json()
      if (data.text !== undefined) {
        setOcrResult(data)
        // Play sound feedback if enabled
        if (settings.soundFeedback && data.confidence > 0.7) {
          playSuccessSound()
        }
      } else {
        setOcrResult({ text: `Error: ${data.detail || 'Unknown error'}`, confidence: 0, processing_time_ms: 0, model: '', has_lora_adapter: false })
      }
    } catch (error) {
      setOcrResult({ text: `Error: ${error}`, confidence: 0, processing_time_ms: 0, model: '', has_lora_adapter: false })
    } finally {
      setOcrLoading(false)
    }
  }, [API_BASE, settings.autoDetectLines, settings.soundFeedback])

  // Play subtle success sound
  const playSuccessSound = () => {
    try {
      const audioContext = new (window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext)()
      const oscillator = audioContext.createOscillator()
      const gainNode = audioContext.createGain()

      oscillator.connect(gainNode)
      gainNode.connect(audioContext.destination)

      oscillator.frequency.value = 800
      oscillator.type = 'sine'
      gainNode.gain.setValueAtTime(0.1, audioContext.currentTime)
      gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.2)

      oscillator.start(audioContext.currentTime)
      oscillator.stop(audioContext.currentTime + 0.2)
    } catch {
      // Audio not supported, ignore
    }
  }

  // Handle file upload with live preview
  const handleFileUpload = useCallback((file: File) => {
    if (!file.type.startsWith('image/')) return

    setUploadedImage(file)

    // Create preview URL
    const previewUrl = URL.createObjectURL(file)
    setImagePreview(previewUrl)

    // Auto-switch to test tab if not there
    setActiveTab('test')

    // Live preview: trigger OCR with debounce
    if (settings.livePreview) {
      if (debounceTimer.current) {
        clearTimeout(debounceTimer.current)
      }
      debounceTimer.current = setTimeout(() => {
        triggerOCR(file)
      }, 500)
    }
  }, [settings.livePreview, triggerOCR])

  // Manual OCR trigger
  const handleManualOCR = () => {
    if (uploadedImage) {
      triggerOCR(uploadedImage)
    }
  }

  // Phase 1: Global Drag & Drop handler
  useEffect(() => {
    const handleDragEnter = (e: DragEvent) => {
      e.preventDefault()
      e.stopPropagation()
      dragCounter.current++
      if (e.dataTransfer?.types.includes('Files')) {
        setGlobalDragActive(true)
      }
    }

    const handleDragLeave = (e: DragEvent) => {
      e.preventDefault()
      e.stopPropagation()
      dragCounter.current--
      if (dragCounter.current === 0) {
        setGlobalDragActive(false)
      }
    }

    const handleDragOver = (e: DragEvent) => {
      e.preventDefault()
      e.stopPropagation()
    }

    const handleDrop = (e: DragEvent) => {
      e.preventDefault()
      e.stopPropagation()
      dragCounter.current = 0
      setGlobalDragActive(false)

      const file = e.dataTransfer?.files[0]
      if (file?.type.startsWith('image/')) {
        handleFileUpload(file)
      }
    }

    document.addEventListener('dragenter', handleDragEnter)
    document.addEventListener('dragleave', handleDragLeave)
    document.addEventListener('dragover', handleDragOver)
    document.addEventListener('drop', handleDrop)

    return () => {
      document.removeEventListener('dragenter', handleDragEnter)
      document.removeEventListener('dragleave', handleDragLeave)
      document.removeEventListener('dragover', handleDragOver)
      document.removeEventListener('drop', handleDrop)
    }
  }, [handleFileUpload])

  // Phase 1: Clipboard paste handler (Ctrl+V)
  useEffect(() => {
    const handlePaste = async (e: ClipboardEvent) => {
      const items = e.clipboardData?.items
      if (!items) return

      for (const item of items) {
        if (item.type.startsWith('image/')) {
          e.preventDefault()
          const file = item.getAsFile()
          if (file) {
            handleFileUpload(file)
          }
          break
        }
      }
    }

    document.addEventListener('paste', handlePaste)
    return () => document.removeEventListener('paste', handlePaste)
  }, [handleFileUpload])

  // Phase 1: Keyboard shortcuts
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      // Ctrl+Enter: Start OCR
      if (e.ctrlKey && e.key === 'Enter' && uploadedImage) {
        e.preventDefault()
        handleManualOCR()
      }

      // Tab: Switch tabs (with numbers 1-6)
      if (e.key >= '1' && e.key <= '6' && e.altKey) {
        e.preventDefault()
        const tabIndex = parseInt(e.key) - 1
        const tabIds: TabId[] = ['overview', 'test', 'batch', 'training', 'architecture', 'settings']
        if (tabIds[tabIndex]) {
          setActiveTab(tabIds[tabIndex])
        }
      }

      // Escape: Clear uploaded image
      if (e.key === 'Escape' && uploadedImage) {
        setUploadedImage(null)
        setImagePreview(null)
        setOcrResult(null)
      }

      // ? : Show shortcuts
      if (e.key === '?') {
        setShowShortcutHint(prev => !prev)
      }
    }

    document.addEventListener('keydown', handleKeyDown)
    return () => document.removeEventListener('keydown', handleKeyDown)
  }, [uploadedImage])

  useEffect(() => {
    fetchStatus()
    fetchExamples()
    // Load settings from localStorage
    const saved = localStorage.getItem('magic-help-settings')
    if (saved) {
      try {
        setSettings({ ...DEFAULT_SETTINGS, ...JSON.parse(saved) })
      } catch {
        // ignore parse errors
      }
    }
  }, [fetchStatus, fetchExamples])

  // Cleanup preview URL
  useEffect(() => {
    return () => {
      if (imagePreview) {
        URL.revokeObjectURL(imagePreview)
      }
    }
  }, [imagePreview])

  const handleAddTrainingExample = async () => {
    if (!trainingImage || !trainingText.trim()) {
      alert('Please provide both an image and the correct text')
      return
    }

    const formData = new FormData()
    formData.append('file', trainingImage)

    try {
      const res = await fetch(`${API_BASE}/api/klausur/trocr/training/add?ground_truth=${encodeURIComponent(trainingText)}`, {
        method: 'POST',
        body: formData,
      })
      const data = await res.json()
      if (data.example_id) {
        alert(`Training example added! Total: ${data.total_examples}`)
        setTrainingImage(null)
        setTrainingText('')
        fetchStatus()
        fetchExamples()
      } else {
        alert(`Error: ${data.detail || 'Unknown error'}`)
      }
    } catch (error) {
      alert(`Error: ${error}`)
    }
  }

  const handleFineTune = async () => {
    if (!confirm('Start fine-tuning? This may take several minutes.')) return

    setFineTuning(true)
    try {
      const res = await fetch(`${API_BASE}/api/klausur/trocr/training/fine-tune`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          epochs: settings.epochs,
          learning_rate: settings.learningRate,
          lora_rank: settings.loraRank,
          lora_alpha: settings.loraAlpha,
        }),
      })
      const data = await res.json()
      if (data.status === 'success') {
        alert(`Fine-tuning successful!\nExamples used: ${data.examples_used}\nEpochs: ${data.epochs}`)
        fetchStatus()
      } else {
        alert(`Fine-tuning failed: ${data.message}`)
      }
    } catch (error) {
      alert(`Error: ${error}`)
    } finally {
      setFineTuning(false)
    }
  }

  const saveSettings = () => {
    localStorage.setItem('magic-help-settings', JSON.stringify(settings))
    setSettingsSaved(true)
    setTimeout(() => setSettingsSaved(false), 2000)
  }

  const getStatusBadge = () => {
    if (!status) return null
    switch (status.status) {
      case 'available':
        return <span className="px-3 py-1 text-xs font-medium rounded-full bg-green-100 text-green-700">Verfuegbar</span>
      case 'not_installed':
        return <span className="px-3 py-1 text-xs font-medium rounded-full bg-red-100 text-red-700">Nicht installiert</span>
      case 'error':
        return <span className="px-3 py-1 text-xs font-medium rounded-full bg-yellow-100 text-yellow-700">Fehler</span>
    }
  }

  // Get confidence color for visualization
  const getConfidenceColor = (confidence: number) => {
    if (confidence >= 0.9) return 'bg-green-500'
    if (confidence >= 0.7) return 'bg-yellow-500'
    return 'bg-red-500'
  }

  // State for new features
  const [showHeatmap, setShowHeatmap] = useState(false)
  const [showTrainingDashboard, setShowTrainingDashboard] = useState(false)

  const tabs = [
    { id: 'overview' as TabId, label: 'Uebersicht', icon: '📊', shortcut: 'Alt+1' },
    { id: 'test' as TabId, label: 'OCR Test', icon: '🔍', shortcut: 'Alt+2' },
    { id: 'batch' as TabId, label: 'Batch OCR', icon: '📁', shortcut: 'Alt+3' },
    { id: 'training' as TabId, label: 'Training', icon: '🎯', shortcut: 'Alt+4' },
    { id: 'architecture' as TabId, label: 'Architektur', icon: '🏗️', shortcut: 'Alt+5' },
    { id: 'settings' as TabId, label: 'Einstellungen', icon: '⚙️', shortcut: 'Alt+6' },
  ]

  return (
    <div className="space-y-6 relative">
      {/* Global Drag Overlay */}
      {globalDragActive && (
        <div className="fixed inset-0 z-50 bg-purple-900/80 backdrop-blur-sm flex items-center justify-center pointer-events-none">
          <div className="text-center">
            <div className="text-7xl mb-4 animate-bounce">📄</div>
            <div className="text-2xl font-bold text-white">Bild hier ablegen</div>
            <div className="text-purple-200 mt-2">PNG, JPG - Handgeschriebener Text</div>
          </div>
        </div>
      )}

      {/* Keyboard Shortcuts Modal */}
      {showShortcutHint && (
        <div className="fixed inset-0 z-40 bg-black/50 flex items-center justify-center" onClick={() => setShowShortcutHint(false)}>
          <div className="bg-white rounded-xl shadow-2xl p-6 max-w-md" onClick={e => e.stopPropagation()}>
            <h3 className="text-lg font-bold text-slate-900 mb-4">Tastenkuerzel</h3>
            <div className="space-y-2 text-sm">
              <div className="flex justify-between">
                <span className="text-slate-600">Bild einfuegen</span>
                <kbd className="px-2 py-1 bg-slate-100 rounded text-xs font-mono">Ctrl+V</kbd>
              </div>
              <div className="flex justify-between">
                <span className="text-slate-600">OCR starten</span>
                <kbd className="px-2 py-1 bg-slate-100 rounded text-xs font-mono">Ctrl+Enter</kbd>
              </div>
              <div className="flex justify-between">
                <span className="text-slate-600">Tab wechseln</span>
                <kbd className="px-2 py-1 bg-slate-100 rounded text-xs font-mono">Alt+1-6</kbd>
              </div>
              <div className="flex justify-between">
                <span className="text-slate-600">Bild entfernen</span>
                <kbd className="px-2 py-1 bg-slate-100 rounded text-xs font-mono">Escape</kbd>
              </div>
              <div className="flex justify-between">
                <span className="text-slate-600">Shortcuts anzeigen</span>
                <kbd className="px-2 py-1 bg-slate-100 rounded text-xs font-mono">?</kbd>
              </div>
            </div>
            <button
              onClick={() => setShowShortcutHint(false)}
              className="w-full mt-4 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm"
            >
              Schliessen
            </button>
          </div>
        </div>
      )}

      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-slate-900 flex items-center gap-2">
            <span className="text-2xl">✨</span>
            Magic Help - Handschrifterkennung
          </h1>
          <p className="text-slate-500 mt-1">
            KI-gestuetzte Klausurkorrektur mit TrOCR und Privacy-by-Design
          </p>
        </div>
        <div className="flex items-center gap-3">
          <button
            onClick={() => setShowShortcutHint(true)}
            className="p-2 text-slate-400 hover:text-slate-600 transition-colors"
            title="Tastenkuerzel anzeigen (?)"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
            </svg>
          </button>
          {getStatusBadge()}
        </div>
      </div>

      {/* Page Purpose with Related Pages */}
      <PagePurpose
        title="Magic Help"
        purpose="Testen und verbessern Sie die TrOCR-Handschrifterkennung. Laden Sie Bilder hoch, um die OCR-Qualitaet zu pruefen, und trainieren Sie das Modell mit LoRA Fine-Tuning. Teil der KI-Daten-Pipeline: Exportieren Sie Trainingsdaten zu OCR-Labeling oder importieren Sie Ground Truth fuer Fine-Tuning."
        audience={['Entwickler', 'Administratoren', 'QA-Team']}
        architecture={{
          services: ['klausur-service (Python)', 'TrOCR (PyTorch)'],
          databases: ['Modell-Cache', 'LoRA-Adapter'],
        }}
        relatedPages={[
          { name: 'OCR-Labeling', href: '/ai/ocr-labeling', description: 'Ground Truth erstellen' },
          { name: 'RAG Pipeline', href: '/ai/rag-pipeline', description: 'Erkannte Texte indexieren' },
        ]}
        collapsible={true}
        defaultCollapsed={true}
      />

      {/* AI Module Sidebar - Desktop: Fixed, Mobile: FAB + Drawer */}
      <AIModuleSidebarResponsive currentModule="magic-help" />

      {/* Quick paste hint */}
      <div className="bg-gradient-to-r from-purple-50 to-blue-50 border border-purple-200 rounded-lg px-4 py-2 flex items-center gap-3 text-sm">
        <span className="text-purple-600">💡</span>
        <span className="text-slate-600">
          <strong>Tipp:</strong> Druecke <kbd className="px-1.5 py-0.5 bg-white rounded border text-xs font-mono">Ctrl+V</kbd> um ein Bild aus der Zwischenablage einzufuegen, oder ziehe es einfach irgendwo ins Fenster.
        </span>
      </div>

      {/* Tabs */}
      <div className="flex gap-2 border-b border-slate-200 pb-2">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            onClick={() => setActiveTab(tab.id)}
            className={`px-4 py-2 rounded-t-lg text-sm font-medium transition-colors ${
              activeTab === tab.id
                ? 'bg-purple-600 text-white'
                : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100'
            }`}
            title={tab.shortcut}
          >
            <span className="mr-2">{tab.icon}</span>
            {tab.label}
          </button>
        ))}
      </div>

      {/* Tab Content */}
      {activeTab === 'overview' && (
        <div className="space-y-6">
          {/* Status Card */}
          <div className="bg-white rounded-xl shadow-sm border p-6">
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-lg font-semibold text-slate-900">Systemstatus</h2>
              <button
                onClick={fetchStatus}
                className="px-3 py-1 bg-purple-600 hover:bg-purple-700 text-white rounded text-sm transition-colors"
              >
                Aktualisieren
              </button>
            </div>

            {loading ? (
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                {[1, 2, 3, 4].map((i) => (
                  <div key={i} className="bg-slate-50 rounded-lg p-4">
                    <SkeletonText lines={1} className="mb-2" />
                    <div className="h-3 w-16 bg-slate-200 rounded animate-pulse" />
                  </div>
                ))}
              </div>
            ) : status?.status === 'available' ? (
              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div className="bg-slate-50 rounded-lg p-4">
                  <div className="text-2xl font-bold text-slate-900">{status.model_name || 'trocr-base'}</div>
                  <div className="text-xs text-slate-500">Modell</div>
                </div>
                <div className="bg-slate-50 rounded-lg p-4">
                  <div className="text-2xl font-bold text-slate-900">{status.device || 'CPU'}</div>
                  <div className="text-xs text-slate-500">Geraet</div>
                </div>
                <div className="bg-slate-50 rounded-lg p-4">
                  <div className="text-2xl font-bold text-slate-900">{status.training_examples_count || 0}</div>
                  <div className="text-xs text-slate-500">Trainingsbeispiele</div>
                </div>
                <div className="bg-slate-50 rounded-lg p-4">
                  <div className="text-2xl font-bold text-slate-900">{status.has_lora_adapter ? 'Aktiv' : 'Keiner'}</div>
                  <div className="text-xs text-slate-500">LoRA Adapter</div>
                </div>
              </div>
            ) : status?.status === 'not_installed' ? (
              <div className="text-slate-600">
                <p className="mb-2">TrOCR ist nicht installiert. Fuehre aus:</p>
                <code className="bg-slate-100 px-3 py-2 rounded text-sm block font-mono">{status.install_command}</code>
              </div>
            ) : (
              <div className="text-red-600">{status?.error || 'Unbekannter Fehler'}</div>
            )}
          </div>

          {/* Quick Overview Cards */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="bg-gradient-to-br from-purple-50 to-purple-100 border border-purple-200 rounded-xl p-6">
              <div className="text-3xl mb-2">🎯</div>
              <h3 className="text-lg font-semibold text-slate-900 mb-2">Handschrifterkennung</h3>
              <p className="text-sm text-slate-600">
                TrOCR erkennt automatisch handgeschriebenen Text in Klausuren.
                Das Modell wurde speziell fuer deutsche Handschriften optimiert.
              </p>
            </div>
            <div className="bg-gradient-to-br from-green-50 to-green-100 border border-green-200 rounded-xl p-6">
              <div className="text-3xl mb-2">🔒</div>
              <h3 className="text-lg font-semibold text-slate-900 mb-2">Privacy by Design</h3>
              <p className="text-sm text-slate-600">
                Alle Daten werden lokal verarbeitet. Schuelernamen werden durch
                QR-Codes pseudonymisiert - DSGVO-konform.
              </p>
            </div>
            <div className="bg-gradient-to-br from-blue-50 to-blue-100 border border-blue-200 rounded-xl p-6">
              <div className="text-3xl mb-2">📈</div>
              <h3 className="text-lg font-semibold text-slate-900 mb-2">Kontinuierliches Lernen</h3>
              <p className="text-sm text-slate-600">
                Mit LoRA Fine-Tuning passt sich das Modell an individuelle
                Handschriften an - ohne das Basismodell zu veraendern.
              </p>
            </div>
          </div>

          {/* Workflow Overview */}
          <div className="bg-white rounded-xl shadow-sm border p-6">
            <h2 className="text-lg font-semibold text-slate-900 mb-4">Magic Onboarding Workflow</h2>
            <div className="flex flex-wrap items-center gap-4 text-sm">
              <div className="flex items-center gap-2 bg-slate-50 rounded-lg px-4 py-3">
                <span className="text-2xl">📄</span>
                <div>
                  <div className="font-medium text-slate-900">1. Upload</div>
                  <div className="text-slate-500">25 Klausuren hochladen</div>
                </div>
              </div>
              <div className="text-slate-400">→</div>
              <div className="flex items-center gap-2 bg-slate-50 rounded-lg px-4 py-3">
                <span className="text-2xl">🔍</span>
                <div>
                  <div className="font-medium text-slate-900">2. Analyse</div>
                  <div className="text-slate-500">Lokale OCR in 5-10 Sek</div>
                </div>
              </div>
              <div className="text-slate-400">→</div>
              <div className="flex items-center gap-2 bg-slate-50 rounded-lg px-4 py-3">
                <span className="text-2xl">✅</span>
                <div>
                  <div className="font-medium text-slate-900">3. Bestaetigung</div>
                  <div className="text-slate-500">Klasse, Schueler, Fach</div>
                </div>
              </div>
              <div className="text-slate-400">→</div>
              <div className="flex items-center gap-2 bg-slate-50 rounded-lg px-4 py-3">
                <span className="text-2xl">🤖</span>
                <div>
                  <div className="font-medium text-slate-900">4. KI-Korrektur</div>
                  <div className="text-slate-500">Cloud mit Pseudonymisierung</div>
                </div>
              </div>
              <div className="text-slate-400">→</div>
              <div className="flex items-center gap-2 bg-slate-50 rounded-lg px-4 py-3">
                <span className="text-2xl">📊</span>
                <div>
                  <div className="font-medium text-slate-900">5. Integration</div>
                  <div className="text-slate-500">Notenbuch, Zeugnisse</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {activeTab === 'test' && (
        <div className="space-y-6">
          {/* OCR Test */}
          <div className="bg-white rounded-xl shadow-sm border p-6">
            <h2 className="text-lg font-semibold text-slate-900 mb-4">OCR Test</h2>
            <p className="text-sm text-slate-500 mb-4">
              Teste die Handschrifterkennung mit einem eigenen Bild. Das Ergebnis zeigt
              den erkannten Text, Konfidenz und Verarbeitungszeit.
              {settings.livePreview && (
                <span className="text-purple-600 ml-1">(Live-Vorschau aktiv)</span>
              )}
            </p>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {/* Upload Area */}
              <div>
                <div
                  className={`border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-all ${
                    imagePreview
                      ? 'border-purple-500 bg-purple-50'
                      : 'border-slate-300 hover:border-purple-500'
                  }`}
                  onClick={() => document.getElementById('ocr-file-input')?.click()}
                  onDragOver={(e) => { e.preventDefault(); e.currentTarget.classList.add('border-purple-500', 'bg-purple-50') }}
                  onDragLeave={(e) => { e.currentTarget.classList.remove('border-purple-500', 'bg-purple-50') }}
                  onDrop={(e) => {
                    e.preventDefault()
                    e.stopPropagation()
                    e.currentTarget.classList.remove('border-purple-500', 'bg-purple-50')
                    const file = e.dataTransfer.files[0]
                    if (file?.type.startsWith('image/')) handleFileUpload(file)
                  }}
                >
                  {imagePreview ? (
                    <div className="relative">
                      <img
                        src={imagePreview}
                        alt="Hochgeladenes Bild"
                        className="max-h-64 mx-auto rounded-lg shadow-sm"
                      />
                      <button
                        onClick={(e) => {
                          e.stopPropagation()
                          setUploadedImage(null)
                          setImagePreview(null)
                          setOcrResult(null)
                        }}
                        className="absolute top-2 right-2 p-1 bg-red-500 text-white rounded-full hover:bg-red-600 transition-colors"
                        title="Bild entfernen (Escape)"
                      >
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                        </svg>
                      </button>
                    </div>
                  ) : (
                    <>
                      <div className="text-4xl mb-2">📄</div>
                      <div className="text-slate-700">Bild hierher ziehen oder klicken zum Hochladen</div>
                      <div className="text-xs text-slate-400 mt-1">PNG, JPG - Handgeschriebener Text</div>
                      <div className="text-xs text-purple-500 mt-2">
                        oder <kbd className="px-1.5 py-0.5 bg-purple-100 rounded font-mono">Ctrl+V</kbd> zum Einfuegen
                      </div>
                    </>
                  )}
                </div>
                <input
                  type="file"
                  id="ocr-file-input"
                  accept="image/*"
                  className="hidden"
                  onChange={(e) => {
                    const file = e.target.files?.[0]
                    if (file) handleFileUpload(file)
                  }}
                />

                {/* Manual trigger button if live preview is off */}
                {uploadedImage && !settings.livePreview && (
                  <button
                    onClick={handleManualOCR}
                    disabled={ocrLoading}
                    className="w-full mt-4 px-4 py-2 bg-purple-600 hover:bg-purple-700 disabled:bg-slate-300 text-white rounded-lg text-sm font-medium transition-colors"
                  >
                    {ocrLoading ? (
                      <span className="flex items-center justify-center gap-2">
                        <SkeletonDots />
                        Analysiere...
                      </span>
                    ) : (
                      'OCR starten (Ctrl+Enter)'
                    )}
                  </button>
                )}
              </div>

              {/* Results Area */}
              <div>
                {ocrLoading ? (
                  <SkeletonOCRResult />
                ) : ocrResult ? (
                  <div className="bg-slate-50 rounded-lg p-4">
                    <div className="flex items-center justify-between mb-2">
                      <h3 className="text-sm font-medium text-slate-700">Erkannter Text:</h3>
                      <div className={`px-2 py-1 rounded-full text-xs font-medium ${
                        ocrResult.confidence >= 0.9 ? 'bg-green-100 text-green-700' :
                        ocrResult.confidence >= 0.7 ? 'bg-yellow-100 text-yellow-700' :
                        'bg-red-100 text-red-700'
                      }`}>
                        {(ocrResult.confidence * 100).toFixed(0)}% Konfidenz
                      </div>
                    </div>
                    <pre className="bg-white border p-3 rounded text-sm text-slate-900 whitespace-pre-wrap max-h-48 overflow-y-auto">
                      {ocrResult.text || '(Kein Text erkannt)'}
                    </pre>

                    {/* Confidence bar visualization */}
                    <div className="mt-3 mb-3">
                      <div className="h-2 bg-slate-200 rounded-full overflow-hidden">
                        <div
                          className={`h-full transition-all duration-500 ${getConfidenceColor(ocrResult.confidence)}`}
                          style={{ width: `${ocrResult.confidence * 100}%` }}
                        />
                      </div>
                    </div>

                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
                      <div className="bg-white border rounded p-2">
                        <div className="text-slate-500 text-xs">Konfidenz</div>
                        <div className="text-slate-900 font-medium">{(ocrResult.confidence * 100).toFixed(1)}%</div>
                      </div>
                      <div className="bg-white border rounded p-2">
                        <div className="text-slate-500 text-xs">Verarbeitungszeit</div>
                        <div className="text-slate-900 font-medium">{ocrResult.processing_time_ms}ms</div>
                      </div>
                      <div className="bg-white border rounded p-2">
                        <div className="text-slate-500 text-xs">Modell</div>
                        <div className="text-slate-900 font-medium">{ocrResult.model || 'TrOCR'}</div>
                      </div>
                      <div className="bg-white border rounded p-2">
                        <div className="text-slate-500 text-xs">LoRA Adapter</div>
                        <div className="text-slate-900 font-medium">{ocrResult.has_lora_adapter ? 'Ja' : 'Nein'}</div>
                      </div>
                    </div>

                    {/* Quick training action */}
                    {ocrResult.confidence < 0.9 && (
                      <div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
                        <p className="text-sm text-blue-800 mb-2">
                          Die Erkennung koennte verbessert werden! Moechtest du dieses Beispiel zum Training hinzufuegen?
                        </p>
                        <button
                          onClick={() => {
                            if (uploadedImage) {
                              setTrainingImage(uploadedImage)
                              setTrainingText(ocrResult.text)
                              setActiveTab('training')
                            }
                          }}
                          className="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm transition-colors"
                        >
                          Als Trainingsbeispiel hinzufuegen
                        </button>
                      </div>
                    )}
                  </div>
                ) : (
                  <div className="bg-slate-50 rounded-lg p-8 text-center text-slate-400">
                    <div className="text-4xl mb-2">🔍</div>
                    <div>Lade ein Bild hoch um die Erkennung zu testen</div>
                  </div>
                )}
              </div>
            </div>
          </div>

          {/* Confidence Heatmap (when image and result available) */}
          {imagePreview && ocrResult && ocrResult.confidence > 0 && (
            <div className="bg-white rounded-xl shadow-sm border p-6">
              <div className="flex items-center justify-between mb-4">
                <h2 className="text-lg font-semibold text-slate-900">Konfidenz-Visualisierung</h2>
                <button
                  onClick={() => setShowHeatmap(prev => !prev)}
                  className={`px-3 py-1 rounded text-sm font-medium transition-colors ${
                    showHeatmap
                      ? 'bg-purple-600 text-white'
                      : 'bg-slate-200 text-slate-700 hover:bg-slate-300'
                  }`}
                >
                  {showHeatmap ? 'Heatmap verbergen' : 'Heatmap anzeigen'}
                </button>
              </div>
              {showHeatmap && (
                <ConfidenceHeatmap
                  imageSrc={imagePreview}
                  text={ocrResult.text}
                  confidence={ocrResult.confidence}
                  wordBoxes={ocrResult.word_boxes?.map(w => ({
                    text: w.text,
                    confidence: w.confidence,
                    bbox: w.bbox as [number, number, number, number]
                  })) || []}
                  charConfidences={ocrResult.char_confidences || []}
                  showLegend={true}
                  toggleable={true}
                />
              )}
            </div>
          )}

          {/* Confidence Interpretation */}
          <div className="bg-white rounded-xl shadow-sm border p-6">
            <h2 className="text-lg font-semibold text-slate-900 mb-4">Konfidenz-Interpretation</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div className="bg-green-50 border border-green-200 rounded-lg p-4">
                <div className="text-green-700 font-medium">90-100%</div>
                <div className="text-sm text-slate-600 mt-1">Sehr hohe Sicherheit - Text kann direkt uebernommen werden</div>
              </div>
              <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                <div className="text-yellow-700 font-medium">70-90%</div>
                <div className="text-sm text-slate-600 mt-1">Gute Sicherheit - manuelle Ueberpruefung empfohlen</div>
              </div>
              <div className="bg-red-50 border border-red-200 rounded-lg p-4">
                <div className="text-red-700 font-medium">&lt; 70%</div>
                <div className="text-sm text-slate-600 mt-1">Niedrige Sicherheit - manuelle Eingabe erforderlich</div>
              </div>
            </div>
          </div>
        </div>
      )}

      {activeTab === 'batch' && (
        <div className="space-y-6">
          {/* Batch OCR Processing */}
          <div className="bg-white rounded-xl shadow-sm border p-6">
            <h2 className="text-lg font-semibold text-slate-900 mb-2">Batch-Verarbeitung</h2>
            <p className="text-sm text-slate-500 mb-6">
              Verarbeite mehrere Bilder gleichzeitig mit Echtzeit-Fortschrittsanzeige.
              Die Ergebnisse werden per Server-Sent Events gestreamt.
            </p>

            <BatchUploader
              apiBase={API_BASE}
              maxFiles={20}
              autoProcess={false}
              onComplete={(results) => {
                console.log('Batch complete:', results)
              }}
            />
          </div>

          {/* Batch Processing Info */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="bg-gradient-to-br from-blue-50 to-blue-100 border border-blue-200 rounded-xl p-6">
              <div className="text-3xl mb-2">🚀</div>
              <h3 className="text-lg font-semibold text-slate-900 mb-2">Parallele Verarbeitung</h3>
              <p className="text-sm text-slate-600">
                Mehrere Bilder werden parallel verarbeitet fuer maximale Geschwindigkeit.
              </p>
            </div>
            <div className="bg-gradient-to-br from-green-50 to-green-100 border border-green-200 rounded-xl p-6">
              <div className="text-3xl mb-2">💾</div>
              <h3 className="text-lg font-semibold text-slate-900 mb-2">Smart Caching</h3>
              <p className="text-sm text-slate-600">
                Identische Bilder werden automatisch aus dem Cache geladen (unter 50ms).
              </p>
            </div>
            <div className="bg-gradient-to-br from-purple-50 to-purple-100 border border-purple-200 rounded-xl p-6">
              <div className="text-3xl mb-2">📊</div>
              <h3 className="text-lg font-semibold text-slate-900 mb-2">Live-Fortschritt</h3>
              <p className="text-sm text-slate-600">
                Echtzeit-Updates via Server-Sent Events zeigen den Verarbeitungsfortschritt.
              </p>
            </div>
          </div>
        </div>
      )}

      {activeTab === 'training' && (
        <div className="space-y-6">
          {/* Training Overview */}
          <div className="bg-white rounded-xl shadow-sm border p-6">
            <h2 className="text-lg font-semibold text-slate-900 mb-4">Training mit LoRA</h2>
            <p className="text-sm text-slate-500 mb-4">
              LoRA (Low-Rank Adaptation) ermoeglicht effizientes Fine-Tuning ohne das Basismodell zu veraendern.
              Das Training erfolgt lokal auf Ihrem System.
            </p>

            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
              <div className="bg-slate-50 rounded-lg p-4 text-center">
                <div className="text-3xl font-bold text-slate-900">{status?.training_examples_count || 0}</div>
                <div className="text-xs text-slate-500">Trainingsbeispiele</div>
              </div>
              <div className="bg-slate-50 rounded-lg p-4 text-center">
                <div className="text-3xl font-bold text-slate-900">10</div>
                <div className="text-xs text-slate-500">Minimum benoetigt</div>
              </div>
              <div className="bg-slate-50 rounded-lg p-4 text-center">
                <div className="text-3xl font-bold text-slate-900">{settings.loraRank}</div>
                <div className="text-xs text-slate-500">LoRA Rank</div>
              </div>
              <div className="bg-slate-50 rounded-lg p-4 text-center">
                <div className="text-3xl font-bold text-slate-900">{status?.has_lora_adapter ? '✓' : '✗'}</div>
                <div className="text-xs text-slate-500">Adapter aktiv</div>
              </div>
            </div>

            {/* Progress Bar */}
            <div className="mb-6">
              <div className="flex justify-between text-sm mb-1">
                <span className="text-slate-500">Fortschritt zum Fine-Tuning</span>
                <span className="text-slate-500">{Math.min(100, ((status?.training_examples_count || 0) / 10) * 100).toFixed(0)}%</span>
              </div>
              <div className="h-2 bg-slate-200 rounded-full overflow-hidden">
                <div
                  className="h-full bg-gradient-to-r from-purple-500 to-blue-500 transition-all duration-500"
                  style={{ width: `${Math.min(100, ((status?.training_examples_count || 0) / 10) * 100)}%` }}
                />
              </div>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* Add Training Example */}
            <div className="bg-white rounded-xl shadow-sm border p-6">
              <h2 className="text-lg font-semibold text-slate-900 mb-4">Trainingsbeispiel hinzufuegen</h2>
              <p className="text-sm text-slate-500 mb-4">
                Lade ein Bild mit handgeschriebenem Text hoch und gib die korrekte Transkription ein.
              </p>

              <div className="space-y-4">
                <div>
                  <label className="block text-sm text-slate-700 mb-1">Bild</label>
                  <input
                    type="file"
                    accept="image/*"
                    className="w-full bg-slate-50 border border-slate-300 rounded-lg px-3 py-2 text-sm"
                    onChange={(e) => setTrainingImage(e.target.files?.[0] || null)}
                  />
                  {trainingImage && (
                    <div className="mt-2 text-xs text-green-600">
                      Bild ausgewaehlt: {trainingImage.name}
                    </div>
                  )}
                </div>
                <div>
                  <label className="block text-sm text-slate-700 mb-1">Korrekter Text (Ground Truth)</label>
                  <textarea
                    className="w-full bg-slate-50 border border-slate-300 rounded-lg px-3 py-2 text-sm text-slate-900 resize-none"
                    rows={3}
                    placeholder="Gib hier den korrekten Text ein..."
                    value={trainingText}
                    onChange={(e) => setTrainingText(e.target.value)}
                  />
                </div>
                <button
                  onClick={handleAddTrainingExample}
                  className="w-full px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm font-medium transition-colors"
                >
                  + Trainingsbeispiel hinzufuegen
                </button>
              </div>
            </div>

            {/* Fine-Tuning */}
            <div className="bg-white rounded-xl shadow-sm border p-6">
              <h2 className="text-lg font-semibold text-slate-900 mb-4">Fine-Tuning starten</h2>
              <p className="text-sm text-slate-500 mb-4">
                Trainiere das Modell mit den gesammelten Beispielen. Der Prozess dauert
                je nach Anzahl der Beispiele einige Minuten.
              </p>

              <div className="bg-slate-50 rounded-lg p-4 mb-4">
                <div className="grid grid-cols-2 gap-4 text-sm">
                  <div>
                    <span className="text-slate-500">Epochen:</span>
                    <span className="text-slate-900 ml-2">{settings.epochs}</span>
                  </div>
                  <div>
                    <span className="text-slate-500">Learning Rate:</span>
                    <span className="text-slate-900 ml-2">{settings.learningRate}</span>
                  </div>
                  <div>
                    <span className="text-slate-500">LoRA Rank:</span>
                    <span className="text-slate-900 ml-2">{settings.loraRank}</span>
                  </div>
                  <div>
                    <span className="text-slate-500">Batch Size:</span>
                    <span className="text-slate-900 ml-2">{settings.batchSize}</span>
                  </div>
                </div>
              </div>

              <button
                onClick={handleFineTune}
                disabled={fineTuning || (status?.training_examples_count || 0) < 10}
                className="w-full px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-slate-300 disabled:cursor-not-allowed text-white rounded-lg text-sm font-medium transition-colors"
              >
                {fineTuning ? (
                  <span className="flex items-center justify-center gap-2">
                    <SkeletonDots />
                    Fine-Tuning laeuft...
                  </span>
                ) : (
                  'Fine-Tuning starten'
                )}
              </button>

              {(status?.training_examples_count || 0) < 10 && (
                <p className="text-xs text-yellow-600 mt-2 text-center">
                  Noch {10 - (status?.training_examples_count || 0)} Beispiele benoetigt
                </p>
              )}

              {/* Cross-Link to OCR-Labeling for Ground Truth */}
              <Link
                href="/ai/ocr-labeling?model=trocr-lora"
                className="w-full mt-4 px-4 py-2 bg-teal-100 text-teal-700 border border-teal-300 rounded-lg hover:bg-teal-200 flex items-center justify-center gap-2 transition-colors"
              >
                <span>🏷️</span>
                Ground Truth in OCR-Labeling sammeln
              </Link>
            </div>
          </div>

          {/* Training Examples List */}
          {examples.length > 0 && (
            <div className="bg-white rounded-xl shadow-sm border p-6">
              <h2 className="text-lg font-semibold text-slate-900 mb-4">Trainingsbeispiele ({examples.length})</h2>
              <div className="space-y-2 max-h-64 overflow-y-auto">
                {examples.map((ex, i) => (
                  <div key={i} className="flex items-center gap-4 bg-slate-50 rounded-lg p-3">
                    <span className="text-slate-400 font-mono text-sm w-8">{i + 1}.</span>
                    <span className="text-slate-900 text-sm flex-1 truncate">{ex.ground_truth}</span>
                    <span className="text-slate-400 text-xs">{new Date(ex.created_at).toLocaleDateString('de-DE')}</span>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* Training Dashboard Demo */}
          <div className="bg-white rounded-xl shadow-sm border p-6">
            <div className="flex items-center justify-between mb-4">
              <div>
                <h2 className="text-lg font-semibold text-slate-900">Training Dashboard</h2>
                <p className="text-sm text-slate-500">Live-Metriken waehrend des Trainings</p>
              </div>
              <button
                onClick={() => setShowTrainingDashboard(prev => !prev)}
                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                  showTrainingDashboard
                    ? 'bg-red-600 hover:bg-red-700 text-white'
                    : 'bg-purple-600 hover:bg-purple-700 text-white'
                }`}
              >
                {showTrainingDashboard ? 'Demo stoppen' : 'Demo starten'}
              </button>
            </div>

            {showTrainingDashboard && (
              <TrainingMetrics
                apiBase={API_BASE}
                simulateMode={true}
                onComplete={() => {
                  setShowTrainingDashboard(false)
                }}
              />
            )}

            {!showTrainingDashboard && (
              <div className="bg-slate-50 rounded-lg p-8 text-center">
                <div className="text-4xl mb-3">📈</div>
                <div className="text-slate-600 mb-2">
                  Das Training Dashboard zeigt Echtzeit-Metriken waehrend des Fine-Tunings
                </div>
                <div className="text-sm text-slate-400">
                  Klicke &quot;Demo starten&quot; um eine simulierte Training-Session zu sehen
                </div>
              </div>
            )}
          </div>
        </div>
      )}

      {activeTab === 'architecture' && (
        <div className="space-y-6">
          {/* Architecture Diagram */}
          <div className="bg-white rounded-xl shadow-sm border p-6">
            <h2 className="text-lg font-semibold text-slate-900 mb-6">Systemarchitektur</h2>

            {/* ASCII Art Diagram */}
            <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>

          {/* Components */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <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>🔍</span> TrOCR Service
              </h3>
              <div className="space-y-3 text-sm">
                <div className="flex justify-between">
                  <span className="text-slate-500">Modell</span>
                  <span className="text-slate-900">microsoft/trocr-base-handwritten</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-500">Groesse</span>
                  <span className="text-slate-900">~350 MB</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-500">Lizenz</span>
                  <span className="text-slate-900">MIT</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-500">Framework</span>
                  <span className="text-slate-900">PyTorch / Transformers</span>
                </div>
              </div>
              <p className="text-slate-500 text-sm mt-4">
                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.
              </p>
            </div>

            <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>🎯</span> LoRA Fine-Tuning
              </h3>
              <div className="space-y-3 text-sm">
                <div className="flex justify-between">
                  <span className="text-slate-500">Methode</span>
                  <span className="text-slate-900">Low-Rank Adaptation</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-500">Adapter-Groesse</span>
                  <span className="text-slate-900">~10 MB</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-500">Trainingszeit</span>
                  <span className="text-slate-900">5-15 Min (CPU)</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-500">Min. Beispiele</span>
                  <span className="text-slate-900">10</span>
                </div>
              </div>
              <p className="text-slate-500 text-sm mt-4">
                LoRA fuegt kleine, trainierbare Matrizen zu bestimmten Schichten hinzu,
                ohne das Basismodell zu veraendern. Dies ermoeglicht effizientes Fine-Tuning
                mit minimaler Speichernutzung.
              </p>
            </div>

            <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>🔒</span> Pseudonymisierung
              </h3>
              <div className="space-y-3 text-sm">
                <div className="flex justify-between">
                  <span className="text-slate-500">Methode</span>
                  <span className="text-slate-900">QR-Code Tokens</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-500">Token-Format</span>
                  <span className="text-slate-900">UUID v4</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-500">Mapping</span>
                  <span className="text-slate-900">Lokal beim Lehrer</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-500">Cloud-Daten</span>
                  <span className="text-slate-900">Nur Tokens + Text</span>
                </div>
              </div>
              <p className="text-slate-500 text-sm mt-4">
                Schuelernamen werden durch anonyme Tokens ersetzt, bevor Daten die lokale
                Umgebung verlassen. Das Mapping wird ausschliesslich lokal gespeichert.
              </p>
            </div>

            <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>☁️</span> Cloud LLM
              </h3>
              <div className="space-y-3 text-sm">
                <div className="flex justify-between">
                  <span className="text-slate-500">Provider</span>
                  <span className="text-slate-900">SysEleven (DE)</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-500">Standort</span>
                  <span className="text-slate-900">Deutschland</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-500">Isolation</span>
                  <span className="text-slate-900">Namespace pro Schule</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-slate-500">Datenverarbeitung</span>
                  <span className="text-slate-900">Nur pseudonymisiert</span>
                </div>
              </div>
              <p className="text-slate-500 text-sm mt-4">
                Die KI-Korrektur erfolgt auf deutschen Servern mit strikter Mandantentrennung.
                Es werden keine Klarnamen oder identifizierenden Informationen uebertragen.
              </p>
            </div>
          </div>

          {/* Data Flow */}
          <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">
              <div className="flex items-start gap-4 bg-slate-50 rounded-lg p-4">
                <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold">1</div>
                <div>
                  <div className="font-medium text-slate-900">Lokale Header-Extraktion</div>
                  <div className="text-sm text-slate-500">TrOCR erkennt Schuelernamen, Klasse und Fach direkt im Browser/PWA (offline-faehig)</div>
                </div>
              </div>
              <div className="flex items-start gap-4 bg-slate-50 rounded-lg p-4">
                <div className="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold">2</div>
                <div>
                  <div className="font-medium text-slate-900">Pseudonymisierung</div>
                  <div className="text-sm text-slate-500">Namen werden durch QR-Code Tokens ersetzt, Mapping bleibt lokal</div>
                </div>
              </div>
              <div className="flex items-start gap-4 bg-slate-50 rounded-lg p-4">
                <div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600 font-bold">3</div>
                <div>
                  <div className="font-medium text-slate-900">Cloud-Korrektur</div>
                  <div className="text-sm text-slate-500">Nur pseudonymisierte Dokument-Tokens werden an die KI gesendet</div>
                </div>
              </div>
              <div className="flex items-start gap-4 bg-slate-50 rounded-lg p-4">
                <div className="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 font-bold">4</div>
                <div>
                  <div className="font-medium text-slate-900">Re-Identifikation</div>
                  <div className="text-sm text-slate-500">Ergebnisse werden lokal mit dem Mapping wieder den echten Namen zugeordnet</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {activeTab === 'settings' && (
        <div className="space-y-6">
          {/* OCR Settings */}
          <div className="bg-white rounded-xl shadow-sm border p-6">
            <h2 className="text-lg font-semibold text-slate-900 mb-4">OCR Einstellungen</h2>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label className="flex items-center gap-3 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={settings.autoDetectLines}
                    onChange={(e) => setSettings({ ...settings, autoDetectLines: e.target.checked })}
                    className="w-5 h-5 rounded bg-slate-100 border-slate-300"
                  />
                  <div>
                    <div className="text-slate-900 font-medium">Automatische Zeilenerkennung</div>
                    <div className="text-sm text-slate-500">Erkennt und verarbeitet einzelne Zeilen separat</div>
                  </div>
                </label>
              </div>

              <div>
                <label className="flex items-center gap-3 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={settings.livePreview}
                    onChange={(e) => setSettings({ ...settings, livePreview: e.target.checked })}
                    className="w-5 h-5 rounded bg-slate-100 border-slate-300"
                  />
                  <div>
                    <div className="text-slate-900 font-medium">Live-Vorschau</div>
                    <div className="text-sm text-slate-500">OCR startet automatisch nach Bild-Upload</div>
                  </div>
                </label>
              </div>

              <div>
                <label className="flex items-center gap-3 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={settings.soundFeedback}
                    onChange={(e) => setSettings({ ...settings, soundFeedback: e.target.checked })}
                    className="w-5 h-5 rounded bg-slate-100 border-slate-300"
                  />
                  <div>
                    <div className="text-slate-900 font-medium">Sound-Feedback</div>
                    <div className="text-sm text-slate-500">Akustisches Feedback bei erfolgreicher Erkennung</div>
                  </div>
                </label>
              </div>

              <div>
                <label className="block text-sm text-slate-700 mb-2">Konfidenz-Schwellwert</label>
                <input
                  type="range"
                  min="0"
                  max="1"
                  step="0.1"
                  value={settings.confidenceThreshold}
                  onChange={(e) => setSettings({ ...settings, confidenceThreshold: parseFloat(e.target.value) })}
                  className="w-full"
                />
                <div className="flex justify-between text-xs text-slate-400 mt-1">
                  <span>0%</span>
                  <span className="text-slate-900">{(settings.confidenceThreshold * 100).toFixed(0)}%</span>
                  <span>100%</span>
                </div>
              </div>

              <div>
                <label className="block text-sm text-slate-700 mb-2">Max. Bildgroesse (px)</label>
                <input
                  type="number"
                  value={settings.maxImageSize}
                  onChange={(e) => setSettings({ ...settings, maxImageSize: parseInt(e.target.value) })}
                  className="w-full bg-slate-50 border border-slate-300 rounded-lg px-3 py-2 text-slate-900"
                />
                <div className="text-xs text-slate-400 mt-1">Groessere Bilder werden skaliert</div>
              </div>

              <div>
                <label className="flex items-center gap-3 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={settings.enableCache}
                    onChange={(e) => setSettings({ ...settings, enableCache: e.target.checked })}
                    className="w-5 h-5 rounded bg-slate-100 border-slate-300"
                  />
                  <div>
                    <div className="text-slate-900 font-medium">Ergebnis-Cache aktivieren</div>
                    <div className="text-sm text-slate-500">Speichert OCR-Ergebnisse fuer identische Bilder</div>
                  </div>
                </label>
              </div>
            </div>
          </div>

          {/* Training Settings */}
          <div className="bg-white rounded-xl shadow-sm border p-6">
            <h2 className="text-lg font-semibold text-slate-900 mb-4">Training Einstellungen</h2>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label className="block text-sm text-slate-700 mb-2">LoRA Rank</label>
                <select
                  value={settings.loraRank}
                  onChange={(e) => setSettings({ ...settings, loraRank: parseInt(e.target.value) })}
                  className="w-full bg-slate-50 border border-slate-300 rounded-lg px-3 py-2 text-slate-900"
                >
                  <option value="4">4 (Schnell, weniger Kapazitaet)</option>
                  <option value="8">8 (Ausgewogen)</option>
                  <option value="16">16 (Mehr Kapazitaet)</option>
                  <option value="32">32 (Maximum)</option>
                </select>
              </div>

              <div>
                <label className="block text-sm text-slate-700 mb-2">LoRA Alpha</label>
                <input
                  type="number"
                  value={settings.loraAlpha}
                  onChange={(e) => setSettings({ ...settings, loraAlpha: parseInt(e.target.value) })}
                  className="w-full bg-slate-50 border border-slate-300 rounded-lg px-3 py-2 text-slate-900"
                />
                <div className="text-xs text-slate-400 mt-1">Empfohlen: 4 x LoRA Rank</div>
              </div>

              <div>
                <label className="block text-sm text-slate-700 mb-2">Epochen</label>
                <input
                  type="number"
                  min="1"
                  max="10"
                  value={settings.epochs}
                  onChange={(e) => setSettings({ ...settings, epochs: parseInt(e.target.value) })}
                  className="w-full bg-slate-50 border border-slate-300 rounded-lg px-3 py-2 text-slate-900"
                />
              </div>

              <div>
                <label className="block text-sm text-slate-700 mb-2">Batch Size</label>
                <select
                  value={settings.batchSize}
                  onChange={(e) => setSettings({ ...settings, batchSize: parseInt(e.target.value) })}
                  className="w-full bg-slate-50 border border-slate-300 rounded-lg px-3 py-2 text-slate-900"
                >
                  <option value="1">1 (Wenig RAM)</option>
                  <option value="2">2</option>
                  <option value="4">4 (Standard)</option>
                  <option value="8">8 (Viel RAM)</option>
                </select>
              </div>

              <div>
                <label className="block text-sm text-slate-700 mb-2">Learning Rate</label>
                <select
                  value={settings.learningRate}
                  onChange={(e) => setSettings({ ...settings, learningRate: parseFloat(e.target.value) })}
                  className="w-full bg-slate-50 border border-slate-300 rounded-lg px-3 py-2 text-slate-900"
                >
                  <option value="0.0001">0.0001 (Schnell)</option>
                  <option value="0.00005">0.00005 (Standard)</option>
                  <option value="0.00001">0.00001 (Konservativ)</option>
                </select>
              </div>
            </div>
          </div>

          {/* Save Button */}
          <div className="flex justify-end gap-4">
            <button
              onClick={() => setSettings(DEFAULT_SETTINGS)}
              className="px-6 py-2 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded-lg text-sm font-medium transition-colors"
            >
              Zuruecksetzen
            </button>
            <button
              onClick={saveSettings}
              className="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm font-medium transition-colors"
            >
              {settingsSaved ? '✓ Gespeichert!' : 'Einstellungen speichern'}
            </button>
          </div>

          {/* Technical Info */}
          <div className="bg-white rounded-xl shadow-sm border p-6">
            <h2 className="text-lg font-semibold text-slate-900 mb-4">Technische Informationen</h2>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
              <div>
                <span className="text-slate-500">API Endpoint:</span>
                <code className="text-slate-900 ml-2 bg-slate-100 px-2 py-1 rounded text-xs">/api/klausur/trocr</code>
              </div>
              <div>
                <span className="text-slate-500">Model Path:</span>
                <code className="text-slate-900 ml-2 bg-slate-100 px-2 py-1 rounded text-xs">~/.cache/huggingface</code>
              </div>
              <div>
                <span className="text-slate-500">LoRA Path:</span>
                <code className="text-slate-900 ml-2 bg-slate-100 px-2 py-1 rounded text-xs">./models/lora</code>
              </div>
              <div>
                <span className="text-slate-500">Training Data:</span>
                <code className="text-slate-900 ml-2 bg-slate-100 px-2 py-1 rounded text-xs">./data/training</code>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}