import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
import { clampToRoom, fitScale, isValidPlacement, tryUpdate } from "./geometry";
import { initialState, reducer } from "./store";
import type { FurnitureItem, FurnitureType, Rect } from "./types";
import { placedCount, remaining } from "./inventory";
import { Palette } from "./components/Palette";
import { Room, type Preview } from "./components/Room";
import { ScaleBar } from "./components/ScaleBar";
import { TypeMenu } from "./components/TypeMenu";
import { ItemPanel } from "./components/ItemPanel";
import { CustomForm, type CustomDraft } from "./components/CustomForm";
import { ShapeIcon } from "./components/Icons";

const WALL_PX = 6; // room wall border, must match Room.tsx
const SCALE_BAR_PX = 40;

interface PaletteDrag {
  type: FurnitureType;
  clientX: number;
  clientY: number;
}

// What the sidebar shows besides the tiles. An item panel appears whenever an item is selected.
type Sidebar = { kind: "tiles" } | { kind: "type"; id: FurnitureType } | { kind: "custom" };

export default function App() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const [paletteDrag, setPaletteDrag] = useState<PaletteDrag | null>(null);
  const [sidebar, setSidebar] = useState<Sidebar>({ kind: "tiles" });
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const floorRef = useRef<HTMLDivElement>(null);
  const mainRef = useRef<HTMLElement>(null);
  const [pxPerM, setPxPerM] = useState(60);
  const nextItemId = useRef(1);
  const nextCustomId = useRef(1);

  const selectedItem = state.items.find((i) => i.id === selectedId) ?? null;

  // Selecting an item, opening a menu and dragging from the palette each replace the others.
  const select = useCallback((id: string | null) => {
    setSelectedId(id);
    if (id) setSidebar({ kind: "tiles" });
  }, []);
  const openSidebar = (s: Sidebar) => {
    setSelectedId(null);
    setSidebar(s);
  };
  const closeSidebar = useCallback(() => setSidebar({ kind: "tiles" }), []);
  const deselect = useCallback(() => setSelectedId(null), []);

  const deleteSelected = useCallback(() => {
    if (!selectedId) return;
    dispatch({ kind: "remove", id: selectedId });
    setSelectedId(null);
  }, [selectedId]);

  // Delete / Backspace (Mac "delete") removes the selected item, unless the user is typing.
  useEffect(() => {
    const key = (e: KeyboardEvent) => {
      if (e.key !== "Delete" && e.key !== "Backspace") return;
      const t = e.target as HTMLElement | null;
      if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) return;
      if (!selectedId) return;
      e.preventDefault();
      deleteSelected();
    };
    window.addEventListener("keydown", key);
    return () => window.removeEventListener("keydown", key);
  }, [selectedId, deleteSelected]);

  // Maximise the room inside the center area (minus wall border and the scale bar).
  useEffect(() => {
    const el = mainRef.current;
    if (!el) return;
    const ro = new ResizeObserver(([entry]) => {
      const { width, height } = entry.contentRect;
      setPxPerM(fitScale(state.room, width - WALL_PX * 2, height - WALL_PX * 2 - SCALE_BAR_PX));
    });
    ro.observe(el);
    return () => ro.disconnect();
  }, [state.room]);

  // Cursor position -> a new item's box (centered on cursor, clamped), or null if outside the floor.
  const toRoomRect = (d: PaletteDrag): Rect | null => {
    const box = floorRef.current?.getBoundingClientRect();
    if (!box) return null;
    // Floor excludes the CSS border: the Stage sits inside it.
    const border = (box.width - state.room.width * pxPerM) / 2;
    const px = d.clientX - box.left - border;
    const py = d.clientY - box.top - border;
    if (px < 0 || py < 0 || px > state.room.width * pxPerM || py > state.room.height * pxPerM) return null;
    const { defaultWidth: width, defaultHeight: height } = state.configs[d.type];
    return clampToRoom({ x: px / pxPerM - width / 2, y: py / pxPerM - height / 2, width, height }, state.room);
  };

  useEffect(() => {
    if (!paletteDrag) return;
    const type = paletteDrag.type;
    const move = (e: globalThis.PointerEvent) =>
      setPaletteDrag({ type, clientX: e.clientX, clientY: e.clientY });
    const up = (e: globalThis.PointerEvent) => {
      const r = toRoomRect({ type, clientX: e.clientX, clientY: e.clientY });
      if (
        r &&
        remaining(state.items, type, state.configs[type].available) > 0 &&
        isValidPlacement(r, state.items, state.room)
      ) {
        dispatch({ kind: "add", id: `item-${nextItemId.current++}`, type, x: r.x, y: r.y });
      } // outside the room or invalid: cancel
      setPaletteDrag(null);
    };
    const cancel = () => setPaletteDrag(null);
    window.addEventListener("pointermove", move);
    window.addEventListener("pointerup", up);
    window.addEventListener("pointercancel", cancel);
    return () => {
      window.removeEventListener("pointermove", move);
      window.removeEventListener("pointerup", up);
      window.removeEventListener("pointercancel", cancel);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [paletteDrag?.type, state.items, state.room, state.configs, pxPerM]);

  const preview: Preview | null = useMemo(() => {
    if (!paletteDrag) return null;
    const r = toRoomRect(paletteDrag);
    if (!r) return null;
    return {
      shape: state.configs[paletteDrag.type].shape,
      ...r,
      valid: isValidPlacement(r, state.items, state.room),
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [paletteDrag, state.items, state.room, pxPerM]);

  const startDrag = (type: FurnitureType, clientX: number, clientY: number) => {
    setSidebar({ kind: "tiles" });
    setPaletteDrag({ type, clientX, clientY });
  };

  /** Rotate / resize / lock / seats on one item. Geometry changes are checked; returns false if rejected. */
  const patchItem = (item: FurnitureItem, patch: Partial<FurnitureItem>): boolean => {
    const geometric = "rotation" in patch || "width" in patch || "height" in patch;
    if (!geometric) {
      dispatch({ kind: "update", id: item.id, patch });
      return true;
    }
    const next = tryUpdate(item, patch, state.items, state.room);
    if (!next) return false;
    dispatch({ kind: "update", id: item.id, patch: { ...patch, x: next.x, y: next.y } });
    return true;
  };

  const saveCustom = (d: CustomDraft) => {
    const id = `custom-${nextCustomId.current++}`;
    dispatch({
      kind: "addConfig",
      config: {
        id,
        name: d.name,
        shape: d.isTable ? "table" : "chair",
        defaultWidth: d.width,
        defaultHeight: d.height,
        isTable: d.isTable,
        available: d.available,
        seatsPerUnit: d.seats,
      },
    });
    setSidebar({ kind: "tiles" });
  };

  const remainingByType = Object.fromEntries(
    state.typeOrder.map((t) => [t, remaining(state.items, t, state.configs[t].available)]),
  );

  let panel = null;
  if (selectedItem) {
    panel = (
      <ItemPanel
        key={selectedItem.id}
        item={selectedItem}
        config={state.configs[selectedItem.type]}
        onPatch={(p) => patchItem(selectedItem, p)}
        onDelete={deleteSelected}
        onClose={deselect}
      />
    );
  } else if (sidebar.kind === "type") {
    const id = sidebar.id;
    panel = (
      <TypeMenu
        config={state.configs[id]}
        placed={placedCount(state.items, id)}
        onSetAvailable={(value) => dispatch({ kind: "setAvailable", type: id, value })}
        onSetSeats={(value) => dispatch({ kind: "setSeats", type: id, value })}
        onClose={closeSidebar}
      />
    );
  } else if (sidebar.kind === "custom") {
    panel = <CustomForm onSave={saveCustom} onCancel={closeSidebar} />;
  }

  return (
    <div style={{ display: "flex", height: "100vh", background: "#e9e9e9", cursor: paletteDrag ? "grabbing" : undefined }}>
      <Palette
        types={state.typeOrder.map((t) => state.configs[t])}
        remaining={remainingByType}
        onStartDrag={startDrag}
        onOpenMenu={(id) => openSidebar({ kind: "type", id })}
        onNewCustom={() => openSidebar({ kind: "custom" })}
        panel={panel}
      />
      <main
        ref={mainRef}
        style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", overflow: "hidden", padding: 24 }}
      >
        <Room
          pxPerM={pxPerM}
          room={state.room}
          items={state.items}
          configs={state.configs}
          preview={preview}
          floorRef={floorRef}
          selectedId={selectedId}
          onSelect={select}
          onMove={(id, x, y) => dispatch({ kind: "move", id, x, y })}
          onResize={(id, r) => dispatch({ kind: "update", id, patch: { ...r } })}
        />
        <ScaleBar pxPerM={pxPerM} roomWidthPx={state.room.width * pxPerM + WALL_PX * 2} />
      </main>
      {paletteDrag && !preview && (
        <div
          style={{
            position: "fixed",
            left: paletteDrag.clientX,
            top: paletteDrag.clientY,
            transform: "translate(-50%, -50%)",
            pointerEvents: "none",
            opacity: 0.8,
          }}
        >
          <ShapeIcon shape={state.configs[paletteDrag.type].shape} />
        </div>
      )}
    </div>
  );
}