'use client'

import { useEffect, useState } from 'react'
import type { DeskewResult, DewarpResult, DewarpGroundTruth } from '@/app/(admin)/ai/ocr-kombi/types'
import { DewarpSummaryBanner } from './DewarpSummaryBanner'
import { DewarpFineTunePanel } from './DewarpFineTunePanel'
import { DewarpGroundTruthPanel } from './DewarpGroundTruthPanel'

interface DewarpControlsProps {
  dewarpResult: DewarpResult | null
  deskewResult?: DeskewResult | null
  showGrid: boolean
  onToggleGrid: () => void
  onManualDewarp: (shearDegrees: number) => void
  onCombinedAdjust?: (rotationDegrees: number, shearDegrees: number) => void
  onGroundTruth: (gt: DewarpGroundTruth) => void
  onNext: () => void
  isApplying: boolean
}

export function DewarpControls({
  dewarpResult,
  deskewResult,
  showGrid,
  onToggleGrid,
  onManualDewarp,
  onCombinedAdjust,
  onGroundTruth,
  onNext,
  isApplying,
}: DewarpControlsProps) {
  const [manualShear, setManualShear] = useState(0)
  const [gtSaved, setGtSaved] = useState(false)
  const [showFineTune, setShowFineTune] = useState(false)

  // Initialize slider to auto-detected value when result arrives
  useEffect(() => {
    if (dewarpResult && dewarpResult.shear_degrees !== undefined) {
      setManualShear(dewarpResult.shear_degrees)
    }
  }, [dewarpResult?.shear_degrees])

  return (
    <div className="space-y-4">
      {/* Summary banner */}
      {dewarpResult && (
        <DewarpSummaryBanner
          dewarpResult={dewarpResult}
          showGrid={showGrid}
          onToggleGrid={onToggleGrid}
        />
      )}

      {/* Manual shear angle slider */}
      {dewarpResult && (
        <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">Scherwinkel (manuell)</div>
          <div className="flex items-center gap-3">
            <span className="text-xs text-gray-400 w-10 text-right">-2.0{'\u00B0'}</span>
            <input
              type="range"
              min={-200}
              max={200}
              step={5}
              value={Math.round(manualShear * 100)}
              onChange={(e) => setManualShear(parseInt(e.target.value) / 100)}
              className="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 accent-teal-500"
            />
            <span className="text-xs text-gray-400 w-10">+2.0{'\u00B0'}</span>
            <span className="font-mono text-sm w-16 text-right">{manualShear.toFixed(2)}{'\u00B0'}</span>
            <button
              onClick={() => onManualDewarp(manualShear)}
              disabled={isApplying}
              className="px-3 py-1.5 text-sm bg-teal-600 text-white rounded-md hover:bg-teal-700 disabled:opacity-50 transition-colors"
            >
              {isApplying ? '...' : 'Anwenden'}
            </button>
          </div>
          <p className="text-xs text-gray-400 mt-1">
            Scherung der vertikalen Achse in Grad. Positiv = Spalten nach rechts kippen, negativ = nach links.
          </p>
        </div>
      )}

      {/* Fine-tuning panel */}
      {dewarpResult && onCombinedAdjust && (
        <DewarpFineTunePanel
          dewarpResult={dewarpResult}
          deskewResult={deskewResult}
          showFineTune={showFineTune}
          onToggleFineTune={() => setShowFineTune(v => !v)}
          onCombinedAdjust={onCombinedAdjust}
          onGroundTruth={onGroundTruth}
          isApplying={isApplying}
          gtSaved={gtSaved}
          onGtSaved={() => setGtSaved(true)}
        />
      )}

      {/* Ground Truth */}
      {dewarpResult && !showFineTune && (
        <DewarpGroundTruthPanel
          manualShear={manualShear}
          onGroundTruth={onGroundTruth}
          gtSaved={gtSaved}
          onGtSaved={() => setGtSaved(true)}
        />
      )}

      {/* Next button */}
      {dewarpResult && (
        <div className="flex justify-end">
          <button
            onClick={onNext}
            className="px-6 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 font-medium transition-colors"
          >
            Uebernehmen & Weiter &rarr;
          </button>
        </div>
      )}
    </div>
  )
}