'use client'

import { useCallback, useEffect, useState } from 'react'
import type { ColumnResult, ColumnGroundTruth, PageRegion } from '@/app/(admin)/ai/ocr-pipeline/types'
import { ColumnControls } from './ColumnControls'
import { ManualColumnEditor } from './ManualColumnEditor'

const KLAUSUR_API = '/klausur-api'

interface StepColumnDetectionProps {
  sessionId: string | null
  onNext: () => void
}

export function StepColumnDetection({ sessionId, onNext }: StepColumnDetectionProps) {
  const [columnResult, setColumnResult] = useState<ColumnResult | null>(null)
  const [detecting, setDetecting] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [manualMode, setManualMode] = useState(false)
  const [applying, setApplying] = useState(false)
  const [imageDimensions, setImageDimensions] = useState<{ width: number; height: number } | null>(null)

  // Fetch session info (image dimensions) + check for cached column result
  useEffect(() => {
    if (!sessionId || imageDimensions) return

    const fetchSessionInfo = async () => {
      try {
        const infoRes = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}`)
        if (infoRes.ok) {
          const info = await infoRes.json()
          if (info.image_width && info.image_height) {
            setImageDimensions({ width: info.image_width, height: info.image_height })
          }
          if (info.column_result) {
            setColumnResult(info.column_result)
            return
          }
        }
      } catch (e) {
        console.error('Failed to fetch session info:', e)
      }

      // No cached result - run auto-detection
      runAutoDetection()
    }

    fetchSessionInfo()
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [sessionId])

  const runAutoDetection = useCallback(async () => {
    if (!sessionId) return
    setDetecting(true)
    setError(null)
    try {
      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/columns`, {
        method: 'POST',
      })
      if (!res.ok) {
        const err = await res.json().catch(() => ({ detail: res.statusText }))
        throw new Error(err.detail || 'Spaltenerkennung fehlgeschlagen')
      }
      const data: ColumnResult = await res.json()
      setColumnResult(data)
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Unbekannter Fehler')
    } finally {
      setDetecting(false)
    }
  }, [sessionId])

  const handleRerun = useCallback(() => {
    runAutoDetection()
  }, [runAutoDetection])

  const handleGroundTruth = useCallback(async (gt: ColumnGroundTruth) => {
    if (!sessionId) return
    try {
      await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/ground-truth/columns`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(gt),
      })
    } catch (e) {
      console.error('Ground truth save failed:', e)
    }
  }, [sessionId])

  const handleManualApply = useCallback(async (columns: PageRegion[]) => {
    if (!sessionId) return
    setApplying(true)
    setError(null)
    try {
      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/columns/manual`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ columns }),
      })
      if (!res.ok) {
        const err = await res.json().catch(() => ({ detail: res.statusText }))
        throw new Error(err.detail || 'Manuelle Spalten konnten nicht gespeichert werden')
      }
      const data = await res.json()
      setColumnResult({
        columns: data.columns,
        duration_seconds: data.duration_seconds ?? 0,
      })
      setManualMode(false)
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Fehler beim Speichern')
    } finally {
      setApplying(false)
    }
  }, [sessionId])

  if (!sessionId) {
    return (
      <div className="flex flex-col items-center justify-center py-16 text-center">
        <div className="text-5xl mb-4">📊</div>
        <h3 className="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">
          Schritt 3: Spaltenerkennung
        </h3>
        <p className="text-gray-500 dark:text-gray-400 max-w-md">
          Bitte zuerst Schritt 1 und 2 abschliessen.
        </p>
      </div>
    )
  }

  const dewarpedUrl = `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/dewarped`
  const overlayUrl = `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/columns-overlay`

  return (
    <div className="space-y-4">
      {/* Loading indicator */}
      {detecting && (
        <div className="flex items-center gap-2 text-teal-600 dark:text-teal-400 text-sm">
          <div className="animate-spin w-4 h-4 border-2 border-teal-500 border-t-transparent rounded-full" />
          Spaltenerkennung laeuft...
        </div>
      )}

      {manualMode ? (
        /* Manual column editor */
        <ManualColumnEditor
          imageUrl={dewarpedUrl}
          imageWidth={imageDimensions?.width ?? 1000}
          imageHeight={imageDimensions?.height ?? 1400}
          onApply={handleManualApply}
          onCancel={() => setManualMode(false)}
          applying={applying}
        />
      ) : (
        /* Image comparison: overlay (left) vs clean (right) */
        <div className="grid grid-cols-2 gap-4">
          <div>
            <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
              Mit Spalten-Overlay
            </div>
            <div className="border rounded-lg overflow-hidden dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
              {columnResult ? (
                // eslint-disable-next-line @next/next/no-img-element
                <img
                  src={`${overlayUrl}?t=${Date.now()}`}
                  alt="Spalten-Overlay"
                  className="w-full h-auto"
                />
              ) : (
                <div className="aspect-[3/4] flex items-center justify-center text-gray-400 text-sm">
                  {detecting ? 'Erkenne Spalten...' : 'Keine Daten'}
                </div>
              )}
            </div>
          </div>
          <div>
            <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
              Entzerrtes Bild
            </div>
            <div className="border rounded-lg overflow-hidden dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={dewarpedUrl}
                alt="Entzerrt"
                className="w-full h-auto"
              />
            </div>
          </div>
        </div>
      )}

      {/* Controls */}
      {!manualMode && (
        <ColumnControls
          columnResult={columnResult}
          onRerun={handleRerun}
          onManualMode={() => setManualMode(true)}
          onGroundTruth={handleGroundTruth}
          onNext={onNext}
          isDetecting={detecting}
        />
      )}

      {error && (
        <div className="p-3 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-lg text-sm">
          {error}
        </div>
      )}
    </div>
  )
}