const popup = document.getElementById("building-popup");
const title = document.getElementById("popup-title");
const tooltip = document.getElementById("map-tooltip");

/* ================================
   Tabs zurücksetzen
================================ */

function resetTabs() {
  document
    .querySelectorAll(".tab")
    .forEach((t) => t.classList.remove("active"));
  document
    .querySelectorAll(".tab-content")
    .forEach((c) => c.classList.remove("active"));

  const firstTab = document.querySelector(".tab");
  const firstContent = document.querySelector(".tab-content");

  if (firstTab) firstTab.classList.add("active");
  if (firstContent) firstContent.classList.add("active");
}

/* ================================
   Gebäude Popup öffnen
================================ */

document.querySelectorAll(".building").forEach((building) => {
  building.addEventListener("click", async (e) => {
    e.preventDefault();

    try {
      const name = building.querySelector("title")?.textContent || "Gebäude";
      const url = building.getAttribute("href");

      title.innerText = name;

      popup.style.left = "50%";
      popup.style.top = "50%";
      popup.style.display = "block";

      resetTabs();

      const res = await fetch("/api" + url);

      if (!res.ok) throw new Error("API Fehler");

      const data = await res.json();

      document.getElementById("tab-info").innerHTML = `
        <h3>${data.name}</h3>
        <p>Level: ${data.level}</p>
        <p>Punkte: ${data.points} / ${data.nextLevelPoints}</p>
        <p>${data.description}</p>
        <div class="progress-bar">
          <div class="progress-fill"
               style="width:${(data.points / data.nextLevelPoints) * 100}%">
          </div>
        </div>
      `;

      document.getElementById("tab-actions").innerHTML = `
        <button>Betreten</button>
        <button>Handeln</button>
      `;

      document.getElementById("tab-upgrade").innerHTML = `
        <p>Kosten: ${data.upgradeCost}</p>
        <button>Upgrade</button>
      `;

      document.getElementById("tab-history").innerHTML = `
        <p>${data.history}</p>
      `;
    } catch (error) {
      console.error("Gebäude konnte nicht geladen werden:", error);
    }
  });
});

/* ================================
   Tabs wechseln
================================ */

document.querySelectorAll(".tab").forEach((tab) => {
  tab.addEventListener("click", () => {
    document
      .querySelectorAll(".tab")
      .forEach((t) => t.classList.remove("active"));
    tab.classList.add("active");

    document
      .querySelectorAll(".tab-content")
      .forEach((c) => c.classList.remove("active"));

    document.getElementById("tab-" + tab.dataset.tab).classList.add("active");
  });
});

/* ================================
   Popup schließen
================================ */

document.querySelector(".popup-close").onclick = () => {
  popup.style.display = "none";
};

/* ================================
   Tooltip
================================ */

document.querySelectorAll(".building").forEach((building) => {
  building.addEventListener("mouseenter", async (e) => {
    try {
      const id = building.dataset.id;

      const res = await fetch("/api/building/" + id);

      if (!res.ok) throw new Error("API Fehler");

      const data = await res.json();

      tooltip.innerHTML = `
        <strong>${data.name}</strong><br>
        Level ${data.level}<br>
        Punkte ${data.points}/${data.nextLevelPoints}<br>
        <hr>
        Upgrade Kosten:<br>
        ${data.upgradeCost}
      `;

      tooltip.style.display = "block";
    } catch (err) {
      console.error("Tooltip Fehler:", err);
    }
  });

  building.addEventListener("mousemove", (e) => {
    tooltip.style.left = e.clientX + 15 + "px";
    tooltip.style.top = e.clientY + 15 + "px";
  });

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