'use client'

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

interface DewarpGroundTruthPanelProps {
  manualShear: number
  onGroundTruth: (gt: DewarpGroundTruth) => void
  gtSaved: boolean
  onGtSaved: () => void
}

export function DewarpGroundTruthPanel({
  manualShear,
  onGroundTruth,
  gtSaved,
  onGtSaved,
}: DewarpGroundTruthPanelProps) {
  const [gtFeedback, setGtFeedback] = useState<'correct' | 'incorrect' | null>(null)
  const [gtNotes, setGtNotes] = useState('')

  const handleGroundTruth = (isCorrect: boolean) => {
    setGtFeedback(isCorrect ? 'correct' : 'incorrect')
    if (isCorrect) {
      onGroundTruth({ is_correct: true })
      onGtSaved()
    }
  }

  const handleGroundTruthIncorrect = () => {
    onGroundTruth({
      is_correct: false,
      corrected_shear: manualShear !== 0 ? manualShear : undefined,
      notes: gtNotes || undefined,
    })
    onGtSaved()
  }

  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
      <div className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
        Spalten vertikal ausgerichtet?
      </div>
      <p className="text-xs text-gray-400 mb-2">Pruefen ob die Spaltenraender jetzt senkrecht zum Raster stehen.</p>
      {!gtSaved ? (
        <div className="space-y-3">
          <div className="flex gap-2">
            <button
              onClick={() => handleGroundTruth(true)}
              className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${
                gtFeedback === 'correct'
                  ? 'bg-green-100 text-green-700 ring-2 ring-green-400'
                  : 'bg-gray-100 text-gray-600 hover:bg-green-50 dark:bg-gray-700 dark:text-gray-300'
              }`}
            >
              Ja
            </button>
            <button
              onClick={() => handleGroundTruth(false)}
              className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors ${
                gtFeedback === 'incorrect'
                  ? 'bg-red-100 text-red-700 ring-2 ring-red-400'
                  : 'bg-gray-100 text-gray-600 hover:bg-red-50 dark:bg-gray-700 dark:text-gray-300'
              }`}
            >
              Nein
            </button>
          </div>
          {gtFeedback === 'incorrect' && (
            <div className="space-y-2">
              <textarea
                value={gtNotes}
                onChange={(e) => setGtNotes(e.target.value)}
                placeholder="Notizen zur Korrektur..."
                className="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-md p-2 bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200"
                rows={2}
              />
              <button
                onClick={handleGroundTruthIncorrect}
                className="text-sm px-3 py-1 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors"
              >
                Feedback speichern
              </button>
            </div>
          )}
        </div>
      ) : (
        <div className="text-sm text-green-600 dark:text-green-400">
          Feedback gespeichert
        </div>
      )}
    </div>
  )
}