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

export function OverviewTab({
  goldenMetrics,
  ragMetrics,
  syntheticMetrics,
  trendData,
  testRuns,
  isRunningGolden,
  isRunningRag,
  isRunningSynthetic,
  runGoldenTests,
  runRagTests,
  runSyntheticTests,
}: {
  goldenMetrics: BQASMetrics | null
  ragMetrics: BQASMetrics | null
  syntheticMetrics: BQASMetrics | null
  trendData: TrendData | null
  testRuns: TestRun[]
  isRunningGolden: boolean
  isRunningRag: boolean
  isRunningSynthetic: boolean
  runGoldenTests: () => void
  runRagTests: () => void
  runSyntheticTests: () => void
}) {
  return (
    <div className="space-y-6">
      {/* Quick Stats */}
      <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>

      {/* Trend Chart */}
      <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>

      {/* Test Suites Grid */}
      <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>
    </div>
  )
}