@php
    $user = auth()->user();
    $dashboardRoute =
        Route::has('platform.dashboard') && method_exists($user, 'isMpbaPlatformAdmin') && $user?->isMpbaPlatformAdmin()
            ? '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 items-center justify-between px-4 lg:px-6">
        <div class="flex min-w-0 items-center gap-3">
            <button type="button"
                class="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-white/10 bg-white/5 text-white lg:hidden"
                data-wms-mobile-open aria-label="{{ __('Open navigation menu') }}" aria-controls="wms-main-sidebar"
                aria-expanded="false">
                <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="min-w-0">
                    <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 class="relative 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-3 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]"
                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 sm:block">
                    <span class="block text-sm font-semibold text-white">{{ $user?->name ?? __('User') }}</span>
                    <span class="block 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-72 overflow-hidden rounded-2xl border border-white/10 bg-[#181820] shadow-2xl shadow-black/40"
                role="menu">
                <div class="border-b border-white/10 px-4 py-3">
                    <div class="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>