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

'use client'

import { RefObject } from 'react'
import type { GridResult, GridCell } from '@/app/(admin)/ai/ocr-kombi/types'
import { MultilineText, colTypeLabel, colTypeColor, confColor } from './WordRecognitionUtils'

const KLAUSUR_API = '/klausur-api'

interface WordRecognitionOverviewProps {
  sessionId: string
  gridResult: GridResult | null
  detecting: boolean
  editedCells: GridCell[]
  activeIndex: number
  setActiveIndex: (idx: number) => void
  setMode: (mode: 'overview' | 'labeling') => void
  tableEndRef: RefObject<HTMLDivElement | null>
}

export function WordRecognitionOverview({
  sessionId,
  gridResult,
  detecting,
  editedCells,
  activeIndex,
  setActiveIndex,
  setMode,
  tableEndRef,
}: WordRecognitionOverviewProps) {
  const overlayUrl = `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/words-overlay`
  const dewarpedUrl = `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/cropped`

  const summary = gridResult?.summary
  const columnsUsed = gridResult?.columns_used || []

  // Group cells by row for table display
  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 (
    <>
      {/* Images: overlay vs clean */}
      <div className="grid grid-cols-2 gap-4">
        <div>
          <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
            Mit Grid-Overlay
          </div>
          <div className="border rounded-lg overflow-hidden dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
            {gridResult ? (
              // eslint-disable-next-line @next/next/no-img-element
              <img
                src={`${overlayUrl}?t=${Date.now()}`}
                alt="Wort-Overlay"
                className="w-full h-auto"
              />
            ) : (
              <div className="aspect-[3/4] flex items-center justify-center text-gray-400 text-sm">
                {detecting ? 'Erkenne Woerter...' : 'Keine Daten'}
              </div>
            )}
          </div>
        </div>
        <div>
          <div className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
            Entzerrtes Bild
          </div>
          <div className="border rounded-lg overflow-hidden dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={dewarpedUrl}
              alt="Entzerrt"
              className="w-full h-auto"
            />
          </div>
        </div>
      </div>

      {/* Result summary (only after streaming completes) */}
      {gridResult && summary && !detecting && (
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 space-y-3">
          <div className="flex items-center justify-between">
            <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">
              Ergebnis: {summary.non_empty_cells}/{summary.total_cells} Zellen mit Text
              ({sortedRowIndices.length} Zeilen, {columnsUsed.length} Spalten)
            </h4>
            <span className="text-xs text-gray-400">
              {gridResult.duration_seconds}s
            </span>
          </div>

          {/* Summary badges */}
          <div className="flex gap-2 flex-wrap">
            <span className="px-2 py-0.5 rounded text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300">
              Zellen: {summary.non_empty_cells}/{summary.total_cells}
            </span>
            {columnsUsed.map((col, i) => (
              <span key={i} className={`px-2 py-0.5 rounded text-xs font-medium bg-gray-100 dark:bg-gray-700 ${colTypeColor(col.type)}`}>
                C{col.index}: {colTypeLabel(col.type)}
              </span>
            ))}
            {summary.low_confidence > 0 && (
              <span className="px-2 py-0.5 rounded text-xs font-medium bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300">
                Unsicher: {summary.low_confidence}
              </span>
            )}
          </div>

          {/* Entry/Cell table */}
          <div className="max-h-80 overflow-y-auto">
            <table className="w-full text-xs">
              <thead className="sticky top-0 bg-white dark:bg-gray-800">
                <tr className="text-left text-gray-500 dark:text-gray-400 border-b dark:border-gray-700">
                  <th className="py-1 pr-2 w-12">Zeile</th>
                  {columnsUsed.map((col, i) => (
                    <th key={i} className={`py-1 pr-2 ${colTypeColor(col.type)}`}>
                      {colTypeLabel(col.type)}
                    </th>
                  ))}
                  <th className="py-1 w-12 text-right">Conf</th>
                </tr>
              </thead>
              <tbody>
                {sortedRowIndices.map((rowIdx, posIdx) => {
                  const rowCells = cellsByRow.get(rowIdx) || []
                  const avgConf = rowCells.length
                    ? Math.round(rowCells.reduce((s, c) => s + c.confidence, 0) / rowCells.length)
                    : 0
                  return (
                    <tr
                      key={rowIdx}
                      className={`border-b dark:border-gray-700/50 ${
                        posIdx === activeIndex ? 'bg-teal-50 dark:bg-teal-900/20' : ''
                      }`}
                      onClick={() => { setActiveIndex(posIdx); setMode('labeling') }}
                    >
                      <td className="py-1 pr-2 text-gray-400 font-mono text-[10px]">
                        R{String(rowIdx).padStart(2, '0')}
                      </td>
                      {columnsUsed.map((col) => {
                        const cell = rowCells.find(c => c.col_index === col.index)
                        return (
                          <td key={col.index} className="py-1 pr-2 font-mono text-gray-700 dark:text-gray-300 cursor-pointer">
                            <MultilineText text={cell?.text || ''} />
                          </td>
                        )
                      })}
                      <td className={`py-1 text-right font-mono ${confColor(avgConf)}`}>
                        {avgConf}%
                      </td>
                    </tr>
                  )
                })}
              </tbody>
            </table>
            <div ref={tableEndRef} />
          </div>
        </div>
      )}

      {/* Streaming cell table (shown while detecting, before complete) */}
      {detecting && editedCells.length > 0 && !gridResult?.summary?.non_empty_cells && (
        <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 space-y-3">
          <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">
            Live: {editedCells.length} Zellen erkannt...
          </h4>
          <div className="max-h-80 overflow-y-auto">
            <table className="w-full text-xs">
              <thead className="sticky top-0 bg-white dark:bg-gray-800">
                <tr className="text-left text-gray-500 dark:text-gray-400 border-b dark:border-gray-700">
                  <th className="py-1 pr-2 w-12">Zelle</th>
                  {columnsUsed.map((col, i) => (
                    <th key={i} className={`py-1 pr-2 ${colTypeColor(col.type)}`}>
                      {colTypeLabel(col.type)}
                    </th>
                  ))}
                  <th className="py-1 w-12 text-right">Conf</th>
                </tr>
              </thead>
              <tbody>
                {(() => {
                  const liveByRow: Map<number, GridCell[]> = new Map()
                  for (const cell of editedCells) {
                    const existing = liveByRow.get(cell.row_index) || []
                    existing.push(cell)
                    liveByRow.set(cell.row_index, existing)
                  }
                  const liveSorted = [...liveByRow.keys()].sort((a, b) => a - b)
                  return liveSorted.map(rowIdx => {
                    const rowCells = liveByRow.get(rowIdx) || []
                    const avgConf = rowCells.length
                      ? Math.round(rowCells.reduce((s, c) => s + c.confidence, 0) / rowCells.length)
                      : 0
                    return (
                      <tr key={rowIdx} className="border-b dark:border-gray-700/50 animate-fade-in">
                        <td className="py-1 pr-2 text-gray-400 font-mono text-[10px]">
                          R{String(rowIdx).padStart(2, '0')}
                        </td>
                        {columnsUsed.map((col) => {
                          const cell = rowCells.find(c => c.col_index === col.index)
                          return (
                            <td key={col.index} className="py-1 pr-2 font-mono text-gray-700 dark:text-gray-300">
                              <MultilineText text={cell?.text || ''} />
                            </td>
                          )
                        })}
                        <td className={`py-1 text-right font-mono ${confColor(avgConf)}`}>
                          {avgConf}%
                        </td>
                      </tr>
                    )
                  })
                })()}
              </tbody>
            </table>
            <div ref={tableEndRef} />
          </div>
        </div>
      )}
    </>
  )
}