import { useInputBindingLabels } from "../input/useInputBindingLabels";
import { useGameStore } from "../game/store";
import { useMenuController } from "../input/useMenuController";
import { DungeonMapGraphic } from "./DungeonMapGraphic";
import { requireDungeonDefinition } from "../game/dungeonRegistry";
import { resolveStagePresentation } from "../game/manastormStagePresentation";
import { useManastormStore } from "../game/manastormStore";

function MapDialog() {
  const bindingLabel = useInputBindingLabels();
  const close = useGameStore((state) => state.closeMap);
  const openOverlay = useGameStore((state) => state.openOverlay);
  const position = useGameStore((state) => state.playerPosition);
  const yaw = useGameStore((state) => state.cameraYaw);
  const area = useGameStore((state) => state.areaName);
  const gameMode = useGameStore((state) => state.gameMode);
  const encounter = useManastormStore((state) => state.currentEncounter);
  const activeDungeonId = useGameStore((state) => state.activeDungeonId);
  const dungeon = requireDungeonDefinition(activeDungeonId);
  const stagePresentation = resolveStagePresentation(gameMode, encounter, {
    title: dungeon.title,
    mapId: dungeon.mapId,
    areaName: area,
  });
  useMenuController([], { onBack: () => openOverlay("pause") });

  return (
    <aside className="map-panel" role="dialog" aria-modal="true" aria-labelledby="map-title">
      <header>
        <div>
          <p className="eyebrow">Expedition survey</p>
          <h2 id="map-title">{stagePresentation.title}</h2>
        </div>
        <button type="button" className="icon-button" onClick={close} aria-label="Close map">X</button>
      </header>

      <div className="map-panel__canvas">
        <DungeonMapGraphic position={position} yaw={yaw} />
      </div>

      <div className="map-panel__readout">
        <div><span>Current area</span><strong>{stagePresentation.areaName}</strong></div>
        <div><span>Position</span><strong>{position.map((value) => Math.round(value)).join(" / ")}</strong></div>
      </div>
      <p className="map-panel__note">
        {stagePresentation.usingFallbackEnvironment
          ? "Stage location is authoritative; the survey artwork is temporary fallback geometry. "
          : "Gold markers show encounters. Dashed lines show database patrol routes. "}
        Press {bindingLabel("pc", "map")} to close or {bindingLabel("controller", "menu-back")} to return to Pause.
      </p>
    </aside>
  );
}

export function MapPanel() {
  const open = useGameStore((state) => state.overlay === "map");
  return open ? <MapDialog /> : null;
}