<script>
  import { onMount } from 'svelte';

  // État actif pour la navigation
  let activePage = window.location.hash.slice(1) || 'accueil';
  let mobileMenuOpen = false;
  let baseAppUrl = '';

  // Déterminer les URLs en fonction de l'environnement
  function getEnvironmentUrls() {
    const hostname = window.location.hostname;
    let appPrefix = '';
    
    if (hostname === 'dev.geosector.fr' || hostname.includes('localhost')) {
      appPrefix = 'dapp';
    } else if (hostname === 'rec.geosector.fr') {
      appPrefix = 'rapp';
    } else {
      // Production ou autres environnements
      appPrefix = 'app';
    }
    
    // Construire l'URL de base de l'application
    const domainParts = hostname.split('.');
    if (domainParts.length >= 2) {
      // Remplacer le sous-domaine ou ajouter un nouveau préfixe
      const domain = domainParts.slice(Math.max(domainParts.length - 2, 0)).join('.');
      return `https://${appPrefix}.${domain}`;
    }
    
    // Fallback pour localhost ou cas non prévus
    return `https://${appPrefix}.geosector.fr`;
  }

  // Fonction pour changer de page
  function changePage(page) {
    activePage = page;
    window.history.pushState({}, '', `/${page}`);
    closeMobileMenu();
  }

  // Fonctions pour le menu mobile
  function toggleMobileMenu() {
    mobileMenuOpen = !mobileMenuOpen;
  }

  function closeMobileMenu() {
    mobileMenuOpen = false;
  }

  // Écouter les événements popstate pour mettre à jour la page active
  if (typeof window !== 'undefined') {
    window.addEventListener('popstate', () => {
      activePage = window.location.pathname.slice(1) || 'accueil';
    });
  }

  // Initialiser les URLs et configurer les événements
  onMount(() => {
    // Déterminer l'URL de base de l'application
    baseAppUrl = getEnvironmentUrls();
    
    const handleClickOutside = (event) => {
      const mobileMenu = document.getElementById('mobile-menu');
      const burgerButton = document.getElementById('burger-button');
      
      if (mobileMenuOpen && mobileMenu && burgerButton && 
          !mobileMenu.contains(event.target) && 
          !burgerButton.contains(event.target)) {
        closeMobileMenu();
      }
    };

    document.addEventListener('click', handleClickOutside);

    return () => {
      document.removeEventListener('click', handleClickOutside);
    };
  });
</script>

