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

  ui.innerHTML = `
<h2>Schwarzmarkt</h2>

<div id="market-pages"></div>
`;

  loadPages();
}

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 <= 8; i++) {
    if (data.ownedPages.includes(i)) {
      html += `
<div class="market-page owned">
Seite ${i} ✔
</div>
`;
    } else {
      const price = data.prices.find((p) => p.page === i);

      if (price) {
        html += `
<div class="market-page buy" data-page="${i}">
Seite ${i} Kaufen (${price.price} Gold)
</div>
`;
      } else {
        html += `
<div class="market-page locked">
Seite ${i} 🔒
</div>
`;
      }
    }
  }

  container.innerHTML = html;
}

document.addEventListener("click", async (e) => {
  if (!e.target.classList.contains("buy")) return;

  const res = await fetch("/api/blackmarket/buy-page", {
    method: "POST",
  });

  const data = await res.json();

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

  alert("Seite " + data.page + " freigeschaltet!");

  loadPages();
});