'use client'

import type { StructuredGrid } from './types'

const KLAUSUR_API = '/klausur-api'

interface GridImageOverlayProps {
  sessionId: string
  grid: StructuredGrid
}

const ZONE_COLORS = [
  { border: 'rgba(20,184,166,0.7)', fill: 'rgba(20,184,166,0.05)' },   // teal
  { border: 'rgba(245,158,11,0.7)', fill: 'rgba(245,158,11,0.05)' },   // amber
  { border: 'rgba(99,102,241,0.7)', fill: 'rgba(99,102,241,0.05)' },   // indigo
  { border: 'rgba(236,72,153,0.7)', fill: 'rgba(236,72,153,0.05)' },   // pink
]

export function GridImageOverlay({ sessionId, grid }: GridImageOverlayProps) {
  const imgUrl = `${KLAUSUR_API}/api/v1/ocr-pipeline/sessions/${sessionId}/image/cropped`

  return (
    <div className="relative w-full overflow-auto border border-gray-200 dark:border-gray-700 rounded-lg bg-gray-100 dark:bg-gray-900">
      <div className="relative inline-block">
        {/* Source image */}
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={imgUrl}
          alt="OCR Scan"
          className="block max-w-full"
          style={{ imageRendering: 'auto' }}
        />

        {/* SVG overlay */}
        <svg
          className="absolute inset-0 w-full h-full pointer-events-none"
          viewBox={`0 0 ${grid.image_width} ${grid.image_height}`}
          preserveAspectRatio="xMinYMin meet"
        >
          {grid.zones.map((zone) => {
            const colors = ZONE_COLORS[zone.zone_index % ZONE_COLORS.length]
            const b = zone.bbox_px

            return (
              <g key={zone.zone_index}>
                {/* Zone border */}
                <rect
                  x={b.x} y={b.y} width={b.w} height={b.h}
                  fill={colors.fill}
                  stroke={colors.border}
                  strokeWidth={zone.zone_type === 'box' ? 3 : 1.5}
                  strokeDasharray={zone.zone_type === 'box' ? undefined : '6 3'}
                />

                {/* Column separators */}
                {zone.columns.slice(1).map((col) => (
                  <line
                    key={`col-${col.index}`}
                    x1={col.x_min_px} y1={b.y}
                    x2={col.x_min_px} y2={b.y + b.h}
                    stroke={colors.border}
                    strokeWidth={1}
                    strokeDasharray="4 2"
                  />
                ))}

                {/* Row separators */}
                {zone.rows.slice(1).map((row) => (
                  <line
                    key={`row-${row.index}`}
                    x1={b.x} y1={row.y_min_px}
                    x2={b.x + b.w} y2={row.y_min_px}
                    stroke={colors.border}
                    strokeWidth={0.5}
                    strokeDasharray="3 3"
                    opacity={0.5}
                  />
                ))}

                {/* Zone label */}
                <text
                  x={b.x + 4} y={b.y + 14}
                  fill={colors.border}
                  fontSize={12}
                  fontWeight="bold"
                  fontFamily="monospace"
                >
                  {zone.zone_type === 'box' ? 'BOX' : 'CONTENT'} Z{zone.zone_index}
                  {' '}({zone.columns.length}x{zone.rows.length})
                </text>
              </g>
            )
          })}
        </svg>
      </div>
    </div>
  )
}