{{--
  Indicateur de chargement global AMU.

  Donne un retour visuel quand quelque chose charge, pour rassurer l'utilisateur
  (connexions parfois très lentes en Guinée) et éviter les clics répétés :

    • Barre or fine en haut de l'écran :
        - navigation pleine page / SPA → INSTANTANÉE au clic + curseur « progress » ;
        - action Livewire → après ~160 ms (évite de clignoter sur les actions rapides).

    • Overlay centré (spinner + « Chargement… ») — bien visible au centre :
        - s'affiche après ~400 ms UNIQUEMENT pour une navigation de page ou une
          action déclenchée par un vrai geste (clic / soumission).
        - N'apparaît donc PAS sur les rafraîchissements de fond (wire:poll) ni la
          frappe live, et seulement si le chargement traîne (mauvaise connexion).
        - Bloque les clics pendant qu'il est visible → empêche les doubles envois.

  Auto-contenu : couleurs = tokens Tailwind (`cmu-gold-500`, `bg-white`,
  `text-cmu-charcoal`) ; positionnement/animation en CSS inline (aucun hex de
  marque, aucun rebuild). À inclure une fois par layout.
--}}
<div id="amu-loader" aria-hidden="true">
  <div id="amu-loader-bar" class="bg-cmu-gold-500"></div>
</div>

<div id="amu-loading-overlay" aria-hidden="true">
  <div class="amu-loading-box bg-white">
    <span class="amu-spinner text-cmu-gold-500"></span>
    <span class="amu-loading-text text-cmu-charcoal">Chargement…</span>
  </div>
</div>

<style>
  /* --- Barre de progression (haut) --- */
  #amu-loader {
    position: fixed; top: 0; left: 0; right: 0; height: 3px;
    z-index: 10000; pointer-events: none; overflow: hidden;
    opacity: 0; transition: opacity .18s ease;
  }
  #amu-loader.is-active { opacity: 1; }
  #amu-loader-bar {
    position: absolute; top: 0; left: 0; height: 100%; width: 34%;
    border-radius: 0 4px 4px 0;
    box-shadow: 0 0 10px 1px rgba(255, 255, 255, .55);
    animation: amu-loader-slide 1.05s cubic-bezier(.45, 0, .25, 1) infinite;
  }
  #amu-loader-bar::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
  }
  @keyframes amu-loader-slide {
    0%   { transform: translateX(-115%); }
    100% { transform: translateX(360%); }
  }

  /* --- Overlay centré --- */
  #amu-loading-overlay {
    position: fixed; inset: 0; z-index: 9998;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
  }
  #amu-loading-overlay.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
  .amu-loading-box {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: 26px 34px; border-radius: 16px;
    box-shadow: 0 12px 44px rgba(0, 0, 0, .16);
  }
  .amu-spinner {
    width: 46px; height: 46px; border-radius: 50%; display: block;
    border: 4px solid rgba(0, 0, 0, .08);
    border-top-color: currentColor; /* = token cmu-gold-500 via .text-cmu-gold-500 */
    animation: amu-spin .8s linear infinite;
  }
  .amu-loading-text { font-size: 13px; font-weight: 600; letter-spacing: .02em; }
  @keyframes amu-spin { to { transform: rotate(360deg); } }

  html.amu-navigating, html.amu-navigating * { cursor: progress !important; }
  @media (prefers-reduced-motion: reduce) {
    #amu-loader-bar { animation-duration: 1.8s; }
    .amu-spinner { animation-duration: 1.6s; }
  }
  /* On masque la barre native de Livewire (wire:navigate) : la barre or
     et l'overlay ci-dessus la remplacent, dans la charte AMU. */
  #nprogress { display: none !important; }
</style>

