export function setupInventory(root) {
  root.innerHTML = `
    <div class="panel hidden">
      <h3>Inventory</h3>
      <div id="inv-grid"></div>
      <div style="margin-top:6px;text-align:right;">
        <button id="inv-close">Close</button>
      </div>
    </div>
  `;
  const panel = root.firstElementChild;
  const grid = panel.querySelector('#inv-grid');

  function render() {
    const items = window.GameState?.inventory || [];
    grid.innerHTML = '';
    for (const it of items) {
      const d = document.createElement('div');
      d.className = 'slot';
      d.textContent = `${it.item_key} x${it.qty}`;
      grid.appendChild(d);
    }
  }

  panel.querySelector('#inv-close').onclick = () => toggle(false);

  function toggle(force) {
    if (typeof force === 'boolean') {
      panel.classList.toggle('hidden', !force);
    } else {
      panel.classList.toggle('hidden');
    }
    if (!panel.classList.contains('hidden')) render();
  }

  window.InventoryUI = { toggle, render };
}