'use client'

/**
 * Test Quality Dashboard - BQAS (Breakpilot Quality Assurance System)
 *
 * Umfassendes Qualitaetssicherungs-Dashboard mit:
 * - Golden Test Suite Ergebnisse
 * - Synthetic Test Generierung
 * - Regression Tracking
 * - Test Run Historie
 * - RAG Correction Tests
 */

import { useState, useEffect, useCallback, useRef } from 'react'
import Link from 'next/link'
import { PagePurpose } from '@/components/common/PagePurpose'
import { AIToolsSidebarResponsive } from '@/components/ai/AIToolsSidebar'
import type { TestRun, BQASMetrics, TrendData, TabType } from './types'

// API Configuration - Use internal proxy to avoid CORS issues
const BQAS_API_BASE = '/api/bqas'

// ============================================================================
// Toast Notification Component
// ============================================================================

interface Toast {
  id: number
  type: 'success' | 'error' | 'info' | 'loading'
  message: string
}

function ToastContainer({ toasts, onDismiss }: { toasts: Toast[]; onDismiss: (id: number) => void }) {
  return (
    <div className="fixed bottom-4 right-4 z-50 space-y-2">
      {toasts.map((toast) => (
        <div
          key={toast.id}
          className={`flex items-center gap-3 px-4 py-3 rounded-lg shadow-lg border animate-slide-in ${
            toast.type === 'success'
              ? 'bg-emerald-50 border-emerald-200 text-emerald-800'
              : toast.type === 'error'
                ? 'bg-red-50 border-red-200 text-red-800'
                : toast.type === 'loading'
                  ? 'bg-blue-50 border-blue-200 text-blue-800'
                  : 'bg-slate-50 border-slate-200 text-slate-800'
          }`}
        >
          {toast.type === 'loading' ? (
            <svg className="animate-spin h-5 w-5" fill="none" viewBox="0 0 24 24">
              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
              <path
                className="opacity-75"
                fill="currentColor"
                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
              />
            </svg>
          ) : toast.type === 'success' ? (
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
            </svg>
          ) : toast.type === 'error' ? (
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          ) : (
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          )}
          <span className="text-sm font-medium">{toast.message}</span>
          {toast.type !== 'loading' && (
            <button onClick={() => onDismiss(toast.id)} className="ml-2 opacity-60 hover:opacity-100">
              <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>
  )
}

// ============================================================================
// Helper Components
// ============================================================================

function MetricCard({
  title,
  value,
  subtitle,
  trend,
  color = 'blue',
}: {
  title: string
  value: string | number
  subtitle?: string
  trend?: 'up' | 'down' | 'stable'
  color?: 'blue' | 'green' | 'red' | 'yellow' | 'purple'
}) {
  const colorClasses = {
    blue: 'bg-blue-50 border-blue-200',
    green: 'bg-emerald-50 border-emerald-200',
    red: 'bg-red-50 border-red-200',
    yellow: 'bg-amber-50 border-amber-200',
    purple: 'bg-purple-50 border-purple-200',
  }

  const trendIcons = {
    up: (
      <svg className="w-4 h-4 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 10l7-7m0 0l7 7m-7-7v18" />
      </svg>
    ),
    down: (
      <svg className="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
      </svg>
    ),
    stable: (
      <svg className="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14" />
      </svg>
    ),
  }

  return (
    <div className={`rounded-xl border p-5 ${colorClasses[color]}`}>
      <div className="flex items-start justify-between">
        <div>
          <p className="text-sm font-medium text-slate-600">{title}</p>
          <p className="mt-1 text-2xl font-bold text-slate-900">{value}</p>
          {subtitle && <p className="mt-1 text-xs text-slate-500">{subtitle}</p>}
        </div>
        {trend && <div className="mt-1">{trendIcons[trend]}</div>}
      </div>
    </div>
  )
}

function TestSuiteCard({
  title,
  description,
  metrics,
  onRun,
  isRunning,
  lastRun,
}: {
  title: string
  description: string
  metrics?: BQASMetrics
  onRun: () => void
  isRunning: boolean
  lastRun?: string
}) {
  const passRate = metrics ? (metrics.passed_tests / metrics.total_tests) * 100 : 0

  return (
    <div className="bg-white rounded-xl border border-slate-200 p-6">
      <div className="flex items-start justify-between">
        <div>
          <h3 className="text-lg font-semibold text-slate-900">{title}</h3>
          <p className="mt-1 text-sm text-slate-500">{description}</p>
        </div>
        <button
          onClick={onRun}
          disabled={isRunning}
          className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
            isRunning
              ? 'bg-teal-100 text-teal-600 cursor-wait'
              : 'bg-teal-600 text-white hover:bg-teal-700 active:scale-95'
          }`}
        >
          {isRunning ? (
            <span className="flex items-center gap-2">
              <svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                <path
                  className="opacity-75"
                  fill="currentColor"
                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                />
              </svg>
              Laeuft...
            </span>
          ) : (
            'Tests starten'
          )}
        </button>
      </div>

      {metrics && (
        <div className="mt-6">
          <div className="flex items-center justify-between text-sm">
            <span className="text-slate-600">Pass Rate</span>
            <span className="font-medium text-slate-900">{passRate.toFixed(1)}%</span>
          </div>
          <div className="mt-2 h-2 bg-slate-100 rounded-full overflow-hidden">
            <div
              className={`h-full rounded-full transition-all ${
                passRate >= 80 ? 'bg-emerald-500' : passRate >= 60 ? 'bg-amber-500' : 'bg-red-500'
              }`}
              style={{ width: `${passRate}%` }}
            />
          </div>

          <div className="mt-4 grid grid-cols-3 gap-4">
            <div className="text-center">
              <p className="text-2xl font-bold text-slate-900">{metrics.total_tests}</p>
              <p className="text-xs text-slate-500">Tests</p>
            </div>
            <div className="text-center">
              <p className="text-2xl font-bold text-emerald-600">{metrics.passed_tests}</p>
              <p className="text-xs text-slate-500">Bestanden</p>
            </div>
            <div className="text-center">
              <p className="text-2xl font-bold text-red-600">{metrics.failed_tests}</p>
              <p className="text-xs text-slate-500">Fehlgeschlagen</p>
            </div>
          </div>

          <div className="mt-4 pt-4 border-t border-slate-100">
            <p className="text-xs text-slate-500">
              Durchschnittlicher Score: <span className="font-medium">{metrics.avg_composite_score.toFixed(2)}</span>
            </p>
          </div>
        </div>
      )}

      {lastRun && (
        <p className="mt-4 text-xs text-slate-400">Letzter Lauf: {new Date(lastRun).toLocaleString('de-DE')}</p>
      )}
    </div>
  )
}

function TrendChart({ data }: { data: TrendData }) {
  if (!data || data.dates.length === 0) {
    return (
      <div className="h-48 flex items-center justify-center text-slate-400">
        Keine Trend-Daten verfuegbar
      </div>
    )
  }

  const maxScore = Math.max(...data.scores, 5)
  const minScore = Math.min(...data.scores, 0)
  const range = maxScore - minScore || 1

  return (
    <div className="h-48 relative">
      <div className="absolute left-0 top-0 bottom-4 w-8 flex flex-col justify-between text-xs text-slate-400">
        <span>{maxScore.toFixed(1)}</span>
        <span>{((maxScore + minScore) / 2).toFixed(1)}</span>
        <span>{minScore.toFixed(1)}</span>
      </div>

      <div className="ml-10 h-full pr-4">
        <svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
          <line x1="0" y1="0" x2="100" y2="0" stroke="#e2e8f0" strokeWidth="0.5" />
          <line x1="0" y1="50" x2="100" y2="50" stroke="#e2e8f0" strokeWidth="0.5" />
          <line x1="0" y1="100" x2="100" y2="100" stroke="#e2e8f0" strokeWidth="0.5" />

          <polyline
            fill="none"
            stroke="#14b8a6"
            strokeWidth="2"
            points={data.scores
              .map((score, i) => {
                const x = (i / (data.scores.length - 1 || 1)) * 100
                const y = 100 - ((score - minScore) / range) * 100
                return `${x},${y}`
              })
              .join(' ')}
          />

          {data.scores.map((score, i) => {
            const x = (i / (data.scores.length - 1 || 1)) * 100
            const y = 100 - ((score - minScore) / range) * 100
            return <circle key={i} cx={x} cy={y} r="2" fill="#14b8a6" />
          })}
        </svg>
      </div>

      <div className="ml-10 flex justify-between text-xs text-slate-400 mt-1">
        {data.dates.slice(0, 5).map((date, i) => (
          <span key={i}>{new Date(date).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' })}</span>
        ))}
      </div>

      <div className="absolute top-2 right-2">
        <span
          className={`px-2 py-1 rounded text-xs font-medium ${
            data.trend === 'improving'
              ? 'bg-emerald-100 text-emerald-700'
              : data.trend === 'declining'
                ? 'bg-red-100 text-red-700'
                : 'bg-slate-100 text-slate-700'
          }`}
        >
          {data.trend === 'improving' ? 'Verbessernd' : data.trend === 'declining' ? 'Verschlechternd' : 'Stabil'}
        </span>
      </div>
    </div>
  )
}

function TestRunsTable({ runs }: { runs: TestRun[] }) {
  if (runs.length === 0) {
    return (
      <div className="text-center py-8 text-slate-400">
        Keine Test-Laeufe vorhanden
      </div>
    )
  }

  return (
    <div className="overflow-x-auto">
      <table className="w-full text-sm">
        <thead>
          <tr className="border-b border-slate-200">
            <th className="text-left py-3 px-4 font-medium text-slate-600">ID</th>
            <th className="text-left py-3 px-4 font-medium text-slate-600">Zeitpunkt</th>
            <th className="text-left py-3 px-4 font-medium text-slate-600">Commit</th>
            <th className="text-right py-3 px-4 font-medium text-slate-600">Golden Score</th>
            <th className="text-right py-3 px-4 font-medium text-slate-600">Tests</th>
            <th className="text-right py-3 px-4 font-medium text-slate-600">Bestanden</th>
            <th className="text-right py-3 px-4 font-medium text-slate-600">Dauer</th>
          </tr>
        </thead>
        <tbody>
          {runs.map((run) => (
            <tr key={run.id} className="border-b border-slate-100 hover:bg-slate-50">
              <td className="py-3 px-4 font-mono text-slate-900">#{run.id}</td>
              <td className="py-3 px-4 text-slate-600">
                {new Date(run.timestamp).toLocaleString('de-DE')}
              </td>
              <td className="py-3 px-4 font-mono text-xs text-slate-500">
                {run.git_commit?.slice(0, 7) || '-'}
              </td>
              <td className="py-3 px-4 text-right">
                <span
                  className={`font-medium ${
                    run.golden_score >= 4 ? 'text-emerald-600' : run.golden_score >= 3 ? 'text-amber-600' : 'text-red-600'
                  }`}
                >
                  {run.golden_score.toFixed(2)}
                </span>
              </td>
              <td className="py-3 px-4 text-right text-slate-600">{run.total_tests}</td>
              <td className="py-3 px-4 text-right">
                <span className="text-emerald-600">{run.passed_tests}</span>
                <span className="text-slate-400"> / </span>
                <span className="text-red-600">{run.failed_tests}</span>
              </td>
              <td className="py-3 px-4 text-right text-slate-500">
                {run.duration_seconds.toFixed(1)}s
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

function IntentScoresChart({ scores }: { scores: Record<string, number> }) {
  const entries = Object.entries(scores).sort((a, b) => b[1] - a[1])

  if (entries.length === 0) {
    return (
      <div className="text-center py-8 text-slate-400">
        Keine Intent-Scores verfuegbar
      </div>
    )
  }

  return (
    <div className="space-y-3">
      {entries.map(([intent, score]) => (
        <div key={intent}>
          <div className="flex items-center justify-between text-sm mb-1">
            <span className="text-slate-600 truncate max-w-[200px]">{intent.replace(/_/g, ' ')}</span>
            <span
              className={`font-medium ${
                score >= 4 ? 'text-emerald-600' : score >= 3 ? 'text-amber-600' : 'text-red-600'
              }`}
            >
              {score.toFixed(2)}
            </span>
          </div>
          <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
            <div
              className={`h-full rounded-full transition-all ${
                score >= 4 ? 'bg-emerald-500' : score >= 3 ? 'bg-amber-500' : 'bg-red-500'
              }`}
              style={{ width: `${(score / 5) * 100}%` }}
            />
          </div>
        </div>
      ))}
    </div>
  )
}

// Demo failed test details for illustration
const FAILED_TEST_DETAILS: Record<string, { description: string; cause: string; action: string }> = {
  // Golden Suite - Intent Tests
  'INT-001': {
    description: 'Student Observation - Simple',
    cause: 'Notiz zu Max wird nicht korrekt als student_observation erkannt',
    action: 'Training-Daten fuer kurze Notiz-Befehle erweitern',
  },
  'INT-002': {
    description: 'Student Observation - Needs Help',
    cause: 'Anfrage "Anna braucht extra Uebungsblatt" wird falsch klassifiziert',
    action: 'Intent-Erkennung fuer Hilfe-Anfragen verbessern',
  },
  'INT-003': {
    description: 'Reminder - Simple',
    cause: 'Erinnerungs-Intent nicht erkannt',
    action: 'Trigger-Woerter fuer Erinnerungen pruefen',
  },
  'INT-010': {
    description: 'Quick Activity - With Time',
    cause: '"10 Minuten Einstieg" wird nicht als quick_activity erkannt',
    action: 'Zeitmuster in Quick-Activity-Intent aufnehmen',
  },
  'INT-011': {
    description: 'Quiz Generate - Vocabulary',
    cause: 'Vokabeltest wird nicht als quiz_generate klassifiziert',
    action: 'Quiz-Keywords wie "Test", "Vokabel" staerker gewichten',
  },
  'INT-012': {
    description: 'Quiz Generate - Short Test',
    cause: '"Kurzer Test zu Kapitel 5" falsch erkannt',
    action: 'Kontext-Keywords fuer Quiz verbessern',
  },
  'INT-015': {
    description: 'Class Message',
    cause: 'Nachricht an Klasse wird als anderer Intent erkannt',
    action: 'Klassen-Nachrichten-Patterns erweitern',
  },
  'INT-019': {
    description: 'Operator Checklist',
    cause: 'Operatoren-Anfrage nicht korrekt klassifiziert',
    action: 'EH/Operator-bezogene Intents pruefen',
  },
  'INT-021': {
    description: 'Feedback Suggest',
    cause: 'Feedback-Vorschlag Intent nicht erkannt',
    action: 'Feedback-Synonyme hinzufuegen',
  },
  'INT-022': {
    description: 'Reminder Schedule - Tomorrow',
    cause: 'Zeitbasierte Erinnerung falsch klassifiziert',
    action: 'Zeitausdrucke wie "morgen" besser verarbeiten',
  },
  'INT-023': {
    description: 'Task Summary',
    cause: 'Zusammenfassungs-Intent nicht erkannt',
    action: 'Summary-Trigger erweitern',
  },
  // RAG Tests
  'RAG-EH-001': {
    description: 'EH Passage Retrieval - Textanalyse Sachtext',
    cause: 'EH-Passage nicht gefunden oder unvollstaendig',
    action: 'RAG-Retrieval fuer Textanalyse optimieren',
  },
  'RAG-HAL-002': {
    description: 'No Fictional EH Passages',
    cause: 'System generiert fiktive EH-Inhalte',
    action: 'Hallucination-Control verstaerken',
  },
  'RAG-HAL-004': {
    description: 'Grounded Response Only',
    cause: 'Antwort basiert nicht auf vorhandenen Daten',
    action: 'Grounding-Check im Response-Flow einbauen',
  },
  'RAG-CIT-003': {
    description: 'Multiple Source Attribution',
    cause: 'Mehrere Quellen nicht korrekt zugeordnet',
    action: 'Multi-Source Citation verbessern',
  },
  'RAG-EDGE-002': {
    description: 'Ambiguous Operator Query',
    cause: 'Bei mehrdeutiger Anfrage keine Klaerung angefordert',
    action: 'Clarification-Flow implementieren',
  },
  // Synthetic Tests
  'SYN-STUD-003': {
    description: 'Synthetic Student Observation',
    cause: 'Generierte Variante nicht erkannt',
    action: 'Robustheit gegen Variationen erhoehen',
  },
  'SYN-WORK-002': {
    description: 'Synthetic Worksheet Generate',
    cause: 'Arbeitsblatt-Intent bei Variation nicht erkannt',
    action: 'Mehr Variationen ins Training aufnehmen',
  },
  'SYN-WORK-005': {
    description: 'Synthetic Worksheet mit Tippfehler',
    cause: 'Tippfehler fuehrt zu Fehlklassifikation',
    action: 'Tippfehler-Normalisierung pruefen',
  },
  'SYN-REM-001': {
    description: 'Synthetic Reminder',
    cause: 'Reminder-Variante nicht erkannt',
    action: 'Reminder-Patterns erweitern',
  },
  'SYN-REM-004': {
    description: 'Synthetic Reminder mit Dialekt',
    cause: 'Dialekt-Formulierung nicht verstanden',
    action: 'Dialekt-Normalisierung verbessern',
  },
}

function FailedTestsList({ testIds }: { testIds: string[] }) {
  const [expandedTest, setExpandedTest] = useState<string | null>(null)

  if (testIds.length === 0) {
    return (
      <div className="text-center py-8 text-emerald-600">
        <svg className="w-12 h-12 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        Alle Tests bestanden!
      </div>
    )
  }

  return (
    <div className="space-y-2 max-h-96 overflow-y-auto">
      {testIds.map((testId) => {
        const details = FAILED_TEST_DETAILS[testId]
        const isExpanded = expandedTest === testId

        return (
          <div
            key={testId}
            className="rounded-lg border border-red-200 overflow-hidden"
          >
            <button
              onClick={() => setExpandedTest(isExpanded ? null : testId)}
              className="w-full flex items-center justify-between p-3 bg-red-50 hover:bg-red-100 transition-colors"
            >
              <div className="flex items-center gap-2">
                <svg className="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
                <span className="font-mono text-sm text-red-700">{testId}</span>
                {details && (
                  <span className="text-xs text-red-600 hidden sm:inline">- {details.description}</span>
                )}
              </div>
              <svg
                className={`w-4 h-4 text-red-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
              </svg>
            </button>

            {isExpanded && details && (
              <div className="p-4 bg-white border-t border-red-100 space-y-3">
                <div>
                  <p className="text-xs font-medium text-slate-500 uppercase">Ursache</p>
                  <p className="text-sm text-slate-700 mt-1">{details.cause}</p>
                </div>
                <div>
                  <p className="text-xs font-medium text-slate-500 uppercase">Empfohlene Aktion</p>
                  <p className="text-sm text-slate-700 mt-1 flex items-start gap-2">
                    <svg className="w-4 h-4 text-amber-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    {details.action}
                  </p>
                </div>
                <div className="pt-2 border-t border-slate-100">
                  <p className="text-xs text-slate-400">
                    Test-ID: <span className="font-mono">{testId}</span>
                  </p>
                </div>
              </div>
            )}
          </div>
        )
      })}

      <div className="mt-4 p-3 bg-amber-50 border border-amber-200 rounded-lg">
        <p className="text-xs text-amber-800">
          <strong>Tipp:</strong> Klicken Sie auf einen Test um Details zur Ursache und empfohlene Aktionen zu sehen.
          Fehlgeschlagene Tests sollten vor dem naechsten Release behoben werden.
        </p>
      </div>
    </div>
  )
}

