import { Group, Rect, Circle, Line } from 'react-konva';

interface OutletSymbolProps {
  /** Screen-space position of the anchor point (already includes pan/zoom + anchor offset). */
  readonly x: number;
  readonly y: number;
  /** Item rotation in degrees. Applied around the local origin. */
  readonly rotation: number;
  readonly color: string;
  /** Number of individual outlets in the group (>= 1). */
  readonly count: number;
  /** Physical width of a single outlet face plate, expressed in screen pixels (m * zoom). */
  readonly outletWidthPx: number;
  /** Physical height of a single outlet face plate, expressed in screen pixels (m * zoom). */
  readonly outletHeightPx: number;
  /**
   * Local-space offset (pre-rotation) from the (x, y) anchor to the geometric
   * center of the bounding box. The bounding box has width = count * outletWidthPx
   * and height = outletHeightPx, arranged horizontally along the local x-axis.
   */
  readonly centerOffsetX: number;
  readonly centerOffsetY: number;
}

/**
 * Outlet symbol — renders `count` adjacent face plates side-by-side along the
 * local x-axis (which aligns with the wall when the item is wall-mounted).
 * Each face plate is drawn as a rounded rectangle with a small "outlet face"
 * (circle + two prongs) centered inside it. Sized in real-world units so the
 * boundaries reflect the room's configured outlet dimensions.
 */
export function OutletSymbol({
  x,
  y,
  rotation,
  color,
  count,
  outletWidthPx,
  outletHeightPx,
  centerOffsetX,
  centerOffsetY,
}: OutletSymbolProps) {
  const safeCount = Math.max(1, Math.round(count));
  const totalWidth = safeCount * outletWidthPx;
  // Top-left corner of the bounding box in local space (relative to the anchor).
  const left = centerOffsetX - totalWidth / 2;
  const top = centerOffsetY - outletHeightPx / 2;

  // Inner outlet face geometry: shrink to fit the smaller dimension of one cell.
  const cellMin = Math.min(outletWidthPx, outletHeightPx);
  const faceRadius = cellMin * 0.32;
  const prongLen = cellMin * 0.18;
  const prongGap = cellMin * 0.12;

  return (
    <Group x={x} y={y} rotation={rotation} listening={false}>
      {Array.from({ length: safeCount }).map((_, i) => {
        const cellLeft = left + i * outletWidthPx;
        const cellCenterX = cellLeft + outletWidthPx / 2;
        const cellCenterY = top + outletHeightPx / 2;
        return (
          <Group key={i}>
            <Rect
              x={cellLeft}
              y={top}
              width={outletWidthPx}
              height={outletHeightPx}
              cornerRadius={Math.max(1, cellMin * 0.12)}
              stroke={color}
              strokeWidth={1.25}
              fill="rgba(255, 255, 255, 0.55)"
              listening={false}
            />
            <Circle
              x={cellCenterX}
              y={cellCenterY}
              radius={faceRadius}
              stroke={color}
              strokeWidth={1.25}
              fill="transparent"
              listening={false}
            />
            <Line
              points={[cellCenterX - prongGap, cellCenterY - prongLen, cellCenterX - prongGap, cellCenterY + prongLen]}
              stroke={color}
              strokeWidth={1.25}
              listening={false}
            />
            <Line
              points={[cellCenterX + prongGap, cellCenterY - prongLen, cellCenterX + prongGap, cellCenterY + prongLen]}
              stroke={color}
              strokeWidth={1.25}
              listening={false}
            />
          </Group>
        );
      })}
    </Group>
  );
}
