'use client'

import type { BQASMetrics } from '../types'
import { IntentScoresChart } from './IntentScoresChart'
import { FailedTestsList } from './FailedTestsList'

export function RagTab({
  ragMetrics,
  isRunningRag,
  runRagTests,
}: {
  ragMetrics: BQASMetrics | null
  isRunningRag: boolean
  runRagTests: () => void
}) {
  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>
  )
}