'use client'

import type { OverlayReconstructionProps } from './overlay-reconstruction-types'
import { KLAUSUR_API } from './overlay-reconstruction-types'
import { useOverlayReconstructionState } from './useOverlayReconstructionState'
import { OverlayToolbar } from './OverlayToolbar'
import { OverlayCellRenderer } from './OverlayCellRenderer'

export function OverlayReconstruction({ sessionId, onNext, wordResultOverride }: OverlayReconstructionProps) {
  const state = useOverlayReconstructionState(sessionId, wordResultOverride)

  const {
    status,
    error,
    cells,
    rows,
    imageNaturalSize,
    textOpacity,
    textColor,
    changedCount,
    medianCellHeightPx,
    fontScale,
    globalBold,
    cellWordPositions,
    reconRef,
    handleTextChange,
    handleKeyDown,
    getDisplayText,
    isEdited,
    resetCell,
    saveReconstruction,
    loadSessionData,
    setError,
    setImageNaturalSize,
  } = state

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

  if (status === 'loading') {
    return (
      <div className="flex items-center gap-3 justify-center py-12">
        <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-teal-500" />
        <span className="text-gray-500">Overlay-Daten werden geladen...</span>
      </div>
    )
  }

  if (status === 'error') {
    return (
      <div className="flex flex-col items-center justify-center py-12 text-center">
        <div className="text-5xl mb-4">&#x26A0;&#xFE0F;</div>
        <h3 className="text-lg font-medium text-red-600 dark:text-red-400 mb-2">Fehler</h3>
        <p className="text-sm text-gray-500 dark:text-gray-400 max-w-lg mb-4">{error}</p>
        <div className="flex gap-3">
          <button onClick={() => { setError(''); loadSessionData() }}
            className="px-5 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors text-sm">
            Erneut versuchen
          </button>
          <button onClick={onNext}
            className="px-5 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors text-sm">
            Ueberspringen &rarr;
          </button>
        </div>
      </div>
    )
  }

  if (status === 'saved') {
    return (
      <div className="flex flex-col items-center justify-center py-12 text-center">
        <div className="text-5xl mb-4">&#x2705;</div>
        <h3 className="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2">Overlay gespeichert</h3>
        <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
          {changedCount > 0 ? `${changedCount} Zellen wurden aktualisiert.` : 'Keine Aenderungen vorgenommen.'}
        </p>
        <button onClick={onNext}
          className="px-6 py-2.5 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors font-medium">
          Fertig
        </button>
      </div>
    )
  }

  const imgW = imageNaturalSize?.w || 1
  const imgH = imageNaturalSize?.h || 1
  const colorValue = textColor === 'black' ? '#1a1a1a' : textColor
  const dewarpedUrl = sessionId
    ? `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/cropped`
    : ''

  return (
    <div className="space-y-3">
      {/* Toolbar */}
      <OverlayToolbar state={state} />

      {/* True overlay: text layer on top of original image */}
      <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-gray-50 dark:bg-gray-900">
        <div
          ref={reconRef}
          className="relative"
          style={{ aspectRatio: `${imgW} / ${imgH}` }}
        >
          {/* Background: original image */}
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={dewarpedUrl}
            alt="Original"
            className="absolute inset-0 w-full h-full object-contain"
            onLoad={(e) => {
              const img = e.target as HTMLImageElement
              setImageNaturalSize({ w: img.naturalWidth, h: img.naturalHeight })
            }}
          />

          {/* Text overlay layer */}
          <div
            className="absolute inset-0"
            style={{ opacity: textOpacity / 100 }}
          >
            {/* Row lines */}
            {rows.map((row, i) => (
              <div
                key={`row-${i}`}
                className="absolute left-0 right-0 border-t border-cyan-400/40"
                style={{ top: `${(row.y / imgH) * 100}%` }}
              />
            ))}

            {/* Cells */}
            {cells.map((cell) => (
              <OverlayCellRenderer
                key={cell.cellId}
                cell={cell}
                displayText={getDisplayText(cell)}
                edited={isEdited(cell)}
                wordPositions={cellWordPositions.get(cell.cellId)}
                medianCellHeightPx={medianCellHeightPx}
                fontScale={fontScale}
                globalBold={globalBold}
                colorValue={colorValue}
                handleTextChange={handleTextChange}
                handleKeyDown={handleKeyDown}
                resetCell={resetCell}
              />
            ))}
          </div>
        </div>
      </div>

      {/* Bottom action */}
      <div className="flex justify-end">
        <button
          onClick={() => {
            if (changedCount > 0) {
              saveReconstruction()
            } else {
              onNext()
            }
          }}
          className="px-6 py-2.5 bg-teal-600 text-white rounded-lg hover:bg-teal-700 transition-colors font-medium text-sm"
        >
          {changedCount > 0 ? 'Speichern & Fertig' : 'Fertig'}
        </button>
      </div>
    </div>
  )
}