'use client'

import type { GridResult } from '@/app/(admin)/ai/ocr-kombi/types'

interface WordRecognitionControlsProps {
  gridResult: GridResult
  isVocab: boolean
  detecting: boolean
  usedEngine: string
  ocrEngine: string
  setOcrEngine: (engine: 'auto' | 'tesseract' | 'rapid' | 'paddle') => void
  pronunciation: 'british' | 'american'
  setPronunciation: (p: 'british' | 'american') => void
  gridMethod: 'v2' | 'words_first'
  setGridMethod: (m: 'v2' | 'words_first') => void
  gtNotes: string
  setGtNotes: (notes: string) => void
  gtSaved: boolean
  runAutoDetection: () => void
  handleGroundTruth: (isCorrect: boolean) => void
  goToStep: (step: number) => void
  onNext: () => void
}

export function WordRecognitionControls({
  gridResult,
  isVocab,
  detecting,
  usedEngine,
  ocrEngine,
  setOcrEngine,
  pronunciation,
  setPronunciation,
  gridMethod,
  setGridMethod,
  gtNotes,
  setGtNotes,
  gtSaved,
  runAutoDetection,
  handleGroundTruth,
  goToStep,
  onNext,
}: WordRecognitionControlsProps) {
  return (
    <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 space-y-3">
      <div className="flex items-center gap-3 flex-wrap">
        {/* Grid method selector */}
        <select
          value={gridMethod}
          onChange={(e) => setGridMethod(e.target.value as 'v2' | 'words_first')}
          className="px-2 py-1.5 text-xs border rounded-lg dark:bg-gray-700 dark:border-gray-600"
        >
          <option value="v2">Standard (v2)</option>
          <option value="words_first">Words-First</option>
        </select>

        {/* OCR Engine selector */}
        <select
          value={ocrEngine}
          onChange={(e) => setOcrEngine(e.target.value as 'auto' | 'tesseract' | 'rapid' | 'paddle')}
          className="px-2 py-1.5 text-xs border rounded-lg dark:bg-gray-700 dark:border-gray-600"
        >
          <option value="auto">Auto (RapidOCR wenn verfuegbar)</option>
          <option value="rapid">RapidOCR (ONNX)</option>
          <option value="tesseract">Tesseract</option>
          <option value="paddle">PP-OCRv5 (lokal)</option>
        </select>

        {/* Pronunciation selector (only for vocab) */}
        {isVocab && (
          <select
            value={pronunciation}
            onChange={(e) => setPronunciation(e.target.value as 'british' | 'american')}
            className="px-2 py-1.5 text-xs border rounded-lg dark:bg-gray-700 dark:border-gray-600"
          >
            <option value="british">Britisch (RP)</option>
            <option value="american">Amerikanisch</option>
          </select>
        )}

        <button
          onClick={() => runAutoDetection()}
          disabled={detecting}
          className="px-3 py-1.5 text-xs border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 dark:border-gray-600 disabled:opacity-50"
        >
          Erneut erkennen
        </button>

        {/* Show which engine was used */}
        {usedEngine && (
          <span className={`px-2 py-0.5 rounded text-[10px] uppercase font-semibold ${
            usedEngine === 'rapid' || usedEngine === 'paddle'
              ? 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300'
              : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'
          }`}>
            {usedEngine === 'paddle' ? 'pp-ocrv5' : usedEngine}
          </span>
        )}

        <button
          onClick={() => goToStep(3)}
          className="px-3 py-1.5 text-xs border rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 dark:border-gray-600 text-orange-600 dark:text-orange-400 border-orange-300 dark:border-orange-700"
        >
          Zeilen korrigieren (Step 4)
        </button>

        <div className="flex-1" />

        {/* Ground truth */}
        {!gtSaved ? (
          <>
            <input
              type="text"
              placeholder="Notizen (optional)"
              value={gtNotes}
              onChange={(e) => setGtNotes(e.target.value)}
              className="px-2 py-1 text-xs border rounded dark:bg-gray-700 dark:border-gray-600 w-48"
            />
            <button
              onClick={() => handleGroundTruth(true)}
              className="px-3 py-1.5 text-xs bg-green-600 text-white rounded-lg hover:bg-green-700"
            >
              Korrekt
            </button>
            <button
              onClick={() => handleGroundTruth(false)}
              className="px-3 py-1.5 text-xs bg-red-600 text-white rounded-lg hover:bg-red-700"
            >
              Fehlerhaft
            </button>
          </>
        ) : (
          <span className="text-xs text-green-600 dark:text-green-400">
            Ground Truth gespeichert
          </span>
        )}

        <button
          onClick={onNext}
          className="px-4 py-1.5 text-xs bg-teal-600 text-white rounded-lg hover:bg-teal-700 font-medium"
        >
          Weiter
        </button>
      </div>
    </div>
  )
}