'use client'

import { useCallback, useEffect, useState } from 'react'
import type { RowResult, RowGroundTruth } from '@/app/(admin)/ai/ocr-pipeline/types'

const KLAUSUR_API = '/klausur-api'

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

export function StepRowDetection({ sessionId, onNext }: StepRowDetectionProps) {
  const [rowResult, setRowResult] = useState<RowResult | null>(null)
  const [detecting, setDetecting] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [gtNotes, setGtNotes] = useState('')
  const [gtSaved, setGtSaved] = useState(false)

  useEffect(() => {
    if (!sessionId) return

    const fetchSession = async () => {
      try {
        const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}`)
        if (res.ok) {
          const info = await res.json()
          if (info.row_result) {
            setRowResult(info.row_result)
            return
          }
        }
      } catch (e) {
        console.error('Failed to fetch session info:', e)
      }
      // No cached result — run auto
      runAutoDetection()
    }

    fetchSession()
  // 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}/rows`, {
        method: 'POST',
      })
      if (!res.ok) {
        const err = await res.json().catch(() => ({ detail: res.statusText }))
        throw new Error(err.detail || 'Zeilenerkennung fehlgeschlagen')
      }
      const data: RowResult = await res.json()
      setRowResult(data)
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Unbekannter Fehler')
    } finally {
      setDetecting(false)
    }
  }, [sessionId])

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

  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 4: Zeilenerkennung
        </h3>
        <p className="text-gray-500 dark:text-gray-400 max-w-md">
          Bitte zuerst Schritte 1-3 abschliessen.
        </p>
      </div>
    )
  }

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

  const rowTypeColors: Record<string, string> = {
    header: 'bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300',
    content: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300',
    footer: 'bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300',
  }

  return (
    <div className="space-y-4">
      {/* Loading */}
      {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" />
          Zeilenerkennung laeuft...
        </div>
      )}

      {/* Images: overlay vs clean */}
      <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 Zeilen-Overlay
          </div>
          <div className="border rounded-lg overflow-hidden dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
            {rowResult ? (
              // eslint-disable-next-line @next/next/no-img-element
              <img
                src={`${overlayUrl}?t=${Date.now()}`}
                alt="Zeilen-Overlay"
                className="w-full h-auto"
              />
            ) : (
              <div className="aspect-[3/4] flex items-center justify-center text-gray-400 text-sm">
                {detecting ? 'Erkenne Zeilen...' : '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>

      {/* Row summary */}
      {rowResult && (
        <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 justify-between">
            <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">
              Ergebnis: {rowResult.total_rows} Zeilen erkannt
            </h4>
            <span className="text-xs text-gray-400">
              {rowResult.duration_seconds}s
            </span>
          </div>

          {/* Type summary badges */}
          <div className="flex gap-2">
            {Object.entries(rowResult.summary).map(([type, count]) => (
              <span
                key={type}
                className={`px-2 py-0.5 rounded text-xs font-medium ${rowTypeColors[type] || 'bg-gray-100 text-gray-600'}`}
              >
                {type}: {count}
              </span>
            ))}
          </div>

          {/* Row list */}
          <div className="max-h-64 overflow-y-auto space-y-1">
            {rowResult.rows.map((row) => (
              <div
                key={row.index}
                className={`flex items-center gap-3 px-3 py-1.5 rounded text-xs font-mono ${
                  row.row_type === 'header' || row.row_type === 'footer'
                    ? 'bg-gray-50 dark:bg-gray-700/50 text-gray-500'
                    : 'text-gray-600 dark:text-gray-400'
                }`}
              >
                <span className="w-8 text-right text-gray-400">R{row.index}</span>
                <span className={`px-1.5 py-0.5 rounded text-[10px] uppercase font-semibold ${rowTypeColors[row.row_type] || ''}`}>
                  {row.row_type}
                </span>
                <span>y={row.y}</span>
                <span>h={row.height}px</span>
                <span>{row.word_count} Woerter</span>
                {row.gap_before > 0 && (
                  <span className="text-gray-400">gap={row.gap_before}px</span>
                )}
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Controls */}
      {rowResult && (
        <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">
            <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>

            <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>
      )}

      {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>
  )
}