import './style.css';
import { Camera } from '@game/camera';
import { GameRenderer, screenToWorld, worldToScreen } from '@game/renderer';
import { buildWorldTerrainContext, townsApiToInfluences } from '@game/procedural';
import type { BuildingData, NPCData, TownData, TownObjectData } from '@game/types';

type AdminTown = {
  id: number;
  name: string;
  nameKey?: string;
  biome: string;
  worldX: number;
  worldY: number;
  radius: number;
  levelMin: number;
  levelMax: number;
};

type AdminNPC = {
  id: number;
  townId: number;
  name: string;
  nameKey?: string;
  type: NPCData['type'];
  offsetX: number;
  offsetY: number;
  buildingId?: number | null;
};

type AdminBuilding = {
  id: number;
  townId: number;
  buildingType: string;
  offsetX: number;
  offsetY: number;
  facing: BuildingData['facing'];
  footprintW: number;
  footprintH: number;
};

type AdminTownObject = {
  id: number;
  townId: number;
  objectType: string;
  variant: number;
  offsetX: number;
  offsetY: number;
};

type TownLayoutResponse = {
  town: AdminTown;
  npcs: AdminNPC[];
  buildings: AdminBuilding[];
  objects: AdminTownObject[];
};

type DraftNPC = AdminNPC;
type DraftBuilding = AdminBuilding;
type DraftObject = AdminTownObject;

type Selection =
  | { type: 'npc'; id: number }
  | { type: 'building'; id: number }
  | { type: 'object'; id: number }
  | { type: 'none' };

type DragState =
  | {
      type: 'npc';
      id: number;
      startOffsetX: number;
      startOffsetY: number;
    }
  | {
      type: 'building';
      id: number;
      startOffsetX: number;
      startOffsetY: number;
      linkedNpcOffsets: Map<number, { offsetX: number; offsetY: number }>;
    }
  | {
      type: 'object';
      id: number;
      startOffsetX: number;
      startOffsetY: number;
    }
  | null;

type PanState = {
  startClientX: number;
  startClientY: number;
  startCameraX: number;
  startCameraY: number;
} | null;

const state = {
  auth: {
    username: sessionStorage.getItem('admin_user') || '',
    password: sessionStorage.getItem('admin_pass') || '',
  },
  towns: [] as AdminTown[],
  selectedTownId: null as number | null,
  townData: null as TownData | null,
  npcData: [] as NPCData[],
  draftTown: null as AdminTown | null,
  draftNPCs: [] as DraftNPC[],
  draftBuildings: [] as DraftBuilding[],
  draftObjects: [] as DraftObject[],
  deletedNPCIds: [] as number[],
  deletedBuildingIds: [] as number[],
  deletedObjectIds: [] as number[],
  dirty: false,
  tempBuildingId: -1,
  tempNpcId: -1,
  tempObjectId: -1,
  selection: { type: 'none' } as Selection,
  drag: null as DragState,
  pan: null as PanState,
  contextWorld: null as { x: number; y: number } | null,
};

const renderer = new GameRenderer();
const camera = new Camera();

const authUserInput = document.getElementById('auth-user') as HTMLInputElement;
const authPassInput = document.getElementById('auth-pass') as HTMLInputElement;
const authSaveBtn = document.getElementById('auth-save') as HTMLButtonElement;
const authStatus = document.getElementById('auth-status') as HTMLDivElement;

const townsReloadBtn = document.getElementById('towns-reload') as HTMLButtonElement;
const townSelect = document.getElementById('town-select') as HTMLSelectElement;
const layoutReloadBtn = document.getElementById('layout-reload') as HTMLButtonElement;
const layoutSaveBtn = document.getElementById('layout-save') as HTMLButtonElement;
const selectionInfo = document.getElementById('selection-info') as HTMLDivElement;
const layoutStatus = document.getElementById('layout-status') as HTMLDivElement;
const canvasRoot = document.getElementById('canvas-root') as HTMLDivElement;
const contextMenu = document.getElementById('context-menu') as HTMLDivElement;

authUserInput.value = state.auth.username;
authPassInput.value = state.auth.password;
selectionInfo.textContent = 'No selection.';

function setStatus(el: HTMLElement, message: string, isError = false): void {
  el.textContent = message;
  el.style.color = isError ? '#ff8f8f' : '';
}

