export async function loadWohnhaus() {
  const ui = document.querySelector(".building-ui");

  ui.innerHTML = `

<div id="character-ui">

<div class="equip-left">
<div class="equip-slot" data-slot="helmet"></div>
<div class="equip-slot" data-slot="shoulder"></div>
<div class="equip-slot" data-slot="gloves"></div>
<div class="equip-slot" data-slot="belt"></div>
<div class="equip-slot" data-slot="boots"></div>
</div>

<div class="character">
<img src="/images/avatar.png">
</div>

<div class="equip-right">
<div class="equip-slot" data-slot="amulet"></div>
<div class="equip-slot" data-slot="weapon"></div>
<div class="equip-slot" data-slot="shield"></div>
<div class="equip-slot" data-slot="ring"></div>
</div>

</div>

<h3>Inventar</h3>

<div id="inventory-grid"></div>

`;

  loadInventory();
}

async function loadInventory() {
  const res = await fetch("/api/inventory");
  const items = await res.json();

  const grid = document.getElementById("inventory-grid");

  let html = "";

  items.forEach((item) => {
    const icon = item.icon || "/images/items/default.png";

    html += `
<div class="inventory-slot"
data-slot="${item.equip_slot || ""}">
<img src="${icon}">
</div>
`;
  });

  grid.innerHTML = html;

  initEquip();
}

function initEquip() {
  document.querySelectorAll(".inventory-slot").forEach((item) => {
    item.addEventListener("click", () => {
      const slot = item.dataset.slot;

      const target = document.querySelector(
        '.equip-slot[data-slot="' + slot + '"]',
      );

      if (!target) return;

      target.innerHTML = item.innerHTML;
    });
  });
}