'use client'

/**
 * StepAnsicht — Split-view page layout comparison.
 *
 * Left:  Original scan with OCR word overlay (red) + coordinate grid
 * Right: Reconstructed layout with all zones + coordinate grid
 *
 * Both sides share the same coordinate system for easy visual comparison.
 */

import { useEffect, useRef, useState } from 'react'
import { useGridEditor } from '@/components/grid-editor/useGridEditor'
import type { GridZone, GridEditorCell } from '@/components/grid-editor/types'

const KLAUSUR_API = '/klausur-api'

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

function getCellColor(cell: GridEditorCell | undefined): string | null {
  if (!cell) return null
  if (cell.color_override) return cell.color_override
  const colored = cell.word_boxes?.find((wb) => wb.color_name && wb.color_name !== 'black')
  return colored?.color ?? null
}

export function StepAnsicht({ sessionId, onNext }: StepAnsichtProps) {
  const { grid, loading, error, loadGrid } = useGridEditor(sessionId)

  const leftRef = useRef<HTMLDivElement>(null)
  const [panelWidth, setPanelWidth] = useState(0)
  const [showGrid, setShowGrid] = useState(true)
  const [gridSpacing, setGridSpacing] = useState(100) // px in original coordinates

  useEffect(() => {
    if (sessionId) loadGrid()
  }, [sessionId]) // eslint-disable-line react-hooks/exhaustive-deps

  // Track panel width
  useEffect(() => {
    if (!leftRef.current) return
    const ro = new ResizeObserver(([entry]) => setPanelWidth(entry.contentRect.width))
    ro.observe(leftRef.current)
    return () => ro.disconnect()
  }, [])

  if (loading) {
    return (
      <div className="flex items-center justify-center py-16">
        <div className="w-8 h-8 border-4 border-teal-500 border-t-transparent rounded-full animate-spin" />
        <span className="ml-3 text-gray-500">Lade Vorschau...</span>
      </div>
    )
  }

  if (error || !grid) {
    return (
      <div className="p-8 text-center">
        <p className="text-red-500 mb-4">{error || 'Keine Grid-Daten.'}</p>
        <button onClick={onNext} className="px-5 py-2 bg-teal-600 text-white rounded-lg">Weiter →</button>
      </div>
    )
  }

  const imgW = grid.image_width || 1
  const imgH = grid.image_height || 1
  const scale = panelWidth > 0 ? panelWidth / imgW : 0.5
  const panelHeight = imgH * scale

  const baseFontPx = (grid as any).layout_metrics?.font_size_suggestion_px || 14
  const avgRowH = (grid as any).layout_metrics?.avg_row_height_px || 31
  const scaledFont = Math.max(7, baseFontPx * scale)

  return (
    <div className="space-y-3">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
            Ansicht — Original vs. Rekonstruktion
          </h3>
          <p className="text-sm text-gray-500 dark:text-gray-400">
            Links: Original mit OCR-Overlay. Rechts: Rekonstruierte Seite. Koordinatengitter zum Abgleich.
          </p>
        </div>
        <div className="flex items-center gap-2">
          <label className="flex items-center gap-1.5 text-xs text-gray-500">
            <input
              type="checkbox"
              checked={showGrid}
              onChange={(e) => setShowGrid(e.target.checked)}
              className="w-3.5 h-3.5 rounded border-gray-300"
            />
            Gitter
          </label>
          <select
            value={gridSpacing}
            onChange={(e) => setGridSpacing(Number(e.target.value))}
            className="text-xs px-1.5 py-1 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700"
          >
            <option value={50}>50px</option>
            <option value={100}>100px</option>
            <option value={200}>200px</option>
          </select>
          <button onClick={onNext} className="px-5 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 text-sm font-medium">
            Weiter →
          </button>
        </div>
      </div>

      {/* Split view */}
      <div className="flex gap-2" style={{ height: panelHeight > 0 ? `${panelHeight + 40}px` : '600px' }}>
        {/* LEFT: Original + OCR overlay */}
        <div ref={leftRef} className="flex-1 relative border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden bg-white dark:bg-gray-900">
          <div className="absolute top-0 left-0 px-2 py-0.5 bg-black/60 text-white text-[10px] font-medium rounded-br z-20">
            Original + OCR
          </div>

          {/* Server-rendered OCR overlay image (scan + red snapped letters) */}
          {sessionId && (
            <img
              src={`${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/words-overlay`}
              alt="Original + OCR Overlay"
              className="absolute inset-0 w-full h-auto"
              style={{ height: `${panelHeight}px`, objectFit: 'contain' }}
            />
          )}

          {/* Coordinate grid */}
          {showGrid && <CoordinateGrid imgW={imgW} imgH={imgH} scale={scale} spacing={gridSpacing} />}
        </div>

        {/* RIGHT: Reconstruction */}
        <div className="flex-1 relative border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden bg-white dark:bg-gray-900">
          <div className="absolute top-0 left-0 px-2 py-0.5 bg-teal-600/80 text-white text-[10px] font-medium rounded-br z-20">
            Rekonstruktion
          </div>

          {/* Rendered zones */}
          {grid.zones.map((zone) => (
            <ZoneRenderer key={zone.zone_index} zone={zone} scale={scale} fontSize={scaledFont} avgRowH={avgRowH} />
          ))}

          {/* Coordinate grid */}
          {showGrid && <CoordinateGrid imgW={imgW} imgH={imgH} scale={scale} spacing={gridSpacing} />}
        </div>
      </div>
    </div>
  )
}

// ---------------------------------------------------------------------------
// Coordinate grid overlay
// ---------------------------------------------------------------------------

