---
// PC4 - iframe carte AEP (cartobifurcation) avec skeleton loader + fallback timeout 8s.
// Route confirmee 200 sans X-Frame-Options ni frame-ancestors restrictifs (preflight 2026-05-08).
const CARTE_URL = 'https://aep.trans-former.fr/agences';
---
<div class="relative h-full w-full bg-neutral-100">
  <!-- Skeleton loader -->
  <div
    id="iframe-skeleton"
    class="absolute inset-0 flex items-center justify-center bg-neutral-50 animate-pulse"
  >
    <div class="text-neutral-400 text-sm">Chargement de la carte AEP...</div>
  </div>

  <iframe
    id="carte-aep-iframe"
    src={CARTE_URL}
    title="Carte des reseaux AEP - cartobifurcation"
    class="w-full h-full border-0 opacity-0 transition-opacity duration-500"
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade"
    sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
  ></iframe>
</div>

<script>
  const iframe = document.getElementById('carte-aep-iframe') as HTMLIFrameElement | null;
  const skeleton = document.getElementById('iframe-skeleton');

  iframe?.addEventListener('load', () => {
    iframe.classList.remove('opacity-0');
    iframe.classList.add('opacity-100');
    skeleton?.classList.add('hidden');
  });

  // Timeout securite : si pas charge en 8s, afficher fallback lien externe.
  setTimeout(() => {
    if (skeleton && !skeleton.classList.contains('hidden')) {
      skeleton.innerHTML = `
        <div class="text-center text-neutral-500 px-4">
          <p class="mb-2 text-sm">La carte n'a pas pu charger.</p>
          <a
            href="https://aep.trans-former.fr/agences"
            target="_blank"
            rel="noopener"
            class="text-blue-600 underline text-sm"
          >
            Ouvrir dans un nouvel onglet &rarr;
          </a>
        </div>
      `;
      skeleton.classList.remove('animate-pulse');
    }
  }, 8000);
</script>