import { loadWohnhaus } from "./buildings/wohnhaus.js";
import { loadSchwarzmarkt } from "./buildings/schwarzmarkt.js";
import { loadMine } from "./buildings/mine.js";
import { loadArena } from "./buildings/arena.js";
const popup = document.getElementById("building-popup");
const title = document.getElementById("popup-title");
const tooltip = document.getElementById("map-tooltip");

const tooltipCache = {};

const buildingModules = {
  11: loadWohnhaus,
  12: loadSchwarzmarkt,
  10: loadMine,
  1: loadArena,
};

const keepTabsVisible = new Set([10]);

/* ================================
   Popup verschiebbar machen
================================ */

(function makeDraggable() {
  const header = document.querySelector(".popup-header");
  if (!header) return;

  let isDragging = false;
  let startX, startY, startLeft, startTop;

  header.style.cursor = "grab";

  header.addEventListener("mousedown", (e) => {
    // Schließen-Button nicht draggable
    if (e.target.classList.contains("popup-close")) return;

    isDragging = true;
    header.style.cursor = "grabbing";

    const rect = popup.getBoundingClientRect();
    startX = e.clientX;
    startY = e.clientY;
    startLeft = rect.left;
    startTop = rect.top;

    // transform zurücksetzen, auf konkrete px-Werte umstellen
    popup.style.transform = "none";
    popup.style.left = startLeft + "px";
    popup.style.top = startTop + "px";

    e.preventDefault();
  });

  document.addEventListener("mousemove", (e) => {
    if (!isDragging) return;

    const dx = e.clientX - startX;
    const dy = e.clientY - startY;

    popup.style.left = (startLeft + dx) + "px";
    popup.style.top  = (startTop  + dy) + "px";
  });

  document.addEventListener("mouseup", () => {
    if (!isDragging) return;
    isDragging = false;
    header.style.cursor = "grab";
  });
})();

/* ================================
   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 url = building.getAttribute("href");

      title.innerText = "Lädt...";

      popup.style.left = "50%";
      popup.style.top = "50%";
      popup.style.transform = "translate(-50%, -50%)";
      popup.classList.add("active");

      resetTabs();

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

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

      const data = await res.json();

      title.innerText = data.name;

      const infoTab = document.getElementById("tab-info");
      const actionsTab = document.getElementById("tab-actions");
      const tabs = document.querySelector(".popup-tabs");

      // Standard: Info anzeigen
      infoTab.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>
`;

      // Standard Tabs anzeigen
      tabs.style.display = "flex";

      // Prüfen ob Gebäude eigenes UI hat
      const buildingType = Number(data.type);
      if (buildingModules[buildingType]) {
        if (keepTabsVisible.has(buildingType)) {
          // Tabs sichtbar lassen (z.B. Mine)
          tabs.style.display = "flex";
          // Aktionen-Tab aktivieren
          document
            .querySelectorAll(".tab")
            .forEach((t) => t.classList.remove("active"));
          document
            .querySelectorAll(".tab-content")
            .forEach((c) => c.classList.remove("active"));
          document
            .querySelector(".tab[data-tab='actions']")
            .classList.add("active");
          document.getElementById("tab-actions").classList.add("active");
        } else {
          // Tabs ausblenden, eigenes Voll-UI (Wohnhaus, Schwarzmarkt)
          tabs.style.display = "none";
          infoTab.innerHTML = `<div class="building-ui"></div>`;
        }

        buildingModules[buildingType](buildingType);
      }

      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.classList.remove("active");
};

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

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

      if (!tooltipCache[id]) {
        const res = await fetch("/api/building/" + id);

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

        tooltipCache[id] = await res.json();
      }

      const data = tooltipCache[id];

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