import { useRef, useState, type RefObject } from "react";
import { Stage, Layer, Group, Rect, Path, Arc, Line, RegularPolygon } from "react-konva";
import type Konva from "konva";
import {
  SCREEN_DEPTH_M,
  boundsOf,
  clampToRoom,
  doorSwingRect,
  isValidObstacle,
  isValidPlacement,
  isValidWallItem,
  resizeLength,
  wallLength,
  wallRect,
} from "../geometry";
import type { Door, FurnitureItem, FurnitureTypeConfig, Obstacle, Rect as RectM, Room as RoomT, RoomScreen, Shape, Wall } from "../types";
import { FurnitureShape, type Outline } from "./FurnitureShape";

export interface Preview {
  shape: Shape;
  x: number; // meters
  y: number;
  width: number;
  height: number;
  valid: boolean;
}

export const WALL_PX = 6; // drawn wall thickness around the floor
export type Mode = "layout" | "room";
export type RoomSel = { kind: "door" | "screen" | "obstacle"; id: string };

interface Props {
  mode: Mode;
  roomSel: RoomSel | null;
  onSelectRoom: (sel: RoomSel | null) => void;
  onMoveWallItem: (kind: "door" | "screen", id: string, offset: number) => void;
  onMoveObstacle: (id: string, x: number, y: number) => void;
  room: RoomT;
  items: FurnitureItem[];
  configs: Record<string, FurnitureTypeConfig>;
  preview: Preview | null; // new item being dragged in from the palette
  pxPerM: number;
  floorRef: RefObject<HTMLDivElement | null>;
  selectedId: string | null;
  onSelect: (id: string | null) => void;
  onMove: (id: string, x: number, y: number) => void;
  onResize: (id: string, rect: RectM) => void;
}

interface DragInfo {
  id: string;
  valid: boolean;
}

interface ResizeInfo {
  id: string;
  rect: RectM;
  valid: boolean;
}

interface WallDrag {
  kind: "door" | "screen";
  id: string;
  offset: number;
  valid: boolean;
}

const HANDLE_PX = 10;
const O = WALL_PX;
const WALL_COLOR = "#2b2b2b";
const SEL = "#1c7ed6";
const BAD = "#e03131";
const GOOD = "#2f9e44";

/** Wall pieces between door openings, in meters along each wall. */
function wallSegments(room: RoomT): { wall: Wall; a: number; b: number }[] {
  const out: { wall: Wall; a: number; b: number }[] = [];
  for (const wall of ["top", "bottom", "left", "right"] as Wall[]) {
    const len = wallLength(room, wall);
    const gaps = room.doors.filter((d) => d.wall === wall).sort((p, q) => p.offset - q.offset);
    let at = 0;
    for (const g of gaps) {
      if (g.offset > at + 1e-6) out.push({ wall, a: at, b: g.offset });
      at = Math.max(at, g.offset + g.width);
    }
    if (at < len - 1e-6) out.push({ wall, a: at, b: len });
  }
  return out;
}

// Quarter-circle swing: hinge at the door's near end, leaf swings into the room.
const SWING = {
  top: { rot: 0, dir: [0, 1] },
  bottom: { rot: 270, dir: [0, -1] },
  left: { rot: 0, dir: [1, 0] },
  right: { rot: 90, dir: [-1, 0] },
} as const;

function hinge(room: RoomT, d: Pick<Door, "wall" | "offset">): [number, number] {
  switch (d.wall) {
    case "top":
      return [d.offset, 0];
    case "bottom":
      return [d.offset, room.height];
    case "left":
      return [0, d.offset];
    case "right":
      return [room.width, d.offset];
  }
}