function CoordinateGrid({ imgW, imgH, scale, spacing }: {
  imgW: number; imgH: number; scale: number; spacing: number
}) {
  const lines: JSX.Element[] = []

  // Vertical lines
  for (let x = 0; x <= imgW; x += spacing) {
    const px = x * scale
    lines.push(
      <div key={`v${x}`} className="absolute top-0 bottom-0 pointer-events-none" style={{ left: `${px}px`, width: '1px', background: 'rgba(0,150,255,0.2)' }}>
        <span className="absolute top-0 left-1 text-[8px] text-blue-400 font-mono">{x}</span>
      </div>
    )
  }

  // Horizontal lines
  for (let y = 0; y <= imgH; y += spacing) {
    const px = y * scale
    lines.push(
      <div key={`h${y}`} className="absolute left-0 right-0 pointer-events-none" style={{ top: `${px}px`, height: '1px', background: 'rgba(0,150,255,0.2)' }}>
        <span className="absolute left-1 top-0.5 text-[8px] text-blue-400 font-mono">{y}</span>
      </div>
    )
  }

  return <>{lines}</>
}

// ---------------------------------------------------------------------------
// Zone renderer (reconstruction side)
// ---------------------------------------------------------------------------

function ZoneRenderer({ zone, scale, fontSize, avgRowH }: {
  zone: GridZone; scale: number; fontSize: number; avgRowH: number
}) {
  const isBox = zone.zone_type === 'box'
  const boxColor = (zone as any).box_bg_hex || '#6b7280'

  if (!zone.cells || zone.cells.length === 0) return null

  const left = zone.bbox_px.x * scale
  const top = zone.bbox_px.y * scale
  const width = zone.bbox_px.w * scale
  const height = zone.bbox_px.h * scale

  const cellMap = new Map<string, GridEditorCell>()
  for (const cell of zone.cells) {
    cellMap.set(`${cell.row_index}_${cell.col_index}`, cell)
  }

  // Column widths scaled to zone
  const colWidths = zone.columns.map((col) => {
    const w = (col.x_max_px ?? 0) - (col.x_min_px ?? 0)
    return Math.max(5, w * scale)
  })
  const totalColW = colWidths.reduce((s, w) => s + w, 0)
  const colScale = totalColW > 0 ? width / totalColW : 1
  const scaledColWidths = colWidths.map((w) => w * colScale)

  const numCols = zone.columns.length

  return (
    <div
      className="absolute overflow-hidden"
      style={{
        left: `${left}px`,
        top: `${top}px`,
        width: `${width}px`,
        minHeight: `${height}px`,
        border: isBox ? `${Math.max(1.5, 2.5 * scale)}px solid ${boxColor}` : undefined,
        backgroundColor: isBox ? `${boxColor}08` : undefined,
        borderRadius: isBox ? `${Math.max(1, 3 * scale)}px` : undefined,
        fontSize: `${fontSize}px`,
        lineHeight: '1.25',
      }}
    >
      <div style={{ display: 'grid', gridTemplateColumns: scaledColWidths.map((w) => `${w.toFixed(1)}px`).join(' ') }}>
        {zone.rows.map((row, rowIdx) => {
          const isSpanning = zone.cells.some((c) => c.row_index === row.index && c.col_type === 'spanning_header')

          // Row height = distance to next row's start (not text height)
          // This produces correct line spacing matching the original
          const nextRow = rowIdx + 1 < zone.rows.length ? zone.rows[rowIdx + 1] : null
          const rowStartY = row.y_min_px ?? row.y_min ?? 0
          const nextStartY = nextRow ? (nextRow.y_min_px ?? nextRow.y_min ?? 0) : rowStartY + avgRowH
          const rowSpacing = nextStartY - rowStartY
          const rowH = Math.max(fontSize * 1.3, rowSpacing * scale)

          // Multi-line cells need more height
          const maxLines = Math.max(1, ...zone.cells
            .filter((c) => c.row_index === row.index)
            .map((c) => (c.text ?? '').split('\n').length))
          const effectiveRowH = rowH * Math.max(1, maxLines)

          return (
            <div key={row.index} style={{ display: 'contents' }}>
              {isSpanning ? (
                zone.cells
                  .filter((c) => c.row_index === row.index && c.col_type === 'spanning_header')
                  .sort((a, b) => a.col_index - b.col_index)
                  .map((cell) => {
                    const colspan = cell.colspan || numCols
                    const color = getCellColor(cell)
                    return (
                      <div
                        key={cell.cell_id}
                        className={`px-0.5 overflow-hidden ${row.is_header ? 'font-bold' : ''}`}
                        style={{
                          gridColumn: `${cell.col_index + 1} / ${cell.col_index + 1 + colspan}`,
                          minHeight: `${effectiveRowH}px`,
                          color: color || undefined,
                          whiteSpace: 'pre-wrap',
                        }}
                      >
                        {cell.text}
                      </div>
                    )
                  })
              ) : (
                zone.columns.map((col) => {
                  const cell = cellMap.get(`${row.index}_${col.index}`)
                  if (!cell) return <div key={col.index} style={{ minHeight: `${rowH}px` }} />
                  const color = getCellColor(cell)
                  const isBold = col.bold || cell.is_bold || row.is_header
                  const text = cell.text ?? ''

                  return (
                    <div
                      key={col.index}
                      className={`px-0.5 overflow-hidden ${isBold ? 'font-bold' : ''}`}
                      style={{
                        minHeight: `${rowH}px`,
                        color: color || undefined,
                        whiteSpace: text.includes('\n') ? 'pre-wrap' : 'nowrap',
                        textOverflow: text.includes('\n') ? undefined : 'ellipsis',
                      }}
                    >
                      {text}
                    </div>
                  )
                })
              )}
            </div>
          )
        })}
      </div>
    </div>
  )
}