async function refreshStatus() {
  const output = document.getElementById("output");
  try {
    const response = await fetch("/api/status", { credentials: "same-origin" });
    const payload = await response.json();
    document.getElementById("online").textContent = response.ok ? "online" : "offline";
    document.getElementById("game-state").textContent = payload.state ?? "unknown";
    document.getElementById("controller").textContent =
      payload.controller?.connected === true ? "connected" :
      payload.controller?.connected === false ? "disconnected" : "unknown";
    document.getElementById("display").textContent = payload.display?.mode ?? "unknown";
    output.textContent = JSON.stringify(payload, null, 2);
  } catch (error) {
    document.getElementById("online").textContent = "offline";
    output.textContent = String(error);
  }
}

async function postAction(path) {
  const output = document.getElementById("output");
  const response = await fetch(path, { method: "POST", credentials: "same-origin" });
  const payload = await response.json();
  output.textContent = JSON.stringify(payload, null, 2);
  await refreshStatus();
}

document.querySelectorAll("[data-action]").forEach((button) => {
  button.addEventListener("click", () => {
    postAction(button.dataset.action).catch((error) => {
      document.getElementById("output").textContent = String(error);
    });
  });
});

refreshStatus().catch(() => {});
setInterval(refreshStatus, 5000);