@php
    $user = auth()->user();
    $notifier = app(\App\Services\Notifier::class);
    $unread = $user ? $notifier->unreadCountFor($user) : 0;
@endphp

<header class="app-header no-print sticky top-0 z-30 border-b border-slate-200 bg-white/90 backdrop-blur dark:border-slate-800 dark:bg-slate-900/90">
    <div class="flex h-14 items-center gap-3 px-4 sm:px-6 lg:px-8">

        {{-- Global jump box: staff search by shop name, owner or invoice number. --}}
        <div class="hidden flex-1 sm:block sm:max-w-sm">
            <form method="GET" action="{{ route('tenants.index') }}" class="relative">
                <x-ui.icon name="search" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
                <input type="search" name="q" placeholder="Find a shop, owner or phone…"
                       class="field-input pl-9" value="{{ request('q') }}">
            </form>
        </div>

        <div class="ml-auto flex items-center gap-1">

            @if ($user?->canVerifyPayments())
                <a href="{{ route('payments.queue') }}" wire:navigate class="btn btn-primary btn-sm">
                    <x-ui.icon name="inbox" class="h-4 w-4" />
                    <span class="hidden sm:inline">Queue</span>
                </a>
            @endif

            {{-- Theme switch --}}
            <div x-data="{ open: false }" class="relative">
                <button type="button" @click="open = !open" class="btn btn-ghost btn-sm" aria-label="Theme">
                    <x-ui.icon name="palette" class="h-4 w-4" />
                </button>

                <div x-show="open" x-cloak @click.outside="open = false" class="card absolute right-0 mt-2 w-40 p-1 shadow-lg">
                    @foreach (['light' => 'Light', 'dark' => 'Dark', 'system' => 'Match system'] as $mode => $label)
                        <button type="button"
                                @click="window.thinkraxSetTheme('{{ $mode }}'); open = false"
                                class="flex w-full items-center gap-2 rounded px-3 py-2 text-left text-sm hover:bg-slate-100 dark:hover:bg-slate-800">
                            {{ $label }}
                        </button>
                    @endforeach
                </div>
            </div>

            {{-- Notifications --}}
            <a href="{{ route('notifications.index') }}" wire:navigate class="btn btn-ghost btn-sm relative" aria-label="Notifications">
                <x-ui.icon name="bell" class="h-4 w-4" />

                @if ($unread > 0)
                    <span class="absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-bold text-white">
                        {{ $unread > 99 ? '99+' : $unread }}
                    </span>
                @endif
            </a>

            {{-- Account --}}
            <div x-data="{ open: false }" class="relative">
                <button type="button" @click="open = !open"
                        class="flex items-center gap-2 rounded-lg px-2 py-1.5 hover:bg-slate-100 dark:hover:bg-slate-800">
                    <x-ui.avatar :src="$user?->avatar_url" :name="$user?->name ?? '?'" size="8" />
                    <span class="hidden text-left sm:block">
                        <span class="block text-xs font-semibold leading-tight text-slate-800 dark:text-slate-100">{{ $user?->name }}</span>
                        <span class="block text-[11px] leading-tight text-slate-500">{{ $user?->roleLabel() }}</span>
                    </span>
                    <x-ui.icon name="chevron-down" class="h-3.5 w-3.5 text-slate-400" />
                </button>

                <div x-show="open" x-cloak @click.outside="open = false" class="card absolute right-0 mt-2 w-56 p-1 shadow-lg">
                    <div class="border-b border-slate-100 px-3 py-2 dark:border-slate-800">
                        <p class="truncate text-sm font-semibold text-slate-800 dark:text-slate-100">{{ $user?->name }}</p>
                        <p class="truncate text-xs text-slate-500">{{ $user?->email }}</p>
                    </div>

                    <a href="{{ route('profile') }}" wire:navigate
                       class="flex items-center gap-2 rounded px-3 py-2 text-sm hover:bg-slate-100 dark:hover:bg-slate-800">
                        <x-ui.icon name="user-cog" class="h-4 w-4" /> My profile
                    </a>

                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit"
                                class="flex w-full items-center gap-2 rounded px-3 py-2 text-left text-sm text-red-600 hover:bg-red-50 dark:hover:bg-red-950">
                            <x-ui.icon name="logout" class="h-4 w-4" /> Sign out
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</header>