import { Group, Rect } from "react-konva";
import type { Shape } from "../types";

export type Outline = "normal" | "selected" | "valid" | "invalid" | "flagged" | "highlight";

const STROKE: Record<Outline, string> = {
  normal: "#3b3b3b",
  selected: "#1c7ed6",
  flagged: "#f08c00",
  highlight: "#d6336c",
  valid: "#2f9e44",
  invalid: "#e03131",
};

interface Props {
  shape: Shape;
  width: number; // meters
  height: number;
  pxPerM: number;
  outline: Outline;
  opacity?: number;
}

/** Top-down shape drawn at local (0,0). Position is set by the parent Group. */
export function FurnitureShape({ shape, width, height, pxPerM, outline, opacity = 1 }: Props) {
  const w = width * pxPerM;
  const h = height * pxPerM;
  const stroke = STROKE[outline];
  const strokeWidth = outline === "normal" ? 1.5 : 3;

  if (shape === "screen") {
    const inset = Math.min(3, h / 4);
    return (
      <Group opacity={opacity}>
        <Rect width={w} height={h} fill="#2d3748" stroke={stroke} strokeWidth={strokeWidth} cornerRadius={2} />
        <Rect x={inset} y={inset} width={Math.max(0, w - inset * 2)} height={Math.max(0, h - inset * 2)} fill="#63b3ed" listening={false} />
      </Group>
    );
  }
  if (shape === "table") {
    return (
      <Group opacity={opacity}>
        <Rect width={w} height={h} fill="#d9b382" stroke={stroke} strokeWidth={strokeWidth} cornerRadius={3} />
      </Group>
    );
  }
  const bar = Math.max(4, h * 0.2);
  return (
    <Group opacity={opacity}>
      <Rect width={w} height={h} fill="#8fb4d9" stroke={stroke} strokeWidth={strokeWidth} cornerRadius={3} />
      <Rect width={w} height={bar} fill="#4a6f96" cornerRadius={[3, 3, 0, 0]} listening={false} />
    </Group>
  );
}