import { showNotification } from "../notification.js";

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

  ui.innerHTML = `

<div class="market-tabs">

<button class="market-tab active" data-tab="inventory">
Inventar
</button>

<button class="market-tab" data-tab="artifacts">
Artefakte
</button>

<button class="market-tab" data-tab="special">
Geheimhandel
</button>

</div>

<div class="market-content">

<div class="market-tab-content active" id="market-inventory">
<p class="market-info-text">Erweitere deinen Taschenplatz indem du zusätzliche Taschen freischaltest</p>
<div id="market-pages"></div>
</div>

<div class="market-tab-content" id="market-artifacts">
<p class="market-placeholder">⚗️ Noch keine Artefakte verfügbar</p>
</div>

<div class="market-tab-content" id="market-special">
<p class="market-placeholder">🤫 Schwarzmarkt Angebote folgen bald...</p>
</div>

</div>

`;

  loadPages();
  initMarketTabs();
}

async function loadPages() {
  try {
    const res = await fetch("/api/blackmarket/pages");

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

    const data = await res.json();

    const container = document.getElementById("market-pages");

    let html = "";

    for (let i = 1; i <= data.maxPages; i++) {
      const price = data.prices.find((p) => p.page === i);

      if (data.ownedPages.includes(i)) {
        html += `
<div class="market-slot owned">
  <img src="/images/items/beutel.png" class="bag-icon">
  <div class="bag-label">Beutel ${i}</div>
  <div class="bag-status">✔</div>
</div>
`;
      } else if (price) {
        html += `
<div class="market-slot buy" data-page="${i}">
  <img src="/images/items/beutel.png" class="bag-icon">
  <div class="bag-label">Beutel ${i}</div>
  <div class="bag-price">${price.price} <img src="/images/items/goldmuenze.png" class="inline-gold-icon" alt="Gold"></div>
  <button class="buy-button">Kaufen</button>
</div>
`;
      } else {
        html += `
<div class="market-slot locked">
  <img src="/images/items/beutel.png" class="bag-icon">
  <div class="bag-label">Beutel ${i}</div>
  <div class="bag-status">🔒</div>
</div>
`;
      }
    }

    container.innerHTML = html;
  } catch (err) {
    console.error("Schwarzmarkt Fehler:", err);
  }
}

/* Kaufen */

document.addEventListener("click", async (e) => {
  const button = e.target.closest(".buy-button");

  if (!button) return;

  const slot = button.closest(".market-slot");

  const page = slot.dataset.page;

  try {
    const res = await fetch("/api/blackmarket/buy-page", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ page }),
    });

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

    const data = await res.json();

    if (data.error) {
      if (data.missing) {
        showNotification(
          `Du hast ${data.gold} Gold.\nDu brauchst ${data.price} Gold.\nEs fehlen dir noch ${data.missing} Gold.`,
          "Nicht genug Gold",
          "🪙",
        );
      } else {
        showNotification(data.error, "Hinweis", "⚠️");
      }
      return;
    }

    loadPages();
  } catch (err) {
    console.error("Kauf Fehler:", err);
    showNotification(
      "Fehler beim Kauf. Bitte erneut versuchen.",
      "Fehler",
      "⚠️",
    );
  }
});

/* Tabs */

function initMarketTabs() {
  document.querySelectorAll(".market-tab").forEach((tab) => {
    tab.addEventListener("click", () => {
      document
        .querySelectorAll(".market-tab")
        .forEach((t) => t.classList.remove("active"));

      tab.classList.add("active");

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

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