export async function loadSchwarzmarkt() {
  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">
<div id="market-pages"></div>
</div>

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

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

</div>

`;

  loadPages();
  initMarketTabs();
}

async function loadPages() {
  const res = await fetch("/api/blackmarket/pages");
  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-status owned">
✔
</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-price">
${price.price} <span class="gold-icon">🪙</span>
</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-status locked">
🔒
</div>

</div>
`;
    }
  }

  container.innerHTML = html;
}

/* 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;

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

  const data = await res.json();

  if (data.error) {
    alert(data.error);
    return;
  }

  loadPages();
});

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