'use client'

import { useCallback, useEffect, useRef, useState } from 'react'
import type { GridResult, GridCell, WordEntry, WordGroundTruth } from '@/app/(admin)/ai/ocr-kombi/types'
import { WordRecognitionOverview } from './WordRecognitionOverview'
import { WordRecognitionLabeling } from './WordRecognitionLabeling'
import { WordRecognitionControls } from './WordRecognitionControls'

const KLAUSUR_API = '/klausur-api'

interface StepWordRecognitionProps {
  sessionId: string | null
  onNext: () => void
  goToStep: (step: number) => void
  /** Skip _heal_row_gaps in cell grid (better overlay positioning) */
  skipHealGaps?: boolean
}

export function StepWordRecognition({ sessionId, onNext, goToStep, skipHealGaps = false }: StepWordRecognitionProps) {
  const [gridResult, setGridResult] = useState<GridResult | null>(null)
  const [detecting, setDetecting] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [gtNotes, setGtNotes] = useState('')
  const [gtSaved, setGtSaved] = useState(false)

  // Step-through labeling state
  const [activeIndex, setActiveIndex] = useState(0)
  const [editedEntries, setEditedEntries] = useState<WordEntry[]>([])
  const [editedCells, setEditedCells] = useState<GridCell[]>([])
  const [mode, setMode] = useState<'overview' | 'labeling'>('overview')
  const [ocrEngine, setOcrEngine] = useState<'auto' | 'tesseract' | 'rapid' | 'paddle'>('auto')
  const [usedEngine, setUsedEngine] = useState<string>('')
  const [pronunciation, setPronunciation] = useState<'british' | 'american'>('british')
  const [gridMethod, setGridMethod] = useState<'v2' | 'words_first'>('v2')

  // Streaming progress state
  const [streamProgress, setStreamProgress] = useState<{ current: number; total: number } | null>(null)

  const enRef = useRef<HTMLInputElement>(null)
  const tableEndRef = useRef<HTMLDivElement>(null)

  const isVocab = gridResult?.layout === 'vocab'

  useEffect(() => {
    if (!sessionId) return
    // Always run fresh detection -- word-lookup is fast (~0.03s)
    // and avoids stale cached results from previous pipeline versions.
    runAutoDetection()
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [sessionId])

  const applyGridResult = (data: GridResult) => {
    setGridResult(data)
    setUsedEngine(data.ocr_engine || '')
    if (data.layout === 'vocab' && data.entries) {
      initEntries(data.entries)
    }
    if (data.cells) {
      setEditedCells(data.cells.map(c => ({ ...c, status: c.status || 'pending' })))
    }
  }

  const initEntries = (entries: WordEntry[]) => {
    setEditedEntries(entries.map(e => ({ ...e, status: e.status || 'pending' })))
    setActiveIndex(0)
  }

  const runAutoDetection = useCallback(async (engine?: string) => {
    if (!sessionId) return
    const eng = engine || ocrEngine
    setDetecting(true)
    setError(null)
    setStreamProgress(null)
    setEditedCells([])
    setEditedEntries([])
    setGridResult(null)

    try {
      // PP-OCRv5 forces words_first on the backend, so align frontend accordingly
      const effectiveGridMethod = eng === 'paddle' ? 'words_first' : gridMethod
      const useStream = effectiveGridMethod === 'v2'

      // Retry once if initial request fails (e.g. after container restart,
      // session cache may not be warm yet when navigating via wizard)
      let res: Response | null = null
      for (let attempt = 0; attempt < 2; attempt++) {
        res = await fetch(
          `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/words?stream=${useStream ? 'true' : 'false'}&engine=${eng}&pronunciation=${pronunciation}${skipHealGaps ? '&skip_heal_gaps=true' : ''}&grid_method=${effectiveGridMethod}`,
          { method: 'POST' },
        )
        if (res.ok) break
        if (attempt === 0 && (res.status === 400 || res.status === 404)) {
          // Wait briefly for cache to warm up, then retry
          await new Promise(r => setTimeout(r, 2000))
          continue
        }
        break
      }
      if (!res || !res.ok) {
        const err = await res?.json().catch(() => ({ detail: res?.statusText })) || { detail: 'Worterkennung fehlgeschlagen' }
        throw new Error(err.detail || 'Worterkennung fehlgeschlagen')
      }

      // words_first / pp-ocrv5 returns plain JSON (no streaming)
      if (!useStream) {
        const data = await res.json() as GridResult
        applyGridResult(data)
        return
      }

      const reader = res.body!.getReader()
      const decoder = new TextDecoder()
      let buffer = ''
      let streamLayout: string | null = null
      let streamColumnsUsed: GridResult['columns_used'] = []
      let streamGridShape: GridResult['grid_shape'] | null = null
      let streamCells: GridCell[] = []

      while (true) {
        const { done, value } = await reader.read()
        if (done) break
        buffer += decoder.decode(value, { stream: true })

        // Parse SSE events (separated by \n\n)
        while (buffer.includes('\n\n')) {
          const idx = buffer.indexOf('\n\n')
          const chunk = buffer.slice(0, idx).trim()
          buffer = buffer.slice(idx + 2)

          if (!chunk.startsWith('data: ')) continue
          const dataStr = chunk.slice(6) // strip "data: "

          let event: any
          try {
            event = JSON.parse(dataStr)
          } catch {
            continue
          }

          if (event.type === 'meta') {
            streamLayout = event.layout || 'generic'
            streamGridShape = event.grid_shape || null
            // Show partial grid result so UI renders structure
            setGridResult(prev => ({
              ...prev,
              layout: event.layout || 'generic',
              grid_shape: event.grid_shape,
              columns_used: [],
              cells: [],
              summary: { total_cells: event.grid_shape?.total_cells || 0, non_empty_cells: 0, low_confidence: 0 },
              duration_seconds: 0,
              ocr_engine: '',
            } as GridResult))
          }

          if (event.type === 'columns') {
            streamColumnsUsed = event.columns_used || []
            setGridResult(prev => prev ? { ...prev, columns_used: streamColumnsUsed } : prev)
          }

          if (event.type === 'cell') {
            const cell: GridCell = { ...event.cell, status: 'pending' }
            streamCells = [...streamCells, cell]
            setEditedCells(streamCells)
            setStreamProgress(event.progress)
            // Auto-scroll table to bottom
            setTimeout(() => tableEndRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' }), 16)
          }

          if (event.type === 'complete') {
            // Build final GridResult
            const finalResult: GridResult = {
              cells: streamCells,
              grid_shape: streamGridShape || { rows: 0, cols: 0, total_cells: streamCells.length },
              columns_used: streamColumnsUsed,
              layout: streamLayout || 'generic',
              image_width: 0,
              image_height: 0,
              duration_seconds: event.duration_seconds || 0,
              ocr_engine: event.ocr_engine || '',
              summary: event.summary || {},
            }

            // If vocab: apply post-processed entries from complete event
            if (event.vocab_entries) {
              finalResult.entries = event.vocab_entries
              finalResult.vocab_entries = event.vocab_entries
              finalResult.entry_count = event.vocab_entries.length
            }

            applyGridResult(finalResult)
            setUsedEngine(event.ocr_engine || '')
            setStreamProgress(null)
          }
        }
      }
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Unbekannter Fehler')
    } finally {
      setDetecting(false)
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [sessionId, ocrEngine, pronunciation, gridMethod])

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

  // Generic mode: update cell text
  const updateCell = (cellId: string, value: string) => {
    setEditedCells(prev => prev.map(c =>
      c.cell_id === cellId ? { ...c, text: value, status: 'edited' as const } : c
    ))
  }

  // Helper: get unique row indices from cells
  const getUniqueRowCount = () => {
    if (!editedCells.length) return 0
    return new Set(editedCells.map(c => c.row_index)).size
  }

  // Helper: get cells for a given row index (by position in sorted unique rows)
  const getRowCells = (rowPosition: number) => {
    const uniqueRows = [...new Set(editedCells.map(c => c.row_index))].sort((a, b) => a - b)
    const rowIdx = uniqueRows[rowPosition]
    return editedCells.filter(c => c.row_index === rowIdx)
  }

  // Step-through: confirm current row (always cell-based)
  const confirmEntry = () => {
    const rowCells = getRowCells(activeIndex)
    const cellIds = new Set(rowCells.map(c => c.cell_id))
    setEditedCells(prev => prev.map(c =>
      cellIds.has(c.cell_id) ? { ...c, status: c.status === 'edited' ? 'edited' : 'confirmed' } : c
    ))
    const maxIdx = getUniqueRowCount() - 1
    if (activeIndex < maxIdx) {
      setActiveIndex(activeIndex + 1)
    }
  }

  // Step-through: skip current row
  const skipEntry = () => {
    const rowCells = getRowCells(activeIndex)
    const cellIds = new Set(rowCells.map(c => c.cell_id))
    setEditedCells(prev => prev.map(c =>
      cellIds.has(c.cell_id) ? { ...c, status: 'skipped' as const } : c
    ))
    const maxIdx = getUniqueRowCount() - 1
    if (activeIndex < maxIdx) {
      setActiveIndex(activeIndex + 1)
    }
  }

  // Focus english input when active entry changes in labeling mode
  useEffect(() => {
    if (mode === 'labeling' && enRef.current) {
      enRef.current.focus()
    }
  }, [activeIndex, mode])

  // Keyboard shortcuts in labeling mode
  useEffect(() => {
    if (mode !== 'labeling') return
    const handler = (e: KeyboardEvent) => {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault()
        confirmEntry()
      } else if (e.key === 'ArrowDown' && e.ctrlKey) {
        e.preventDefault()
        skipEntry()
      } else if (e.key === 'ArrowUp' && e.ctrlKey) {
        e.preventDefault()
        if (activeIndex > 0) setActiveIndex(activeIndex - 1)
      }
    }
    window.addEventListener('keydown', handler)
    return () => window.removeEventListener('keydown', handler)
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [mode, activeIndex, editedEntries, editedCells])

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

  const columnsUsed = gridResult?.columns_used || []
  const gridShape = gridResult?.grid_shape

  // Counts for labeling progress (always cell-based)
  const confirmedRowIds = new Set(
    editedCells.filter(c => c.status === 'confirmed' || c.status === 'edited').map(c => c.row_index)
  )
  const confirmedCount = confirmedRowIds.size
  const totalCount = getUniqueRowCount()

  // Group cells by row (shared between overview and labeling)
  const cellsByRow: Map<number, GridCell[]> = new Map()
  for (const cell of editedCells) {
    const existing = cellsByRow.get(cell.row_index) || []
    existing.push(cell)
    cellsByRow.set(cell.row_index, existing)
  }
  const sortedRowIndices = [...cellsByRow.keys()].sort((a, b) => a - b)

  return (
    <div className="space-y-4">
      {/* Loading with streaming progress */}
      {detecting && (
        <div className="space-y-1">
          <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" />
            {streamProgress
              ? `Zelle ${streamProgress.current}/${streamProgress.total} erkannt...`
              : 'Worterkennung startet...'}
          </div>
          {streamProgress && streamProgress.total > 0 && (
            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
              <div
                className="bg-teal-500 h-1.5 rounded-full transition-all duration-150"
                style={{ width: `${(streamProgress.current / streamProgress.total) * 100}%` }}
              />
            </div>
          )}
        </div>
      )}

      {/* Layout badge + Mode toggle */}
      {gridResult && (
        <div className="flex items-center gap-2">
          {/* Layout badge */}
          <span className={`px-2 py-0.5 rounded text-[10px] uppercase font-semibold ${
            isVocab
              ? 'bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300'
              : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'
          }`}>
            {isVocab ? 'Vokabel-Layout' : 'Generisch'}
          </span>

          {gridShape && (
            <span className="text-[10px] text-gray-400">
              {gridShape.rows}×{gridShape.cols} = {gridShape.total_cells} Zellen
            </span>
          )}

          <div className="flex-1" />

          <button
            onClick={() => setMode('overview')}
            className={`px-3 py-1.5 text-xs rounded-lg font-medium transition-colors ${
              mode === 'overview'
                ? 'bg-teal-600 text-white'
                : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
            }`}
          >
            Uebersicht
          </button>
          <button
            onClick={() => setMode('labeling')}
            className={`px-3 py-1.5 text-xs rounded-lg font-medium transition-colors ${
              mode === 'labeling'
                ? 'bg-teal-600 text-white'
                : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
            }`}
          >
            Labeling ({confirmedCount}/{totalCount})
          </button>
        </div>
      )}

      {/* Overview mode */}
      {mode === 'overview' && (
        <WordRecognitionOverview
          sessionId={sessionId}
          gridResult={gridResult}
          detecting={detecting}
          editedCells={editedCells}
          activeIndex={activeIndex}
          setActiveIndex={setActiveIndex}
          setMode={setMode}
          tableEndRef={tableEndRef}
        />
      )}

      {/* Labeling mode */}
      {mode === 'labeling' && (
        <WordRecognitionLabeling
          sessionId={sessionId}
          gridResult={gridResult}
          editedCells={editedCells}
          activeIndex={activeIndex}
          setActiveIndex={setActiveIndex}
          columnsUsed={columnsUsed}
          getUniqueRowCount={getUniqueRowCount}
          getRowCells={getRowCells}
          updateCell={updateCell}
          confirmEntry={confirmEntry}
          skipEntry={skipEntry}
          enRef={enRef}
          cellsByRow={cellsByRow}
          sortedRowIndices={sortedRowIndices}
        />
      )}

      {/* Controls */}
      {gridResult && (
        <WordRecognitionControls
          gridResult={gridResult}
          isVocab={!!isVocab}
          detecting={detecting}
          usedEngine={usedEngine}
          ocrEngine={ocrEngine}
          setOcrEngine={setOcrEngine}
          pronunciation={pronunciation}
          setPronunciation={setPronunciation}
          gridMethod={gridMethod}
          setGridMethod={setGridMethod}
          gtNotes={gtNotes}
          setGtNotes={setGtNotes}
          gtSaved={gtSaved}
          runAutoDetection={runAutoDetection}
          handleGroundTruth={handleGroundTruth}
          goToStep={goToStep}
          onNext={onNext}
        />
      )}

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