function setDirty(value: boolean): void {
  state.dirty = value;
  layoutSaveBtn.disabled = !value;
}

function setSelection(next: Selection): void {
  state.selection = next;
  if (next.type === 'none') {
    selectionInfo.textContent = 'No selection.';
    return;
  }
  selectionInfo.textContent = `${next.type.toUpperCase()} #${next.id}`;
}

function saveAuth(): void {
  state.auth.username = authUserInput.value.trim();
  state.auth.password = authPassInput.value.trim();
  sessionStorage.setItem('admin_user', state.auth.username);
  sessionStorage.setItem('admin_pass', state.auth.password);
  setStatus(authStatus, 'Credentials saved.');
}

function authHeader(): string {
  return `Basic ${btoa(`${state.auth.username}:${state.auth.password}`)}`;
}

async function api(path: string, opts: RequestInit = {}): Promise<Response> {
  const headers = Object.assign(
    { Authorization: authHeader(), 'Content-Type': 'application/json' },
    opts.headers || {},
  );
  return fetch(`/admin-api/${path}`, { cache: 'no-store', ...opts, headers });
}

function townSize(radius: number): string {
  if (radius > 40) return 'XL';
  if (radius > 25) return 'M';
  if (radius > 15) return 'S';
  return 'XS';
}

function buildTownData(town: AdminTown, npcs: AdminNPC[], buildings: AdminBuilding[]): TownData {
  const npcData: NPCData[] = npcs.map((n) => ({
    id: n.id,
    name: n.nameKey || n.name,
    nameKey: n.nameKey,
    type: n.type,
    worldX: town.worldX + n.offsetX,
    worldY: town.worldY + n.offsetY,
    buildingId: n.buildingId ?? undefined,
    townId: town.id,
    townLevelMin: town.levelMin,
    townLevelMax: town.levelMax,
  }));

  const buildingData: BuildingData[] = buildings.map((b) => ({
    id: b.id,
    buildingType: b.buildingType,
    worldX: town.worldX + b.offsetX,
    worldY: town.worldY + b.offsetY,
    facing: b.facing,
    footprintW: b.footprintW,
    footprintH: b.footprintH,
  }));

  const objectData: TownObjectData[] = state.draftObjects.map((o) => ({
    id: o.id,
    objectType: o.objectType,
    variant: o.variant,
    worldX: town.worldX + o.offsetX,
    worldY: town.worldY + o.offsetY,
  }));

  return {
    id: town.id,
    name: town.nameKey || town.name,
    nameKey: town.nameKey,
    centerX: town.worldX,
    centerY: town.worldY,
    radius: town.radius,
    biome: town.biome,
    levelMin: town.levelMin,
    size: townSize(town.radius),
    npcs: npcData,
    buildings: buildingData,
    objects: objectData,
  };
}

function refreshTownData(): void {
  if (!state.draftTown) return;
  state.townData = buildTownData(state.draftTown, state.draftNPCs, state.draftBuildings);
  state.npcData = state.townData.npcs || [];
}

function applyLayout(data: TownLayoutResponse): void {
  state.draftTown = data.town;
  state.draftNPCs = data.npcs.map((n) => ({ ...n }));
  state.draftBuildings = data.buildings.map((b) => ({ ...b }));
  state.draftObjects = (data.objects || []).map((o) => ({ ...o }));
  state.deletedNPCIds = [];
  state.deletedBuildingIds = [];
  state.deletedObjectIds = [];
  refreshTownData();
  if (state.townData) {
    const center = worldToScreen(state.townData.centerX, state.townData.centerY);
    camera.setTarget(center.x, center.y);
    camera.snapToTarget();
  }
  setSelection({ type: 'none' });
  setDirty(false);
}

