@props(['title' => null])

@php
    $user = auth()->user();
    $displayName = $user?->displayName() ?? config('app.name');
    $iniciales = collect(preg_split('/\s+/', trim($displayName)))
        ->filter()
        ->take(2)
        ->map(fn ($p) => mb_strtoupper(mb_substr($p, 0, 1)))
        ->implode('');
@endphp

<header class="admin-topbar sticky top-0 z-30 flex h-14 items-center gap-3 px-4 sm:px-6">
    <button
        type="button"
        aria-label="Abrir menú"
        @click="sidebarOpen = true"
        class="inline-flex h-9 w-9 items-center justify-center rounded-md text-mute lg:hidden"
    >
        <x-icon name="menu" />
    </button>

    <h1 class="truncate font-heading text-base font-semibold sm:text-lg">{{ $title ?? config('app.name') }}</h1>

    <div class="ml-auto flex items-center gap-2">
        <x-layout.theme-toggle />

        @if ($user)
            <div class="relative" @click.outside="userMenuOpen = false">
                <button
                    type="button"
                    aria-haspopup="menu"
                    @click="userMenuOpen = !userMenuOpen"
                    class="flex items-center gap-2 rounded-md py-1 pl-1.5 pr-1"
                >
                    <span class="admin-avatar">{{ $iniciales }}</span>
                    <span class="hidden flex-col items-start leading-tight sm:flex">
                        <span class="text-sm font-medium">{{ $displayName }}</span>
                        <span class="text-xs text-mute">Administrador</span>
                    </span>
                    <span class="hidden text-faint sm:block">
                        <x-icon name="chevron" class="h-4 w-4" />
                    </span>
                </button>
                <ul
                    x-show="userMenuOpen"
                    x-cloak
                    role="menu"
                    class="user-menu absolute right-0 top-full z-20 mt-1.5 w-56 p-1.5"
                >
                    <li role="none">
                        <a href="{{ route('admin.change-password') }}" role="menuitem" class="user-menu-item">
                            Cambiar mi contraseña
                        </a>
                    </li>
                    <li role="none">
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <button type="submit" role="menuitem" class="user-menu-item">
                                Cerrar sesión
                            </button>
                        </form>
                    </li>
                </ul>
            </div>
        @endif
    </div>
</header>