{#
    Header Component - Navbar fixe en haut

    Paramètres:
    - appName: Nom de l'application (défaut: "2ABCORP")
    - appLogo: URL du logo (défaut: logo par défaut)
    - userName: Nom de l'utilisateur
    - userEmail: Email de l'utilisateur
    - userPhoto: URL de la photo de profil
    - notificationCount: Nombre de notifications non lues (défaut: 0)
#}

{% set appName = appName|default('YIMA-SHOP') %}
{% set appLogo = appLogo|default(asset('logo.png')) %}
{% set userName = userName|default('Utilisateur') %}
{% set userEmail = userEmail|default('') %}
{% set userPhoto = userPhoto|default(asset('images/default-avatar.png')) %}
{% set notificationCount = get_unread_notifications_count(app.user) %}
{% set recentNotifications = get_recent_notifications(app.user, 5) %}
{% set activeRole = active_role() %}

<nav class="fixed top-0 z-50 w-full bg-neutral-primary-soft border-b border-default">
  <div class="px-3 py-3 lg:px-5 lg:pl-3">
    <div class="flex items-center justify-between">
      {# Section gauche: Toggle sidebar + Logo #}
      <div class="flex items-center justify-start rtl:justify-end">
        {# Bouton toggle sidebar (mobile uniquement) #}
        <button data-drawer-target="top-bar-sidebar" data-drawer-toggle="top-bar-sidebar" aria-controls="top-bar-sidebar" type="button" class="sm:hidden text-heading bg-transparent box-border border border-transparent hover:bg-neutral-secondary-medium focus:ring-4 focus:ring-neutral-tertiary font-medium leading-5 rounded-base text-sm p-2 focus:outline-none">
          <span class="sr-only">Ouvrir la sidebar</span>
          <svg class="w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
            <path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M5 7h14M5 12h14M5 17h10"/>
          </svg>
        </button>

        {# Logo et nom de l'application #}
        <a href="{{ path(role_dashboard_route(activeRole)) }}" class="flex ms-2 md:me-24 items-center">
          <img src="{{ appLogo }}" class="h-6 me-3" alt="{{ appName }} Logo" />
          <div class="flex flex-col">
            <span class="self-center text-lg font-semibold whitespace-nowrap text-heading">{{ appName }}</span>
            <span class="text-xs text-body-light hidden sm:block">v{{ app_version }}</span>
          </div>
        </a>
      </div>

      {# Section droite: Notifications + Dark Mode + Menu utilisateur #}
      <div class="flex items-center gap-3" data-controller="dark-mode">
        {# Bouton notifications #}
        <button type="button" data-dropdown-toggle="notification-dropdown" class="relative p-2 text-body hover:text-heading hover:bg-neutral-secondary-medium rounded-base focus:ring-4 focus:ring-neutral-tertiary focus:outline-none">
          <span class="sr-only">Voir les notifications</span>
          <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5.365V3m0 2.365a5.338 5.338 0 0 1 5.133 5.368v1.8c0 2.386 1.867 2.982 1.867 4.175 0 .593 0 1.292-.538 1.292H5.538C5 18 5 17.301 5 16.708c0-1.193 1.867-1.789 1.867-4.175v-1.8A5.338 5.338 0 0 1 12 5.365ZM8.733 18c.094.852.306 1.54.944 2.112a3.48 3.48 0 0 0 4.646 0c.638-.572 1.236-1.26 1.33-2.112h-6.92Z"/>
          </svg>
          {% if notificationCount > 0 %}
            <div class="absolute inline-flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-red-500 border-2 border-neutral-primary-soft rounded-full -top-1 -end-1">
              {{ notificationCount }}
            </div>
          {% endif %}
        </button>

        {# Dropdown notifications #}
        <div class="z-50 hidden max-w-sm bg-neutral-primary-medium border border-default-medium rounded-base shadow-lg" id="notification-dropdown">
          <div class="block px-4 py-2 font-medium text-center text-heading rounded-t-base bg-neutral-secondary-soft border-b border-default-medium">
            Notifications
          </div>
          <div class="divide-y divide-default-medium max-h-96 overflow-y-auto">
            {% if recentNotifications is not empty %}
              {% for notification in recentNotifications %}
                {% include 'components/_notification_item.html.twig' with {
                  notification: notification,
                  compact: true,
                  show_actions: true,
                  show_user: false
                } %}
              {% endfor %}
            {% else %}
              <div class="px-4 py-6 text-center text-body">
                <svg class="w-12 h-12 mx-auto mb-2 text-body-light" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5.365V3m0 2.365a5.338 5.338 0 0 1 5.133 5.368v1.8c0 2.386 1.867 2.982 1.867 4.175 0 .593 0 1.292-.538 1.292H5.538C5 18 5 17.301 5 16.708c0-1.193 1.867-1.789 1.867-4.175v-1.8A5.338 5.338 0 0 1 12 5.365ZM8.733 18c.094.852.306 1.54.944 2.112a3.48 3.48 0 0 0 4.646 0c.638-.572 1.236-1.26 1.33-2.112h-6.92Z"/>
                </svg>
                <p class="text-sm">Aucune notification</p>
              </div>
            {% endif %}
          </div>
          <a href="{{ path('notifications_index') }}" class="block py-2 text-sm font-medium text-center text-body hover:text-heading hover:bg-neutral-tertiary-medium rounded-b-base border-t border-default-medium">
            Voir toutes les notifications
          </a>
        </div>

        {# Bouton Dark/Light Mode Toggle #}
        <button type="button"
                data-action="dark-mode#toggle"
                data-dark-mode-target="button"
                class="relative p-2 text-body hover:text-heading hover:bg-neutral-secondary-medium rounded-base focus:ring-4 focus:ring-neutral-tertiary focus:outline-none transition-transform duration-300"
                aria-label="Basculer le mode sombre">
          <span class="sr-only">Basculer le mode sombre</span>

          {# Icône Soleil (visible en dark mode) #}
          <svg data-dark-mode-target="sunIcon"
               class="w-5 h-5 hidden"
               aria-hidden="true"
               xmlns="http://www.w3.org/2000/svg"
               width="24"
               height="24"
               fill="none"
               viewBox="0 0 24 24">
            <path stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M12 5V3m0 18v-2M7.05 7.05 5.636 5.636m12.728 12.728L16.95 16.95M5 12H3m18 0h-2M7.05 16.95l-1.414 1.414M18.364 5.636 16.95 7.05M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"/>
          </svg>

          {# Icône Lune (visible en light mode) #}
          <svg data-dark-mode-target="moonIcon"
               class="w-5 h-5"
               aria-hidden="true"
               xmlns="http://www.w3.org/2000/svg"
               width="24"
               height="24"
               fill="none"
               viewBox="0 0 24 24">
            <path stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M12 21a9 9 0 0 1-.5-17.986V3c-.354.966-.5 1.911-.5 3a9 9 0 0 0 9 9c1.239 0 2.24-.14 3-.396V15a9 9 0 0 1-11 6Z"/>
          </svg>
        </button>

        {# Menu utilisateur enrichi #}
        <div class="flex items-center ms-3">
          <div>
            <button type="button" class="flex items-center gap-2 text-sm bg-transparent rounded-full focus:ring-4 focus:ring-neutral-tertiary" aria-expanded="false" data-dropdown-toggle="dropdown-user">
              <span class="sr-only">Ouvrir le menu utilisateur</span>
              <img class="w-8 h-8 rounded-full" src="{{ userPhoto }}" alt="Photo de profil">
              <div class="hidden md:block text-left">
                <div class="text-sm font-medium text-heading">{{ userName }}</div>
                <div class="text-xs text-body">En ligne</div>
              </div>
              <svg class="w-4 h-4 text-body hidden md:block" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/>
              </svg>
            </button>
          </div>

          {# Dropdown menu utilisateur #}
          <div class="z-50 hidden bg-neutral-primary-medium border border-default-medium rounded-base shadow-lg w-56" id="dropdown-user">
            {# En-tête avec infos utilisateur #}
            <div class="px-4 py-3 border-b border-default-medium" role="none">
              <div class="flex items-center gap-3">
                <img class="w-10 h-10 rounded-full" src="{{ userPhoto }}" alt="Photo de profil">
                <div class="flex-1">
                  <p class="text-sm font-medium text-heading truncate" role="none">{{ userName }}</p>
                  <p class="text-xs text-body truncate" role="none">{{ userEmail }}</p>
                </div>
              </div>
            </div>

            {# Menu principal #}
            <ul class="p-2 text-sm text-body font-medium" role="none">
              <li>
                <a href="{{ path(role_dashboard_route(activeRole)) }}" class="inline-flex items-center gap-2 w-full px-3 py-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded" role="menuitem">
                  <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6.025A7.5 7.5 0 1 0 17.975 14H10V6.025Z"/>
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.5 3c-.169 0-.334.014-.5.025V11h7.975c.011-.166.025-.331.025-.5A7.5 7.5 0 0 0 13.5 3Z"/>
                  </svg>
                  Dashboard
                </a>
              </li>
              <li>
                <a href="{{ path('app_profile_view') }}" class="inline-flex items-center gap-2 w-full px-3 py-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded" role="menuitem">
                  <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 0a8.949 8.949 0 0 0 4.951-1.488A3.987 3.987 0 0 0 13 16h-2a3.987 3.987 0 0 0-3.951 3.512A8.948 8.948 0 0 0 12 21Zm3-11a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
                  </svg>
                  Mon profil
                </a>
              </li>
              <li>
                <a href="{{ path('app_profile_security') }}" class="inline-flex items-center gap-2 w-full px-3 py-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded" role="menuitem">
                  <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14v3m-3-6V7a3 3 0 1 1 6 0v4m-8 0h10a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1Z"/>
                  </svg>
                  Sécurité
                </a>
              </li>
              <li>
                <a href="{{ path('app_profile_change_password') }}" class="inline-flex items-center gap-2 w-full px-3 py-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded" role="menuitem">
                  <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14v3m4-6V7a3 3 0 1 1 6 0v4M5 11h10a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1Z"/>
                  </svg>
                  Changer le mot de passe
                </a>
              </li>
            </ul>

            {# Section déconnexion #}
            <div class="p-2 border-t border-default-medium">
              <a href="{{ path('app_logout') }}" class="inline-flex items-center gap-2 w-full px-3 py-2 text-fg-danger-strong hover:bg-danger-soft rounded" role="menuitem">
                <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12H4m12 0-4 4m4-4-4-4m3-4h2a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3h-2"/>
                </svg>
                Déconnexion
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>