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

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

  // erster Tab aktiv
  const firstTab = document.querySelector(".tab");
  const firstContent = document.querySelector(".tab-content");

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

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

    const name = b.querySelector("title").textContent;
    const url = b.getAttribute("href");

    title.innerText = name;

    // Position des Gebäudes
    const rect = b.getBoundingClientRect();

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

    popup.style.display = "block";
    resetTabs();

    // AJAX Gebäudedaten laden
    const res = await fetch("/api" + url);
    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>
    `;
  });
});

// Tabs
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");
  });
});

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

async function loadBuilding(buildingId) {
  try {
    const res = await fetch("/api/building/" + buildingId);
    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>
    `;

    document.getElementById("tab-upgrade").innerHTML = `
      <p>Nächstes Level benötigt:</p>
      <p>${data.nextLevelPoints} Punkte</p>
      <p>Kosten: ${data.upgradeCost}</p>
    `;

    document.getElementById("tab-history").innerHTML = `
      <p>${data.history}</p>
    `;
  } catch (err) {
    console.error("Fehler beim Laden des Gebäudes:", err);
  }
}

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

    const res = await fetch("/api/building/" + id);
    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";
  });

  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";
  });
});