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");

// Config wird vom Server geladen
let CONFIG = null;

// 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;
  });
}

// Config vom Server laden
async function loadConfig() {
  try {
    const res = await fetch("/config");
    CONFIG = await res.json();
    console.log("✅ Config geladen:", CONFIG);
    return CONFIG;
  } catch (err) {
    console.error("❌ Fehler beim Laden der Config:", err);
    // Fallback zur alten Konfiguration
    CONFIG = {
      A: {
        name: "Honey",
        colorHex: "#2ecc71",
        icon: "a.png",
        background: "bgA.jpg"
      },
      B: {
        name: "Kirby",
        colorHex: "#e74c3c",
        icon: "b.png",
        background: "bgB.jpg"
      }
    };
    return CONFIG;
  }
}

// Preload all images on page load
async function preloadAllImages() {
  if (!CONFIG) await loadConfig();
  
  try {
    await Promise.all([
      preloadImage(`img/${CONFIG.A.icon}`),
      preloadImage(`img/${CONFIG.B.icon}`),
      preloadImage(`img/${CONFIG.A.background}`),
      preloadImage(`img/${CONFIG.B.background}`)
    ]);
    console.log("✅ Alle Bilder vorgeladen");
  } catch (err) {
    console.warn("⚠️ Fehler beim Vorladen:", err);
  }
}

async function loadStatus() {
  // Config und Bilder laden
  await loadConfig();
  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) {
  if (!CONFIG) {
    console.error("Config nicht geladen!");
    return;
  }

  const personConfig = CONFIG[person];
  const file = `img/${personConfig.icon}`;
  const label = personConfig.name;
  const bgImage = `url('img/${personConfig.background}')`;
  const nameColor = personConfig.colorHex;

  // 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, name and color in the middle of rotation
    setTimeout(() => {
      img.src = file;
      nameEl.textContent = label;
      nameEl.style.color = nameColor;
    }, 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;
    nameEl.style.color = nameColor;
  }
}

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();