'use client'

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

export function GoldenTab({
  goldenMetrics,
  isRunningGolden,
  runGoldenTests,
}: {
  goldenMetrics: BQASMetrics | null
  isRunningGolden: boolean
  runGoldenTests: () => 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">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>
  )
}