'use client'

/**
 * OCR Regression Dashboard
 *
 * Shows all ground-truth sessions, runs regression tests,
 * displays pass/fail results with diff details, and shows history.
 */

import { useState, useEffect, useCallback } from 'react'
import { PagePurpose } from '@/components/common/PagePurpose'

const KLAUSUR_API = '/klausur-api'

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

interface GTSession {
  session_id: string
  name: string
  filename: string
  document_category: string | null
  pipeline: string | null
  saved_at: string | null
  summary: {
    total_zones: number
    total_columns: number
    total_rows: number
    total_cells: number
  }
}

interface DiffSummary {
  structural_changes: number
  cells_missing: number
  cells_added: number
  text_changes: number
  col_type_changes: number
}

interface RegressionResult {
  session_id: string
  name: string
  status: 'pass' | 'fail' | 'error'
  error?: string
  diff_summary?: DiffSummary
  reference_summary?: Record<string, number>
  current_summary?: Record<string, number>
  structural_diffs?: Array<{ field: string; reference: number; current: number }>
  cell_diffs?: Array<{ type: string; cell_id: string; reference?: string; current?: string }>
}

interface RegressionRun {
  id: string
  run_at: string
  status: string
  total: number
  passed: number
  failed: number
  errors: number
  duration_ms: number
  triggered_by: string
}

// ---------------------------------------------------------------------------
// Helpers
// ---------------------------------------------------------------------------

