@php
    $user = auth()->user();
    $userName = $user
        ? (method_exists($user, 'getDisplayName') ? $user->getDisplayName() : ($user->email ?? '#' . $user->getKey()))
        : null;
@endphp

<header class="dash-topbar">
    {{-- Start: mobile menu + page title --}}
    <div class="flex min-w-0 items-center gap-2">
        <button type="button"
                class="dash-topbar-chip dash-topbar-chip--icon lg:hidden"
                x-on:click="$dispatch('open-sidebar')"
                aria-label="{{ __('dashboard::dashboard.actions.back') }}">
            <flux:icon icon="bars-3" class="size-4"/>
        </button>

        <h2 class="dash-topbar-title">
            {{ $title ?? config('dashboard.brand_name') }}
        </h2>
    </div>

    {{-- End: single glass cluster hosting every action. Spotlight (CSS
         ::before) tracks the cursor via --mx/--my for a premium feel. --}}
    <div class="dash-topbar-cluster"
         x-data
         x-on:mousemove="
             const r = $el.getBoundingClientRect();
             $el.style.setProperty('--mx', ($event.clientX - r.left) + 'px');
             $el.style.setProperty('--my', ($event.clientY - r.top) + 'px');
         ">
        {{-- Preferences group --}}
        <x-dashboard::lang-toggle class="dash-topbar-chip"/>
        <x-dashboard::theme-toggle class="dash-topbar-chip dash-topbar-chip--icon"/>

        <span class="dash-topbar-cluster-divider" aria-hidden="true"></span>

        {{-- Action group: peek-blur toggle --}}
        <button type="button"
                x-data="{ blurred: document.body.classList.contains('dash-main-blurred') }"
                x-on:click="blurred = !blurred; document.body.classList.toggle('dash-main-blurred', blurred)"
                :class="'dash-topbar-chip dash-topbar-chip--icon' + (blurred ? ' is-peeking' : '')"
                :aria-pressed="blurred.toString()"
                aria-label="{{ __('dashboard::dashboard.auth.peek_blur') }}"
                title="{{ __('dashboard::dashboard.auth.peek_blur') }}">
            <flux:icon icon="eye-slash" class="size-4" x-show="!blurred"/>
            <flux:icon icon="eye" class="size-4" x-show="blurred" x-cloak/>
        </button>

        <span class="dash-topbar-cluster-divider" aria-hidden="true"></span>

        {{-- User group --}}
        <flux:dropdown align="end">
            <button type="button"
                    class="dash-topbar-chip dash-topbar-chip--icon"
                    aria-label="{{ __('dashboard::dashboard.auth.notifications') }}">
                <flux:icon icon="bell" class="size-4"/>
                {{-- Uncomment when wiring real notifications:
                <span class="dash-topbar-dot" aria-hidden="true"></span>
                --}}
            </button>

            <flux:menu class="min-w-64">
                <div class="px-3 py-2 text-xs font-semibold uppercase tracking-wider"
                     style="color: var(--muted-foreground);">
                    {{ __('dashboard::dashboard.auth.notifications') }}
                </div>
                <flux:menu.separator/>
                <div class="px-3 py-6 text-center text-sm" style="color: var(--muted-foreground);">
                    {{ __('dashboard::dashboard.auth.no_notifications') }}
                </div>
            </flux:menu>
        </flux:dropdown>

        @if ($user)
            <flux:dropdown align="end">
                <button type="button"
                        class="dash-topbar-chip dash-topbar-chip--icon"
                        aria-label="{{ __('dashboard::dashboard.auth.account') }}">
                    <flux:icon icon="user-circle" class="size-5"/>
                </button>

                <flux:menu class="min-w-56">
                    <div class="px-3 py-2">
                        <div class="text-xs font-semibold uppercase tracking-wider"
                             style="color: var(--muted-foreground);">
                            {{ __('dashboard::dashboard.auth.account') }}
                        </div>
                        <div class="mt-0.5 truncate text-sm font-semibold"
                             style="color: var(--surface-foreground);">
                            {{ $userName }}
                        </div>
                    </div>
                    <flux:menu.separator/>
                    <form method="POST" action="{{ route('dashboard.logout') }}">
                        @csrf
                        <flux:menu.item as="button" type="submit" icon="arrow-right-start-on-rectangle">
                            {{ __('dashboard::dashboard.auth.logout') }}
                        </flux:menu.item>
                    </form>
                </flux:menu>
            </flux:dropdown>
        @endif
    </div>
</header>