// ============================================================================
// Guide Tab Component
// ============================================================================

function GuideTab() {
  return (
    <div className="space-y-8">
      {/* Introduction */}
      <div className="bg-gradient-to-r from-teal-50 to-emerald-50 rounded-xl border border-teal-200 p-6">
        <h2 className="text-xl font-bold text-slate-900 mb-4 flex items-center gap-2">
          <svg className="w-6 h-6 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
          </svg>
          Was ist BQAS?
        </h2>
        <p className="text-slate-700 leading-relaxed">
          Das <strong>Breakpilot Quality Assurance System (BQAS)</strong> ist unser automatisiertes Test-Framework
          zur kontinuierlichen Qualitaetssicherung der KI-Komponenten. Es stellt sicher, dass Aenderungen am
          Voice-Service, den Prompts oder den RAG-Pipelines keine Regressionen verursachen.
        </p>
      </div>

      {/* For Whom */}
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Fuer wen ist dieses Dashboard?</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
            <h4 className="font-medium text-blue-800 flex items-center gap-2">
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
              </svg>
              Entwickler
            </h4>
            <p className="text-sm text-blue-700 mt-2">
              Pruefen Sie nach Code-Aenderungen ob alle Tests noch bestehen. Analysieren Sie fehlgeschlagene Tests
              und implementieren Sie Fixes.
            </p>
          </div>
          <div className="p-4 bg-purple-50 rounded-lg border border-purple-200">
            <h4 className="font-medium text-purple-800 flex items-center gap-2">
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
              </svg>
              Data Scientists
            </h4>
            <p className="text-sm text-purple-700 mt-2">
              Analysieren Sie Intent-Scores, Faithfulness und Relevance. Identifizieren Sie Schwachstellen
              in den ML-Modellen und RAG-Pipelines.
            </p>
          </div>
          <div className="p-4 bg-amber-50 rounded-lg border border-amber-200">
            <h4 className="font-medium text-amber-800 flex items-center gap-2">
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
              </svg>
              Auditoren / QA
            </h4>
            <p className="text-sm text-amber-700 mt-2">
              Dokumentieren Sie die Testabdeckung und Qualitaetsmetriken. Nutzen Sie die Historie
              fuer Audit-Trails und Compliance-Nachweise.
            </p>
          </div>
        </div>
      </div>

      {/* Test Suites Explained */}
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Die drei Test-Suites</h3>

        <div className="space-y-6">
          <div className="flex gap-4">
            <div className="flex-shrink-0 w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
              <span className="text-xl font-bold text-blue-600">1</span>
            </div>
            <div>
              <h4 className="font-semibold text-slate-900">Golden Suite (97 Tests)</h4>
              <p className="text-sm text-slate-600 mt-1">
                <strong>Was:</strong> Manuell validierte Referenz-Tests mit definierten Erwartungen. Jeder Test
                hat eine Eingabe, eine erwartete Ausgabe und Bewertungskriterien.
              </p>
              <p className="text-sm text-slate-600 mt-1">
                <strong>Wann ausfuehren:</strong> Nach jeder Aenderung am Voice-Service oder den Prompts.
                Automatisch taeglich um 07:00 Uhr via launchd.
              </p>
              <p className="text-sm text-slate-600 mt-1">
                <strong>Ziel-Score:</strong> {'>'}= 4.0 (von 5.0)
              </p>
            </div>
          </div>

          <div className="flex gap-4">
            <div className="flex-shrink-0 w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
              <span className="text-xl font-bold text-purple-600">2</span>
            </div>
            <div>
              <h4 className="font-semibold text-slate-900">RAG/Korrektur Tests</h4>
              <p className="text-sm text-slate-600 mt-1">
                <strong>Was:</strong> Tests fuer das Retrieval-Augmented Generation System. Pruefen ob der richtige
                Erwartungshorizont gefunden wird und ob Antworten korrekt zitiert werden.
              </p>
              <p className="text-sm text-slate-600 mt-1">
                <strong>Wann ausfuehren:</strong> Nach Aenderungen an Qdrant, Chunking-Strategien oder EH-Uploads.
              </p>
              <p className="text-sm text-slate-600 mt-1">
                <strong>Kategorien:</strong> EH-Retrieval, Operator-Alignment, Hallucination-Control, Citation-Enforcement,
                Privacy-Compliance, Namespace-Isolation
              </p>
            </div>
          </div>

          <div className="flex gap-4">
            <div className="flex-shrink-0 w-12 h-12 rounded-full bg-amber-100 flex items-center justify-center">
              <span className="text-xl font-bold text-amber-600">3</span>
            </div>
            <div>
              <h4 className="font-semibold text-slate-900">Synthetic Tests</h4>
              <p className="text-sm text-slate-600 mt-1">
                <strong>Was:</strong> LLM-generierte Variationen der Golden-Tests. Testet Robustheit gegenueber
                Umformulierungen, Tippfehlern, Dialekt und Edge-Cases.
              </p>
              <p className="text-sm text-slate-600 mt-1">
                <strong>Wann ausfuehren:</strong> Woechentlich oder vor Major-Releases.
              </p>
              <p className="text-sm text-slate-600 mt-1">
                <strong>Hinweis:</strong> Generierung dauert laenger da LLM-Calls benoetigt werden.
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* Metrics Explained */}
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Metriken verstehen</h3>

        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-slate-200 bg-slate-50">
                <th className="text-left py-3 px-4 font-medium text-slate-700">Metrik</th>
                <th className="text-left py-3 px-4 font-medium text-slate-700">Beschreibung</th>
                <th className="text-center py-3 px-4 font-medium text-slate-700">Zielwert</th>
              </tr>
            </thead>
            <tbody>
              <tr className="border-b border-slate-100">
                <td className="py-3 px-4 font-medium">Composite Score</td>
                <td className="py-3 px-4 text-slate-600">Gewichteter Durchschnitt aller Einzelmetriken (1-5)</td>
                <td className="py-3 px-4 text-center"><span className="px-2 py-1 bg-emerald-100 text-emerald-700 rounded text-xs">{'>'}= 4.0</span></td>
              </tr>
              <tr className="border-b border-slate-100">
                <td className="py-3 px-4 font-medium">Intent Accuracy</td>
                <td className="py-3 px-4 text-slate-600">Wie oft wird die richtige Nutzerabsicht erkannt?</td>
                <td className="py-3 px-4 text-center"><span className="px-2 py-1 bg-emerald-100 text-emerald-700 rounded text-xs">{'>'}= 90%</span></td>
              </tr>
              <tr className="border-b border-slate-100">
                <td className="py-3 px-4 font-medium">Faithfulness</td>
                <td className="py-3 px-4 text-slate-600">Ist die Antwort dem EH treu? Keine Halluzinationen?</td>
                <td className="py-3 px-4 text-center"><span className="px-2 py-1 bg-emerald-100 text-emerald-700 rounded text-xs">{'>'}= 4.0</span></td>
              </tr>
              <tr className="border-b border-slate-100">
                <td className="py-3 px-4 font-medium">Relevance</td>
                <td className="py-3 px-4 text-slate-600">Beantwortet die Antwort die Frage des Nutzers?</td>
                <td className="py-3 px-4 text-center"><span className="px-2 py-1 bg-emerald-100 text-emerald-700 rounded text-xs">{'>'}= 4.0</span></td>
              </tr>
              <tr className="border-b border-slate-100">
                <td className="py-3 px-4 font-medium">Coherence</td>
                <td className="py-3 px-4 text-slate-600">Ist die Antwort logisch aufgebaut und verstaendlich?</td>
                <td className="py-3 px-4 text-center"><span className="px-2 py-1 bg-emerald-100 text-emerald-700 rounded text-xs">{'>'}= 4.0</span></td>
              </tr>
              <tr>
                <td className="py-3 px-4 font-medium">Safety Pass Rate</td>
                <td className="py-3 px-4 text-slate-600">Werden kritische Inhalte korrekt gefiltert?</td>
                <td className="py-3 px-4 text-center"><span className="px-2 py-1 bg-emerald-100 text-emerald-700 rounded text-xs">100%</span></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* Workflow */}
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Typischer Workflow</h3>

        <div className="relative">
          <div className="absolute left-4 top-0 bottom-0 w-0.5 bg-slate-200"></div>

          <div className="space-y-6">
            {[
              { step: 1, title: 'Tests starten', desc: 'Klicken Sie auf "Tests starten" bei der gewuenschten Suite. Eine Benachrichtigung zeigt den Status.' },
              { step: 2, title: 'Ergebnisse pruefen', desc: 'Nach Abschluss werden Pass Rate und Score angezeigt. Pruefen Sie ob der Zielwert erreicht wurde.' },
              { step: 3, title: 'Fehlgeschlagene Tests analysieren', desc: 'Klicken Sie auf fehlgeschlagene Tests um Ursache und empfohlene Aktionen zu sehen.' },
              { step: 4, title: 'Fixes implementieren', desc: 'Beheben Sie die identifizierten Probleme im Code, Prompts oder Training-Daten.' },
              { step: 5, title: 'Erneut testen', desc: 'Fuehren Sie die Tests erneut aus um zu verifizieren dass die Fixes wirksam sind.' },
              { step: 6, title: 'Dokumentieren', desc: 'Nutzen Sie die Historie als Audit-Trail. Exportieren Sie Reports fuer Compliance-Nachweise.' },
            ].map((item) => (
              <div key={item.step} className="flex gap-4 relative">
                <div className="flex-shrink-0 w-8 h-8 rounded-full bg-teal-600 text-white flex items-center justify-center text-sm font-bold z-10">
                  {item.step}
                </div>
                <div className="pt-1">
                  <h4 className="font-medium text-slate-900">{item.title}</h4>
                  <p className="text-sm text-slate-600 mt-0.5">{item.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* FAQ */}
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Haeufige Fragen</h3>

        <div className="space-y-4">
          {[
            {
              q: 'Wie lange dauert ein Test-Lauf?',
              a: 'Golden Suite: ca. 45 Sekunden. RAG Tests: ca. 60 Sekunden. Synthetic Tests: 2-5 Minuten (abhaengig von LLM-Verfuegbarkeit).',
            },
            {
              q: 'Was passiert wenn Tests fehlschlagen?',
              a: 'Fehlgeschlagene Tests werden rot markiert. Klicken Sie darauf um Details zu sehen. Bei kritischen Regressionen wird automatisch eine Desktop-Benachrichtigung gesendet.',
            },
            {
              q: 'Wann werden Tests automatisch ausgefuehrt?',
              a: 'Die Golden Suite laeuft taeglich um 07:00 Uhr via launchd. Zusaetzlich bei jedem Commit im voice-service via Git-Hook (Quick-Tests).',
            },
            {
              q: 'Wie kann ich einen neuen Golden-Test hinzufuegen?',
              a: 'Tests werden in /voice-service/bqas/golden_tests.json definiert. Jeder Test braucht: ID, Input, Expected Intent, Bewertungskriterien.',
            },
            {
              q: 'Was bedeutet "Demo-Daten"?',
              a: 'Wenn die Voice-Service API nicht erreichbar ist, werden Demo-Daten angezeigt. Dies ist normal in der Entwicklungsumgebung wenn der Service nicht laeuft.',
            },
          ].map((faq, i) => (
            <div key={i} className="border-b border-slate-100 pb-4 last:border-0 last:pb-0">
              <p className="font-medium text-slate-900">{faq.q}</p>
              <p className="text-sm text-slate-600 mt-1">{faq.a}</p>
            </div>
          ))}
        </div>
      </div>

      {/* Links */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <Link
          href="/infrastructure/ci-cd"
          className="p-4 bg-slate-50 rounded-lg border border-slate-200 hover:border-teal-300 hover:bg-teal-50 transition-colors"
        >
          <div className="flex items-center gap-3">
            <svg className="w-8 h-8 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <div>
              <p className="font-medium text-slate-900">CI/CD Scheduler</p>
              <p className="text-xs text-slate-500">Automatische Test-Planung konfigurieren</p>
            </div>
          </div>
        </Link>
        <Link
          href="/ai/rag"
          className="p-4 bg-slate-50 rounded-lg border border-slate-200 hover:border-teal-300 hover:bg-teal-50 transition-colors"
        >
          <div className="flex items-center gap-3">
            <svg className="w-8 h-8 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
            </svg>
            <div>
              <p className="font-medium text-slate-900">RAG Management</p>
              <p className="text-xs text-slate-500">Erwartungshorizonte und Chunking verwalten</p>
            </div>
          </div>
        </Link>
      </div>
    </div>
  )
}

// ============================================================================
// Main Component
// ============================================================================

export default function TestQualityPage() {
  const [activeTab, setActiveTab] = useState<TabType>('overview')
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  // Toast state - using useRef for stable ID counter
  const [toasts, setToasts] = useState<Toast[]>([])
  const toastIdRef = useRef(0)

  const addToast = useCallback((type: Toast['type'], message: string) => {
    const id = ++toastIdRef.current
    console.log('Adding toast:', id, type, message) // Debug log
    setToasts((prev) => [...prev, { id, type, message }])

    if (type !== 'loading') {
      setTimeout(() => {
        setToasts((prev) => prev.filter((t) => t.id !== id))
      }, 5000)
    }

    return id
  }, [])

  const removeToast = useCallback((id: number) => {
    setToasts((prev) => prev.filter((t) => t.id !== id))
  }, [])

  const updateToast = useCallback((id: number, type: Toast['type'], message: string) => {
    console.log('Updating toast:', id, type, message) // Debug log
    setToasts((prev) =>
      prev.map((t) => (t.id === id ? { ...t, type, message } : t))
    )
    if (type !== 'loading') {
      setTimeout(() => {
        setToasts((prev) => prev.filter((t) => t.id !== id))
      }, 5000)
    }
  }, [])

  // Data states
  const [goldenMetrics, setGoldenMetrics] = useState<BQASMetrics | null>(null)
  const [syntheticMetrics, setSyntheticMetrics] = useState<BQASMetrics | null>(null)
  const [ragMetrics, setRagMetrics] = useState<BQASMetrics | null>(null)
  const [testRuns, setTestRuns] = useState<TestRun[]>([])
  const [trendData, setTrendData] = useState<TrendData | null>(null)

  // Running states
  const [isRunningGolden, setIsRunningGolden] = useState(false)
  const [isRunningSynthetic, setIsRunningSynthetic] = useState(false)
  const [isRunningRag, setIsRunningRag] = useState(false)

  // Demo data for when API is not available
  const DEMO_GOLDEN_METRICS: BQASMetrics = {
    total_tests: 97,
    passed_tests: 89,
    failed_tests: 8,
    avg_intent_accuracy: 91.7,
    avg_faithfulness: 4.2,
    avg_relevance: 4.1,
    avg_coherence: 4.3,
    safety_pass_rate: 0.98,
    avg_composite_score: 4.15,
    scores_by_intent: {
      korrektur_anfrage: 4.5,
      erklaerung_anfrage: 4.3,
      hilfe_anfrage: 4.1,
      feedback_anfrage: 3.9,
      smalltalk: 4.2,
    },
    failed_test_ids: ['GT-023', 'GT-045', 'GT-067', 'GT-072', 'GT-081', 'GT-089', 'GT-092', 'GT-095'],
  }

  const DEMO_TREND: TrendData = {
    dates: ['2026-01-02', '2026-01-09', '2026-01-16', '2026-01-23', '2026-01-30'],
    scores: [3.9, 4.0, 4.1, 4.15, 4.15],
    trend: 'improving',
  }

  const DEMO_RUNS: TestRun[] = [
    { id: 1, timestamp: '2026-01-30T07:00:00Z', git_commit: 'abc1234', golden_score: 4.15, synthetic_score: 3.9, total_tests: 97, passed_tests: 89, failed_tests: 8, duration_seconds: 45.2 },
    { id: 2, timestamp: '2026-01-29T07:00:00Z', git_commit: 'def5678', golden_score: 4.12, synthetic_score: 3.85, total_tests: 97, passed_tests: 88, failed_tests: 9, duration_seconds: 44.8 },
    { id: 3, timestamp: '2026-01-28T07:00:00Z', git_commit: '9ab0123', golden_score: 4.10, synthetic_score: 3.82, total_tests: 97, passed_tests: 87, failed_tests: 10, duration_seconds: 46.1 },
  ]

  // Fetch data
  const fetchData = useCallback(async () => {
    setIsLoading(true)
    setError(null)

    try {
      const runsResponse = await fetch(`${BQAS_API_BASE}/runs`)
      if (runsResponse.ok) {
        const runsData = await runsResponse.json()
        if (runsData.runs && runsData.runs.length > 0) {
          setTestRuns(runsData.runs)
        } else {
          setTestRuns(DEMO_RUNS)
        }
      } else {
        setTestRuns(DEMO_RUNS)
      }

      const trendResponse = await fetch(`${BQAS_API_BASE}/trend?days=30`)
      if (trendResponse.ok) {
        const trend = await trendResponse.json()
        if (trend.dates && trend.dates.length > 0) {
          setTrendData(trend)
        } else {
          setTrendData(DEMO_TREND)
        }
      } else {
        setTrendData(DEMO_TREND)
      }

      const metricsResponse = await fetch(`${BQAS_API_BASE}/latest-metrics`)
      if (metricsResponse.ok) {
        const metrics = await metricsResponse.json()
        setGoldenMetrics(metrics.golden || DEMO_GOLDEN_METRICS)
        setSyntheticMetrics(metrics.synthetic || null)
        setRagMetrics(metrics.rag || null)
      } else {
        setGoldenMetrics(DEMO_GOLDEN_METRICS)
      }
    } catch (err) {
      console.error('Failed to fetch BQAS data, using demo data:', err)
      setTestRuns(DEMO_RUNS)
      setTrendData(DEMO_TREND)
      setGoldenMetrics(DEMO_GOLDEN_METRICS)
    } finally {
      setIsLoading(false)
    }
  }, [])

  useEffect(() => {
    fetchData()
  }, [fetchData])

  // Run test suites with toast feedback
  const runGoldenTests = async () => {
    setIsRunningGolden(true)
    const loadingToast = addToast('loading', 'Golden Suite wird ausgefuehrt...')

    try {
      const response = await fetch(`${BQAS_API_BASE}/run/golden`, {
        method: 'POST',
      })
      if (response.ok) {
        const result = await response.json()
        setGoldenMetrics(result.metrics)
        updateToast(loadingToast, 'success', `Golden Suite abgeschlossen: ${result.metrics?.passed_tests || 89}/${result.metrics?.total_tests || 97} bestanden`)
        await fetchData()
      } else {
        updateToast(loadingToast, 'info', 'Golden Suite: Demo-Modus (API nicht verfuegbar)')
      }
    } catch (err) {
      console.error('Failed to run golden tests:', err)
      updateToast(loadingToast, 'info', 'Golden Suite: Demo-Modus (API nicht verfuegbar)')
    } finally {
      setIsRunningGolden(false)
    }
  }

  const runSyntheticTests = async () => {
    setIsRunningSynthetic(true)
    const loadingToast = addToast('loading', 'Synthetic Tests werden generiert und ausgefuehrt...')

    try {
      const response = await fetch(`${BQAS_API_BASE}/run/synthetic`, {
        method: 'POST',
      })
      if (response.ok) {
        const result = await response.json()
        setSyntheticMetrics(result.metrics)
        updateToast(loadingToast, 'success', 'Synthetic Tests abgeschlossen')
        await fetchData()
      } else {
        updateToast(loadingToast, 'info', 'Synthetic Tests: Demo-Modus (API nicht verfuegbar)')
      }
    } catch (err) {
      console.error('Failed to run synthetic tests:', err)
      updateToast(loadingToast, 'info', 'Synthetic Tests: Demo-Modus (API nicht verfuegbar)')
    } finally {
      setIsRunningSynthetic(false)
    }
  }

  const runRagTests = async () => {
    setIsRunningRag(true)
    const loadingToast = addToast('loading', 'RAG/Korrektur Tests werden ausgefuehrt...')

    try {
      const response = await fetch(`${BQAS_API_BASE}/run/rag`, {
        method: 'POST',
      })
      if (response.ok) {
        const result = await response.json()
        setRagMetrics(result.metrics)
        updateToast(loadingToast, 'success', 'RAG Tests abgeschlossen')
        await fetchData()
      } else {
        updateToast(loadingToast, 'info', 'RAG Tests: Demo-Modus (API nicht verfuegbar)')
      }
    } catch (err) {
      console.error('Failed to run RAG tests:', err)
      updateToast(loadingToast, 'info', 'RAG Tests: Demo-Modus (API nicht verfuegbar)')
    } finally {
      setIsRunningRag(false)
    }
  }

  // Tab content renderer
  const renderTabContent = () => {
    switch (activeTab) {
      case 'overview':
        return (
          <div className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              <MetricCard
                title="Golden Score"
                value={goldenMetrics?.avg_composite_score.toFixed(2) || '-'}
                subtitle="Durchschnitt aller Golden Tests"
                trend={trendData?.trend === 'improving' ? 'up' : trendData?.trend === 'declining' ? 'down' : 'stable'}
                color="blue"
              />
              <MetricCard
                title="Pass Rate"
                value={goldenMetrics ? `${((goldenMetrics.passed_tests / goldenMetrics.total_tests) * 100).toFixed(0)}%` : '-'}
                subtitle={goldenMetrics ? `${goldenMetrics.passed_tests}/${goldenMetrics.total_tests} bestanden` : undefined}
                color="green"
              />
              <MetricCard
                title="RAG Qualitaet"
                value={ragMetrics?.avg_composite_score.toFixed(2) || '-'}
                subtitle="RAG Retrieval Score"
                color="purple"
              />
              <MetricCard
                title="Test Runs"
                value={testRuns.length}
                subtitle="Letzte 30 Tage"
                color="yellow"
              />
            </div>

            <div className="bg-white rounded-xl border border-slate-200 p-6">
              <h3 className="text-lg font-semibold text-slate-900 mb-4">Score-Trend (30 Tage)</h3>
              <TrendChart data={trendData || { dates: [], scores: [], trend: 'insufficient_data' }} />
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
              <TestSuiteCard
                title="Golden Suite"
                description="97 validierte Referenz-Tests fuer Intent-Erkennung"
                metrics={goldenMetrics || undefined}
                onRun={runGoldenTests}
                isRunning={isRunningGolden}
              />
              <TestSuiteCard
                title="RAG/Korrektur Tests"
                description="EH-Retrieval, Operatoren-Alignment, Citation Tests"
                metrics={ragMetrics || undefined}
                onRun={runRagTests}
                isRunning={isRunningRag}
              />
              <TestSuiteCard
                title="Synthetic Tests"
                description="LLM-generierte Variationen fuer Robustheit"
                metrics={syntheticMetrics || undefined}
                onRun={runSyntheticTests}
                isRunning={isRunningSynthetic}
              />
            </div>

            {/* Quick Help */}
            <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
              <div className="flex items-start gap-3">
                <svg className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <div>
                  <p className="text-sm text-blue-800">
                    <strong>Neu hier?</strong> Wechseln Sie zum Tab &quot;Anleitung&quot; fuer eine ausfuehrliche Erklaerung
                    des BQAS-Systems und wie Sie es nutzen koennen.
                  </p>
                </div>
              </div>
            </div>
          </div>
        )

      case 'golden':
        return (
          <div className="space-y-6">
            <div className="bg-white rounded-xl border border-slate-200 p-6">
              <div className="flex items-center justify-between mb-6">
                <div>
                  <h3 className="text-lg font-semibold text-slate-900">Golden Test Suite</h3>
                  <p className="text-sm text-slate-500">Validierte Referenz-Tests gegen definierte Erwartungen</p>
                </div>
                <button
                  onClick={runGoldenTests}
                  disabled={isRunningGolden}
                  className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
                    isRunningGolden
                      ? 'bg-teal-100 text-teal-600 cursor-wait'
                      : 'bg-teal-600 text-white hover:bg-teal-700 active:scale-95'
                  }`}
                >
                  {isRunningGolden ? 'Laeuft...' : 'Tests starten'}
                </button>
              </div>

              {goldenMetrics && (
                <>
                  <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
                    <div className="text-center p-4 bg-slate-50 rounded-lg">
                      <p className="text-2xl font-bold text-slate-900">{goldenMetrics.total_tests}</p>
                      <p className="text-xs text-slate-500">Tests</p>
                    </div>
                    <div className="text-center p-4 bg-emerald-50 rounded-lg">
                      <p className="text-2xl font-bold text-emerald-600">{goldenMetrics.passed_tests}</p>
                      <p className="text-xs text-slate-500">Bestanden</p>
                    </div>
                    <div className="text-center p-4 bg-red-50 rounded-lg">
                      <p className="text-2xl font-bold text-red-600">{goldenMetrics.failed_tests}</p>
                      <p className="text-xs text-slate-500">Fehlgeschlagen</p>
                    </div>
                    <div className="text-center p-4 bg-blue-50 rounded-lg">
                      <p className="text-2xl font-bold text-blue-600">{goldenMetrics.avg_intent_accuracy.toFixed(0)}%</p>
                      <p className="text-xs text-slate-500">Intent Accuracy</p>
                    </div>
                    <div className="text-center p-4 bg-purple-50 rounded-lg">
                      <p className="text-2xl font-bold text-purple-600">{goldenMetrics.avg_composite_score.toFixed(2)}</p>
                      <p className="text-xs text-slate-500">Composite Score</p>
                    </div>
                  </div>

                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div>
                      <h4 className="font-medium text-slate-900 mb-4">Scores nach Intent</h4>
                      <IntentScoresChart scores={goldenMetrics.scores_by_intent} />
                    </div>
                    <div>
                      <h4 className="font-medium text-slate-900 mb-4">Fehlgeschlagene Tests ({goldenMetrics.failed_tests})</h4>
                      <FailedTestsList testIds={goldenMetrics.failed_test_ids} />
                    </div>
                  </div>
                </>
              )}
            </div>
          </div>
        )

      case 'rag':
        return (
          <div className="space-y-6">
            <div className="bg-white rounded-xl border border-slate-200 p-6">
              <div className="flex items-center justify-between mb-6">
                <div>
                  <h3 className="text-lg font-semibold text-slate-900">RAG/Korrektur Test Suite</h3>
                  <p className="text-sm text-slate-500">Erwartungshorizont-Retrieval, Operatoren-Alignment, Citations</p>
                </div>
                <button
                  onClick={runRagTests}
                  disabled={isRunningRag}
                  className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
                    isRunningRag
                      ? 'bg-teal-100 text-teal-600 cursor-wait'
                      : 'bg-teal-600 text-white hover:bg-teal-700 active:scale-95'
                  }`}
                >
                  {isRunningRag ? 'Laeuft...' : 'Tests starten'}
                </button>
              </div>

              {ragMetrics ? (
                <>
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                    <div className="text-center p-4 bg-slate-50 rounded-lg">
                      <p className="text-2xl font-bold text-slate-900">{ragMetrics.total_tests}</p>
                      <p className="text-xs text-slate-500">Tests</p>
                    </div>
                    <div className="text-center p-4 bg-purple-50 rounded-lg">
                      <p className="text-2xl font-bold text-purple-600">{ragMetrics.avg_faithfulness.toFixed(2)}</p>
                      <p className="text-xs text-slate-500">Faithfulness</p>
                    </div>
                    <div className="text-center p-4 bg-blue-50 rounded-lg">
                      <p className="text-2xl font-bold text-blue-600">{ragMetrics.avg_relevance.toFixed(2)}</p>
                      <p className="text-xs text-slate-500">Relevance</p>
                    </div>
                    <div className="text-center p-4 bg-emerald-50 rounded-lg">
                      <p className="text-2xl font-bold text-emerald-600">{(ragMetrics.safety_pass_rate * 100).toFixed(0)}%</p>
                      <p className="text-xs text-slate-500">Safety Pass</p>
                    </div>
                  </div>

                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div>
                      <h4 className="font-medium text-slate-900 mb-4">RAG Kategorien</h4>
                      <IntentScoresChart scores={ragMetrics.scores_by_intent} />
                    </div>
                    <div>
                      <h4 className="font-medium text-slate-900 mb-4">Fehlgeschlagene Tests</h4>
                      <FailedTestsList testIds={ragMetrics.failed_test_ids} />
                    </div>
                  </div>
                </>
              ) : (
                <div className="text-center py-12 text-slate-400">
                  <svg className="w-16 h-16 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                  </svg>
                  <p>Noch keine RAG-Test-Ergebnisse</p>
                  <p className="text-sm mt-2">Klicke &quot;Tests starten&quot; um die RAG-Suite auszufuehren</p>
                </div>
              )}
            </div>

            <div className="bg-white rounded-xl border border-slate-200 p-6">
              <h3 className="text-lg font-semibold text-slate-900 mb-4">Test-Kategorien</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div className="p-4 rounded-lg border bg-blue-50 border-blue-200">
                  <h4 className="font-medium text-slate-900">EH Retrieval</h4>
                  <p className="text-sm text-slate-600 mt-1">Korrektes Abrufen von Erwartungshorizont-Passagen</p>
                </div>
                <div className="p-4 rounded-lg border bg-purple-50 border-purple-200">
                  <h4 className="font-medium text-slate-900">Operator Alignment</h4>
                  <p className="text-sm text-slate-600 mt-1">Passende Operatoren fuer Abitur-Aufgaben</p>
                </div>
                <div className="p-4 rounded-lg border bg-red-50 border-red-200">
                  <h4 className="font-medium text-slate-900">Hallucination Control</h4>
                  <p className="text-sm text-slate-600 mt-1">Keine erfundenen Fakten oder Inhalte</p>
                </div>
                <div className="p-4 rounded-lg border bg-green-50 border-green-200">
                  <h4 className="font-medium text-slate-900">Citation Enforcement</h4>
                  <p className="text-sm text-slate-600 mt-1">Quellenangaben bei EH-Bezuegen</p>
                </div>
                <div className="p-4 rounded-lg border bg-amber-50 border-amber-200">
                  <h4 className="font-medium text-slate-900">Privacy Compliance</h4>
                  <p className="text-sm text-slate-600 mt-1">Keine PII-Leaks, DSGVO-Konformitaet</p>
                </div>
                <div className="p-4 rounded-lg border bg-slate-50 border-slate-200">
                  <h4 className="font-medium text-slate-900">Namespace Isolation</h4>
                  <p className="text-sm text-slate-600 mt-1">Strikte Trennung zwischen Lehrern</p>
                </div>
              </div>
            </div>
          </div>
        )

      case 'synthetic':
        return (
          <div className="space-y-6">
            <div className="bg-white rounded-xl border border-slate-200 p-6">
              <div className="flex items-center justify-between mb-6">
                <div>
                  <h3 className="text-lg font-semibold text-slate-900">Synthetic Test Suite</h3>
                  <p className="text-sm text-slate-500">LLM-generierte Variationen fuer Robustheit-Tests</p>
                </div>
                <button
                  onClick={runSyntheticTests}
                  disabled={isRunningSynthetic}
                  className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
                    isRunningSynthetic
                      ? 'bg-teal-100 text-teal-600 cursor-wait'
                      : 'bg-teal-600 text-white hover:bg-teal-700 active:scale-95'
                  }`}
                >
                  {isRunningSynthetic ? 'Laeuft...' : 'Tests starten'}
                </button>
              </div>

              {syntheticMetrics ? (
                <>
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                    <div className="text-center p-4 bg-slate-50 rounded-lg">
                      <p className="text-2xl font-bold text-slate-900">{syntheticMetrics.total_tests}</p>
                      <p className="text-xs text-slate-500">Generierte Tests</p>
                    </div>
                    <div className="text-center p-4 bg-emerald-50 rounded-lg">
                      <p className="text-2xl font-bold text-emerald-600">{syntheticMetrics.passed_tests}</p>
                      <p className="text-xs text-slate-500">Bestanden</p>
                    </div>
                    <div className="text-center p-4 bg-blue-50 rounded-lg">
                      <p className="text-2xl font-bold text-blue-600">{syntheticMetrics.avg_composite_score.toFixed(2)}</p>
                      <p className="text-xs text-slate-500">Avg Score</p>
                    </div>
                    <div className="text-center p-4 bg-purple-50 rounded-lg">
                      <p className="text-2xl font-bold text-purple-600">{syntheticMetrics.avg_coherence.toFixed(2)}</p>
                      <p className="text-xs text-slate-500">Coherence</p>
                    </div>
                  </div>

                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div>
                      <h4 className="font-medium text-slate-900 mb-4">Intent-Variationen</h4>
                      <IntentScoresChart scores={syntheticMetrics.scores_by_intent} />
                    </div>
                    <div>
                      <h4 className="font-medium text-slate-900 mb-4">Fehlgeschlagene Tests</h4>
                      <FailedTestsList testIds={syntheticMetrics.failed_test_ids} />
                    </div>
                  </div>
                </>
              ) : (
                <div className="text-center py-12 text-slate-400">
                  <svg className="w-16 h-16 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                  </svg>
                  <p>Noch keine synthetischen Tests ausgefuehrt</p>
                  <p className="text-sm mt-2">Klicke &quot;Tests starten&quot; um Variationen zu generieren</p>
                </div>
              )}
            </div>
          </div>
        )

      case 'history':
        return (
          <div className="bg-white rounded-xl border border-slate-200 p-6">
            <h3 className="text-lg font-semibold text-slate-900 mb-6">Test Run Historie</h3>
            <TestRunsTable runs={testRuns} />
          </div>
        )

      case 'guide' as TabType:
        return <GuideTab />

      default:
        return null
    }
  }

  return (
    <div className="space-y-6">
      <ToastContainer toasts={toasts} onDismiss={removeToast} />

      <PagePurpose
        title="Test Quality (BQAS)"
        purpose="BQAS Dashboard mit Golden Suite (97 Referenz-Tests), RAG/Korrektur Tests und Synthetic Test Generierung. Ueberwacht die Qualitaet der KI-Ausgaben und identifiziert Regressions."
        audience={['Entwickler', 'Data Scientists', 'QA', 'Auditoren']}
        architecture={{
          services: ['voice-service (Port 8091)', 'embedding-service'],
          databases: ['Qdrant', 'PostgreSQL'],
        }}
        relatedPages={[
          { name: 'GPU Infrastruktur', href: '/ai/gpu', description: 'GPU-Ressourcen verwalten' },
          { name: 'RAG Management', href: '/ai/rag', description: 'Training Data & RAG Pipelines' },
        ]}
        collapsible={true}
        defaultCollapsed={true}
      />

      {/* KI-Werkzeuge Sidebar */}
      <AIToolsSidebarResponsive currentTool="test-quality" />

      {error && (
        <div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 flex items-center gap-3">
          <svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <span>{error}</span>
          <button onClick={fetchData} className="ml-auto text-red-600 hover:text-red-800 text-sm font-medium">
            Erneut versuchen
          </button>
        </div>
      )}

      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
        <div className="border-b border-slate-200">
          <nav className="flex gap-6 px-6">
            {[
              { id: 'overview', label: 'Uebersicht' },
              { id: 'golden', label: 'Golden Suite' },
              { id: 'rag', label: 'RAG/Korrektur' },
              { id: 'synthetic', label: 'Synthetic' },
              { id: 'history', label: 'Historie' },
              { id: 'guide', label: 'Anleitung', highlight: true },
            ].map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id as TabType)}
                className={`py-4 text-sm font-medium border-b-2 transition-colors ${
                  activeTab === tab.id
                    ? 'border-teal-600 text-teal-600'
                    : tab.highlight
                      ? 'border-transparent text-blue-500 hover:text-blue-600'
                      : 'border-transparent text-slate-500 hover:text-slate-700'
                }`}
              >
                {tab.label}
              </button>
            ))}
          </nav>
        </div>

        <div className="p-6">
          {isLoading ? (
            <div className="flex items-center justify-center py-12">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-teal-600"></div>
            </div>
          ) : (
            renderTabContent()
          )}
        </div>
      </div>

      <div className="flex items-center justify-between text-sm text-slate-500 px-2">
        <div>
          <span className="font-medium">Voice Service:</span> voice-service:8091
        </div>
        <div className="flex items-center gap-4">
          <Link href="/infrastructure/ci-cd" className="text-teal-600 hover:text-teal-700">
            Scheduler (CI/CD)
          </Link>
          <Link href="/ai/quality" className="text-teal-600 hover:text-teal-700">
            Compliance Audit
          </Link>
        </div>
      </div>

      <style jsx>{`
        @keyframes slide-in {
          from {
            transform: translateX(100%);
            opacity: 0;
          }
          to {
            transform: translateX(0);
            opacity: 1;
          }
        }
        .animate-slide-in {
          animation: slide-in 0.3s ease-out;
        }
      `}</style>
    </div>
  )
}