{% set route = app.request.attributes.get('_route') %}
{# 'Comparer' (app_compare) masqué temporairement — fonctionnalité conservée (route + bouton « Comparer au stock » sur la fiche détail toujours actifs), seul le lien du menu est retiré. #}
{% set nav = [
    { route: 'app_home', label: 'Accueil' },
    { route: 'app_scan', label: 'Scanner', create: true },
    { route: 'app_inventaires', label: 'Inventaires' },
] %}
{% set desktopOnly = [] %}
{% set helpEmail = 'eric.masse@emilfrey.fr' %}

<header class="sticky top-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-200" data-controller="navbar">
    <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
        <a href="{{ path('app_home') }}" class="flex items-center gap-2.5 group focus:outline-none focus:ring-2 focus:ring-red-brand rounded-lg">
            <div class="w-8 h-8 bg-red-brand rounded-lg flex items-center justify-center group-hover:shadow-red-glow transition-shadow">
                <svg viewBox="0 0 24 24" fill="none" class="w-5 h-5 text-white" xmlns="http://www.w3.org/2000/svg">
                    <rect x="2" y="6" width="20" height="12" rx="2" stroke="currentColor" stroke-width="2"/>
                    <path d="M6 12h2M10 12h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                </svg>
            </div>
            <span class="font-display font-bold text-gray-900 text-lg tracking-tight">Scan Inventaire</span>
        </a>

        <ul class="hidden lg:flex items-center gap-1">
            {% for link in nav %}
                {% if link.create is not defined or is_granted('SCAN_CREATE') %}
                {% set active = route == link.route %}
                <li>
                    <a href="{{ path(link.route) }}" class="px-4 py-2 rounded-lg text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-red-brand {{ active ? 'bg-red-brand/10 text-red-brand' : 'text-gray-500 hover:text-gray-900 hover:bg-gray-100' }}">
                        {{ link.label }}                    </a>
                </li>
                {% endif %}
            {% endfor %}
            {% for link in desktopOnly %}
                {% set active = route == link.route %}
                <li class="hidden lg:block">
                    <a href="{{ path(link.route) }}" class="px-4 py-2 rounded-lg text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-red-brand {{ active ? 'bg-red-brand/10 text-red-brand' : 'text-gray-500 hover:text-gray-900 hover:bg-gray-100' }}">
                        {{ link.label }}                    </a>
                </li>
            {% endfor %}
            {% if is_granted('ROLE_AUDIT') %}
                {% set pendingCount = pending_users_count() %}
                <li>
                    <a href="{{ path('app_users') }}" class="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-red-brand {{ route == 'app_users' ? 'bg-red-brand/10 text-red-brand' : 'text-gray-500 hover:text-gray-900 hover:bg-gray-100' }}">
                        Utilisateurs
                        {% if pendingCount > 0 %}<span class="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[11px] font-bold rounded-full bg-red-600 text-white" title="{{ pendingCount }} demande(s) en attente">{{ pendingCount }}</span>{% endif %}
                    </a>
                </li>
                <li>
                    <a href="{{ path('app_journal') }}" class="px-4 py-2 rounded-lg text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-red-brand {{ route == 'app_journal' ? 'bg-red-brand/10 text-red-brand' : 'text-gray-500 hover:text-gray-900 hover:bg-gray-100' }}">
                        Journal</a>
                </li>
            {% endif %}
            {% if is_granted('ROLE_ADMIN') %}
                <li>
                    <a href="{{ path('app_param') }}" class="px-4 py-2 rounded-lg text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-red-brand {{ route == 'app_param' ? 'bg-red-brand/10 text-red-brand' : 'text-gray-500 hover:text-gray-900 hover:bg-gray-100' }}">
                        Paramètres                    </a>
                </li>
            {% endif %}
        </ul>

        <div class="hidden lg:flex items-center gap-3">
            <a href="{{ path('app_help') }}"
               title="Aide &amp; documentation"
               class="p-2 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-red-brand {{ route == 'app_help' ? 'bg-red-brand/10 text-red-brand' : 'text-gray-500 hover:text-gray-900 hover:bg-gray-100' }}">
                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span class="sr-only">Aide</span>
            </a>
            {% if app.user %}
                <div class="flex items-center gap-2 px-3 py-1.5 bg-gray-100 rounded-lg border border-gray-200">
                    <div class="w-6 h-6 bg-red-brand/20 border border-red-brand/30 rounded-full flex items-center justify-center">
                        <span class="text-red-brand text-xs font-bold">{{ app.user.userIdentifier|first|upper }}</span>
                    </div>
                    <span class="hidden xl:inline text-gray-700 text-xs font-medium truncate max-w-[140px]">{{ app.user.userIdentifier }}</span>
                </div>
                <a href="{{ path('app_logout') }}" title="Se déconnecter" class="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-red-brand">
                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
                    </svg>
                </a>
            {% endif %}
            {% if is_granted('SCAN_CREATE') %}
            <a href="{{ path('app_scan') }}" class="hidden xl:inline-flex items-center gap-2 px-4 py-2 bg-red-brand text-white text-sm font-medium rounded-xl hover:bg-red-brand-dark hover:shadow-red-glow transition-all active:scale-95 focus:outline-none focus:ring-2 focus:ring-red-brand focus:ring-offset-2 focus:ring-offset-white">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
                Nouveau scan
            </a>
            {% endif %}
        </div>

        <button class="lg:hidden p-2 text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-red-brand rounded-lg" data-action="navbar#toggle" aria-label="Menu">
            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
        </button>
    </nav>

    <div class="lg:hidden bg-white border-t border-gray-200 px-4 py-3 space-y-1 hidden" data-navbar-target="menu">
        {% for link in nav %}
            {% if link.create is not defined or is_granted('SCAN_CREATE') %}
            {% set active = route == link.route %}
            <a href="{{ path(link.route) }}" class="block px-4 py-2.5 rounded-lg text-sm font-medium transition-colors {{ active ? 'bg-red-brand/10 text-red-brand' : 'text-gray-500 hover:text-gray-900 hover:bg-gray-100' }}">{{ link.label }}</a>
            {% endif %}
        {% endfor %}
        {% if is_granted('ROLE_AUDIT') %}
            {% set pendingCountM = pending_users_count() %}
            <a href="{{ path('app_users') }}" class="flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium transition-colors {{ route == 'app_users' ? 'bg-red-brand/10 text-red-brand' : 'text-gray-500 hover:text-gray-900 hover:bg-gray-100' }}">
                Utilisateurs
                {% if pendingCountM > 0 %}<span class="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[11px] font-bold rounded-full bg-red-600 text-white">{{ pendingCountM }}</span>{% endif %}
            </a>
            <a href="{{ path('app_journal') }}" class="block px-4 py-2.5 rounded-lg text-sm font-medium transition-colors {{ route == 'app_journal' ? 'bg-red-brand/10 text-red-brand' : 'text-gray-500 hover:text-gray-900 hover:bg-gray-100' }}">Journal</a>
        {% endif %}
        {% if is_granted('ROLE_ADMIN') %}
            <a href="{{ path('app_param') }}" class="block px-4 py-2.5 rounded-lg text-sm font-medium transition-colors {{ route == 'app_param' ? 'bg-red-brand/10 text-red-brand' : 'text-gray-500 hover:text-gray-900 hover:bg-gray-100' }}">Paramètres</a>
        {% endif %}
        {% if is_granted('SCAN_CREATE') %}
        <a href="{{ path('app_scan') }}" class="block mt-2 px-4 py-2.5 bg-red-brand text-white text-sm font-medium rounded-xl text-center">Nouveau scan</a>
        {% endif %}
        <a href="{{ path('app_help') }}" class="flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium transition-colors {{ route == 'app_help' ? 'bg-red-brand/10 text-red-brand' : 'text-gray-500 hover:text-gray-900 hover:bg-gray-100' }}">
            <svg class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
            Aide &amp; documentation
        </a>
        {% if app.user %}
            <div class="pt-2 border-t border-gray-200 mt-2">
                <div class="px-4 py-2 text-xs text-gray-500 truncate">{{ app.user.userIdentifier }}</div>
                <a href="{{ path('app_logout') }}" class="block w-full text-left px-4 py-2.5 text-sm text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors">Se déconnecter</a>
            </div>
        {% endif %}
    </div>
</header>