function StatusBadge({ status }: { status: string }) {
  const cls =
    status === 'pass'
      ? 'bg-emerald-100 text-emerald-800 border-emerald-200'
      : status === 'fail'
        ? 'bg-red-100 text-red-800 border-red-200'
        : 'bg-amber-100 text-amber-800 border-amber-200'
  return (
    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${cls}`}>
      {status === 'pass' ? 'Pass' : status === 'fail' ? 'Fail' : 'Error'}
    </span>
  )
}

function formatDate(iso: string | null) {
  if (!iso) return '—'
  return new Date(iso).toLocaleString('de-DE', {
    day: '2-digit', month: '2-digit', year: 'numeric',
    hour: '2-digit', minute: '2-digit',
  })
}

// ---------------------------------------------------------------------------
// Component
// ---------------------------------------------------------------------------

export default function OCRRegressionPage() {
  const [sessions, setSessions] = useState<GTSession[]>([])
  const [results, setResults] = useState<RegressionResult[]>([])
  const [history, setHistory] = useState<RegressionRun[]>([])
  const [running, setRunning] = useState(false)
  const [overallStatus, setOverallStatus] = useState<string | null>(null)
  const [durationMs, setDurationMs] = useState<number | null>(null)
  const [expandedSession, setExpandedSession] = useState<string | null>(null)
  const [tab, setTab] = useState<'current' | 'history'>('current')

  // Load ground-truth sessions
  const loadSessions = useCallback(async () => {
    try {
      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/ground-truth-sessions`)
      if (res.ok) {
        const data = await res.json()
        setSessions(data.sessions || [])
      }
    } catch (e) {
      console.error('Failed to load GT sessions:', e)
    }
  }, [])

  // Load history
  const loadHistory = useCallback(async () => {
    try {
      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/regression/history?limit=20`)
      if (res.ok) {
        const data = await res.json()
        setHistory(data.runs || [])
      }
    } catch (e) {
      console.error('Failed to load history:', e)
    }
  }, [])

  useEffect(() => {
    loadSessions()
    loadHistory()
  }, [loadSessions, loadHistory])

  // Run all regressions
  const runAll = async () => {
    setRunning(true)
    setResults([])
    setOverallStatus(null)
    setDurationMs(null)
    try {
      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/regression/run?triggered_by=manual`, {
        method: 'POST',
      })
      if (res.ok) {
        const data = await res.json()
        setResults(data.results || [])
        setOverallStatus(data.status)
        setDurationMs(data.duration_ms)
        loadHistory()
      }
    } catch (e) {
      console.error('Regression run failed:', e)
      setOverallStatus('error')
    } finally {
      setRunning(false)
    }
  }

  const totalPass = results.filter(r => r.status === 'pass').length
  const totalFail = results.filter(r => r.status === 'fail').length
  const totalError = results.filter(r => r.status === 'error').length

  return (
    <div className="space-y-6">
      <div className="max-w-7xl mx-auto p-6 space-y-6">
        <PagePurpose
          title="OCR Regression Tests"
          purpose="Automatische Regressions-Tests fuer die OCR-Pipeline: Ground-Truth Sessions neu auswerten und gegen Referenz-Ergebnisse vergleichen."
          audience={['Entwickler', 'QA']}
          defaultCollapsed
          architecture={{
            services: ['klausur-service (FastAPI, Port 8086)'],
            databases: ['PostgreSQL (regression_runs, ocr_pipeline_sessions)'],
          }}
          relatedPages={[
            { name: 'OCR Pipeline', href: '/ai/ocr-pipeline', description: 'OCR-Pipeline ausfuehren' },
            { name: 'Ground Truth Review', href: '/ai/ocr-ground-truth', description: 'Sessions pruefen & markieren' },
          ]}
        />

        {/* Header + Run Button */}
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold text-slate-900">OCR Regression Tests</h1>
            <p className="text-sm text-slate-500 mt-1">
              {sessions.length} Ground-Truth Session{sessions.length !== 1 ? 's' : ''}
            </p>
          </div>
          <button
            onClick={runAll}
            disabled={running || sessions.length === 0}
            className="inline-flex items-center gap-2 px-4 py-2.5 bg-teal-600 text-white rounded-lg hover:bg-teal-700 disabled:opacity-50 disabled:cursor-not-allowed font-medium transition-colors"
          >
            {running ? (
              <>
                <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...
              </>
            ) : (
              'Alle Tests starten'
            )}
          </button>
        </div>

        {/* Overall Result Banner */}
        {overallStatus && (
          <div className={`rounded-lg p-4 border ${
            overallStatus === 'pass'
              ? 'bg-emerald-50 border-emerald-200'
              : 'bg-red-50 border-red-200'
          }`}>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-3">
                <StatusBadge status={overallStatus} />
                <span className="font-medium text-slate-900">
                  {totalPass} bestanden, {totalFail} fehlgeschlagen, {totalError} Fehler
                </span>
              </div>
              {durationMs !== null && (
                <span className="text-sm text-slate-500">{(durationMs / 1000).toFixed(1)}s</span>
              )}
            </div>
          </div>
        )}

        {/* Tabs */}
        <div className="border-b border-slate-200">
          <nav className="flex gap-4">
            {(['current', 'history'] as const).map(t => (
              <button
                key={t}
                onClick={() => setTab(t)}
                className={`pb-3 px-1 text-sm font-medium border-b-2 transition-colors ${
                  tab === t
                    ? 'border-teal-500 text-teal-600'
                    : 'border-transparent text-slate-500 hover:text-slate-700'
                }`}
              >
                {t === 'current' ? 'Aktuelle Ergebnisse' : 'Verlauf'}
              </button>
            ))}
          </nav>
        </div>

        {/* Current Results Tab */}
        {tab === 'current' && (
          <div className="space-y-3">
            {results.length === 0 && !running && (
              <div className="text-center py-12 text-slate-400">
                <p className="text-lg">Keine Ergebnisse</p>
                <p className="text-sm mt-1">Klicken Sie &quot;Alle Tests starten&quot; um die Regression zu laufen.</p>
              </div>
            )}
            {results.map(r => (
              <div
                key={r.session_id}
                className="bg-white rounded-lg border border-slate-200 overflow-hidden"
              >
                <div
                  className="flex items-center justify-between px-4 py-3 cursor-pointer hover:bg-slate-50 transition-colors"
                  onClick={() => setExpandedSession(expandedSession === r.session_id ? null : r.session_id)}
                >
                  <div className="flex items-center gap-3 min-w-0">
                    <StatusBadge status={r.status} />
                    <span className="font-medium text-slate-900 truncate">{r.name || r.session_id}</span>
                  </div>
                  <div className="flex items-center gap-4 text-sm text-slate-500">
                    {r.diff_summary && (
                      <span>
                        {r.diff_summary.text_changes} Text, {r.diff_summary.structural_changes} Struktur
                      </span>
                    )}
                    {r.error && <span className="text-red-500">{r.error}</span>}
                    <svg className={`w-4 h-4 transition-transform ${expandedSession === r.session_id ? 'rotate-180' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                    </svg>
                  </div>
                </div>

                {/* Expanded Details */}
                {expandedSession === r.session_id && r.status === 'fail' && (
                  <div className="border-t border-slate-100 px-4 py-3 bg-slate-50 space-y-3">
                    {/* Structural Diffs */}
                    {r.structural_diffs && r.structural_diffs.length > 0 && (
                      <div>
                        <h4 className="text-xs font-medium text-slate-500 uppercase mb-1">Strukturelle Aenderungen</h4>
                        <div className="space-y-1">
                          {r.structural_diffs.map((d, i) => (
                            <div key={i} className="text-sm">
                              <span className="font-mono text-slate-600">{d.field}</span>: {d.reference} → {d.current}
                            </div>
                          ))}
                        </div>
                      </div>
                    )}
                    {/* Cell Diffs */}
                    {r.cell_diffs && r.cell_diffs.length > 0 && (
                      <div>
                        <h4 className="text-xs font-medium text-slate-500 uppercase mb-1">
                          Zellen-Aenderungen ({r.cell_diffs.length})
                        </h4>
                        <div className="max-h-60 overflow-y-auto space-y-1">
                          {r.cell_diffs.slice(0, 50).map((d, i) => (
                            <div key={i} className="text-sm font-mono bg-white rounded px-2 py-1 border border-slate-100">
                              <span className={`text-xs px-1 rounded ${
                                d.type === 'text_change' ? 'bg-amber-100 text-amber-700'
                                  : d.type === 'cell_missing' ? 'bg-red-100 text-red-700'
                                    : 'bg-blue-100 text-blue-700'
                              }`}>
                                {d.type}
                              </span>{' '}
                              <span className="text-slate-500">{d.cell_id}</span>
                              {d.reference && (
                                <>
                                  {' '}<span className="line-through text-red-400">{d.reference}</span>
                                </>
                              )}
                              {d.current && (
                                <>
                                  {' '}<span className="text-emerald-600">{d.current}</span>
                                </>
                              )}
                            </div>
                          ))}
                          {r.cell_diffs.length > 50 && (
                            <p className="text-xs text-slate-400">... und {r.cell_diffs.length - 50} weitere</p>
                          )}
                        </div>
                      </div>
                    )}
                  </div>
                )}
              </div>
            ))}

            {/* Ground Truth Sessions Overview (when no results yet) */}
            {results.length === 0 && sessions.length > 0 && (
              <div>
                <h3 className="text-sm font-medium text-slate-700 mb-2">Ground-Truth Sessions</h3>
                <div className="grid gap-2">
                  {sessions.map(s => (
                    <div key={s.session_id} className="bg-white rounded-lg border border-slate-200 px-4 py-3 flex items-center justify-between">
                      <div>
                        <span className="font-medium text-slate-900">{s.name || s.session_id}</span>
                        <span className="text-sm text-slate-400 ml-2">{s.filename}</span>
                      </div>
                      <div className="text-sm text-slate-500">
                        {s.summary.total_cells} Zellen, {s.summary.total_zones} Zonen
                        {s.pipeline && <span className="ml-2 text-xs bg-slate-100 px-1.5 py-0.5 rounded">{s.pipeline}</span>}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        )}

        {/* History Tab */}
        {tab === 'history' && (
          <div className="space-y-2">
            {history.length === 0 ? (
              <p className="text-center py-8 text-slate-400">Noch keine Laeufe aufgezeichnet.</p>
            ) : (
              <table className="w-full text-sm">
                <thead>
                  <tr className="border-b border-slate-200 text-left text-slate-500">
                    <th className="pb-2 font-medium">Datum</th>
                    <th className="pb-2 font-medium">Status</th>
                    <th className="pb-2 font-medium text-right">Gesamt</th>
                    <th className="pb-2 font-medium text-right">Pass</th>
                    <th className="pb-2 font-medium text-right">Fail</th>
                    <th className="pb-2 font-medium text-right">Dauer</th>
                    <th className="pb-2 font-medium">Trigger</th>
                  </tr>
                </thead>
                <tbody>
                  {history.map(run => (
                    <tr key={run.id} className="border-b border-slate-100 hover:bg-slate-50">
                      <td className="py-2">{formatDate(run.run_at)}</td>
                      <td className="py-2"><StatusBadge status={run.status} /></td>
                      <td className="py-2 text-right">{run.total}</td>
                      <td className="py-2 text-right text-emerald-600">{run.passed}</td>
                      <td className="py-2 text-right text-red-600">{run.failed + run.errors}</td>
                      <td className="py-2 text-right text-slate-500">{(run.duration_ms / 1000).toFixed(1)}s</td>
                      <td className="py-2 text-slate-400">{run.triggered_by}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>
        )}
      </div>
    </div>
  )
}