'use client'

import { Suspense, useCallback, useEffect, useState } from 'react'
import { PagePurpose } from '@/components/common/PagePurpose'
import { PipelineStepper } from '@/components/ocr-pipeline/PipelineStepper'
import { StepOrientation } from '@/components/ocr-pipeline/StepOrientation'
import { StepCrop } from '@/components/ocr-pipeline/StepCrop'
import { StepDeskew } from '@/components/ocr-pipeline/StepDeskew'
import { StepDewarp } from '@/components/ocr-pipeline/StepDewarp'
import { StepStructureDetection } from '@/components/ocr-pipeline/StepStructureDetection'
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 { DOCUMENT_CATEGORIES, type SessionListItem, type DocumentTypeResult, type DocumentCategory, type SubSession } from './types'
import { usePipelineNavigation } from './usePipelineNavigation'

const KLAUSUR_API = '/klausur-api'

const STEP_NAMES: Record<number, string> = {
  1: 'Orientierung', 2: 'Begradigung', 3: 'Entzerrung', 4: 'Zuschneiden',
  5: 'Spalten', 6: 'Zeilen', 7: 'Woerter', 8: 'Struktur',
  9: 'Korrektur', 10: 'Rekonstruktion', 11: 'Validierung',
}

function OcrPipelineContent() {
  const nav = usePipelineNavigation()
  const [sessions, setSessions] = useState<SessionListItem[]>([])
  const [loadingSessions, setLoadingSessions] = useState(true)
  const [editingName, setEditingName] = useState<string | null>(null)
  const [editNameValue, setEditNameValue] = useState('')
  const [editingCategory, setEditingCategory] = useState<string | null>(null)
  const [sessionName, setSessionName] = useState('')
  const [activeCategory, setActiveCategory] = useState<DocumentCategory | undefined>(undefined)

  const loadSessions = useCallback(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)
    }
  }, [])

  useEffect(() => { loadSessions() }, [loadSessions])

  // Sync session name when nav.sessionId changes
  useEffect(() => {
    if (!nav.sessionId) {
      setSessionName('')
      setActiveCategory(undefined)
      return
    }
    const load = async () => {
      try {
        const res = await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${nav.sessionId}`)
        if (!res.ok) return
        const data = await res.json()
        setSessionName(data.name || data.filename || '')
        setActiveCategory(data.document_category || undefined)
      } catch { /* ignore */ }
    }
    load()
  }, [nav.sessionId])

  const openSession = useCallback((sid: string) => {
    nav.goToSession(sid)
  }, [nav])

  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 (nav.sessionId === sid) nav.goToSessionList()
    } catch (e) {
      console.error('Failed to delete session:', e)
    }
  }, [nav])

  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 (nav.sessionId === sid) setSessionName(newName)
    } catch (e) {
      console.error('Failed to rename session:', e)
    }
    setEditingName(null)
  }, [nav.sessionId])

  const updateCategory = useCallback(async (sid: string, category: DocumentCategory) => {
    try {
      await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sid}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ document_category: category }),
      })
      setSessions(prev => prev.map(s => (s.id === sid ? { ...s, document_category: category } : s)))
      if (nav.sessionId === sid) setActiveCategory(category)
    } catch (e) {
      console.error('Failed to update category:', e)
    }
    setEditingCategory(null)
  }, [nav.sessionId])

  const deleteAllSessions = useCallback(async () => {
    if (!confirm('Alle Sessions loeschen? Dies kann nicht rueckgaengig gemacht werden.')) return
    try {
      await fetch(`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions`, { method: 'DELETE' })
      setSessions([])
      nav.goToSessionList()
    } catch (e) {
      console.error('Failed to delete all sessions:', e)
    }
  }, [nav])

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

  // Orientation: after upload, navigate to session at deskew step
  const handleOrientationComplete = useCallback(async (sid: string) => {
    loadSessions()
    // Navigate directly to deskew step (index 1) for this session
    nav.goToSession(sid)
  }, [nav, loadSessions])

  // Crop: detect doc type then advance
  const handleCropNext = useCallback(async () => {
    if (nav.sessionId) {
      try {
        const res = await fetch(
          `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${nav.sessionId}/detect-type`,
          { method: 'POST' },
        )
        if (res.ok) {
          const data: DocumentTypeResult = await res.json()
          nav.setDocType(data)
        }
      } catch (e) {
        console.error('Doc type detection failed:', e)
      }
    }
    nav.goToNextStep()
  }, [nav])

  const handleDocTypeChange = (newDocType: DocumentTypeResult['doc_type']) => {
    if (!nav.docTypeResult) return
    let skipSteps: string[] = []
    if (newDocType === 'full_text') skipSteps = ['columns', 'rows']

    nav.setDocType({
      ...nav.docTypeResult,
      doc_type: newDocType,
      skip_steps: skipSteps,
      pipeline: newDocType === 'full_text' ? 'full_page' : 'cell_first',
    })
  }

  // Box sub-sessions (column detection) — still supported
  const handleBoxSessionsCreated = useCallback((_subs: SubSession[]) => {
    // Box sub-sessions are tracked by the backend; no client-side state needed anymore
  }, [])

  const renderStep = () => {
    const sid = nav.sessionId
    switch (nav.currentStepIndex) {
      case 0:
        return (
          <StepOrientation
            key={sid}
            sessionId={sid}
            onNext={handleOrientationComplete}
            onSessionList={() => { loadSessions(); nav.goToSessionList() }}
          />
        )
      case 1:
        return <StepDeskew key={sid} sessionId={sid} onNext={nav.goToNextStep} />
      case 2:
        return <StepDewarp key={sid} sessionId={sid} onNext={nav.goToNextStep} />
      case 3:
        return <StepCrop key={sid} sessionId={sid} onNext={handleCropNext} />
      case 4:
        return <StepColumnDetection sessionId={sid} onNext={nav.goToNextStep} onBoxSessionsCreated={handleBoxSessionsCreated} />
      case 5:
        return <StepRowDetection sessionId={sid} onNext={nav.goToNextStep} />
      case 6:
        return <StepWordRecognition sessionId={sid} onNext={nav.goToNextStep} goToStep={nav.goToStep} />
      case 7:
        return <StepStructureDetection sessionId={sid} onNext={nav.goToNextStep} />
      case 8:
        return <StepLlmReview sessionId={sid} onNext={nav.goToNextStep} />
      case 9:
        return <StepReconstruction sessionId={sid} onNext={nav.goToNextStep} />
      case 10:
        return <StepGroundTruth sessionId={sid} onNext={nav.goToNextStep} />
      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 ({sessions.length})
          </h3>
          <div className="flex gap-2">
            {sessions.length > 0 && (
              <button
                onClick={deleteAllSessions}
                className="text-xs px-3 py-1.5 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
                title="Alle Sessions loeschen"
              >
                Alle loeschen
              </button>
            )}
            <button
              onClick={() => nav.goToSessionList()}
              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>
        </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.5 max-h-[320px] overflow-y-auto">
            {sessions.map((s) => {
              const catInfo = DOCUMENT_CATEGORIES.find(c => c.value === s.document_category)
              return (
                <div
                  key={s.id}
                  className={`relative flex items-start gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors cursor-pointer ${
                    nav.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'
                  }`}
                >
                  {/* Thumbnail */}
                  <div
                    className="flex-shrink-0 w-12 h-12 rounded-md overflow-hidden bg-gray-100 dark:bg-gray-700"
                    onClick={() => openSession(s.id)}
                  >
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img
                      src={`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${s.id}/thumbnail?size=96`}
                      alt=""
                      className="w-full h-full object-cover"
                      loading="lazy"
                      onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
                    />
                  </div>

                  {/* Info */}
                  <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>
                    )}
                    {/* ID row */}
                    <button
                      onClick={(e) => {
                        e.stopPropagation()
                        navigator.clipboard.writeText(s.id)
                        const btn = e.currentTarget
                        btn.textContent = 'Kopiert!'
                        setTimeout(() => { btn.textContent = `ID: ${s.id.slice(0, 8)}` }, 1500)
                      }}
                      className="text-[10px] font-mono text-gray-400 hover:text-teal-500 transition-colors"
                      title={`Volle ID: ${s.id} — Klick zum Kopieren`}
                    >
                      ID: {s.id.slice(0, 8)}
                    </button>
                    <div className="text-xs text-gray-400 flex gap-2 mt-0.5">
                      <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}: {STEP_NAMES[s.current_step] || '?'}</span>
                    </div>
                  </div>

                  {/* Badges */}
                  <div className="flex flex-col gap-1 items-end flex-shrink-0" onClick={(e) => e.stopPropagation()}>
                    <button
                      onClick={() => setEditingCategory(editingCategory === s.id ? null : s.id)}
                      className={`text-[10px] px-1.5 py-0.5 rounded-full border transition-colors ${
                        catInfo
                          ? 'bg-teal-50 dark:bg-teal-900/30 border-teal-200 dark:border-teal-700 text-teal-700 dark:text-teal-300'
                          : 'bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300'
                      }`}
                      title="Kategorie setzen"
                    >
                      {catInfo ? `${catInfo.icon} ${catInfo.label}` : '+ Kategorie'}
                    </button>
                    {s.doc_type && (
                      <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-600">
                        {s.doc_type}
                      </span>
                    )}
                  </div>

                  {/* Action buttons */}
                  <div className="flex flex-col gap-0.5 flex-shrink-0">
                    <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>

                  {/* Category dropdown */}
                  {editingCategory === s.id && (
                    <div
                      className="absolute right-0 top-full mt-1 z-20 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-2 grid grid-cols-2 gap-1 w-64"
                      onClick={(e) => e.stopPropagation()}
                    >
                      {DOCUMENT_CATEGORIES.map((cat) => (
                        <button
                          key={cat.value}
                          onClick={() => updateCategory(s.id, cat.value)}
                          className={`text-xs px-2 py-1.5 rounded-md text-left transition-colors ${
                            s.document_category === cat.value
                              ? 'bg-teal-100 dark:bg-teal-900/40 text-teal-700 dark:text-teal-300'
                              : 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400'
                          }`}
                        >
                          {cat.icon} {cat.label}
                        </button>
                      ))}
                    </div>
                  )}
                </div>
              )
            })}
          </div>
        )}
      </div>

      {/* Active session info */}
      {nav.sessionId && sessionName && (
        <div className="flex items-center gap-3 text-sm text-gray-500 dark:text-gray-400">
          <span>Aktive Session: <span className="font-medium text-gray-700 dark:text-gray-300">{sessionName}</span></span>
          {activeCategory && (() => {
            const cat = DOCUMENT_CATEGORIES.find(c => c.value === activeCategory)
            return cat ? <span className="text-xs px-2 py-0.5 rounded-full bg-teal-50 dark:bg-teal-900/30 border border-teal-200 dark:border-teal-700 text-teal-700 dark:text-teal-300">{cat.icon} {cat.label}</span> : null
          })()}
          {nav.docTypeResult && (
            <span className="text-xs px-2 py-0.5 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 border border-gray-200 dark:border-gray-600">
              {nav.docTypeResult.doc_type}
            </span>
          )}
        </div>
      )}

      <PipelineStepper
        steps={nav.steps}
        currentStep={nav.currentStepIndex}
        onStepClick={handleStepClick}
        onReprocess={nav.sessionId ? nav.reprocessFromStep : undefined}
        docTypeResult={nav.docTypeResult}
        onDocTypeChange={handleDocTypeChange}
      />

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

export default function OcrPipelinePage() {
  return (
    <Suspense fallback={<div className="p-8 text-gray-400">Lade Pipeline...</div>}>
      <OcrPipelineContent />
    </Suspense>
  )
}