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

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

function flipCoin() {
  if (flipsLeft > 0 && !isGenerating) {
    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.result;
        balance = data.balance;
        flipsLeft = data.flips_left;
        updateInfo();
        
        // Reset coin appearance after a short delay
        setTimeout(() => {
          coin.textContent = "";
        }, 500);
      });
  }
}

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

function generateCoin() {
  if (!isGenerating) {
    isGenerating = true;
    document.getElementById("loading-overlay").style.display = "flex";
    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-item";
          newCoin.style.backgroundColor = data.coin.color;
          newCoin.innerHTML = `
            <div class="shop-coin">
              <div>P: ${data.coin.winrate.toFixed(2)}</div>
              <div>V: $${data.coin.value.toFixed(2)}</div>
              <div>C: $${data.coin.price.toFixed(2)}</div>
            </div>
          `;
          newCoin.onclick = () => buyCoin(coins.length - 1);
          shop.appendChild(newCoin);
        } else {
          console.error("Failed to generate new coin:", data.error);
        }
      })
      .finally(() => {
        isGenerating = false;
        document.getElementById("loading-overlay").style.display = "none";
      });
  }
}

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