async function loadTowns(): Promise<void> {
  if (!state.auth.username || !state.auth.password) {
    setStatus(authStatus, 'Set admin credentials first.', true);
    return;
  }
  setStatus(layoutStatus, 'Loading towns...');
  const res = await api('quests/towns');
  if (!res.ok) {
    setStatus(layoutStatus, `Failed to load towns (${res.status}).`, true);
    return;
  }
  const data = await res.json();
  const towns = (data.towns || []) as AdminTown[];
  state.towns = towns;
  townSelect.innerHTML = '';
  for (const t of towns) {
    const opt = document.createElement('option');
    opt.value = String(t.id);
    opt.textContent = `${t.name} (Lv ${t.levelMin}-${t.levelMax})`;
    townSelect.appendChild(opt);
  }
  if (!state.selectedTownId && towns.length > 0) {
    state.selectedTownId = towns[0].id;
  }
  if (state.selectedTownId) {
    townSelect.value = String(state.selectedTownId);
  }
  const influences = townsApiToInfluences(towns);
  renderer.setWorldTerrainContext(buildWorldTerrainContext(influences, null));
  setStatus(layoutStatus, 'Towns loaded.');
  if (state.selectedTownId) {
    await loadLayout(state.selectedTownId);
  }
}

async function loadLayout(townId: number): Promise<void> {
  setStatus(layoutStatus, 'Loading town layout...');
  const res = await api(`quests/towns/${townId}/layout`);
  if (!res.ok) {
    setStatus(layoutStatus, `Failed to load layout (${res.status}).`, true);
    return;
  }
  const data = (await res.json()) as TownLayoutResponse;
  applyLayout(data);
  setStatus(layoutStatus, 'Layout loaded.');
}

async function saveLayout(): Promise<void> {
  if (!state.draftTown) return;
  setStatus(layoutStatus, 'Saving layout...');
  layoutSaveBtn.disabled = true;
  const payload = {
    npcs: state.draftNPCs.map((n) => ({
      ...(n.id > 0 ? { id: n.id } : {}),
      name: n.name,
      nameKey: n.nameKey || '',
      type: n.type,
      offsetX: n.offsetX,
      offsetY: n.offsetY,
      ...(n.buildingId ? { buildingId: n.buildingId } : {}),
    })),
    buildings: state.draftBuildings.map((b) => ({
      ...(b.id > 0 ? { id: b.id } : {}),
      buildingType: b.buildingType,
      offsetX: b.offsetX,
      offsetY: b.offsetY,
      facing: b.facing,
      footprintW: b.footprintW,
      footprintH: b.footprintH,
    })),
    objects: state.draftObjects.map((o) => ({
      ...(o.id > 0 ? { id: o.id } : {}),
      objectType: o.objectType,
      variant: o.variant,
      offsetX: o.offsetX,
      offsetY: o.offsetY,
    })),
    deleteNpcIds: state.deletedNPCIds,
    deleteBuildingIds: state.deletedBuildingIds,
    deleteObjectIds: state.deletedObjectIds,
  };
  const res = await api(`quests/towns/${state.draftTown.id}/layout`, {
    method: 'PUT',
    body: JSON.stringify(payload),
  });
  if (!res.ok) {
    setStatus(layoutStatus, `Failed to save layout (${res.status}).`, true);
    layoutSaveBtn.disabled = false;
    return;
  }
  const data = (await res.json()) as TownLayoutResponse;
  applyLayout(data);
  setStatus(layoutStatus, 'Layout saved.');
}

const buildingMenuItems = [
  { label: 'House: Quest Giver', type: 'house.quest_giver', w: 2.5, h: 2.0 },
  { label: 'House: Merchant', type: 'house.merchant', w: 2.5, h: 2.0 },
  { label: 'House: Armorer', type: 'house.armorer', w: 2.5, h: 2.0 },
  { label: 'House: Weapon Smith', type: 'house.weapon_smith', w: 2.5, h: 2.0 },
  { label: 'House: Jeweler', type: 'house.jeweler', w: 2.5, h: 2.0 },
  { label: 'House: Bounty Hunter', type: 'house.bounty_hunter', w: 2.5, h: 2.0 },
  { label: 'House: Elder', type: 'house.elder', w: 2.5, h: 2.0 },
  { label: 'House: Healer', type: 'house.healer', w: 2.5, h: 2.0 },
  { label: 'Decoration: Well', type: 'decoration.well', w: 1.5, h: 1.5 },
  { label: 'Decoration: Stall', type: 'decoration.stall', w: 1.5, h: 1.5 },
  { label: 'Decoration: Signpost', type: 'decoration.signpost', w: 0.5, h: 0.5 },
];

