const img = document.getElementById("personImg");
const nameEl = document.getElementById("personName");
const button = document.getElementById("toggleButton");

async function loadStatus() {
  const res = await fetch("/status");
  const data = await res.json();
  showStatus(data.current, false);
}

function showStatus(person, animate = true) {
  const file = person === "A" ? "img/a.png" : "img/b.png";
  const label = person === "A" ? "Honey" : "Kirby";

  // Hintergrundbilder für A und B
  const bgA = "url('img/bgA.jpg')";
  const bgB = "url('img/bgB.jpg')";

  // Hintergrundanimation (optional)
  document.body.style.transition = "background 0.4s ease";

  // Hintergrund setzen
  document.body.style.backgroundImage = person === "A" ? bgA : bgB;
  document.body.style.backgroundSize = "cover";
  document.body.style.backgroundPosition = "center";

  if (animate) {
    img.classList.add("rotate");
  }

  setTimeout(() => {
    img.src = file;
    nameEl.textContent = label;
  }, 150);

  setTimeout(() => {
    img.classList.remove("rotate");
  }, 600);
}


button.addEventListener("click", async () => {
  const res = await fetch("/toggle", { method: "POST" });
  const data = await res.json();
  showStatus(data.current);
});

loadStatus();