{{-- Shared Application Top Bar --}}
@php
    $user = auth()->user();
    $isPlatformAdmin = $user !== null
        && method_exists($user, 'isMpbaPlatformAdmin')
        && $user->isMpbaPlatformAdmin();

    $dashboardRoute = Route::has('platform.dashboard') && $isPlatformAdmin
        ? 'platform.dashboard'
        : (Route::has('dashboard') ? 'dashboard' : null);
@endphp

<header class="sticky top-0 z-40 border-b border-white/10 bg-[#111118]/95 backdrop-blur" role="banner">
    <div class="flex h-16 w-full items-center justify-between gap-3 px-3 sm:px-4 lg:px-6">
        <div class="flex min-w-0 items-center gap-3 lg:hidden">
            <button type="button"
                class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-white/10 bg-white/5 text-white transition hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-[#111118] lg:hidden"
                data-wms-mobile-open aria-label="{{ __('Open navigation menu') }}" aria-controls="wms-main-sidebar"
                aria-expanded="false" data-test="mobile-menu-button">
                <i class="fa-solid fa-bars" aria-hidden="true"></i>
            </button>

            <a href="{{ $dashboardRoute ? route($dashboardRoute) : '#' }}" wire:navigate
                class="flex min-w-0 items-center gap-3" aria-label="{{ __('Warehouse Management System') }}">
                <span
                    class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-cyan-600 text-sm font-bold text-white shadow-lg shadow-cyan-950/40">
                    W
                </span>

                <span class="hidden min-w-0 sm:block">
                    <span class="block truncate text-sm font-semibold text-white sm:text-base">
                        {{ __('Warehouse Management System') }}
                    </span>
                    <span class="block text-xs font-semibold uppercase tracking-wide text-cyan-400">
                        MPBA
                    </span>
                </span>
            </a>
        </div>

        <div id="userControls" class="relative ml-auto flex shrink-0 items-center gap-3" x-data="{ open: false }"
            x-on:keydown.escape.window="open = false">
            <button type="button"
                class="flex items-center gap-3 rounded-2xl border border-white/10 bg-white/5 px-2 py-2 text-left transition hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-[#111118] sm:px-3"
                x-on:click="open = ! open" x-bind:aria-expanded="open.toString()" aria-haspopup="menu"
                data-test="top-user-menu-button">
                <span class="hidden text-right md:block">
                    <span
                        class="block max-w-48 truncate text-sm font-semibold text-white">{{ $user?->name ?? __('User') }}</span>
                    <span class="block max-w-48 truncate text-xs text-white/50">{{ $user?->email ?? '' }}</span>
                </span>

                <span
                    class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-700 text-xs font-bold text-white shadow-lg shadow-blue-950/40">
                    {{ $user?->initials() ?? 'U' }}
                </span>

                <i class="fa-solid fa-chevron-down hidden text-white/50 sm:block" aria-hidden="true"></i>
            </button>

            <div x-cloak x-show="open" x-transition.origin.top.right x-on:click.outside="open = false"
                class="absolute right-0 top-full mt-2 w-[calc(100vw-1.5rem)] max-w-72 overflow-hidden rounded-2xl border border-white/10 bg-[#181820] shadow-2xl shadow-black/40 sm:w-72"
                role="menu">
                <div class="border-b border-white/10 px-4 py-3">
                    <div class="truncate text-sm font-semibold text-white">{{ $user?->name ?? __('User') }}</div>
                    <div class="truncate text-xs text-white/50">{{ $user?->email ?? '' }}</div>
                </div>

                <div class="p-2">
                    @if ($dashboardRoute)
                        <a href="{{ route($dashboardRoute) }}" wire:navigate
                            class="block rounded-xl px-3 py-2 text-sm text-white/80 hover:bg-white/10 hover:text-white"
                            role="menuitem">
                            {{ __('Dashboard') }}
                        </a>
                    @endif

                    @if (Route::has('profile.edit'))
                        <a href="{{ route('profile.edit') }}" wire:navigate
                            class="block rounded-xl px-3 py-2 text-sm text-white/80 hover:bg-white/10 hover:text-white"
                            role="menuitem">
                            {{ __('Profile') }}
                        </a>
                    @endif

                    @if (Route::has('settings.index'))
                        <a href="{{ route('settings.index') }}" wire:navigate
                            class="block rounded-xl px-3 py-2 text-sm text-white/80 hover:bg-white/10 hover:text-white"
                            role="menuitem">
                            {{ __('Settings') }}
                        </a>
                    @endif

                    <form method="POST" action="{{ route('logout') }}" class="mt-2 border-t border-white/10 pt-2">
                        @csrf
                        <button type="submit"
                            class="w-full rounded-xl px-3 py-2 text-left text-sm text-red-300 hover:bg-red-500/10 hover:text-red-200"
                            role="menuitem" data-test="logout-button">
                            {{ __('Sign out') }}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</header>