'use client'

import { useCallback, useEffect, useState } from 'react'
import { PagePurpose } from '@/components/common/PagePurpose'
import { PipelineStepper } from '@/components/ocr-pipeline/PipelineStepper'
import { StepDeskew } from '@/components/ocr-pipeline/StepDeskew'
import { StepDewarp } from '@/components/ocr-pipeline/StepDewarp'
import { StepColumnDetection } from '@/components/ocr-pipeline/StepColumnDetection'
import { StepRowDetection } from '@/components/ocr-pipeline/StepRowDetection'
import { StepWordRecognition } from '@/components/ocr-pipeline/StepWordRecognition'
import { StepLlmReview } from '@/components/ocr-pipeline/StepLlmReview'
import { StepReconstruction } from '@/components/ocr-pipeline/StepReconstruction'
import { StepGroundTruth } from '@/components/ocr-pipeline/StepGroundTruth'
import { PIPELINE_STEPS, type PipelineStep, type SessionListItem } from './types'

const KLAUSUR_API = '/klausur-api'

export default function OcrPipelinePage() {
  const [currentStep, setCurrentStep] = useState(0)
  const [sessionId, setSessionId] = useState<string | null>(null)
  const [sessionName, setSessionName] = useState<string>('')
  const [sessions, setSessions] = useState<SessionListItem[]>([])
  const [loadingSessions, setLoadingSessions] = useState(true)
  const [editingName, setEditingName] = useState<string | null>(null)
  const [editNameValue, setEditNameValue] = useState('')
  const [steps, setSteps] = useState<PipelineStep[]>(
    PIPELINE_STEPS.map((s, i) => ({
      ...s,
      status: i === 0 ? 'active' : 'pending',
    })),
  )

  // Load session list on mount
  useEffect(() => {
    loadSessions()
  }, [])

  const loadSessions = async () => {
    setLoadingSessions(true)
    try {
      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions`)
      if (res.ok) {
        const data = await res.json()
        setSessions(data.sessions || [])
      }
    } catch (e) {
      console.error('Failed to load sessions:', e)
    } finally {
      setLoadingSessions(false)
    }
  }

  const openSession = useCallback(async (sid: string) => {
    try {
      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sid}`)
      if (!res.ok) return
      const data = await res.json()

      setSessionId(sid)
      setSessionName(data.name || data.filename || '')

      // Determine which step to jump to based on current_step
      const dbStep = data.current_step || 1
      // Steps: 1=deskew, 2=dewarp, 3=columns, ...
      // UI steps are 0-indexed: 0=deskew, 1=dewarp, 2=columns, ...
      const uiStep = Math.max(0, dbStep - 1)

      setSteps(
        PIPELINE_STEPS.map((s, i) => ({
          ...s,
          status: i < uiStep ? 'completed' : i === uiStep ? 'active' : 'pending',
        })),
      )
      setCurrentStep(uiStep)
    } catch (e) {
      console.error('Failed to open session:', e)
    }
  }, [])

  const deleteSession = useCallback(async (sid: string) => {
    try {
      await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sid}`, { method: 'DELETE' })
      setSessions((prev) => prev.filter((s) => s.id !== sid))
      if (sessionId === sid) {
        setSessionId(null)
        setCurrentStep(0)
        setSteps(PIPELINE_STEPS.map((s, i) => ({ ...s, status: i === 0 ? 'active' : 'pending' })))
      }
    } catch (e) {
      console.error('Failed to delete session:', e)
    }
  }, [sessionId])

  const renameSession = useCallback(async (sid: string, newName: string) => {
    try {
      await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sid}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: newName }),
      })
      setSessions((prev) => prev.map((s) => (s.id === sid ? { ...s, name: newName } : s)))
      if (sessionId === sid) setSessionName(newName)
    } catch (e) {
      console.error('Failed to rename session:', e)
    }
    setEditingName(null)
  }, [sessionId])

  const handleStepClick = (index: number) => {
    if (index <= currentStep || steps[index].status === 'completed') {
      setCurrentStep(index)
    }
  }

  const goToStep = (step: number) => {
    setCurrentStep(step)
    setSteps((prev) =>
      prev.map((s, i) => ({
        ...s,
        status: i < step ? 'completed' : i === step ? 'active' : 'pending',
      })),
    )
  }

  const handleNext = () => {
    if (currentStep < steps.length - 1) {
      setSteps((prev) =>
        prev.map((s, i) => {
          if (i === currentStep) return { ...s, status: 'completed' }
          if (i === currentStep + 1) return { ...s, status: 'active' }
          return s
        }),
      )
      setCurrentStep((prev) => prev + 1)
    }
  }

  const handleDeskewComplete = (sid: string) => {
    setSessionId(sid)
    // Reload session list to show the new session
    loadSessions()
    handleNext()
  }

  const handleNewSession = () => {
    setSessionId(null)
    setSessionName('')
    setCurrentStep(0)
    setSteps(PIPELINE_STEPS.map((s, i) => ({ ...s, status: i === 0 ? 'active' : 'pending' })))
  }

  const stepNames: Record<number, string> = {
    1: 'Begradigung',
    2: 'Entzerrung',
    3: 'Spalten',
    4: 'Zeilen',
    5: 'Woerter',
    6: 'Korrektur',
    7: 'Rekonstruktion',
    8: 'Validierung',
  }

  const reprocessFromStep = useCallback(async (uiStep: number) => {
    if (!sessionId) return
    const dbStep = uiStep + 1 // UI is 0-indexed, DB is 1-indexed
    if (!confirm(`Ab Schritt ${dbStep} (${stepNames[dbStep] || '?'}) neu verarbeiten? Nachfolgende Daten werden geloescht.`)) return
    try {
      const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/reprocess`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ from_step: dbStep }),
      })
      if (!res.ok) {
        const data = await res.json().catch(() => ({}))
        console.error('Reprocess failed:', data.detail || res.status)
        return
      }
      // Reset UI steps
      goToStep(uiStep)
    } catch (e) {
      console.error('Reprocess error:', e)
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [sessionId, goToStep])

  const renderStep = () => {
    switch (currentStep) {
      case 0:
        return <StepDeskew sessionId={sessionId} onNext={handleDeskewComplete} />
      case 1:
        return <StepDewarp sessionId={sessionId} onNext={handleNext} />
      case 2:
        return <StepColumnDetection sessionId={sessionId} onNext={handleNext} />
      case 3:
        return <StepRowDetection sessionId={sessionId} onNext={handleNext} />
      case 4:
        return <StepWordRecognition sessionId={sessionId} onNext={handleNext} goToStep={goToStep} />
      case 5:
        return <StepLlmReview sessionId={sessionId} onNext={handleNext} />
      case 6:
        return <StepReconstruction sessionId={sessionId} onNext={handleNext} />
      case 7:
        return <StepGroundTruth />
      default:
        return null
    }
  }

  return (
    <div className="space-y-6">
      <PagePurpose
        title="OCR Pipeline"
        purpose="Schrittweise Seitenrekonstruktion: Scan begradigen, Spalten erkennen, Woerter lokalisieren und die Seite Wort fuer Wort nachbauen. Ziel: 10 Vokabelseiten fehlerfrei rekonstruieren."
        audience={['Entwickler', 'Data Scientists']}
        architecture={{
          services: ['klausur-service (FastAPI)', 'OpenCV', 'Tesseract'],
          databases: ['PostgreSQL Sessions'],
        }}
        relatedPages={[
          { name: 'OCR Vergleich', href: '/ai/ocr-compare', description: 'Methoden-Vergleich' },
          { name: 'OCR-Labeling', href: '/ai/ocr-labeling', description: 'Trainingsdaten' },
        ]}
        defaultCollapsed
      />

      {/* Session List */}
      <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4">
        <div className="flex items-center justify-between mb-3">
          <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">
            Sessions
          </h3>
          <button
            onClick={handleNewSession}
            className="text-xs px-3 py-1.5 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors"
          >
            + Neue Session
          </button>
        </div>

        {loadingSessions ? (
          <div className="text-sm text-gray-400 py-2">Lade Sessions...</div>
        ) : sessions.length === 0 ? (
          <div className="text-sm text-gray-400 py-2">Noch keine Sessions vorhanden.</div>
        ) : (
          <div className="space-y-1 max-h-48 overflow-y-auto">
            {sessions.map((s) => (
              <div
                key={s.id}
                className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors cursor-pointer ${
                  sessionId === s.id
                    ? 'bg-teal-50 dark:bg-teal-900/30 border border-teal-200 dark:border-teal-700'
                    : 'hover:bg-gray-50 dark:hover:bg-gray-700/50'
                }`}
              >
                <div className="flex-1 min-w-0" onClick={() => openSession(s.id)}>
                  {editingName === s.id ? (
                    <input
                      autoFocus
                      value={editNameValue}
                      onChange={(e) => setEditNameValue(e.target.value)}
                      onBlur={() => renameSession(s.id, editNameValue)}
                      onKeyDown={(e) => {
                        if (e.key === 'Enter') renameSession(s.id, editNameValue)
                        if (e.key === 'Escape') setEditingName(null)
                      }}
                      onClick={(e) => e.stopPropagation()}
                      className="w-full px-1 py-0.5 text-sm border rounded dark:bg-gray-700 dark:border-gray-600"
                    />
                  ) : (
                    <div className="truncate font-medium text-gray-700 dark:text-gray-300">
                      {s.name || s.filename}
                    </div>
                  )}
                  <div className="text-xs text-gray-400 flex gap-2">
                    <span>{new Date(s.created_at).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: '2-digit', hour: '2-digit', minute: '2-digit' })}</span>
                    <span>Schritt {s.current_step}: {stepNames[s.current_step] || '?'}</span>
                  </div>
                </div>
                <button
                  onClick={(e) => {
                    e.stopPropagation()
                    setEditNameValue(s.name || s.filename)
                    setEditingName(s.id)
                  }}
                  className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
                  title="Umbenennen"
                >
                  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                    <path strokeLinecap="round" strokeLinejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                  </svg>
                </button>
                <button
                  onClick={(e) => {
                    e.stopPropagation()
                    if (confirm('Session loeschen?')) deleteSession(s.id)
                  }}
                  className="p-1 text-gray-400 hover:text-red-500"
                  title="Loeschen"
                >
                  <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                    <path strokeLinecap="round" strokeLinejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                  </svg>
                </button>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Active session name */}
      {sessionId && sessionName && (
        <div className="text-sm text-gray-500 dark:text-gray-400">
          Aktive Session: <span className="font-medium text-gray-700 dark:text-gray-300">{sessionName}</span>
        </div>
      )}

      <PipelineStepper steps={steps} currentStep={currentStep} onStepClick={handleStepClick} onReprocess={sessionId ? reprocessFromStep : undefined} />

      <div className="min-h-[400px]">{renderStep()}</div>
    </div>
  )
}