<header class="text-white bg-transparent backdrop-blur-sm z-50 relative">
  <div class="container mx-auto px-4 py-4">
    <div class="flex justify-between items-center">
      <div class="flex items-center">
        <div class="mr-3">
          <a href="/accueil" on:click|preventDefault={() => changePage('accueil')}>
            <img src="/images/Logo-geosector-horizontal.svg" alt="Geosector" class="h-12" />
          </a>
        </div>
      </div>

      <!-- Burger menu pour mobile -->
      <button id="burger-button" class="xl:hidden z-50" on:click={toggleMobileMenu}>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-[#002C66]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          {#if mobileMenuOpen}
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          {:else}
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          {/if}
        </svg>
      </button>

      <!-- Menu desktop -->
      <div class="hidden xl:flex items-center gap-6">
        <nav>
          <ul class="flex space-x-6">
            <li>
              <a href="/accueil" class={`text-[#002C66] hover:text-blue-500 transition-colors ${activePage === 'accueil' ? 'font-bold border-b-2 border-[#002C66]' : ''}`} on:click|preventDefault={() => changePage('accueil')}> Accueil </a>
            </li>
            <li>
              <a href="/fonctionnalites" class={`text-[#002C66] hover:text-blue-500 transition-colors ${activePage === 'fonctionnalites' ? 'font-bold border-b-2 border-[#002C66]' : ''}`} on:click|preventDefault={() => changePage('fonctionnalites')}> Fonctionnalités </a>
            </li>
            <li>
              <a href="/contact" class={`text-[#002C66] hover:text-blue-500 transition-colors ${activePage === 'contact' ? 'font-bold border-b-2 border-[#002C66]' : ''}`} on:click|preventDefault={() => changePage('contact')}> Contact </a>
            </li>
          </ul>
        </nav>
        
        <div class="flex gap-3 items-center">
          <a href="{baseAppUrl}/login/user" class="border-2 border-[#4CAF50] text-[#4CAF50] hover:bg-[#4CAF50] hover:text-white font-medium py-1.5 px-3 rounded-full transition-colors" on:click={() => { sessionStorage.setItem('loginType', 'user'); }}> Connexion Utilisateur </a>
          <a href="{baseAppUrl}/login" class="border-2 border-red-600 text-red-600 hover:bg-red-600 hover:text-white font-medium py-1.5 px-3 rounded-full transition-colors" on:click={() => { sessionStorage.setItem('loginType', 'admin'); }}> Connexion Administrateur </a>
          <a href="{baseAppUrl}/register" class="bg-[#E3170A] hover:bg-red-700 text-white font-medium py-2 px-4 rounded-full transition-colors"> S'inscrire </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Menu mobile -->
  <div id="mobile-menu" class={`fixed top-0 right-0 h-screen w-4/5 max-w-xs bg-white shadow-lg transform transition-transform duration-300 ease-in-out z-40 ${mobileMenuOpen ? 'translate-x-0' : 'translate-x-full'}`}>
    <div class="p-6">
      <div class="flex justify-end mb-8">
        <button on:click={closeMobileMenu} class="text-gray-600" aria-label="Fermer le menu">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
      
      <nav class="mb-8">
        <ul class="space-y-4">
          <li>
            <a href="/accueil" class={`block text-lg text-[#002C66] hover:text-blue-500 transition-colors ${activePage === 'accueil' ? 'font-bold' : ''}`} on:click|preventDefault={() => changePage('accueil')}> Accueil </a>
          </li>
          <li>
            <a href="/fonctionnalites" class={`block text-lg text-[#002C66] hover:text-blue-500 transition-colors ${activePage === 'fonctionnalites' ? 'font-bold' : ''}`} on:click|preventDefault={() => changePage('fonctionnalites')}> Fonctionnalités </a>
          </li>
          <li>
            <a href="/contact" class={`block text-lg text-[#002C66] hover:text-blue-500 transition-colors ${activePage === 'contact' ? 'font-bold' : ''}`} on:click|preventDefault={() => changePage('contact')}> Contact </a>
          </li>
        </ul>
      </nav>
      
      <div class="space-y-4">
        <a href="{baseAppUrl}/login/user" class="block w-full border-2 border-[#4CAF50] text-[#4CAF50] hover:bg-[#4CAF50] hover:text-white font-medium py-2 px-4 rounded-full transition-colors text-center mb-3" on:click={() => { sessionStorage.setItem('loginType', 'user'); }}> Connexion Utilisateur </a>
        <a href="{baseAppUrl}/login" class="block w-full border-2 border-red-600 text-red-600 hover:bg-red-600 hover:text-white font-medium py-2 px-4 rounded-full transition-colors text-center mb-3" on:click={() => { sessionStorage.setItem('loginType', 'admin'); }}> Connexion Administrateur </a>
        <a href="{baseAppUrl}/register" class="block w-full bg-[#E3170A] hover:bg-red-700 text-white font-medium py-2 px-4 rounded-full transition-colors text-center"> S'inscrire </a>
      </div>
    </div>
  </div>
  
  <!-- Overlay pour le fond lorsque le menu mobile est ouvert -->
  {#if mobileMenuOpen}
    <div 
      class="fixed inset-0 bg-black bg-opacity-50 z-30" 
      on:click={closeMobileMenu}
      on:keydown={(e) => e.key === 'Escape' && closeMobileMenu()}
      role="button"
      tabindex="0"
      aria-label="Fermer le menu"
    ></div>
  {/if}
</header>