<script>
(function () {
  // Idempotent : avec wire:navigate le corps de page est remplacé et ce
  // script peut être ré-évalué ; les écouteurs (sur `document`) ne doivent
  // l'être qu'une fois.
  if (window.__amuLoaderInit) return;
  window.__amuLoaderInit = true;

  var OVERLAY_DELAY = 400, BAR_DELAY = 160, SAFETY = 20000, GESTURE_WINDOW = 900;
  var active = 0, navigating = false;
  var barTimer = null, overlayTimer = null, safetyTimer = null;
  var lastGestureAt = 0;

  // On ne met PAS les éléments en cache : wire:navigate remplace le <body>.
  function bar() { return document.getElementById('amu-loader'); }
  function overlay() { return document.getElementById('amu-loading-overlay'); }
  function loading() { return active > 0 || navigating; }

  function showBar()  { var e = bar(); if (e) e.classList.add('is-active'); }
  function showOverlay() { var e = overlay(); if (e) e.classList.add('is-active'); }

  function scheduleBar(delay) {
    if (barTimer !== null) return;
    barTimer = setTimeout(function () { barTimer = null; if (loading()) showBar(); }, delay);
  }
  function scheduleOverlay() {
    if (overlayTimer !== null) return;
    overlayTimer = setTimeout(function () { overlayTimer = null; if (loading()) showOverlay(); }, OVERLAY_DELAY);
  }
  function armSafety() {
    if (safetyTimer) clearTimeout(safetyTimer);
    // Filet de sécurité : ne jamais rester bloqué si un évènement de fin manque.
    safetyTimer = setTimeout(function () {
      active = 0; navigating = false;
      document.documentElement.classList.remove('amu-navigating');
      stop();
    }, SAFETY);
  }
  function stop() {
    if (barTimer) { clearTimeout(barTimer); barTimer = null; }
    if (overlayTimer) { clearTimeout(overlayTimer); overlayTimer = null; }
    if (safetyTimer) { clearTimeout(safetyTimer); safetyTimer = null; }
    var b = bar(); if (b) b.classList.remove('is-active');
    var o = overlay(); if (o) o.classList.remove('is-active');
  }

  function beginNav() {
    if (navigating) return;
    navigating = true;
    document.documentElement.classList.add('amu-navigating');
    showBar();          // barre immédiate
    scheduleOverlay();  // overlay si la navigation traîne
    armSafety();
  }
  function resetNav() {
    navigating = false;
    document.documentElement.classList.remove('amu-navigating');
    if (!loading()) stop();
  }
  function beginAjax(withOverlay) {
    active++;
    scheduleBar(BAR_DELAY);
    if (withOverlay) scheduleOverlay();
    armSafety();
  }
  function endAjax() {
    active = Math.max(0, active - 1);
    if (!loading()) stop();
  }

  // Mémorise le dernier geste utilisateur (pour distinguer action volontaire
  // vs rafraîchissement de fond type wire:poll).
  function markGesture() { lastGestureAt = Date.now(); }
  document.addEventListener('click', markGesture, true);
  document.addEventListener('submit', markGesture, true);

  // --- Changement de page : clic sur un lien interne ---
  // On déclenche l'indicateur DÈS LE CLIC (début de l'attente), aussi bien
  // pour un lien classique (rechargement complet, masqué par la nouvelle page)
  // que pour un lien `wire:navigate` (SPA, masqué par `livewire:navigated`).
  // C'est indispensable : l'évènement `livewire:navigating` ne se déclenche
  // qu'au moment de l'échange du DOM, donc APRÈS le temps réseau — trop tard
  // sur une connexion lente.
  document.addEventListener('click', function (e) {
    var a = e.target.closest ? e.target.closest('a[href]') : null;
    if (!a) return;
    if (a.hasAttribute('download') || a.target === '_blank') return;
    var href = a.getAttribute('href') || '';
    if (!href || href.charAt(0) === '#'
        || href.indexOf('javascript:') === 0
        || href.indexOf('mailto:') === 0
        || href.indexOf('tel:') === 0) return;
    if (a.origin && a.origin !== window.location.origin) return;
    if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
    if (a.href === window.location.href) return; // même page : pas de navigation réelle
    beginNav();
  }, true);

  document.addEventListener('submit', function (e) {
    var f = e.target;
    if (f && f.hasAttribute && f.hasAttribute('wire:submit')) return; // géré par le hook Livewire
    if (e.defaultPrevented) return;
    beginNav();
  }, true);

  window.addEventListener('beforeunload', showBar);
  window.addEventListener('pageshow', resetNav); // retour arrière / bfcache

  // --- Requêtes Livewire (wire:click, wire:submit, wire:model.live, wire:poll) ---
  document.addEventListener('livewire:init', function () {
    if (window.Livewire && Livewire.hook) {
      Livewire.hook('commit', function (payload) {
        // Overlay seulement si la requête suit un vrai geste (pas un poll de fond).
        var byGesture = (Date.now() - lastGestureAt) < GESTURE_WINDOW;
        beginAjax(byGesture);
        if (payload.succeed) payload.succeed(endAjax);
        if (payload.fail) payload.fail(endAjax);
      });
    }
    // Navigations SPA Livewire (wire:navigate). `livewire:navigate` marque le
    // DÉBUT (dès le clic), `livewire:navigating` l'échange du DOM (filet), et
    // `livewire:navigated` la FIN → on masque. (beginNav est idempotent.)
    document.addEventListener('livewire:navigate', beginNav);
    document.addEventListener('livewire:navigating', beginNav);
    document.addEventListener('livewire:navigated', resetNav);
  });
})();
</script>