import { Hud } from "./Hud";
import { useGameStore } from "../game/store";
import type { CompanionCommand } from "../platform/dualScreenSync";

export function DungeonCompanionHud({ send, remote = false, completion, interaction }: {
  send: (command: CompanionCommand) => void;
  remote?: boolean;
  completion?: boolean;
  interaction?: { prompt: string; name: string; label: string } | null;
}) {
  const bossTest = useGameStore((state) => state.bossTest);
  return <main className="game-shell companion-hud-shell" aria-label="Dungeon bottom screen">
    <Hud surface="bottom" completion={completion} interaction={interaction}
      onFinish={remote ? () => send({ name: "finishDungeon" }) : undefined}
      onInteract={remote ? () => send({ name: "interactDungeonObject" }) : undefined}
      onResurrect={remote ? (checkpointId) => send({ name: "resurrectParty", checkpointId }) : undefined}
      onLayoutChange={remote ? (id, update) => send({ name: "editHudElement", id, update }) : undefined} />
    <nav className="companion-hud-menus" aria-label="Dungeon menus">
      <button type="button" onClick={() => send({ name: "openOverlay", overlay: "map" })}>Map</button>
      <button type="button" onClick={() => send({ name: "openOverlay", overlay: "spellbook" })}>Spells</button>
      <button type="button" onClick={() => send({ name: "openOverlay", overlay: "inventory" })}>Gear</button>
      <button type="button" onClick={() => send({ name: "openOverlay", overlay: "ui-layout" })}>Edit UI</button>
      <button type="button" onClick={() => send({ name: "togglePause" })}>Pause</button>
      {bossTest && <button type="button" onClick={() => send({ name: "openOverlay", overlay: "boss-test-review" })}>Boss review</button>}
    </nav>
  </main>;
}