function DoorShape({ room, door, px, color }: { room: RoomT; door: Door; px: number; color: string }) {
  const [hx, hy] = hinge(room, door);
  const sw = SWING[door.wall];
  const r = door.width * px;
  return (
    <Group listening={false}>
      <Arc
        x={hx * px}
        y={hy * px}
        innerRadius={0}
        outerRadius={r}
        angle={90}
        rotation={sw.rot}
        fill={door.isLoading ? "rgba(237,137,54,0.2)" : "rgba(66,153,225,0.14)"}
        stroke={color}
        strokeWidth={1}
        dash={[4, 4]}
      />
      <Line points={[hx * px, hy * px, hx * px + sw.dir[0] * r, hy * px + sw.dir[1] * r]} stroke={color} strokeWidth={3} lineCap="round" />
    </Group>
  );
}

const ARROW_ROT: Record<Wall, number> = { top: 180, bottom: 0, left: 90, right: -90 };

function ScreenShape({ room, screen, px, outline }: { room: RoomT; screen: RoomScreen; px: number; outline: string }) {
  const r = wallRect(room, screen.wall, screen.offset, screen.width, SCREEN_DEPTH_M);
  const rad = Math.max(4, SCREEN_DEPTH_M * px * 0.5);
  return (
    <Group listening={false}>
      <Rect x={r.x * px} y={r.y * px} width={r.width * px} height={r.height * px} fill="#2d3748" stroke={outline} strokeWidth={outline === WALL_COLOR ? 1 : 2.5} cornerRadius={2} />
      <RegularPolygon
        x={(r.x + r.width / 2) * px}
        y={(r.y + r.height / 2) * px}
        sides={3}
        radius={rad}
        rotation={ARROW_ROT[screen.wall]}
        fill="#63b3ed"
      />
    </Group>
  );
}
const ENDS: ("left" | "right")[] = ["left", "right"];

function LockIcon({ w, h, rotation }: { w: number; h: number; rotation: number }) {
  // 24x24 padlock centered in the item, counter-rotated so it stays upright.
  const s = Math.min(1, Math.max(0.35, (Math.min(w, h) * 0.7) / 24));
  return (
    <Group x={w / 2} y={h / 2} offsetX={12} offsetY={12} scaleX={s} scaleY={s} rotation={-rotation} listening={false}>
      <Path data="M8 11V8a4 4 0 0 1 8 0v3" stroke="#1a1a1a" strokeWidth={2.5} />
      <Rect x={5} y={11} width={14} height={10} cornerRadius={2} fill="#fff" stroke="#1a1a1a" strokeWidth={2} />
    </Group>
  );
}