const npcTypeItems = [
  { label: 'Quest Giver', type: 'quest_giver' as NPCData['type'] },
  { label: 'Merchant', type: 'merchant' as NPCData['type'] },
  { label: 'Armorer', type: 'armorer' as NPCData['type'] },
  { label: 'Weapon', type: 'weapon' as NPCData['type'] },
  { label: 'Jeweler', type: 'jeweler' as NPCData['type'] },
  { label: 'Bounty Hunter', type: 'bounty_hunter' as NPCData['type'] },
  { label: 'Elder', type: 'elder' as NPCData['type'] },
  { label: 'Healer', type: 'healer' as NPCData['type'] },
];

const objectTypeItems = [
  { label: 'Tree', type: 'tree' },
  { label: 'Rock', type: 'rock' },
  { label: 'Cart', type: 'cart' },
  { label: 'Barrel', type: 'barrel' },
  { label: 'Bush', type: 'bush' },
  { label: 'Mushroom', type: 'mushroom' },
  { label: 'Leaves', type: 'leaves' },
  { label: 'Stump', type: 'stump' },
  { label: 'Bones', type: 'bones' },
  { label: 'Ruin', type: 'ruin' },
];

function hideContextMenu(): void {
  contextMenu.classList.add('hidden');
}

function addContextHeader(label: string): void {
  const header = document.createElement('div');
  header.textContent = label;
  header.style.padding = '6px 12px 4px 12px';
  header.style.fontSize = '11px';
  header.style.color = '#9eb0d6';
  contextMenu.appendChild(header);
}

function addContextButton(label: string, onClick: () => void): void {
  const btn = document.createElement('button');
  btn.textContent = label;
  btn.addEventListener('click', onClick);
  contextMenu.appendChild(btn);
}

function addContextSubmenu(label: string, build: (submenu: HTMLDivElement) => void): void {
  const wrapper = document.createElement('div');
  wrapper.className = 'context-menu-item';
  const button = document.createElement('button');
  button.textContent = `${label} ▶`;
  const submenu = document.createElement('div');
  submenu.className = 'submenu';
  build(submenu);
  wrapper.appendChild(button);
  wrapper.appendChild(submenu);
  contextMenu.appendChild(wrapper);
}

function showContextMenu(clientX: number, clientY: number, render: () => void): void {
  contextMenu.innerHTML = '';
  render();
  const area = canvasRoot.parentElement?.getBoundingClientRect();
  if (!area) return;
  contextMenu.style.left = `${clientX - area.left}px`;
  contextMenu.style.top = `${clientY - area.top}px`;
  contextMenu.classList.remove('hidden');
}

function removeNpcById(id: number): void {
  state.draftNPCs = state.draftNPCs.filter((n) => n.id !== id);
  if (id > 0) state.deletedNPCIds.push(id);
  setSelection({ type: 'none' });
  refreshTownData();
  setDirty(true);
}

function removeBuildingById(id: number): void {
  state.draftBuildings = state.draftBuildings.filter((b) => b.id !== id);
  if (id > 0) state.deletedBuildingIds.push(id);
  setSelection({ type: 'none' });
  refreshTownData();
  setDirty(true);
}

function removeObjectById(id: number): void {
  state.draftObjects = state.draftObjects.filter((o) => o.id !== id);
  if (id > 0) state.deletedObjectIds.push(id);
  setSelection({ type: 'none' });
  refreshTownData();
  setDirty(true);
}

