breakpilot-lehrer/admin-lehrer/components/ocr-pipeline/StepGridReview.tsx

'use client'

/**
 * StepGridReview — Last step of the Kombi Pipeline
 *
 * Split view: original scan on the left, GridEditor on the right.
 * Adds confidence stats, row-accept buttons, and integrates with
 * the GT marking flow in the parent page.
 */

import { useCallback, useEffect, useState } from 'react'
import { useGridEditor } from '@/components/grid-editor/useGridEditor'
import type { GridZone } from '@/components/grid-editor/types'
import { GridToolbar } from '@/components/grid-editor/GridToolbar'
import { GridTable } from '@/components/grid-editor/GridTable'

const KLAUSUR_API = '/klausur-api'

interface StepGridReviewProps {
  sessionId: string | null
  onNext?: () => void
}

export function StepGridReview({ sessionId, onNext }: StepGridReviewProps) {
  const {
    grid,
    loading,
    saving,
    error,
    dirty,
    selectedCell,
    setSelectedCell,
    buildGrid,
    loadGrid,
    saveGrid,
    updateCellText,
    toggleColumnBold,
    toggleRowHeader,
    undo,
    redo,
    canUndo,
    canRedo,
    getAdjacentCell,
    deleteColumn,
    addColumn,
  } = useGridEditor(sessionId)

  const [showImage, setShowImage] = useState(true)
  const [zoom, setZoom] = useState(100)
  const [acceptedRows, setAcceptedRows] = useState<Set<string>>(new Set())

  // Load grid on mount
  useEffect(() => {
    if (sessionId) loadGrid()
  }, [sessionId, loadGrid])

  // Reset accepted rows when session changes
  useEffect(() => {
    setAcceptedRows(new Set())
  }, [sessionId])

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

  const handleNavigate = useCallback(
    (cellId: string, direction: 'up' | 'down' | 'left' | 'right') => {
      const target = getAdjacentCell(cellId, direction)
      if (target) {
        setSelectedCell(target)
        setTimeout(() => {
          const el = document.getElementById(`cell-${target}`)
          if (el) {
            el.focus()
            if (el instanceof HTMLInputElement) el.select()
          }
        }, 0)
      }
    },
    [getAdjacentCell, setSelectedCell],
  )

  const acceptRow = (zoneIdx: number, rowIdx: number) => {
    setAcceptedRows((prev) => {
      const next = new Set(prev)
      const key = `${zoneIdx}-${rowIdx}`
      if (next.has(key)) next.delete(key)
      else next.add(key)
      return next
    })
  }

  const acceptAllRows = () => {
    if (!grid) return
    const all = new Set<string>()
    for (const zone of grid.zones) {
      for (const row of zone.rows) {
        all.add(`${zone.zone_index}-${row.index}`)
      }
    }
    setAcceptedRows(all)
  }

  // Confidence stats
  const allCells = grid?.zones?.flatMap((z) => z.cells) || []
  const lowConfCells = allCells.filter(
    (c) => c.confidence > 0 && c.confidence < 60,
  )
  const totalRows = grid?.zones?.reduce((sum, z) => sum + z.rows.length, 0) ?? 0

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

  if (loading) {
    return (
      <div className="flex items-center justify-center py-16">
        <div className="flex items-center gap-3 text-gray-500 dark:text-gray-400">
          <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
            <circle
              className="opacity-25"
              cx="12"
              cy="12"
              r="10"
              stroke="currentColor"
              strokeWidth="4"
            />
            <path
              className="opacity-75"
              fill="currentColor"
              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
            />
          </svg>
          Grid wird geladen...
        </div>
      </div>
    )
  }

  if (error) {
    return (
      <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
        <p className="text-sm text-red-700 dark:text-red-300">
          Fehler: {error}
        </p>
        <button
          onClick={buildGrid}
          className="mt-2 text-xs px-3 py-1.5 bg-red-600 text-white rounded hover:bg-red-700"
        >
          Erneut versuchen
        </button>
      </div>
    )
  }

  if (!grid || !grid.zones.length) {
    return (
      <div className="text-center py-12">
        <p className="text-gray-400 mb-4">Kein Grid vorhanden.</p>
        <button
          onClick={buildGrid}
          className="px-4 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 text-sm"
        >
          Grid aus OCR-Ergebnissen erstellen
        </button>
      </div>
    )
  }

  const imageUrl = `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/cropped`

  return (
    <div className="space-y-3">
      {/* Review Stats Bar */}
      <div className="flex items-center gap-4 text-xs flex-wrap">
        <span className="text-gray-500 dark:text-gray-400">
          {grid.summary.total_zones} Zone(n), {grid.summary.total_columns} Spalten,{' '}
          {grid.summary.total_rows} Zeilen, {grid.summary.total_cells} Zellen
        </span>
        {lowConfCells.length > 0 && (
          <span className="px-2 py-0.5 rounded-full bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 border border-red-200 dark:border-red-800">
            {lowConfCells.length} niedrige Konfidenz
          </span>
        )}
        <span className="text-gray-400 dark:text-gray-500">
          {acceptedRows.size}/{totalRows} Zeilen akzeptiert
        </span>
        {acceptedRows.size < totalRows && (
          <button
            onClick={acceptAllRows}
            className="text-teal-600 dark:text-teal-400 hover:text-teal-700 dark:hover:text-teal-300"
          >
            Alle akzeptieren
          </button>
        )}
        <div className="ml-auto flex items-center gap-2">
          <button
            onClick={() => setShowImage(!showImage)}
            className={`px-2.5 py-1 rounded text-xs border transition-colors ${
              showImage
                ? '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-800 border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400'
            }`}
          >
            {showImage ? 'Bild ausblenden' : 'Bild einblenden'}
          </button>
          <span className="text-gray-400 dark:text-gray-500">
            {grid.duration_seconds.toFixed(1)}s
          </span>
        </div>
      </div>

      {/* Toolbar */}
      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 px-3 py-2">
        <GridToolbar
          dirty={dirty}
          saving={saving}
          canUndo={canUndo}
          canRedo={canRedo}
          showOverlay={false}
          onSave={saveGrid}
          onUndo={undo}
          onRedo={redo}
          onRebuild={buildGrid}
          onToggleOverlay={() => setShowImage(!showImage)}
        />
      </div>

      {/* Split View: Image left + Grid right */}
      <div
        className={showImage ? 'grid grid-cols-2 gap-3' : ''}
        style={{ minHeight: '55vh' }}
      >
        {/* Left: Original Image */}
        {showImage && (
          <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden flex flex-col">
            <div className="flex items-center justify-between px-3 py-2 border-b border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
              <span className="text-xs font-medium text-gray-600 dark:text-gray-400">
                Original Scan (zugeschnitten)
              </span>
              <div className="flex items-center gap-2">
                <button
                  onClick={() => setZoom((z) => Math.max(50, z - 25))}
                  className="px-2 py-0.5 text-xs bg-gray-200 dark:bg-gray-700 rounded hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300"
                >
                  -
                </button>
                <span className="text-xs text-gray-500 dark:text-gray-400 w-10 text-center">
                  {zoom}%
                </span>
                <button
                  onClick={() => setZoom((z) => Math.min(300, z + 25))}
                  className="px-2 py-0.5 text-xs bg-gray-200 dark:bg-gray-700 rounded hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300"
                >
                  +
                </button>
                <button
                  onClick={() => setZoom(100)}
                  className="px-2 py-0.5 text-xs bg-gray-200 dark:bg-gray-700 rounded hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300"
                >
                  Fit
                </button>
              </div>
            </div>
            <div className="flex-1 overflow-auto p-2">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={imageUrl}
                alt="Original scan"
                style={{ width: `${zoom}%`, maxWidth: 'none' }}
                className="block"
              />
            </div>
          </div>
        )}

        {/* Right: Grid with row-accept buttons */}
        <div
          className="overflow-auto space-y-3"
          style={{ maxHeight: showImage ? '70vh' : undefined }}
        >
          {/* Zone tables with row-accept buttons */}
          {(() => {
            // Group consecutive zones with same vsplit_group
            const groups: GridZone[][] = []
            for (const zone of grid.zones) {
              const prev = groups[groups.length - 1]
              if (
                prev &&
                zone.vsplit_group != null &&
                prev[0].vsplit_group === zone.vsplit_group
              ) {
                prev.push(zone)
              } else {
                groups.push([zone])
              }
            }
            return groups.map((group) => (
              <div key={group[0].vsplit_group ?? group[0].zone_index}>
                {/* Row-accept sidebar wraps each zone group */}
                <div className="flex gap-1">
                  {/* Accept buttons column */}
                  <div className="flex-shrink-0 pt-[52px]">
                    {group[0].rows.map((row) => {
                      const key = `${group[0].zone_index}-${row.index}`
                      const isAccepted = acceptedRows.has(key)
                      return (
                        <button
                          key={row.index}
                          onClick={() =>
                            acceptRow(group[0].zone_index, row.index)
                          }
                          className={`w-6 h-6 mb-px rounded flex items-center justify-center transition-colors ${
                            isAccepted
                              ? 'bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400'
                              : 'bg-gray-100 dark:bg-gray-800 text-gray-300 dark:text-gray-600 hover:bg-emerald-100 dark:hover:bg-emerald-900/30 hover:text-emerald-500'
                          }`}
                          title={
                            isAccepted
                              ? 'Klick zum Entfernen'
                              : 'Zeile als korrekt markieren'
                          }
                        >
                          <svg
                            className="w-3.5 h-3.5"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                          >
                            <path
                              strokeLinecap="round"
                              strokeLinejoin="round"
                              strokeWidth={2.5}
                              d="M5 13l4 4L19 7"
                            />
                          </svg>
                        </button>
                      )
                    })}
                  </div>

                  {/* Grid table(s) */}
                  <div
                    className={`flex-1 min-w-0 ${group.length > 1 ? 'flex gap-2' : ''}`}
                  >
                    {group.map((zone) => (
                      <div
                        key={zone.zone_index}
                        className={`${group.length > 1 ? 'flex-1 min-w-0' : ''} bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden`}
                      >
                        <GridTable
                          zone={zone}
                          layoutMetrics={grid.layout_metrics}
                          selectedCell={selectedCell}
                          onSelectCell={setSelectedCell}
                          onCellTextChange={updateCellText}
                          onToggleColumnBold={toggleColumnBold}
                          onToggleRowHeader={toggleRowHeader}
                          onNavigate={handleNavigate}
                          onDeleteColumn={deleteColumn}
                          onAddColumn={addColumn}
                        />
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            ))
          })()}
        </div>
      </div>

      {/* Tips + Next */}
      <div className="flex items-center justify-between">
        <div className="text-[11px] text-gray-400 dark:text-gray-500 flex items-center gap-4">
          <span>Tab: naechste Zelle</span>
          <span>Enter: Zeile runter</span>
          <span>Ctrl+Z/Y: Undo/Redo</span>
          <span>Ctrl+S: Speichern</span>
        </div>
        {onNext && (
          <button
            onClick={async () => {
              if (dirty) await saveGrid()
              onNext()
            }}
            className="px-4 py-2 bg-teal-600 text-white text-sm rounded-lg hover:bg-teal-700 transition-colors"
          >
            Fertig
          </button>
        )}
      </div>
    </div>
  )
}