let balance = 0;
let flipsLeft = 1000;
let currentCoin = 0;

function updateInfo() {
  document.getElementById("balance").textContent = balance.toFixed(2);
  document.getElementById("flips-left").textContent = flipsLeft;
}

function flipCoin() {
  if (flipsLeft > 0) {
    fetch("/flip", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ coin_index: currentCoin }),
    })
      .then((response) => response.json())
      .then((data) => {
        const coin = document.getElementById("coin");
        coin.textContent = data.is_heads ? "H" : "T";
        if (data.is_heads) {
          balance += data.value;
        }
        flipsLeft--;
        updateInfo();
      });
  }
}

function buyCoin(index) {
  fetch("/buy", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ coin_index: index, balance: balance }),
  })
    .then((response) => response.json())
    .then((data) => {
      if (data.success) {
        balance -= coins[index].price;
        currentCoin = index;
        document.getElementById("coin").style.backgroundColor =
          coins[index].color;
        updateInfo();
      } else {
        alert("Not enough money to buy this coin!");
      }
    });
}

function generateCoin() {
  fetch("/generate_coin", {
    method: "POST",
  })
    .then((response) => response.json())
    .then((data) => {
      if (data.success) {
        coins.push(data.coin);
        const shop = document.getElementById("shop");
        const newCoin = document.createElement("div");
        newCoin.className = "shop-coin";
        newCoin.style.backgroundColor = data.coin.color;
        newCoin.innerHTML = `
                <div>P: ${data.coin.winrate.toFixed(2)}</div>
                <div>V: $${data.coin.value.toFixed(2)}</div>
                <div>C: $${data.coin.price.toFixed(2)}</div>
            `;
        newCoin.onclick = () => buyCoin(coins.length - 1);
        shop.appendChild(newCoin);
      } else {
        console.error("Failed to generate new coin:", data.error);
      }
    });
}

document.addEventListener("DOMContentLoaded", () => {
  updateInfo();
  document.getElementById("coin").onclick = flipCoin;
  document.getElementById("generate-coin").onclick = generateCoin;
});