'use client'

import type { BQASMetrics, TrendData, TestRun } from '../types'
import { MetricCard } from './MetricCard'
import { TrendChart } from './TrendChart'
import { TestSuiteCard } from './TestSuiteCard'

export function OverviewTab({
  goldenMetrics,
  syntheticMetrics,
  ragMetrics,
  trendData,
  testRuns,
  isRunningGolden,
  isRunningSynthetic,
  isRunningRag,
  runGoldenTests,
  runSyntheticTests,
  runRagTests,
}: {
  goldenMetrics: BQASMetrics | null
  syntheticMetrics: BQASMetrics | null
  ragMetrics: BQASMetrics | null
  trendData: TrendData | null
  testRuns: TestRun[]
  isRunningGolden: boolean
  isRunningSynthetic: boolean
  isRunningRag: boolean
  runGoldenTests: () => void
  runSyntheticTests: () => void
  runRagTests: () => void
}) {
  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>
  )
}