const api = (path, opts) =>
  fetch(path, { 
    headers: {'Content-Type':'application/json'}, 
    ...opts 
  }).then(r => r.json());

let lobbyId = "", playerName = "";

document.getElementById("btnCreate").onclick = async () => {
  const max_players = +document.getElementById("maxPlayers").value;
  const starting_amount = +document.getElementById("startAmt").value;
  const passkey = document.getElementById("passkey").value;
  const res = await api("/create_lobby", {
    method: "POST",
    body: JSON.stringify({ max_players, starting_amount, passkey })
  });
  lobbyId = res.lobby_id;
  showGameArea();
};

document.getElementById("btnJoin").onclick = async () => {
  lobbyId = document.getElementById("joinLobbyId").value.trim();
  playerName = document.getElementById("joinName").value.trim();
  const passkey = document.getElementById("joinPass").value.trim();
  await api("/join_lobby", {
    method: "POST",
    body: JSON.stringify({ lobby_id: lobbyId, player_name: playerName, passkey })
  });
  showGameArea();
};

function showGameArea() {
  document.getElementById("lobby-setup").classList.add("hidden");
  document.getElementById("game-area").classList.remove("hidden");
  document.getElementById("lobbyIdDisplay").textContent = lobbyId;
  pollState();
}

async function pollState() {
  try {
    const st = await api(`/lobby/${lobbyId}/state`);
    renderState(st);
  } catch (e) {
    console.error(e);
  } finally {
    setTimeout(pollState, 1500);
  }
}

function renderState({ state, players, community, pot }) {
  const ph = document.getElementById("players");
  ph.innerHTML = players.map(p =>
    `<div class="player">
       <strong>${p.name}</strong><br/>
       Chips: ${p.amount}<br/>
       ${p.cards.map(c=>`<span class="card-slot">${c}</span>`).join('')}
     </div>`).join('');
  document.getElementById("community").innerHTML =
    community.map(c=>`<span class="card-slot">${c}</span>`).join('');
  document.getElementById("pot").textContent = pot;
  document.getElementById("actions").innerHTML = `<p>Game state: ${state}</p>`;
}