@php
    $usuarioLogado = auth()->user();

    $tipoUsuario = $usuarioLogado->tipo?->label()
        ?? 'Usuário';
@endphp

<header class="app-topbar">
    <div class="app-page app-topbar-inner">
        <div class="flex min-w-0 items-center gap-3">
            <button
                type="button"
                class="app-topbar-menu-button lg:hidden"
                @click="sidebarOpen = true"
                aria-label="Abrir menu"
            >
                <svg
                    class="h-5 w-5"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    aria-hidden="true"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M4 6h16M4 12h16M4 18h16"
                    />
                </svg>
            </button>

            <div class="min-w-0">
                <p class="app-topbar-eyebrow">
                    Área interna
                </p>

                <div class="flex min-w-0 items-center gap-2">
                    <span class="truncate text-sm font-bold text-slate-800">
                        {{ $tipoUsuario }}
                    </span>

                    <span
                        class="hidden h-1 w-1 rounded-full bg-slate-300 sm:block"
                        aria-hidden="true"
                    ></span>

                    <span class="hidden truncate text-xs text-slate-500 sm:block">
                        Ambiente administrativo
                    </span>
                </div>
            </div>
        </div>

        <div class="flex items-center gap-2 sm:gap-3">
            <div
                x-data="{ profileOpen: false }"
                @keydown.escape.window="profileOpen = false"
                class="relative"
            >
                <button
                    type="button"
                    class="app-profile-button"
                    @click="profileOpen = ! profileOpen"
                    :aria-expanded="profileOpen"
                    aria-haspopup="menu"
                >
                    <img
                        src="{{ $usuarioLogado->profile_photo_url }}"
                        alt="{{ $usuarioLogado->name }}"
                        class="app-profile-photo"
                    >

                    <span class="hidden min-w-0 text-left sm:block">
                        <span class="block max-w-44 truncate text-sm font-bold text-slate-800">
                            {{ $usuarioLogado->name }}
                        </span>

                        <span class="mt-0.5 block max-w-44 truncate text-xs text-slate-500">
                            {{ $usuarioLogado->email }}
                        </span>
                    </span>

                    <svg
                        class="hidden h-4 w-4 flex-none text-slate-400 transition-transform sm:block"
                        :class="profileOpen ? 'rotate-180' : ''"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke="currentColor"
                        aria-hidden="true"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            stroke-width="2"
                            d="m6 9 6 6 6-6"
                        />
                    </svg>
                </button>

                <div
                    x-cloak
                    x-show="profileOpen"
                    x-transition:enter="transition ease-out duration-150"
                    x-transition:enter-start="opacity-0 translate-y-1 scale-95"
                    x-transition:enter-end="opacity-100 translate-y-0 scale-100"
                    x-transition:leave="transition ease-in duration-100"
                    x-transition:leave-start="opacity-100 translate-y-0 scale-100"
                    x-transition:leave-end="opacity-0 translate-y-1 scale-95"
                    @click.outside="profileOpen = false"
                    class="app-profile-menu"
                    role="menu"
                >
                    <div class="app-profile-menu-header">
                        <div class="flex items-center gap-3">
                            <img
                                src="{{ $usuarioLogado->profile_photo_url }}"
                                alt=""
                                class="h-11 w-11 rounded-xl object-cover ring-1 ring-slate-200"
                            >

                            <div class="min-w-0">
                                <div class="truncate text-sm font-bold text-slate-900">
                                    {{ $usuarioLogado->name }}
                                </div>

                                <div class="mt-0.5 truncate text-xs text-slate-500">
                                    {{ $usuarioLogado->email }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="p-2">
                        @if (Route::has('profile.show'))
                            <a
                                href="{{ route('profile.show') }}"
                                class="app-profile-menu-link"
                                role="menuitem"
                                @click="profileOpen = false"
                            >
                                <svg
                                    class="h-5 w-5 text-slate-400"
                                    fill="none"
                                    viewBox="0 0 24 24"
                                    stroke="currentColor"
                                    aria-hidden="true"
                                >
                                    <path
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        stroke-width="1.8"
                                        d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.5 20.118a7.5 7.5 0 0 1 15 0A17.933 17.933 0 0 1 12 21.75a17.933 17.933 0 0 1-7.5-1.632Z"
                                    />
                                </svg>

                                <span>
                                    Perfil e segurança
                                </span>
                            </a>
                        @endif
                    </div>

                    <div class="border-t border-slate-100 p-2">
                        <form
                            method="POST"
                            action="{{ route('logout') }}"
                        >
                            @csrf

                            <button
                                type="submit"
                                data-loading-text="Saindo..."
                                class="app-profile-menu-link app-profile-menu-link-danger w-full"
                                role="menuitem"
                            >
                                <svg
                                    class="h-5 w-5"
                                    fill="none"
                                    viewBox="0 0 24 24"
                                    stroke="currentColor"
                                    aria-hidden="true"
                                >
                                    <path
                                        stroke-linecap="round"
                                        stroke-linejoin="round"
                                        stroke-width="1.8"
                                        d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6A2.25 2.25 0 0 0 5.25 5.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3-3H9m9.75 0-3-3m3 3-3 3"
                                    />
                                </svg>

                                <span>
                                    Sair do sistema
                                </span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>