'use client'

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

interface ValidationPanelProps {
  notes: string
  score: number | null
  status: GroundTruthStatus
  isGroundTruth: boolean
  gtSaving: boolean
  gtMessage: string
  onNotesChange: (notes: string) => void
  onScoreChange: (score: number | null) => void
  onSave: () => Promise<void>
  onMarkGroundTruth: () => Promise<void>
  onFinish: () => void
}

export function ValidationPanel({
  notes, score, status, isGroundTruth, gtSaving, gtMessage,
  onNotesChange, onScoreChange, onSave, onMarkGroundTruth, onFinish,
}: ValidationPanelProps) {
  return (
    <>
      {/* Notes and score */}
      <div className="border rounded-lg dark:border-gray-700 p-4 space-y-3">
        <div className="flex items-center gap-4">
          <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
            Bewertung (1-10):
          </label>
          <input
            type="number"
            min={1}
            max={10}
            value={score ?? ''}
            onChange={e => onScoreChange(e.target.value ? parseInt(e.target.value) : null)}
            className="w-20 text-sm px-2 py-1 border rounded dark:border-gray-600 dark:bg-gray-700 dark:text-white"
          />
          <div className="flex gap-1">
            {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(v => (
              <button
                key={v}
                onClick={() => onScoreChange(v)}
                className={`w-7 h-7 text-xs rounded ${score === v ? 'bg-teal-600 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'}`}
              >
                {v}
              </button>
            ))}
          </div>
        </div>
        <div>
          <label className="text-sm font-medium text-gray-700 dark:text-gray-300 block mb-1">
            Notizen:
          </label>
          <textarea
            value={notes}
            onChange={e => onNotesChange(e.target.value)}
            rows={3}
            placeholder="Anmerkungen zur Qualitaet der Rekonstruktion..."
            className="w-full text-sm px-3 py-2 border rounded dark:border-gray-600 dark:bg-gray-700 dark:text-white"
          />
        </div>
      </div>

      {/* Actions -- sticky bottom bar */}
      <div className="sticky bottom-0 bg-white dark:bg-gray-900 border-t dark:border-gray-700 py-3 px-1 -mx-1 flex items-center justify-between">
        <div className="text-sm text-gray-500 dark:text-gray-400">
          {status === 'saved' && <span className="text-green-600 dark:text-green-400">Validierung gespeichert</span>}
          {status === 'saving' && <span>Speichere...</span>}
          {gtMessage && (
            <span className={gtMessage.includes('fehlgeschlagen') ? 'text-red-500' : 'text-amber-600 dark:text-amber-400'}>
              {gtMessage}
            </span>
          )}
        </div>
        <div className="flex items-center gap-3">
          <button
            onClick={onMarkGroundTruth}
            disabled={gtSaving || status === 'saving'}
            className="px-4 py-2 text-sm bg-amber-600 text-white rounded hover:bg-amber-700 disabled:opacity-50"
          >
            {gtSaving ? 'Speichere...' : isGroundTruth ? 'Ground Truth aktualisieren' : 'Als Ground Truth markieren'}
          </button>
          <button
            onClick={onSave}
            disabled={status === 'saving'}
            className="px-4 py-2 text-sm bg-gray-600 text-white rounded hover:bg-gray-700 disabled:opacity-50"
          >
            Speichern
          </button>
          <button
            onClick={async () => {
              await onSave()
              onFinish()
            }}
            disabled={status === 'saving'}
            className="px-4 py-2 text-sm bg-teal-600 text-white rounded hover:bg-teal-700 disabled:opacity-50"
          >
            Abschliessen
          </button>
        </div>
      </div>
    </>
  )
}