export function Room({ mode, roomSel, onSelectRoom, onMoveWallItem, onMoveObstacle, room, items, configs, preview, pxPerM, floorRef, selectedId, onSelect, onMove, onResize }: Props) {
  const interactive = mode === "layout";
  const [drag, setDrag] = useState<DragInfo | null>(null);
  const [resize, setResize] = useState<ResizeInfo | null>(null);
  const resizeStart = useRef<RectM | null>(null);
  const [wallDrag, setWallDrag] = useState<WallDrag | null>(null);
  const wallStart = useRef<{ along: number; offset: number } | null>(null);
  const [obDrag, setObDrag] = useState<{ id: string; valid: boolean } | null>(null);
  const w = room.width * pxPerM;
  const h = room.height * pxPerM;

  // The group's origin is the item's CENTER (offset puts the rect's center there), so rotation pivots on it.
  const candidate = (item: FurnitureItem, node: Konva.Node): FurnitureItem =>
    clampToRoom(
      {
        ...item,
        x: node.x() / pxPerM - item.width / 2,
        y: node.y() / pxPerM - item.height / 2,
      },
      room,
    );

  const fw = w + O * 2;
  const fh = h + O * 2;

  // ---- wall items (doors / screens): slide along their wall only ----
  const alongOf = (wall: Wall, p: { x: number; y: number }) => ((wall === "top" || wall === "bottom" ? p.x : p.y) - O) / pxPerM;

  const wallHit = (kind: "door" | "screen", id: string, wall: Wall, offset: number, width: number, rect: RectM) => {
    return (
      <Rect
        key={`hit-${id}`}
        x={rect.x * pxPerM}
        y={rect.y * pxPerM}
        width={rect.width * pxPerM}
        height={rect.height * pxPerM}
        fill="transparent"
        draggable
        dragBoundFunc={function (this: Konva.Node) {
          return this.absolutePosition();
        }}
        onMouseDown={() => onSelectRoom({ kind, id })}
        onTouchStart={() => onSelectRoom({ kind, id })}
        onDragStart={(e) => {
          e.cancelBubble = true;
          const p = e.target.getStage()?.getPointerPosition();
          if (p) wallStart.current = { along: alongOf(wall, p), offset };
        }}
        onDragMove={(e) => {
          const p = e.target.getStage()?.getPointerPosition();
          const st = wallStart.current;
          if (!p || !st) return;
          const next = Math.min(Math.max(st.offset + alongOf(wall, p) - st.along, 0), wallLength(room, wall) - width);
          setWallDrag({ kind, id, offset: next, valid: isValidWallItem(room, items, { id, kind, wall, offset: next, width }) });
        }}
        onDragEnd={() => {
          if (wallDrag?.valid) onMoveWallItem(kind, id, wallDrag.offset); // else snap back
          setWallDrag(null);
          wallStart.current = null;
        }}
        onMouseEnter={(e) => {
          const c = e.target.getStage()?.container();
          if (c) c.style.cursor = wall === "top" || wall === "bottom" ? "ew-resize" : "ns-resize";
        }}
        onMouseLeave={(e) => {
          const c = e.target.getStage()?.container();
          if (c) c.style.cursor = "";
        }}
      />
    );
  };

  const colorFor = (kind: "door" | "screen", id: string, normal: string) => {
    if (wallDrag?.kind === kind && wallDrag.id === id) return wallDrag.valid ? GOOD : BAD;
    return roomSel?.kind === kind && roomSel.id === id ? SEL : normal;
  };

  return (
    <div
      style={{
        width: fw,
        height: fh,
        background: "#fff",
        boxShadow: "0 4px 18px rgba(0,0,0,0.12)",
        touchAction: "none",
      }}
      ref={floorRef}
    >
      <Stage
        width={fw}
        height={fh}
        onMouseDown={(e) => {
          if (e.target !== e.target.getStage()) return;
          if (interactive) onSelect(null);
          else onSelectRoom(null);
        }}
        onTouchStart={(e) => {
          if (e.target !== e.target.getStage()) return;
          if (interactive) onSelect(null);
          else onSelectRoom(null);
        }}
      >
        <Layer x={O} y={O}>
          <Rect width={w} height={h} fill="#fff" listening={false} />

          {/* walls with a gap at every door */}
          {wallSegments(room).map((sg, n) => {
            const a = sg.a * pxPerM;
            const len = (sg.b - sg.a) * pxPerM;
            const r =
              sg.wall === "top"
                ? { x: a, y: -O, width: len, height: O }
                : sg.wall === "bottom"
                  ? { x: a, y: h, width: len, height: O }
                  : sg.wall === "left"
                    ? { x: -O, y: a, width: O, height: len }
                    : { x: w, y: a, width: O, height: len };
            return <Rect key={n} {...r} fill={WALL_COLOR} listening={false} />;
          })}
          {[[-O, -O], [w, -O], [-O, h], [w, h]].map(([x, y]) => (
            <Rect key={`${x},${y}`} x={x} y={y} width={O} height={O} fill={WALL_COLOR} listening={false} />
          ))}

          {/* doors: swing arc inside the room */}
          {room.doors.map((d) => {
            const live = wallDrag?.kind === "door" && wallDrag.id === d.id ? { ...d, offset: wallDrag.offset } : d;
            return <DoorShape key={d.id} room={room} door={live} px={pxPerM} color={colorFor("door", d.id, d.isLoading ? "#c05621" : "#4a5568")} />;
          })}

          {/* wall screens */}
          {room.screens.map((sc) => {
            const live = wallDrag?.kind === "screen" && wallDrag.id === sc.id ? { ...sc, offset: wallDrag.offset } : sc;
            return <ScreenShape key={sc.id} room={room} screen={live} px={pxPerM} outline={colorFor("screen", sc.id, WALL_COLOR)} />;
          })}

          {/* obstacles */}
          {room.obstacles.map((o: Obstacle) => {
            const state = obDrag?.id === o.id ? (obDrag.valid ? GOOD : BAD) : roomSel?.kind === "obstacle" && roomSel.id === o.id ? SEL : "#4a4a4a";
            return (
              <Rect
                key={o.id}
                x={o.x * pxPerM}
                y={o.y * pxPerM}
                width={o.width * pxPerM}
                height={o.height * pxPerM}
                fill="#9aa0a6"
                stroke={state}
                strokeWidth={state === "#4a4a4a" ? 1.5 : 3}
                cornerRadius={2}
                listening={!interactive}
                draggable={!interactive}
                onMouseDown={() => onSelectRoom({ kind: "obstacle", id: o.id })}
                onTouchStart={() => onSelectRoom({ kind: "obstacle", id: o.id })}
                dragBoundFunc={(pos) => ({
                  x: Math.min(Math.max(pos.x, O), O + w - o.width * pxPerM),
                  y: Math.min(Math.max(pos.y, O), O + h - o.height * pxPerM),
                })}
                onDragMove={(e) =>
                  setObDrag({
                    id: o.id,
                    valid: isValidObstacle(room, items, { ...o, x: e.target.x() / pxPerM, y: e.target.y() / pxPerM }),
                  })
                }
                onDragEnd={(e) => {
                  const nx = e.target.x() / pxPerM;
                  const ny = e.target.y() / pxPerM;
                  const ok = isValidObstacle(room, items, { ...o, x: nx, y: ny });
                  e.target.position({ x: (ok ? nx : o.x) * pxPerM, y: (ok ? ny : o.y) * pxPerM });
                  if (ok) onMoveObstacle(o.id, nx, ny);
                  setObDrag(null);
                }}
                onMouseEnter={(e) => {
                  const c = e.target.getStage()?.container();
                  if (c && !interactive) c.style.cursor = "grab";
                }}
                onMouseLeave={(e) => {
                  const c = e.target.getStage()?.container();
                  if (c) c.style.cursor = "";
                }}
              />
            );
          })}

          {items.map((item) => {
            const shape = configs[item.type]?.shape ?? "chair";
            const isResizing = resize?.id === item.id;
            const r: RectM = isResizing ? resize.rect : item;
            const outline: Outline = isResizing
              ? resize.valid ? "valid" : "invalid"
              : drag?.id === item.id
                ? drag.valid ? "valid" : "invalid"
                : selectedId === item.id ? "selected" : "normal";
            const half = boundsOf({ ...r, rotation: item.rotation });
            const wpx = r.width * pxPerM;
            const hpx = r.height * pxPerM;
            return (
              <Group
                key={item.id}
                x={(r.x + r.width / 2) * pxPerM}
                y={(r.y + r.height / 2) * pxPerM}
                offsetX={wpx / 2}
                offsetY={hpx / 2}
                rotation={item.rotation}
                listening={interactive}
                draggable={interactive && !item.locked}
                onMouseDown={() => onSelect(item.id)}
                onTouchStart={() => onSelect(item.id)}
                // Keep the rotated bounds inside the walls (stage is unscaled, so absolute = local).
                dragBoundFunc={(pos) => {
                  const hx = (half.width / 2) * pxPerM;
                  const hy = (half.height / 2) * pxPerM;
                  return {
                    x: Math.min(Math.max(pos.x, O + hx), O + w - hx),
                    y: Math.min(Math.max(pos.y, O + hy), O + h - hy),
                  };
                }}
                onDragStart={(e) => {
                  e.target.moveToTop();
                }}
                onDragMove={(e) => {
                  const c = candidate(item, e.target);
                  setDrag({ id: item.id, valid: isValidPlacement(c, items, room, item.id) });
                }}
                onDragEnd={(e) => {
                  const node = e.target;
                  const c = candidate(item, node);
                  const ok = isValidPlacement(c, items, room, item.id);
                  const final = ok ? c : item; // snap back to last valid position
                  node.position({ x: (final.x + item.width / 2) * pxPerM, y: (final.y + item.height / 2) * pxPerM });
                  if (ok) onMove(item.id, c.x, c.y);
                  setDrag(null);
                }}
                onMouseEnter={(e) => {
                  const c = e.target.getStage()?.container();
                  if (c) c.style.cursor = item.locked ? "not-allowed" : "grab";
                }}
                onMouseLeave={(e) => {
                  const c = e.target.getStage()?.container();
                  if (c) c.style.cursor = "";
                }}
              >
                <FurnitureShape shape={shape} width={r.width} height={r.height} pxPerM={pxPerM} outline={outline} />
                {item.locked && <LockIcon w={wpx} h={hpx} rotation={item.rotation} />}
              </Group>
            );
          })}
          {items.map((item) => {
            // Screens get length handles on their ends while selected, unlocked and unrotated.
            const isScreen = configs[item.type]?.shape === "screen";
            if (!interactive || item.id !== selectedId || !isScreen || item.locked || item.rotation !== 0 || drag?.id === item.id) return null;
            const r: RectM = resize?.id === item.id ? resize.rect : item;
            const mid = {
              left: [r.x, r.y + r.height / 2],
              right: [r.x + r.width, r.y + r.height / 2],
            } as const;
            return ENDS.map((edge) => (
              <Rect
                key={`${item.id}-${edge}`}
                x={mid[edge][0] * pxPerM}
                y={mid[edge][1] * pxPerM}
                offsetX={HANDLE_PX / 2}
                offsetY={HANDLE_PX / 2}
                width={HANDLE_PX}
                height={HANDLE_PX}
                fill="#fff"
                stroke="#1c7ed6"
                strokeWidth={2}
                cornerRadius={2}
                hitStrokeWidth={12}
                draggable
                // The handle is pinned in place; the pointer drives the new size, React moves the handle.
                dragBoundFunc={function (this: Konva.Node) {
                  return this.absolutePosition();
                }}
                onDragStart={(e) => {
                  e.cancelBubble = true;
                  resizeStart.current = { x: item.x, y: item.y, width: item.width, height: item.height };
                }}
                onDragMove={(e) => {
                  const p = e.target.getStage()?.getPointerPosition();
                  const start = resizeStart.current;
                  if (!p || !start) return;
                  const next = resizeLength(start, edge, (p.x - O) / pxPerM, room);
                  setResize({ id: item.id, rect: next, valid: isValidPlacement({ ...item, ...next }, items, room, item.id) });
                }}
                onDragEnd={() => {
                  if (resize?.valid) onResize(item.id, resize.rect); // else snap back to the old size
                  setResize(null);
                  resizeStart.current = null;
                }}
                onMouseEnter={(e) => {
                  const c = e.target.getStage()?.container();
                  if (c) c.style.cursor = "ew-resize";
                }}
                onMouseLeave={(e) => {
                  const c = e.target.getStage()?.container();
                  if (c) c.style.cursor = "";
                }}
              />
            ));
          })}
          {!interactive &&
            room.doors.map((d) => {
              const live = wallDrag?.kind === "door" && wallDrag.id === d.id ? wallDrag.offset : d.offset;
              return wallHit("door", d.id, d.wall, live, d.width, doorSwingRect(room, { ...d, offset: live }));
            })}
          {!interactive &&
            room.screens.map((sc) => {
              const live = wallDrag?.kind === "screen" && wallDrag.id === sc.id ? wallDrag.offset : sc.offset;
              return wallHit("screen", sc.id, sc.wall, live, sc.width, wallRect(room, sc.wall, live, sc.width, SCREEN_DEPTH_M));
            })}
          {preview && (
            <Group x={preview.x * pxPerM} y={preview.y * pxPerM} listening={false}>
              <FurnitureShape
                shape={preview.shape}
                width={preview.width}
                height={preview.height}
                pxPerM={pxPerM}
                outline={preview.valid ? "valid" : "invalid"}
                opacity={0.85}
              />
            </Group>
          )}
        </Layer>
      </Stage>
    </div>
  );
}