export function setupHUD(root) {
  root.innerHTML = `
    <div class="panel hidden">
      <div style="display:flex;align-items:center;gap:12px;">
        <div id="xpbar">
          <div id="xpfill"></div>
          <div id="xplabel">Lvl 1 — 0 XP</div>
        </div>
        <label style="font-size:12px;">
          Zoom
          <input id="hud-zoom" type="range" min="0.6" max="2.0" step="0.05" value="1.2" />
        </label>
      </div>
      <div style="display:flex;gap:8px;">
        <button id="hud-inv">Inventory</button>
        <button id="hud-craft">Crafting</button>
        <button id="hud-logout">Logout</button>
      </div>
    </div>
  `;
  const panel = root.firstElementChild;
  const zoom = panel.querySelector('#hud-zoom');

  zoom.addEventListener('input', () => {
    const z = parseFloat(zoom.value);
    window.setGameZoom?.(z);
  });

  panel.querySelector('#hud-inv').onclick = () => {
    window.InventoryUI?.toggle();
  };
  panel.querySelector('#hud-craft').onclick = () => {
    window.CraftingUI?.toggle();
  };
  panel.querySelector('#hud-logout').onclick = async () => {
    await fetch('/api/logout', { method: 'POST' });
    location.reload();
  };

  // functions for other modules to update XP
  window.updateXP = level => {
    const label = panel.querySelector('#xplabel');
    label.textContent = `Lvl ${level}`;
    const fill = panel.querySelector('#xpfill');
    const pct = Math.min(100, level); // dumb visual
    fill.style.width = `${pct}%`;
  };
}