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

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

<div id="market-info"></div>

<button id="buy-page">Inventarseite kaufen</button>
`;

  loadMarketInfo();
}

async function loadMarketInfo() {
  const res = await fetch("/api/blackmarket/pages");
  const data = await res.json();

  const info = document.getElementById("market-info");

  info.innerHTML = `
<p>Freigeschaltete Seiten: ${data.ownedPages} / ${data.maxPages}</p>
<p>Inventarslots: ${data.slots}</p>
`;
}

document.addEventListener("click", async (e) => {
  if (e.target.id !== "buy-page") 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!");

  location.reload();
});