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

  ui.innerHTML = `
<div id="wohnhaus-ui">

<h3>Inventar</h3>

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

</div>

<div id="item-tooltip"></div>
`;

  loadInventory();
}

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

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

  let html = "";

  for (let i = 0; i < 30; i++) {
    const item = items[i];

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

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

  grid.innerHTML = html;

  initTooltips();
}

function initTooltips() {
  const tooltip = document.getElementById("item-tooltip");

  document.querySelectorAll(".inventory-slot").forEach((slot) => {
    slot.addEventListener("mouseenter", () => {
      const name = slot.dataset.name;

      if (!name) return;

      tooltip.innerHTML = `<strong>${name}</strong>`;
      tooltip.style.display = "block";
    });

    slot.addEventListener("mousemove", (e) => {
      tooltip.style.left = e.pageX + 10 + "px";
      tooltip.style.top = e.pageY + 10 + "px";
    });

    slot.addEventListener("mouseleave", () => {
      tooltip.style.display = "none";
    });
  });
}