import type { RefObject } from "react"
import { ClipboardListIcon, MousePointerClickIcon, ZoomInIcon } from "lucide-react"
import { Badge, Button, ScrollArea, Table, TableBody, TableCell, TableHead, TableRow } from "@hm-design/ui"
import { formatEntityProperties } from "../engine/propertyInspector"
import { FloatingPanel } from "./FloatingPanel"

type Props = {
  open: boolean
  onClose: () => void
  anchorRef: RefObject<HTMLElement | null>
  /** Entity from Viewer2D.onSelect (null = nothing selected). */
  entity: unknown
  onZoomToSelection: () => void
}

/**
 * Properties window. Formatting (labels, units, per-type geometry) is the ported formatEntityProperties
 * (src/engine/propertyInspector.ts, unchanged); only the presentation is HM (Badge + Table).
 */
export function PropertiesPanel({ open, onClose, anchorRef, entity, onZoomToSelection }: Props) {
  const prop = entity ? formatEntityProperties(entity) : null

  return (
    <FloatingPanel
      title="속성"
      icon={<ClipboardListIcon className="size-4" />}
      actions={
        prop ? (
          <Button type="button" variant="primary" appearance="outline" size="sm" onClick={onZoomToSelection}>
            <ZoomInIcon aria-hidden="true" />
            선택 확대
          </Button>
        ) : null
      }
      open={open}
      onClose={onClose}
      slot={0}
      anchorRef={anchorRef}
    >
      {!prop ? (
        <div className="viewer-empty-note">
          <MousePointerClickIcon aria-hidden="true" className="mx-auto mb-2 size-6" />
          도면에서 객체(엔티티)를 클릭하면
          <br />
          상세 속성이 표시됩니다
        </div>
      ) : (
        <ScrollArea className="viewer-window-scroll">
          <div className="viewer-window-section grid gap-4">
            <Badge className="viewer-prop-id">{prop.id}</Badge>
            <PropertyTable caption="일반 정보 (General)" rows={prop.general} />
            {prop.geometry.length > 0 ? <PropertyTable caption="기하 속성 (Geometry)" rows={prop.geometry} /> : null}
          </div>
        </ScrollArea>
      )}
    </FloatingPanel>
  )
}

function PropertyTable({ caption, rows }: { caption: string; rows: [string, string][] }) {
  return (
    <section className="grid gap-1.5">
      <h3 className="viewer-section-title">{caption}</h3>
      <Table aria-label={caption} className="viewer-prop-table">
        <TableBody>
          {rows.map(([k, v], i) => (
            <TableRow key={`${k}-${i}`}>
              <TableHead scope="row" className="viewer-prop-key">
                {k}
              </TableHead>
              <TableCell className="viewer-prop-value">{v}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </section>
  )
}