function showContextMenuForSelection(clientX: number, clientY: number, selection: Selection): void {
  showContextMenu(clientX, clientY, () => {
    if (!state.draftTown) return;
    if (selection.type === 'npc') {
      addContextHeader('NPC');
      addContextSubmenu('Change type', (submenu) => {
        for (const item of npcTypeItems) {
          const btn = document.createElement('button');
          btn.textContent = item.label;
          btn.addEventListener('click', () => {
            const npc = state.draftNPCs.find((n) => n.id === selection.id);
            if (!npc) return;
            npc.type = item.type;
            if (!npc.name) npc.name = `New ${item.label}`;
            setDirty(true);
            refreshTownData();
            hideContextMenu();
          });
          submenu.appendChild(btn);
        }
      });
      addContextHeader('Actions');
      addContextButton('Delete NPC', () => {
        removeNpcById(selection.id);
        hideContextMenu();
      });
      return;
    }
    if (selection.type === 'building') {
      addContextHeader('Building');
      addContextSubmenu('Change type', (submenu) => {
        for (const item of buildingMenuItems) {
          const btn = document.createElement('button');
          btn.textContent = item.label;
          btn.addEventListener('click', () => {
            const building = state.draftBuildings.find((b) => b.id === selection.id);
            if (!building) return;
            building.buildingType = item.type;
            building.footprintW = item.w;
            building.footprintH = item.h;
            setDirty(true);
            refreshTownData();
            hideContextMenu();
          });
          submenu.appendChild(btn);
        }
      });
      addContextHeader('Actions');
      addContextButton('Delete building', () => {
        removeBuildingById(selection.id);
        hideContextMenu();
      });
      return;
    }
    if (selection.type === 'object') {
      addContextHeader('Object');
      addContextSubmenu('Change type', (submenu) => {
        for (const item of objectTypeItems) {
          const btn = document.createElement('button');
          btn.textContent = item.label;
          btn.addEventListener('click', () => {
            const obj = state.draftObjects.find((o) => o.id === selection.id);
            if (!obj) return;
            obj.objectType = item.type;
            setDirty(true);
            refreshTownData();
            hideContextMenu();
          });
          submenu.appendChild(btn);
        }
      });
      addContextSubmenu('Variant', (submenu) => {
        const btn0 = document.createElement('button');
        btn0.textContent = 'Variant v0';
        btn0.addEventListener('click', () => {
          const obj = state.draftObjects.find((o) => o.id === selection.id);
          if (!obj) return;
          obj.variant = 0;
          setDirty(true);
          refreshTownData();
          hideContextMenu();
        });
        const btn1 = document.createElement('button');
        btn1.textContent = 'Variant v1';
        btn1.addEventListener('click', () => {
          const obj = state.draftObjects.find((o) => o.id === selection.id);
          if (!obj) return;
          obj.variant = 1;
          setDirty(true);
          refreshTownData();
          hideContextMenu();
        });
        submenu.appendChild(btn0);
        submenu.appendChild(btn1);
      });
      addContextHeader('Actions');
      addContextButton('Delete object', () => {
        removeObjectById(selection.id);
        hideContextMenu();
      });
      return;
    }
  });
}

function showContextMenuForEmpty(clientX: number, clientY: number): void {
  showContextMenu(clientX, clientY, () => {
    if (!state.draftTown || !state.contextWorld) return;
    const world = state.contextWorld;
    addContextSubmenu('Add NPC', (submenu) => {
      for (const item of npcTypeItems) {
        const btn = document.createElement('button');
        btn.textContent = item.label;
        btn.addEventListener('click', () => {
          const offsetX = world.x - state.draftTown!.worldX;
          const offsetY = world.y - state.draftTown!.worldY;
          const newId = state.tempNpcId--;
          state.draftNPCs.push({
            id: newId,
            townId: state.draftTown!.id,
            name: `New ${item.label}`,
            nameKey: '',
            type: item.type,
            offsetX,
            offsetY,
            buildingId: null,
          });
          refreshTownData();
          setSelection({ type: 'npc', id: newId });
          setDirty(true);
          hideContextMenu();
        });
        submenu.appendChild(btn);
      }
    });
    addContextSubmenu('Add Building', (submenu) => {
      for (const item of buildingMenuItems) {
        const btn = document.createElement('button');
        btn.textContent = item.label;
        btn.addEventListener('click', () => {
          const offsetX = world.x - state.draftTown!.worldX;
          const offsetY = world.y - state.draftTown!.worldY;
          const newId = state.tempBuildingId--;
          state.draftBuildings.push({
            id: newId,
            townId: state.draftTown!.id,
            buildingType: item.type,
            offsetX,
            offsetY,
            facing: 'south',
            footprintW: item.w,
            footprintH: item.h,
          });
          refreshTownData();
          setSelection({ type: 'building', id: newId });
          setDirty(true);
          hideContextMenu();
        });
        submenu.appendChild(btn);
      }
    });
    addContextSubmenu('Add Object', (submenu) => {
      for (const item of objectTypeItems) {
        const btn = document.createElement('button');
        btn.textContent = item.label;
        btn.addEventListener('click', () => {
          const offsetX = world.x - state.draftTown!.worldX;
          const offsetY = world.y - state.draftTown!.worldY;
          const newId = state.tempObjectId--;
          state.draftObjects.push({
            id: newId,
            townId: state.draftTown!.id,
            objectType: item.type,
            variant: 0,
            offsetX,
            offsetY,
          });
          refreshTownData();
          setSelection({ type: 'object', id: newId });
          setDirty(true);
          hideContextMenu();
        });
        submenu.appendChild(btn);
      }
    });
  });
}
function eventToWorld(evt: MouseEvent): { x: number; y: number } | null {
  if (!renderer.initialized) return null;
  const canvas = renderer.app.canvas as HTMLCanvasElement;
  const rect = canvas.getBoundingClientRect();
  if (evt.clientX < rect.left || evt.clientX > rect.right || evt.clientY < rect.top || evt.clientY > rect.bottom) {
    return null;
  }
  const localX = evt.clientX - rect.left;
  const localY = evt.clientY - rect.top;
  const screenW = renderer.app.renderer.width;
  const screenH = renderer.app.renderer.height;
  const worldScreenX = localX - screenW / 2 + camera.finalX;
  const worldScreenY = localY - screenH / 2 + camera.finalY;
  return screenToWorld(worldScreenX, worldScreenY);
}

