{# ───────────────────────────────────────────────────────────────────────────
   Barre de navigation.

   Trois zones seulement, pour qu'elle reste lisible : l'identité à gauche,
   le contenu au centre, l'utilisateur à droite. Tout ce qui relève du compte
   (playlists, administration, déconnexion) vit dans le menu de l'avatar
   plutôt qu'en vrac dans la barre, et la recherche est repliée derrière son
   icône — elle n'est utile qu'au moment où on la cherche.

   Les liens secondaires (Contact, mentions légales, flux RSS) sont dans le
   pied de page : les répéter ici ne servait qu'à charger la barre.
   ─────────────────────────────────────────────────────────────────────────── #}
{% set route = app.request.attributes.get('_route') %}
{% set nav_links = [
    {route: 'app_podcasts', label: 'Conférences', actif: ['app_podcasts', 'app_podcast_show', 'app_listen']},
    {route: 'app_videos',   label: 'Vidéos',      actif: ['app_videos']},
    {route: 'app_themes',   label: 'Thèmes',      actif: ['app_themes', 'app_theme_show']},
    {route: 'app_about',    label: 'Biographie',  actif: ['app_about']}
] %}

<header class="sticky top-0 z-30 border-b border-night-700/50 bg-night-950/80 backdrop-blur-xl">
    <nav class="mx-auto flex max-w-6xl items-center gap-4 px-4 py-3">

        {# ——— Identité ——— #}
        <a href="{{ path('app_home') }}" class="flex shrink-0 items-center gap-3">
            <span class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-gradient-to-br from-gold-600 to-gold-300 font-display text-lg font-bold text-night-950">SSM</span>
            <span class="hidden whitespace-nowrap font-display text-lg font-semibold tracking-wide sm:inline-block">Serigne Sam Mbaye</span>
        </a>

        {# ——— Contenu ——— #}
        <div class="hidden flex-1 items-center justify-center gap-6 lg:flex">
            {% for link in nav_links %}
                <a class="nav-link" href="{{ path(link.route) }}"
                   {{ route in link.actif ? 'aria-current="page"' }}>{{ link.label }}</a>
            {% endfor %}
        </div>

        {# ——— Utilisateur ——— #}
        <div class="ml-auto hidden items-center gap-2 lg:flex">
            <form action="{{ path('app_search') }}" method="get" role="search"
                  class="flex items-center" data-nav-search>
                <input class="field !w-0 !border-transparent !bg-transparent !p-0 text-sm opacity-0 transition-all duration-200"
                       type="search" name="q" placeholder="Rechercher…"
                       value="{{ app.request.query.get('q') }}"
                       aria-label="Rechercher une conférence" data-nav-search-input tabindex="-1">
                <button type="button" class="pp-btn h-9 w-9" data-nav-search-toggle
                        aria-label="Rechercher" aria-expanded="false">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="h-[18px] w-[18px]" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
                </button>
            </form>

            {% if app.user %}
                <div class="relative" data-nav-user>
                    <button type="button" class="flex items-center gap-2 rounded-full border border-night-700 py-1 pl-1 pr-2.5 transition hover:border-gold-600/50"
                            data-nav-user-toggle aria-haspopup="true" aria-expanded="false">
                        {% if app.user.avatarUrl %}
                            <img src="{{ app.user.avatarUrl }}" alt="" referrerpolicy="no-referrer"
                                 class="h-7 w-7 rounded-full object-cover">
                        {% else %}
                            <span class="grid h-7 w-7 place-items-center rounded-full bg-gradient-to-br from-gold-600 to-gold-300 text-xs font-bold text-night-950">
                                {{ app.user.displayName|slice(0, 1)|upper }}
                            </span>
                        {% endif %}
                        <span class="max-w-[8rem] truncate text-sm text-sand">{{ app.user.displayName }}</span>
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5 text-sand-dim" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>
                    </button>

                    <div class="pp-menu hidden !bottom-auto !top-[calc(100%+8px)] !min-w-[220px]" data-nav-user-menu>
                        <a class="pp-menu-item" href="{{ path('app_profile') }}">Mon compte</a>
                        <a class="pp-menu-item" href="{{ path('app_playlists') }}">Mes playlists</a>
                        {% if is_granted('ROLE_ADMIN') %}
                            <a class="pp-menu-item" href="{{ path('admin_dashboard') }}">Administration</a>
                        {% endif %}
                        <a class="pp-menu-item text-red-300" href="{{ path('app_logout') }}">Déconnexion</a>
                    </div>
                </div>
            {% else %}
                <a class="btn-gold !px-4 !py-2 text-sm" href="{{ path('app_login') }}">Connexion</a>
            {% endif %}
        </div>

        <button id="nav-burger" class="btn-ghost !px-3 !py-2 ml-auto lg:hidden"
                aria-expanded="false" aria-controls="nav-mobile" aria-label="Menu">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" class="h-5 w-5" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
        </button>
    </nav>

    {# ——— Menu mobile ——— #}
    <div id="nav-mobile" class="hidden border-t border-night-700/50 px-4 py-4 lg:hidden">
        <form action="{{ path('app_search') }}" method="get" class="relative">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-sand-dim" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
            <input class="field !pl-8 text-sm" type="search" name="q" placeholder="Rechercher une conférence…"
                   value="{{ app.request.query.get('q') }}">
        </form>

        <div class="mt-4 flex flex-col gap-3">
            {% for link in nav_links %}
                <a class="nav-link" href="{{ path(link.route) }}"
                   {{ route in link.actif ? 'aria-current="page"' }}>{{ link.label }}</a>
            {% endfor %}
            <a class="nav-link" href="{{ path('app_contact') }}">Contact</a>
        </div>

        <div class="mt-4 border-t border-night-700/50 pt-4">
            {% if app.user %}
                <p class="mb-3 truncate text-xs uppercase tracking-wider text-sand-dim">{{ app.user.displayName }}</p>
                <div class="flex flex-col gap-3">
                    <a class="nav-link" href="{{ path('app_profile') }}">Mon compte</a>
                    <a class="nav-link" href="{{ path('app_playlists') }}">Mes playlists</a>
                    {% if is_granted('ROLE_ADMIN') %}
                        <a class="nav-link" href="{{ path('admin_dashboard') }}">Administration</a>
                    {% endif %}
                    <a class="nav-link text-red-300" href="{{ path('app_logout') }}">Déconnexion</a>
                </div>
            {% else %}
                <a class="btn-gold w-full text-sm" href="{{ path('app_login') }}">Connexion</a>
            {% endif %}
        </div>
    </div>

    <script>
        (function () {
            if (window.__navToggleInitialized) return;
            window.__navToggleInitialized = true;

            function hide(el) { if (el) el.classList.add('hidden'); }

            function closeMobileNav() {
                var burger = document.getElementById('nav-burger');
                var menu = document.getElementById('nav-mobile');
                if (!burger || !menu) return;
                hide(menu);
                burger.setAttribute('aria-expanded', 'false');
            }

            function closeUserMenu() {
                var menu = document.querySelector('[data-nav-user-menu]');
                var toggle = document.querySelector('[data-nav-user-toggle]');
                hide(menu);
                if (toggle) toggle.setAttribute('aria-expanded', 'false');
            }

            function closeSearch() {
                var input = document.querySelector('[data-nav-search-input]');
                var toggle = document.querySelector('[data-nav-search-toggle]');
                if (!input) return;
                // Une recherche en cours de saisie ne doit pas disparaître sous
                // les doigts : on ne referme que si le champ est vide.
                if (input.value.trim()) return;
                input.classList.add('!w-0', '!p-0', 'opacity-0', '!border-transparent', '!bg-transparent');
                input.tabIndex = -1;
                if (toggle) toggle.setAttribute('aria-expanded', 'false');
            }

            document.addEventListener('click', function (event) {
                var burger = event.target.closest('#nav-burger');
                if (burger) {
                    var menu = document.getElementById('nav-mobile');
                    if (menu) {
                        var isHidden = menu.classList.toggle('hidden');
                        burger.setAttribute('aria-expanded', isHidden ? 'false' : 'true');
                    }
                    return;
                }

                var searchToggle = event.target.closest('[data-nav-search-toggle]');
                if (searchToggle) {
                    var input = document.querySelector('[data-nav-search-input]');
                    if (!input) return;
                    var collapsed = input.classList.contains('!w-0');
                    if (collapsed) {
                        input.classList.remove('!w-0', '!p-0', 'opacity-0', '!border-transparent', '!bg-transparent');
                        input.classList.add('!w-44');
                        input.tabIndex = 0;
                        input.focus();
                        searchToggle.setAttribute('aria-expanded', 'true');
                    } else if (input.value.trim()) {
                        input.form.submit();
                    } else {
                        input.classList.remove('!w-44');
                        closeSearch();
                    }
                    return;
                }

                var userToggle = event.target.closest('[data-nav-user-toggle]');
                if (userToggle) {
                    var userMenu = document.querySelector('[data-nav-user-menu]');
                    if (userMenu) {
                        var wasHidden = userMenu.classList.toggle('hidden');
                        userToggle.setAttribute('aria-expanded', wasHidden ? 'false' : 'true');
                    }
                    return;
                }

                // Clic ailleurs : on referme ce qui est ouvert.
                if (!event.target.closest('[data-nav-user]')) closeUserMenu();
                if (!event.target.closest('[data-nav-search]')) {
                    var searchInput = document.querySelector('[data-nav-search-input]');
                    if (searchInput) searchInput.classList.remove('!w-44');
                    closeSearch();
                }

                var mobile = document.getElementById('nav-mobile');
                if (mobile && !mobile.classList.contains('hidden')) {
                    var insideMenu = event.target.closest('#nav-mobile');
                    if (!insideMenu || event.target.closest('a')) closeMobileNav();
                }
            });

            document.addEventListener('keydown', function (event) {
                if (event.key === 'Escape') {
                    closeUserMenu();
                    closeMobileNav();
                }
            });

            window.addEventListener('resize', function () {
                if (window.innerWidth >= 1024) closeMobileNav();
                else closeUserMenu();
            });
        })();
    </script>
</header>