'use client'

import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import type { GridResult, GridCell, RowResult, RowItem } from '@/app/(admin)/ai/ocr-overlay/types'
import { usePixelWordPositions } from './usePixelWordPositions'
import { useSlideWordPositions } from './useSlideWordPositions'

const KLAUSUR_API = '/klausur-api'

interface OverlayReconstructionProps {
  sessionId: string | null
  onNext: () => void
  /** When set, use this data directly instead of fetching from the session API. */
  wordResultOverride?: { cells: GridCell[]; image_width: number; image_height: number; [key: string]: unknown }
}

interface EditableCell {
  cellId: string
  text: string
  originalText: string
  bboxPct: { x: number; y: number; w: number; h: number }
  colType: string
  rowIndex: number
  colIndex: number
}

type UndoAction = { cellId: string; oldText: string; newText: string }

export function OverlayReconstruction({ sessionId, onNext, wordResultOverride }: OverlayReconstructionProps) {
  const [status, setStatus] = useState<'loading' | 'ready' | 'saving' | 'saved' | 'error'>('loading')
  const [error, setError] = useState('')
  const [cells, setCells] = useState<EditableCell[]>([])
  const [gridCells, setGridCells] = useState<GridCell[]>([])
  const [editedTexts, setEditedTexts] = useState<Map<string, string>>(new Map())

  // Undo/Redo
  const [undoStack, setUndoStack] = useState<UndoAction[]>([])
  const [redoStack, setRedoStack] = useState<UndoAction[]>([])

  // Overlay state
  const [rows, setRows] = useState<RowItem[]>([])
  const [imageNaturalSize, setImageNaturalSize] = useState<{ w: number; h: number } | null>(null)
  const [fontScale, setFontScale] = useState(0.7)
  const [globalBold, setGlobalBold] = useState(false)
  const [imageRotation, setImageRotation] = useState<0 | 180>(0)
  const [textOpacity, setTextOpacity] = useState(100)
  const [textColor, setTextColor] = useState<'red' | 'blue' | 'black'>('red')
  const [positioningMode, setPositioningMode] = useState<'cluster' | 'slide'>('slide')
  const reconRef = useRef<HTMLDivElement>(null)
  const [reconWidth, setReconWidth] = useState(0)

  // Pixel-based word positions (both algorithms run, toggle selects which to use)
  const overlayImageUrl = sessionId
    ? `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/cropped`
    : ''
  const clusterPositions = usePixelWordPositions(
    overlayImageUrl,
    gridCells,
    status === 'ready',
    imageRotation,
  )
  const slidePositions = useSlideWordPositions(
    overlayImageUrl,
    gridCells,
    status === 'ready',
    imageRotation,
  )
  const cellWordPositions = positioningMode === 'slide' ? slidePositions : clusterPositions

  // Track container width
  useEffect(() => {
    const el = reconRef.current
    if (!el) return
    const obs = new ResizeObserver(entries => {
      for (const entry of entries) setReconWidth(entry.contentRect.width)
    })
    obs.observe(el)
    return () => obs.disconnect()
  }, [status])

  // Load session data
  useEffect(() => {
    if (wordResultOverride) {
      applyWordResult(wordResultOverride)
      return
    }
    if (!sessionId) return
    loadSessionData()
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [sessionId, wordResultOverride])

  const applyWordResult = (wordResult: { cells: GridCell[]; image_width: number; image_height: number; [key: string]: unknown }) => {
    const rawGridCells: GridCell[] = wordResult.cells || []
    setGridCells(rawGridCells)

    const editableCells: EditableCell[] = rawGridCells.map(c => ({
      cellId: c.cell_id,
      text: c.text,
      originalText: c.text,
      bboxPct: c.bbox_pct,
      colType: c.col_type,
      rowIndex: c.row_index,
      colIndex: c.col_index,
    }))
    setCells(editableCells)
    setEditedTexts(new Map())
    setUndoStack([])
    setRedoStack([])

    if (wordResult.image_width && wordResult.image_height) {
      setImageNaturalSize({ w: wordResult.image_width, h: wordResult.image_height })
    }

    setStatus('ready')
  }

  const loadSessionData = async () => {
    if (!sessionId) return
    setStatus('loading')
    try {
      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}`)
      if (!res.ok) throw new Error(`HTTP ${res.status}`)
      const data = await res.json()

      const wordResult: GridResult | undefined = data.word_result
      if (!wordResult) {
        setError('Keine Worterkennungsdaten gefunden. Bitte zuerst den Woerter-Schritt abschliessen.')
        setStatus('error')
        return
      }

      applyWordResult(wordResult as unknown as { cells: GridCell[]; image_width: number; image_height: number })

      // Load rows
      const rowResult: RowResult | undefined = data.row_result
      if (rowResult?.rows) setRows(rowResult.rows)
    } catch (e: unknown) {
      setError(e instanceof Error ? e.message : String(e))
      setStatus('error')
    }
  }

  const handleTextChange = useCallback((cellId: string, newText: string) => {
    setEditedTexts(prev => {
      const oldText = prev.get(cellId)
      const cell = cells.find(c => c.cellId === cellId)
      const prevText = oldText ?? cell?.text ?? ''

      setUndoStack(stack => [...stack, { cellId, oldText: prevText, newText }])
      setRedoStack([])

      const next = new Map(prev)
      next.set(cellId, newText)
      return next
    })
  }, [cells])

  const undo = useCallback(() => {
    setUndoStack(stack => {
      if (stack.length === 0) return stack
      const action = stack[stack.length - 1]
      const newStack = stack.slice(0, -1)
      setRedoStack(rs => [...rs, action])
      setEditedTexts(prev => {
        const next = new Map(prev)
        next.set(action.cellId, action.oldText)
        return next
      })
      return newStack
    })
  }, [])

  const redo = useCallback(() => {
    setRedoStack(stack => {
      if (stack.length === 0) return stack
      const action = stack[stack.length - 1]
      const newStack = stack.slice(0, -1)
      setUndoStack(us => [...us, action])
      setEditedTexts(prev => {
        const next = new Map(prev)
        next.set(action.cellId, action.newText)
        return next
      })
      return newStack
    })
  }, [])

  const resetCell = useCallback((cellId: string) => {
    setEditedTexts(prev => {
      const next = new Map(prev)
      next.delete(cellId)
      return next
    })
  }, [])

  // Keyboard shortcuts
  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key === 'z') {
        e.preventDefault()
        if (e.shiftKey) redo()
        else undo()
      }
    }
    document.addEventListener('keydown', handler)
    return () => document.removeEventListener('keydown', handler)
  }, [undo, redo])

  const getDisplayText = useCallback((cell: EditableCell): string => {
    return editedTexts.get(cell.cellId) ?? cell.text
  }, [editedTexts])

  const isEdited = useCallback((cell: EditableCell): boolean => {
    const edited = editedTexts.get(cell.cellId)
    return edited !== undefined && edited !== cell.originalText
  }, [editedTexts])

  const changedCount = useMemo(() => {
    let count = 0
    for (const cell of cells) {
      if (isEdited(cell)) count++
    }
    return count
  }, [cells, isEdited])

  // Tab navigation
  const sortedCellIds = useMemo(() => {
    return [...cells]
      .sort((a, b) => a.rowIndex !== b.rowIndex ? a.rowIndex - b.rowIndex : a.colIndex - b.colIndex)
      .map(c => c.cellId)
  }, [cells])

  const handleKeyDown = useCallback((e: React.KeyboardEvent, cellId: string) => {
    if (e.key === 'Tab') {
      e.preventDefault()
      const idx = sortedCellIds.indexOf(cellId)
      const nextIdx = e.shiftKey ? idx - 1 : idx + 1
      if (nextIdx >= 0 && nextIdx < sortedCellIds.length) {
        const nextId = sortedCellIds[nextIdx]
        const el = document.getElementById(`cell-${nextId}`)
        el?.focus()
      }
    }
  }, [sortedCellIds])

  const saveReconstruction = useCallback(async () => {
    if (!sessionId) return
    setStatus('saving')
    try {
      const cellUpdates = Array.from(editedTexts.entries())
        .filter(([cellId, text]) => {
          const cell = cells.find(c => c.cellId === cellId)
          return cell && text !== cell.originalText
        })
        .map(([cellId, text]) => ({ cell_id: cellId, text }))

      if (cellUpdates.length === 0) {
        setStatus('saved')
        return
      }

      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/reconstruction`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ cells: cellUpdates }),
      })

      if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        throw new Error(data.detail || `HTTP ${res.status}`)
      }

      setStatus('saved')
    } catch (e: unknown) {
      setError(e instanceof Error ? e.message : String(e))
      setStatus('error')
    }
  }, [sessionId, editedTexts, cells])

  const dewarpedUrl = sessionId
    ? `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/cropped`
    : ''

  // Compute median cell height (in px) for consistent font sizing
  // Must be before early returns (Rules of Hooks)
  const medianCellHeightPx = useMemo(() => {
    const imgWVal = imageNaturalSize?.w || 1
    const imgHVal = imageNaturalSize?.h || 1
    const cH = reconWidth * (imgHVal / imgWVal)
    if (cells.length === 0 || cH === 0) return 40
    const heights = cells.map(c => cH * (c.bboxPct.h / 100)).sort((a, b) => a - b)
    const mid = Math.floor(heights.length / 2)
    return heights.length % 2 === 0 ? (heights[mid - 1] + heights[mid]) / 2 : heights[mid]
  }, [cells, reconWidth, imageNaturalSize])

  if (!sessionId) {
    return <div className="text-center py-12 text-gray-400">Bitte zuerst eine Session auswaehlen.</div>
  }

  if (status === 'loading') {
    return (
      <div className="flex items-center gap-3 justify-center py-12">
        <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-teal-500" />
        <span className="text-gray-500">Overlay-Daten werden geladen...</span>
      </div>
    )
  }

  if (status === 'error') {
    return (
      <div className="flex flex-col items-center justify-center py-12 text-center">
        <div className="text-5xl mb-4">&#x26A0;&#xFE0F;</div>
        <h3 className="text-lg font-medium text-red-600 dark:text-red-400 mb-2">Fehler</h3>
        <p className="text-sm text-gray-500 dark:text-gray-400 max-w-lg mb-4">{error}</p>
        <div className="flex gap-3">
          <button onClick={() => { setError(''); loadSessionData() }}
            className="px-5 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors text-sm">
            Erneut versuchen
          </button>
          <button onClick={onNext}
            className="px-5 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors text-sm">
            Ueberspringen &rarr;
          </button>
        </div>
      </div>
    )
  }

  if (status === 'saved') {
    return (
      <div className="flex flex-col items-center justify-center py-12 text-center">
        <div className="text-5xl mb-4">&#x2705;</div>
        <h3 className="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">Overlay gespeichert</h3>
        <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
          {changedCount > 0 ? `${changedCount} Zellen wurden aktualisiert.` : 'Keine Aenderungen vorgenommen.'}
        </p>
        <button onClick={onNext}
          className="px-6 py-2.5 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors font-medium">
          Fertig
        </button>
      </div>
    )
  }

  const imgW = imageNaturalSize?.w || 1
  const imgH = imageNaturalSize?.h || 1
  const containerH = reconWidth * (imgH / imgW)

  return (
    <div className="space-y-3">
      {/* Toolbar */}
      <div className="flex items-center justify-between bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 px-3 py-2">
        <div className="flex items-center gap-2">
          <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
            Overlay-Rekonstruktion
          </h3>
          <span className="text-xs text-gray-400">
            {cells.length} Zellen &middot; {changedCount} geaendert
          </span>
        </div>
        <div className="flex items-center gap-2">
          {/* Undo/Redo */}
          <button
            onClick={undo}
            disabled={undoStack.length === 0}
            className="px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-30"
            title="Rueckgaengig (Ctrl+Z)"
          >
            &#x21A9;
          </button>
          <button
            onClick={redo}
            disabled={redoStack.length === 0}
            className="px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-30"
            title="Wiederholen (Ctrl+Shift+Z)"
          >
            &#x21AA;
          </button>

          <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />

          {/* Font scale */}
          <label className="flex items-center gap-1 text-xs text-gray-600 dark:text-gray-400">
            Schrift
            <input
              type="range" min={30} max={120} value={Math.round(fontScale * 100)}
              onChange={e => setFontScale(Number(e.target.value) / 100)}
              className="w-20 h-1 accent-teal-600"
            />
            <span className="w-8 text-right font-mono">{Math.round(fontScale * 100)}%</span>
          </label>
          <button
            onClick={() => setGlobalBold(b => !b)}
            className={`px-2 py-1 text-xs rounded border transition-colors font-bold ${
              globalBold
                ? 'bg-teal-600 text-white border-teal-600'
                : 'bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600'
            }`}
          >
            B
          </button>
          <button
            onClick={() => setImageRotation(r => r === 0 ? 180 : 0)}
            className={`px-2 py-1 text-xs rounded border transition-colors ${
              imageRotation === 180
                ? 'bg-teal-600 text-white border-teal-600'
                : 'bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600'
            }`}
            title="Bild 180° drehen"
          >
            180°
          </button>

          <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />

          {/* Positioning mode toggle */}
          <button
            onClick={() => setPositioningMode(m => m === 'slide' ? 'cluster' : 'slide')}
            className={`px-2 py-1 text-xs rounded border transition-colors ${
              positioningMode === 'slide'
                ? 'bg-orange-500 text-white border-orange-500'
                : 'bg-white dark:bg-gray-700 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600'
            }`}
            title={positioningMode === 'slide'
              ? 'Slide-Modus: Woerter von links nach rechts schieben (klick fuer Cluster-Modus)'
              : 'Cluster-Modus: Woerter an Pixel-Cluster zuordnen (klick fuer Slide-Modus)'}
          >
            {positioningMode === 'slide' ? 'Slide' : 'Cluster'}
          </button>

          <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />

          {/* Text color */}
          {(['red', 'blue', 'black'] as const).map(c => (
            <button
              key={c}
              onClick={() => setTextColor(c)}
              className={`w-5 h-5 rounded-full border-2 transition-colors ${
                textColor === c ? 'border-teal-500 ring-1 ring-teal-300' : 'border-gray-300 dark:border-gray-600'
              }`}
              style={{ backgroundColor: c === 'black' ? '#1a1a1a' : c }}
              title={`Textfarbe: ${c}`}
            />
          ))}

          <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />

          {/* Text opacity */}
          <label className="flex items-center gap-1 text-xs text-gray-600 dark:text-gray-400">
            Text
            <input
              type="range" min={0} max={100} value={textOpacity}
              onChange={e => setTextOpacity(Number(e.target.value))}
              className="w-16 h-1 accent-teal-600"
            />
            <span className="w-8 text-right font-mono">{textOpacity}%</span>
          </label>

          <div className="w-px h-5 bg-gray-300 dark:bg-gray-600 mx-1" />

          <button
            onClick={saveReconstruction}
            disabled={status === 'saving'}
            className="px-4 py-1.5 text-xs bg-teal-600 text-white rounded-lg hover:bg-teal-700 disabled:opacity-50 transition-colors font-medium"
          >
            Speichern
          </button>
        </div>
      </div>

      {/* True overlay: text layer on top of original image */}
      <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-gray-50 dark:bg-gray-900">
        <div
          ref={reconRef}
          className="relative"
          style={{ aspectRatio: `${imgW} / ${imgH}` }}
        >
          {/* Background: original image */}
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={dewarpedUrl}
            alt="Original"
            className="absolute inset-0 w-full h-full object-contain"
            onLoad={(e) => {
              const img = e.target as HTMLImageElement
              setImageNaturalSize({ w: img.naturalWidth, h: img.naturalHeight })
            }}
          />

          {/* Text overlay layer */}
          <div
            className="absolute inset-0"
            style={{ opacity: textOpacity / 100 }}
          >
            {/* Row lines */}
            {rows.map((row, i) => (
              <div
                key={`row-${i}`}
                className="absolute left-0 right-0 border-t border-cyan-400/40"
                style={{ top: `${(row.y / imgH) * 100}%` }}
              />
            ))}

            {/* Pixel-positioned words / editable inputs */}
            {cells.map((cell) => {
              const displayText = getDisplayText(cell)
              const edited = isEdited(cell)
              const wordPos = cellWordPositions.get(cell.cellId)
              const bboxPct = cell.bboxPct
              const colorValue = textColor === 'black' ? '#1a1a1a' : textColor

              // Pixel-analysed: render word-groups at detected positions
              if (wordPos && wordPos.length > 0) {
                return wordPos.map((wp, i) => {
                  const autoFontPx = medianCellHeightPx * wp.fontRatio * fontScale
                  const fs = Math.max(6, autoFontPx)

                  if (wordPos.length > 1) {
                    return (
                      <span
                        key={`${cell.cellId}_wp_${i}`}
                        className="absolute leading-none pointer-events-none select-none"
                        style={{
                          left: `${wp.xPct}%`,
                          top: `${wp.yPct}%`,
                          width: `${wp.wPct}%`,
                          height: `${wp.hPct}%`,
                          fontSize: `${fs}px`,
                          fontWeight: globalBold ? 'bold' : 'normal',
                          fontFamily: "'Liberation Sans', Arial, sans-serif",
                          display: 'flex',
                          alignItems: 'center',
                          whiteSpace: 'nowrap',
                          overflow: 'visible',
                          color: colorValue,
                        }}
                      >
                        {wp.text}
                      </span>
                    )
                  }

                  return (
                    <div key={`${cell.cellId}_wp_${i}`} className="absolute group" style={{
                      left: `${wp.xPct}%`,
                      top: `${wp.yPct}%`,
                      width: `${wp.wPct}%`,
                      height: `${wp.hPct}%`,
                    }}>
                      <input
                        id={`cell-${cell.cellId}`}
                        type="text"
                        value={displayText}
                        onChange={(e) => handleTextChange(cell.cellId, e.target.value)}
                        onKeyDown={(e) => handleKeyDown(e, cell.cellId)}
                        className={`w-full h-full bg-transparent border-0 outline-none px-0 transition-colors ${
                          edited ? 'bg-green-50/30' : ''
                        }`}
                        style={{
                          fontSize: `${fs}px`,
                          fontWeight: globalBold ? 'bold' : 'normal',
                          fontFamily: "'Liberation Sans', Arial, sans-serif",
                          lineHeight: '1',
                          color: colorValue,
                        }}
                        title={`${cell.cellId} (${cell.colType})`}
                      />
                      {edited && (
                        <button
                          onClick={() => resetCell(cell.cellId)}
                          className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white rounded-full text-[9px] leading-none opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
                          title="Zuruecksetzen"
                        >
                          &times;
                        </button>
                      )}
                    </div>
                  )
                })
              }

              // Fallback: no pixel data — single input at cell bbox
              if (!cell.text) return null

              const fontSize = Math.max(6, medianCellHeightPx * fontScale)
              return (
                <div key={cell.cellId} className="absolute group" style={{
                  left: `${bboxPct.x}%`,
                  top: `${bboxPct.y}%`,
                  width: `${bboxPct.w}%`,
                  height: `${bboxPct.h}%`,
                }}>
                  <input
                    id={`cell-${cell.cellId}`}
                    type="text"
                    value={displayText}
                    onChange={(e) => handleTextChange(cell.cellId, e.target.value)}
                    onKeyDown={(e) => handleKeyDown(e, cell.cellId)}
                    className={`w-full h-full bg-transparent border-0 outline-none px-0 transition-colors ${
                      edited ? 'bg-green-50/30' : ''
                    }`}
                    style={{
                      fontSize: `${fontSize}px`,
                      fontWeight: globalBold ? 'bold' : 'normal',
                      fontFamily: "'Liberation Sans', Arial, sans-serif",
                      lineHeight: '1',
                      color: colorValue,
                    }}
                    title={`${cell.cellId} (${cell.colType})`}
                  />
                  {edited && (
                    <button
                      onClick={() => resetCell(cell.cellId)}
                      className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white rounded-full text-[9px] leading-none opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
                      title="Zuruecksetzen"
                    >
                      &times;
                    </button>
                  )}
                </div>
              )
            })}
          </div>
        </div>
      </div>

      {/* Bottom action */}
      <div className="flex justify-end">
        <button
          onClick={() => {
            if (changedCount > 0) {
              saveReconstruction()
            } else {
              onNext()
            }
          }}
          className="px-6 py-2.5 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors font-medium text-sm"
        >
          {changedCount > 0 ? 'Speichern & Fertig' : 'Fertig'}
        </button>
      </div>
    </div>
  )
}