breakpilot-lehrer/admin-lehrer/components/ocr/GroundTruthSummary.tsx

'use client'

/**
 * GroundTruthSummary — Summary view shown after all entries have been reviewed.
 *
 * Displays confirmed/edited/skipped counts, a save button, and a
 * clickable table of all entries for quick navigation back to any row.
 */

import type { GTEntry } from './ground-truth-types'

interface GroundTruthSummaryProps {
  entries: GTEntry[]
  confirmedCount: number
  editedCount: number
  skippedCount: number
  saving: boolean
  savedMessage: string | null
  error: string | null
  isFullscreen: boolean
  onSave: () => void
  onRestart: () => void
  onToggleFullscreen: () => void
  onGoTo: (index: number) => void
}

export function GroundTruthSummary({
  entries,
  confirmedCount,
  editedCount,
  skippedCount,
  saving,
  savedMessage,
  error,
  isFullscreen,
  onSave,
  onRestart,
  onToggleFullscreen,
  onGoTo,
}: GroundTruthSummaryProps) {
  return (
    <div className={`bg-white rounded-xl border border-slate-200 p-6 ${
      isFullscreen ? 'fixed inset-0 z-50 overflow-auto m-0 rounded-none' : ''
    }`}>
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-lg font-semibold text-slate-900">Zusammenfassung</h3>
        <button
          onClick={onToggleFullscreen}
          className="p-1.5 rounded-lg hover:bg-slate-100 text-slate-500 hover:text-slate-700 transition-colors"
          title={isFullscreen ? 'Vollbild verlassen (Esc)' : 'Vollbild'}
        >
          {isFullscreen ? (
            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" d="M9 9V4.5M9 9H4.5M9 9 3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5 5.25 5.25" />
            </svg>
          ) : (
            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
            </svg>
          )}
        </button>
      </div>
      <div className="grid grid-cols-3 gap-4 mb-6">
        <div className="bg-green-50 border border-green-200 rounded-lg p-4 text-center">
          <div className="text-2xl font-bold text-green-700">{confirmedCount}</div>
          <div className="text-sm text-green-600">Bestaetigt</div>
        </div>
        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 text-center">
          <div className="text-2xl font-bold text-blue-700">{editedCount}</div>
          <div className="text-sm text-blue-600">Editiert</div>
        </div>
        <div className="bg-slate-50 border border-slate-200 rounded-lg p-4 text-center">
          <div className="text-2xl font-bold text-slate-700">{skippedCount}</div>
          <div className="text-sm text-slate-500">Uebersprungen</div>
        </div>
      </div>

      <div className="flex gap-3">
        <button
          onClick={onSave}
          disabled={saving}
          className="flex-1 px-4 py-2.5 bg-teal-600 text-white rounded-lg font-medium hover:bg-teal-700 disabled:opacity-50"
        >
          {saving ? 'Speichern...' : 'Ground Truth speichern'}
        </button>
        <button
          onClick={onRestart}
          className="px-4 py-2.5 bg-slate-100 text-slate-700 rounded-lg font-medium hover:bg-slate-200"
        >
          Nochmal durchgehen
        </button>
      </div>

      {savedMessage && (
        <div className="mt-4 p-3 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">
          {savedMessage}
        </div>
      )}
      {error && (
        <div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">{error}</div>
      )}

      {/* Entry list for quick review */}
      <div className="mt-6 max-h-96 overflow-y-auto">
        <table className="w-full text-sm">
          <thead className="sticky top-0 bg-white">
            <tr className="border-b border-slate-200">
              <th className="text-left py-2 px-2 text-slate-500">#</th>
              <th className="text-left py-2 px-2 text-slate-500">English</th>
              <th className="text-left py-2 px-2 text-slate-500">Deutsch</th>
              <th className="text-left py-2 px-2 text-slate-500">Status</th>
            </tr>
          </thead>
          <tbody>
            {entries.map((e, i) => (
              <tr
                key={i}
                onClick={() => onGoTo(i)}
                className="border-b border-slate-100 hover:bg-slate-50 cursor-pointer"
              >
                <td className="py-1.5 px-2 text-slate-400">{i + 1}</td>
                <td className="py-1.5 px-2">{e.english}</td>
                <td className="py-1.5 px-2">{e.german}</td>
                <td className="py-1.5 px-2">
                  <span className={`inline-block px-2 py-0.5 rounded-full text-xs font-medium ${
                    e.status === 'confirmed' ? 'bg-green-100 text-green-700' :
                    e.status === 'edited' ? 'bg-blue-100 text-blue-700' :
                    e.status === 'skipped' ? 'bg-slate-100 text-slate-500' :
                    'bg-yellow-100 text-yellow-700'
                  }`}>
                    {e.status === 'confirmed' ? 'OK' :
                     e.status === 'edited' ? 'Editiert' :
                     e.status === 'skipped' ? 'Skip' : 'Offen'}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}