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

  ui.innerHTML = `

<div id="character-ui">

<div class="slot helmet" data-slot="helmet">
<div class="slot-label">Helm</div>
</div>

<div class="slot shoulder" data-slot="shoulder">
<div class="slot-label">Schulter</div>
</div>

<div class="slot amulet" data-slot="amulet">
<div class="slot-label">Amulett</div>
</div>

<div class="slot gloves" data-slot="gloves">
<div class="slot-label">Handschuhe</div>
</div>

<div class="slot weapon" data-slot="weapon">
<div class="slot-label">Waffe</div>
</div>

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

<div class="slot belt" data-slot="belt">
<div class="slot-label">Gürtel</div>
</div>

<div class="slot shield" data-slot="shield">
<div class="slot-label">Schild</div>
</div>

<div class="slot ring1" data-slot="ring">
<div class="slot-label">Ring</div>
</div>

<div class="slot ring2" data-slot="ring">
<div class="slot-label">Ring</div>
</div>

<div class="slot boots" data-slot="boots">
<div class="slot-label">Stiefel</div>
</div>

</div>

<h3>Inventar</h3>

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

`;

  await loadInventory();
  await loadEquipment();

  initDrag();
  initSlotDrag();
  initDrop();
  initInventoryDrop();
}

/* ================================
   Equipment laden
================================ */

async function loadEquipment() {
  const res = await fetch("/api/equipment");
  const equipment = await res.json();

  equipment.forEach((item) => {
    const slot = document.querySelector('.slot[data-slot="' + item.slot + '"]');
    if (!slot) return;

    const label = slot.querySelector(".slot-label");

    slot.innerHTML = `
<img src="${item.icon}"
draggable="true"
data-id="${item.item_id}"
data-level="${item.item_level_id}">
`;

    if (label) slot.appendChild(label);

    slot.classList.add("has-item");
  });
}

/* ================================
   Inventar laden
================================ */

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

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

  let html = "";

  /* feste 32 slots erzeugen */

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

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

      html += `
      <div class="inventory-slot"
      data-slot="${item.equip_slot || ""}"
      data-id="${item.id}"
      data-level="${item.level}"
      draggable="true">

      <img src="${icon}">

      </div>
      `;
    } else {
      html += `
<div class="inventory-slot empty"></div>
`;
    }
  }

  grid.innerHTML = html;
}

/* ================================
   Drag Inventar
================================ */

function initDrag() {
  document.querySelectorAll(".inventory-slot").forEach((item) => {
    item.addEventListener("dragstart", (e) => {
      e.dataTransfer.setData("itemId", item.dataset.id);
      e.dataTransfer.setData("itemLevel", item.dataset.level);
      e.dataTransfer.setData("slot", item.dataset.slot);
      e.dataTransfer.setData("source", "inventory");
    });
  });
}

/* ================================
   Drag Slot
================================ */

function initSlotDrag() {
  document.querySelectorAll(".slot img").forEach((img) => {
    img.addEventListener("dragstart", (e) => {
      const slot = img.closest(".slot");

      e.dataTransfer.setData("itemId", img.dataset.id);
      e.dataTransfer.setData("itemLevel", img.dataset.level);
      e.dataTransfer.setData("slot", slot.dataset.slot);
      e.dataTransfer.setData("source", "slot");
    });
  });
}

/* ================================
   Slot Drop
================================ */

function initDrop() {
  document.querySelectorAll(".slot").forEach((slot) => {
    slot.addEventListener("dragover", (e) => e.preventDefault());

    slot.addEventListener("drop", (e) => {
      e.preventDefault();

      const itemId = e.dataTransfer.getData("itemId");
      const itemLevel = e.dataTransfer.getData("itemLevel");
      const itemSlot = e.dataTransfer.getData("slot");
      const source = e.dataTransfer.getData("source");

      const targetSlot = slot.dataset.slot;

      if (!itemSlot || itemSlot !== targetSlot) return;

      /* Icon bestimmen */

      let icon;

      if (source === "inventory") {
        const inventoryItem = document.querySelector(
          '.inventory-slot[data-id="' + itemId + '"]',
        );

        if (!inventoryItem) return;

        icon = inventoryItem.querySelector("img").src;

        inventoryItem.remove();
      } else {
        const slotItem = document.querySelector(
          '.slot[data-slot="' + itemSlot + '"] img',
        );

        if (!slotItem) return;

        icon = slotItem.src;
      }

      /* vorhandenes Item zurück ins Inventar */

      const existing = slot.querySelector("img");

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

        const newItem = document.createElement("div");

        newItem.classList.add("inventory-slot");
        newItem.setAttribute("draggable", "true");

        newItem.dataset.id = existing.dataset.id;
        newItem.dataset.level = existing.dataset.level;
        newItem.dataset.slot = existing.dataset.slot;

        newItem.innerHTML = `<img src="${existing.src}">`;

        grid.appendChild(newItem);
      }

      /* neues Item setzen */

      const label = slot.querySelector(".slot-label");

      slot.innerHTML = `
<img src="${icon}"
draggable="true"
data-id="${itemId}"
data-level="${itemLevel}">
`;

      if (label) slot.appendChild(label);

      slot.classList.add("has-item");

      initDrag();
      initSlotDrag();

      saveEquipment(targetSlot, itemId, itemLevel);
    });
  });
}

/* ================================
   Drop ins Inventar
================================ */

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

  grid.addEventListener("dragover", (e) => {
    e.preventDefault();
  });

  grid.addEventListener("drop", (e) => {
    e.preventDefault();

    const source = e.dataTransfer.getData("source");

    if (source !== "slot") return;

    const itemId = e.dataTransfer.getData("itemId");
    const itemLevel = e.dataTransfer.getData("itemLevel");
    const slotName = e.dataTransfer.getData("slot");

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

    if (!slot) return;

    const img = slot.querySelector("img");

    if (!img) return;

    /* neues Inventar Item */

    const newItem = document.createElement("div");

    newItem.classList.add("inventory-slot");
    newItem.setAttribute("draggable", "true");

    newItem.dataset.id = itemId;
    newItem.dataset.level = itemLevel;
    newItem.dataset.slot = slotName;

    newItem.innerHTML = `<img src="${img.src}">`;

    grid.appendChild(newItem);

    /* Slot leeren */

    const label = slot.querySelector(".slot-label");

    slot.innerHTML = "";

    if (label) {
      slot.appendChild(label);
    }

    slot.classList.remove("has-item");

    saveEquipment(slotName, null, null);

    /* Drag wieder aktivieren */

    initDrag();
    initSlotDrag();
  });
}

/* ================================
   DB speichern
================================ */

async function saveEquipment(slot, itemId, itemLevelId) {
  await fetch("/api/equip", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      slot: slot,
      itemId: itemId,
      itemLevelId: itemLevelId,
    }),
  });
}