breakpilot-lehrer/admin-lehrer/app/(admin)/ai/ocr-kombi/page.tsx

'use client'

import { Suspense } from 'react'
import { PagePurpose } from '@/components/common/PagePurpose'
import { KombiStepper } from '@/components/ocr-kombi/KombiStepper'
import { SessionList } from '@/components/ocr-kombi/SessionList'
import { SessionHeader } from '@/components/ocr-kombi/SessionHeader'
import { StepUpload } from '@/components/ocr-kombi/StepUpload'
import { StepOrientation } from '@/components/ocr-kombi/StepOrientation'
import { StepPageSplit } from '@/components/ocr-kombi/StepPageSplit'
import { StepDeskew } from '@/components/ocr-kombi/StepDeskew'
import { StepDewarp } from '@/components/ocr-kombi/StepDewarp'
import { StepContentCrop } from '@/components/ocr-kombi/StepContentCrop'
import { StepOcr } from '@/components/ocr-kombi/StepOcr'
import { StepStructure } from '@/components/ocr-kombi/StepStructure'
import { StepGridBuild } from '@/components/ocr-kombi/StepGridBuild'
import { StepGridReview } from '@/components/ocr-kombi/StepGridReview'
import { StepGutterRepair } from '@/components/ocr-kombi/StepGutterRepair'
import { StepBoxGridReview } from '@/components/ocr-kombi/StepBoxGridReview'
import { StepAnsicht } from '@/components/ocr-kombi/StepAnsicht'
import { StepGroundTruth } from '@/components/ocr-kombi/StepGroundTruth'
import { useKombiPipeline } from './useKombiPipeline'

function OcrKombiContent() {
  const {
    currentStep,
    sessionId,
    sessionName,
    loadingSessions,
    activeCategory,
    isGroundTruth,
    pageNumber,
    steps,
    gridSaveRef,
    groupedSessions,
    loadSessions,
    openSession,
    handleStepClick,
    handleNext,
    handleNewSession,
    deleteSession,
    renameSession,
    updateCategory,
    setSessionId,
    setSessionName,
    setIsGroundTruth,
  } = useKombiPipeline()

  const renderStep = () => {
    switch (currentStep) {
      case 0:
        return (
          <StepUpload
            sessionId={sessionId}
            onUploaded={(sid, name) => {
              setSessionId(sid)
              setSessionName(name)
              loadSessions()
            }}
            onNext={handleNext}
          />
        )
      case 1:
        return (
          <StepOrientation
            sessionId={sessionId}
            onNext={() => handleNext()}
            onSessionList={() => { loadSessions(); handleNewSession() }}
          />
        )
      case 2:
        return (
          <StepPageSplit
            sessionId={sessionId}
            sessionName={sessionName}
            onNext={handleNext}
            onSplitComplete={(childId, childName) => {
              // Switch to the first child session and refresh the list
              setSessionId(childId)
              setSessionName(childName)
              loadSessions()
            }}
          />
        )
      case 3:
        return <StepDeskew sessionId={sessionId} onNext={handleNext} />
      case 4:
        return <StepDewarp sessionId={sessionId} onNext={handleNext} />
      case 5:
        return <StepContentCrop sessionId={sessionId} onNext={handleNext} />
      case 6:
        return <StepOcr sessionId={sessionId} onNext={handleNext} />
      case 7:
        return <StepStructure sessionId={sessionId} onNext={handleNext} />
      case 8:
        return <StepGridBuild sessionId={sessionId} onNext={handleNext} />
      case 9:
        return <StepGridReview sessionId={sessionId} onNext={handleNext} saveRef={gridSaveRef} />
      case 10:
        return <StepGutterRepair sessionId={sessionId} onNext={handleNext} />
      case 11:
        return <StepBoxGridReview sessionId={sessionId} onNext={handleNext} />
      case 12:
        return <StepAnsicht sessionId={sessionId} onNext={handleNext} />
      case 13:
        return (
          <StepGroundTruth
            sessionId={sessionId}
            isGroundTruth={isGroundTruth}
            onMarked={() => setIsGroundTruth(true)}
            gridSaveRef={gridSaveRef}
          />
        )
      default:
        return null
    }
  }

  return (
    <div className="space-y-6">
      <PagePurpose
        title="OCR Kombi Pipeline"
        purpose="Modulare 11-Schritt-Pipeline: Upload, Vorverarbeitung, Dual-Engine-OCR (PP-OCRv5 + Tesseract), Strukturerkennung, Grid-Aufbau und Review. Multi-Page-Dokument-Unterstuetzung."
        audience={['Entwickler']}
        architecture={{
          services: ['klausur-service (FastAPI)', 'OpenCV', 'Tesseract', 'PaddleOCR'],
          databases: ['PostgreSQL Sessions'],
        }}
        relatedPages={[
          { name: 'OCR Regression', href: '/ai/ocr-regression', description: 'Regressionstests' },
        ]}
        defaultCollapsed
      />

      <SessionList
        items={groupedSessions()}
        loading={loadingSessions}
        activeSessionId={sessionId}
        onOpenSession={(sid) => openSession(sid)}
        onNewSession={handleNewSession}
        onDeleteSession={deleteSession}
        onRenameSession={renameSession}
        onUpdateCategory={updateCategory}
      />

      {sessionId && sessionName && (
        <SessionHeader
          sessionName={sessionName}
          activeCategory={activeCategory}
          isGroundTruth={isGroundTruth}
          pageNumber={pageNumber}
          onUpdateCategory={(cat) => updateCategory(sessionId, cat)}
        />
      )}

      <KombiStepper
        steps={steps}
        currentStep={currentStep}
        onStepClick={handleStepClick}
      />

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

export default function OcrKombiPage() {
  return (
    <Suspense fallback={<div className="p-4 text-sm text-gray-400">Lade...</div>}>
      <OcrKombiContent />
    </Suspense>
  )
}