function findHit(world: { x: number; y: number }): Selection {
  if (!state.draftTown) return { type: 'none' };
  const npcHitRadius = 1.8;
  const objectHitRadius = 1.8;
  const buildingPadding = 1.0;
  for (const npc of state.draftNPCs) {
    const nx = state.draftTown.worldX + npc.offsetX;
    const ny = state.draftTown.worldY + npc.offsetY;
    const dx = world.x - nx;
    const dy = world.y - ny;
    if (Math.hypot(dx, dy) <= npcHitRadius) {
      return { type: 'npc', id: npc.id };
    }
  }
  for (const obj of state.draftObjects) {
    const ox = state.draftTown.worldX + obj.offsetX;
    const oy = state.draftTown.worldY + obj.offsetY;
    if (Math.hypot(world.x - ox, world.y - oy) <= objectHitRadius) {
      return { type: 'object', id: obj.id };
    }
  }
  for (const building of state.draftBuildings) {
    const bx = state.draftTown.worldX + building.offsetX;
    const by = state.draftTown.worldY + building.offsetY;
    const dx = Math.abs(world.x - bx);
    const dy = Math.abs(world.y - by);
    if (dx <= building.footprintW / 2 + buildingPadding && dy <= building.footprintH / 2 + buildingPadding) {
      return { type: 'building', id: building.id };
    }
  }
  return { type: 'none' };
}

function startDrag(selection: Selection): void {
  if (selection.type === 'npc') {
    const npc = state.draftNPCs.find((n) => n.id === selection.id);
    if (!npc) return;
    state.drag = {
      type: 'npc',
      id: npc.id,
      startOffsetX: npc.offsetX,
      startOffsetY: npc.offsetY,
    };
    return;
  }
  if (selection.type === 'building') {
    const building = state.draftBuildings.find((b) => b.id === selection.id);
    if (!building) return;
    const linked = new Map<number, { offsetX: number; offsetY: number }>();
    for (const npc of state.draftNPCs) {
      if (npc.buildingId === building.id) {
        linked.set(npc.id, { offsetX: npc.offsetX, offsetY: npc.offsetY });
      }
    }
    state.drag = {
      type: 'building',
      id: building.id,
      startOffsetX: building.offsetX,
      startOffsetY: building.offsetY,
      linkedNpcOffsets: linked,
    };
    return;
  }
  if (selection.type === 'object') {
    const obj = state.draftObjects.find((o) => o.id === selection.id);
    if (!obj) return;
    state.drag = {
      type: 'object',
      id: obj.id,
      startOffsetX: obj.offsetX,
      startOffsetY: obj.offsetY,
    };
  }
}

