breakpilot-lehrer/admin-lehrer/components/ocr-pipeline/LlmReviewCorrections.tsx

'use client'

import type { LlmChange, ReviewMeta } from './llm-review-types'
import { FIELD_LABELS } from './llm-review-types'

interface LlmReviewCorrectionsProps {
  changes: LlmChange[]
  accepted: Set<number>
  meta: ReviewMeta | null
  totalDuration: number
  applying: boolean
  onToggleChange: (index: number) => void
  onToggleAll: () => void
  onApply: () => void
  onNext: () => void
}

export function LlmReviewCorrections({
  changes,
  accepted,
  meta,
  totalDuration,
  applying,
  onToggleChange,
  onToggleAll,
  onApply,
  onNext,
}: LlmReviewCorrectionsProps) {
  return (
    <div className="space-y-4">
      {/* Summary */}
      <div className="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-3 text-xs text-gray-500 dark:text-gray-400">
        {changes.length === 0 ? (
          <span>Keine Korrekturen noetig — alle Eintraege sind korrekt.</span>
        ) : (
          <span>
            {changes.length} Korrektur{changes.length !== 1 ? 'en' : ''} gefunden ·{' '}
            {accepted.size} ausgewaehlt ·{' '}
            {meta?.skipped || 0} uebersprungen (Lautschrift) ·{' '}
            {totalDuration}ms
          </span>
        )}
      </div>

      {/* Corrections detail list (if any) */}
      {changes.length > 0 && (
        <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
          <div className="bg-gray-50 dark:bg-gray-800 px-3 py-2 border-b border-gray-200 dark:border-gray-700">
            <span className="text-xs font-medium text-gray-600 dark:text-gray-400">
              Korrekturvorschlaege ({accepted.size}/{changes.length} ausgewaehlt)
            </span>
          </div>
          <table className="w-full text-sm">
            <thead>
              <tr className="bg-gray-50/50 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-700">
                <th className="w-10 px-3 py-1.5 text-center">
                  <input type="checkbox" checked={accepted.size === changes.length} onChange={onToggleAll}
                    className="rounded border-gray-300 dark:border-gray-600" />
                </th>
                <th className="px-2 py-1.5 text-left text-gray-500 dark:text-gray-400 font-medium text-xs">Zeile</th>
                <th className="px-2 py-1.5 text-left text-gray-500 dark:text-gray-400 font-medium text-xs">Feld</th>
                <th className="px-2 py-1.5 text-left text-gray-500 dark:text-gray-400 font-medium text-xs">Vorher</th>
                <th className="px-2 py-1.5 text-left text-gray-500 dark:text-gray-400 font-medium text-xs">Nachher</th>
              </tr>
            </thead>
            <tbody>
              {changes.map((change, idx) => (
                <tr key={idx} className={`border-b border-gray-100 dark:border-gray-700/50 ${
                  accepted.has(idx) ? 'bg-teal-50/50 dark:bg-teal-900/10' : ''
                }`}>
                  <td className="px-3 py-1.5 text-center">
                    <input type="checkbox" checked={accepted.has(idx)} onChange={() => onToggleChange(idx)}
                      className="rounded border-gray-300 dark:border-gray-600" />
                  </td>
                  <td className="px-2 py-1.5 text-gray-500 dark:text-gray-400 font-mono text-xs">R{change.row_index}</td>
                  <td className="px-2 py-1.5">
                    <span className="text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400">
                      {FIELD_LABELS[change.field] || change.field}
                    </span>
                  </td>
                  <td className="px-2 py-1.5"><span className="line-through text-red-500 dark:text-red-400 text-xs">{change.old}</span></td>
                  <td className="px-2 py-1.5"><span className="text-green-600 dark:text-green-400 font-medium text-xs">{change.new}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {/* Actions */}
      <div className="flex items-center justify-between pt-2">
        <p className="text-xs text-gray-400">
          {changes.length > 0 ? `${accepted.size} von ${changes.length} ausgewaehlt` : ''}
        </p>
        <div className="flex gap-3">
          {changes.length > 0 && (
            <button onClick={onNext}
              className="px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-gray-600 dark:text-gray-400">
              Alle ablehnen
            </button>
          )}
          {changes.length > 0 ? (
            <button onClick={onApply} disabled={applying || accepted.size === 0}
              className="px-5 py-2 text-sm bg-teal-600 text-white rounded-lg hover:bg-teal-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium">
              {applying ? 'Wird uebernommen...' : `${accepted.size} Korrektur${accepted.size !== 1 ? 'en' : ''} uebernehmen`}
            </button>
          ) : (
            <button onClick={onNext}
              className="px-6 py-2.5 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors font-medium">
              Weiter →
            </button>
          )}
        </div>
      </div>
    </div>
  )
}