'use client'

import type { StructureBox, StructureGraphic } from '@/app/(admin)/ai/ocr-kombi/types'

interface StructureLayerProps {
  boxes: StructureBox[]
  graphics: StructureGraphic[]
  imgW: number
  imgH: number
  show: boolean
}

/**
 * Renders structure boxes and graphic elements as a positioned overlay.
 * Used as a background layer in both simple and overlay reconstruction modes.
 */
export function StructureLayer({ boxes, graphics, imgW, imgH, show }: StructureLayerProps) {
  if (!show) return null
  if (boxes.length === 0 && graphics.length === 0) return null

  return (
    <>
      {/* Structure boxes */}
      {boxes.map((box, i) => {
        const bgColor = box.bg_color_hex || '#6b7280'
        return (
          <div
            key={`sbox-${i}`}
            className="absolute pointer-events-none"
            style={{
              left: `${(box.x / imgW) * 100}%`,
              top: `${(box.y / imgH) * 100}%`,
              width: `${(box.w / imgW) * 100}%`,
              height: `${(box.h / imgH) * 100}%`,
              border: `${Math.max(1, box.border_thickness)}px solid ${bgColor}40`,
              backgroundColor: `${bgColor}0a`,
              borderRadius: '2px',
            }}
          />
        )
      })}

      {/* Graphic elements */}
      {graphics.map((g, i) => (
        <div
          key={`sgfx-${i}`}
          className="absolute pointer-events-none"
          style={{
            left: `${(g.x / imgW) * 100}%`,
            top: `${(g.y / imgH) * 100}%`,
            width: `${(g.w / imgW) * 100}%`,
            height: `${(g.h / imgH) * 100}%`,
            border: `1px dashed ${g.color_hex}60`,
            backgroundColor: `${g.color_hex}08`,
            borderRadius: '2px',
          }}
        >
          <span
            className="absolute text-[8px] leading-none opacity-50"
            style={{
              top: '1px',
              left: '2px',
              color: g.color_hex,
            }}
          >
            {g.shape === 'illustration' ? 'Illust' : 'Bild'}
          </span>
        </div>
      ))}
    </>
  )
}