document.addEventListener("DOMContentLoaded", () => {
  const loader = document.getElementById("loader-overlay"); // déjà présent dans le layout.ejs
  const errorMessage = document.getElementById("error-message");

  let activateTimeout = null;
  let timeoutError = null;

  // Le loader est le premier élément dans le HTML, donc il est chargé en premier
  // Il est prêt à s'afficher immédiatement dès que showLoader() est appelé
  // Pas de classe "hidden" par défaut = il est dans le DOM et prêt instantanément

  //activer le loader et le montrer a l'écran
  window.showLoader = function() {
    clearTimeout(activateTimeout);
    clearTimeout(timeoutError);
    errorMessage.style.display = "none";
    loader.classList.remove("hidden");
    
    // Délai avant l'affichage : permet d'éviter le flash du loader sur les chargements rapides
    // Si hideLoader() est appelé avant ce délai, l'utilisateur ne verra jamais le loader
    activateTimeout = setTimeout(() => {
      // Vérifier qu'on est toujours pas caché (au cas où hideLoader() ait été appelé entre temps)
      if (!loader.classList.contains("hidden")) {
        loader.classList.add("active");
      }
    }, 500);

    // Afficher un message d'erreur après 5 secondes si le loader est toujours actif
    timeoutError = setTimeout(() => {
      if (loader.classList.contains("active") && !loader.classList.contains("hidden")) {
        showError("Connexion lente ou problème de réseau. Veuillez vérifier votre connexion.");
      }
    }, 5000);
  };

  //enlever le loader et le faire disparaitre
  window.hideLoader = function() {
    clearTimeout(activateTimeout);
    clearTimeout(timeoutError);
    loader.classList.remove("active");
    setTimeout(() => loader.classList.add("hidden"), 500);
  };

  //cas d'erreur
  window.showError = function(msg) {
    clearTimeout(activateTimeout);
    clearTimeout(timeoutError);
    errorMessage.textContent = msg;
    errorMessage.style.display = "block";
  };
});