function updateDrag(world: { x: number; y: number }): void {
  if (!state.draftTown || !state.drag) return;
  const offsetX = world.x - state.draftTown.worldX;
  const offsetY = world.y - state.draftTown.worldY;
  if (state.drag.type === 'npc') {
    const npc = state.draftNPCs.find((n) => n.id === state.drag?.id);
    if (!npc) return;
    npc.offsetX = offsetX;
    npc.offsetY = offsetY;
  }
  if (state.drag.type === 'building') {
    const building = state.draftBuildings.find((b) => b.id === state.drag?.id);
    if (!building) return;
    const deltaX = offsetX - state.drag.startOffsetX;
    const deltaY = offsetY - state.drag.startOffsetY;
    building.offsetX = offsetX;
    building.offsetY = offsetY;
    for (const npc of state.draftNPCs) {
      const start = state.drag.linkedNpcOffsets.get(npc.id);
      if (!start) continue;
      npc.offsetX = start.offsetX + deltaX;
      npc.offsetY = start.offsetY + deltaY;
    }
  }
  if (state.drag.type === 'object') {
    const obj = state.draftObjects.find((o) => o.id === state.drag?.id);
    if (!obj) return;
    obj.offsetX = offsetX;
    obj.offsetY = offsetY;
  }
  refreshTownData();
  setDirty(true);
}

function startPan(evt: MouseEvent): void {
  state.pan = {
    startClientX: evt.clientX,
    startClientY: evt.clientY,
    startCameraX: camera.x,
    startCameraY: camera.y,
  };
}

function updatePan(evt: MouseEvent): void {
  if (!state.pan) return;
  const dx = evt.clientX - state.pan.startClientX;
  const dy = evt.clientY - state.pan.startClientY;
  const nextX = state.pan.startCameraX - dx;
  const nextY = state.pan.startCameraY - dy;
  camera.setTarget(nextX, nextY);
  camera.snapToTarget();
}

function renderLoop(): void {
  requestAnimationFrame(renderLoop);
  if (!renderer.initialized) return;
  if (!state.townData) return;

  const screenW = renderer.app.renderer.width;
  const screenH = renderer.app.renderer.height;
  camera.applyTo(renderer.worldContainer, screenW, screenH);
  renderer.drawGround(camera, screenW, screenH);
  renderer.drawTowns([state.townData], camera, screenW, screenH);
  renderer.drawTownObjects(state.townData.objects ?? [], camera, screenW, screenH);
  if (state.npcData.length > 0) {
    renderer.drawNPCs(state.npcData, camera, screenW, screenH, performance.now());
  }
}

async function bootstrap(): Promise<void> {
  await renderer.init(canvasRoot);
  window.addEventListener('resize', () => renderer.resize());
  renderLoop();
  const canvas = renderer.app.canvas as HTMLCanvasElement;
  canvas.addEventListener('contextmenu', (evt) => {
    evt.preventDefault();
    const world = eventToWorld(evt);
    if (!world) return;
    state.contextWorld = world;
    const hit = findHit(world);
    if (hit.type === 'none') {
      showContextMenuForEmpty(evt.clientX, evt.clientY);
      return;
    }
    setSelection(hit);
    showContextMenuForSelection(evt.clientX, evt.clientY, hit);
  });
  canvas.addEventListener('mousedown', (evt) => {
    hideContextMenu();
    const world = eventToWorld(evt);
    if (!world) return;
    if (evt.button === 1) {
      startPan(evt);
      return;
    }
    if (evt.button !== 0) return;
    const hit = findHit(world);
    if (hit.type === 'none') {
      setSelection(hit);
      startPan(evt);
      return;
    }
    setSelection(hit);
    startDrag(hit);
  });
  window.addEventListener('mousemove', (evt) => {
    if (state.drag) {
      const world = eventToWorld(evt);
      if (!world) return;
      updateDrag(world);
      return;
    }
    if (state.pan) {
      updatePan(evt);
    }
  });
  window.addEventListener('mouseup', () => {
    state.drag = null;
    state.pan = null;
  });
  window.addEventListener('click', () => hideContextMenu());
  if (state.auth.username && state.auth.password) {
    void loadTowns();
  }
}

authSaveBtn.addEventListener('click', saveAuth);
townsReloadBtn.addEventListener('click', () => void loadTowns());
layoutReloadBtn.addEventListener('click', () => {
  if (!state.selectedTownId) return;
  void loadLayout(state.selectedTownId);
});
layoutSaveBtn.addEventListener('click', () => void saveLayout());
townSelect.addEventListener('change', () => {
  const id = Number(townSelect.value);
  if (!id) return;
  state.selectedTownId = id;
  void loadLayout(id);
});

void bootstrap();