const img = document.getElementById("personImg");
const nameEl = document.getElementById("personName");
const button = document.getElementById("toggleButton");
const reasonInput = document.getElementById("reasonInput");
const lastReasonBox = document.getElementById("lastReasonBox");
const lastReasonText = document.getElementById("lastReasonText");
const mainContent = document.getElementById("mainContent");

// Preload images to prevent flickering
const imageCache = {};
function preloadImage(src) {
  return new Promise((resolve, reject) => {
    if (imageCache[src]) {
      resolve(imageCache[src]);
      return;
    }
    
    const image = new Image();
    image.onload = () => {
      imageCache[src] = image;
      resolve(image);
    };
    image.onerror = reject;
    image.src = src;
  });
}

// Preload all images on page load
async function preloadAllImages() {
  try {
    await Promise.all([
      preloadImage('img/a.png'),
      preloadImage('img/b.png'),
      preloadImage('img/bgA.jpg'),
      preloadImage('img/bgB.jpg')
    ]);
    console.log("✅ Alle Bilder vorgeladen");
  } catch (err) {
    console.warn("⚠️ Fehler beim Vorladen:", err);
  }
}

async function loadStatus() {
  // Preload images first
  await preloadAllImages();
  
  const res = await fetch("/status");
  const data = await res.json();
  
  // Set background and image without animation on first load
  setBackgroundAndImage(data.current, false);
  
  // Show content smoothly
  img.style.display = 'block';
  mainContent.classList.remove('loading');
  mainContent.classList.add('loaded');
  
  // Show last reason if available
  if (data.lastReason) {
    lastReasonText.textContent = data.lastReason;
    lastReasonBox.classList.remove("hidden");
  }
}

function setBackgroundAndImage(person, animate = true) {
  const file = person === "A" ? "img/a.png" : "img/b.png";
  const label = person === "A" ? "Lumpia" : "Pierogi";
  const bgImage = person === "A" ? "url('img/bgA.jpg')" : "url('img/bgB.jpg')";

  // Set background immediately (smooth transition via CSS)
  document.body.style.backgroundImage = bgImage;
  document.body.style.backgroundSize = "cover";
  document.body.style.backgroundPosition = "center";

  if (animate) {
    img.classList.add("rotate");
    
    // Change image and name in the middle of rotation
    setTimeout(() => {
      img.src = file;
      nameEl.textContent = label;
    }, 300); // Half of rotation duration
    
    // Remove rotation class after animation
    setTimeout(() => {
      img.classList.remove("rotate");
    }, 600);
  } else {
    // First load - no animation
    img.src = file;
    nameEl.textContent = label;
  }
}

button.addEventListener("click", async () => {
  const reason = reasonInput.value.trim();
  
  try {
    const res = await fetch("/toggle", { 
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ reason: reason || undefined })
    });
    
    const data = await res.json();
    setBackgroundAndImage(data.current, true);
    
    // Update last reason display
    if (reason) {
      lastReasonText.textContent = reason;
      lastReasonBox.classList.remove("hidden");
    }
    
    // Clear input
    reasonInput.value = "";
  } catch (err) {
    console.error("Fehler beim Wechseln:", err);
    nameEl.textContent = "Fehler!";
  }
});

// Allow Enter key to trigger switch
reasonInput.addEventListener("keypress", (e) => {
  if (e.key === "Enter") {
    button.click();
  }
});

// Start loading
loadStatus();