@php
    $u = auth()->user();
    $bellTones = [
        'success' => 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300',
        'warning' => 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',
        'error'   => 'bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300',
        'info'    => 'bg-brand-100 text-brand-700 dark:bg-brand-900/40 dark:text-brand-300',
    ];
    $bellItems = $u ? $u->notifications()->take(8)->get() : collect();
    $bellRows = $bellItems->map(function ($n) use ($bellTones) {
        $level = $n->data['level'] ?? 'info';
        return [
            'n'     => $n,
            'tone'  => $bellTones[$level] ?? $bellTones['info'],
            'icon'  => $n->data['icon'] ?? 'bell',
            'href'  => $n->data['url'] ?? route('notifications.index'),
            'title' => $n->data['title'] ?? __('Notification'),
            'msg'   => $n->data['message'] ?? '',
        ];
    });
@endphp

@if(session()->has('impersonating_tenant_id'))
    <div class="bg-amber-500 text-amber-950 text-sm px-4 py-2 flex flex-col sm:flex-row items-center justify-between gap-2">
        <div class="flex items-center gap-2">
            <x-icon name="shield" class="w-4 h-4"/>
            <span><strong>{{ __('Impersonating') }}:</strong> {{ optional(\App\Models\Tenant::find(session('impersonating_tenant_id')))->name }}</span>
        </div>
        <form method="POST" action="{{ route('super-admin.tenants.stop-impersonating') }}">
            @csrf
            <button class="px-3 py-1 rounded-md bg-amber-950 text-amber-50 text-xs font-semibold hover:bg-amber-900">
                {{ __('Stop impersonating') }}
            </button>
        </form>
    </div>
@elseif(session()->has('tenant_impersonator_id'))
    <div class="bg-sky-500 text-sky-950 text-sm px-4 py-2 flex flex-col sm:flex-row items-center justify-between gap-2">
        <div class="flex items-center gap-2">
            <x-icon name="shield" class="w-4 h-4"/>
            <span><strong>{{ __('Impersonating') }}:</strong> {{ auth()->user()?->name }} ({{ auth()->user()?->email }})</span>
        </div>
        <form method="POST" action="{{ route('tenant.users.stop-impersonating') }}">
            @csrf
            <button class="px-3 py-1 rounded-md bg-sky-950 text-sky-50 text-xs font-semibold hover:bg-sky-900">
                {{ __('Stop impersonating') }}
            </button>
        </form>
    </div>
@endif

<header class="sticky top-0 z-20 glass border-b border-slate-200/70 dark:border-slate-800">
    <div class="h-16 px-4 sm:px-6 lg:px-8 flex items-center gap-3">
        {{-- Mobile sidebar toggle --}}
        <button @click="$store.sidebar.openMobile()" class="lg:hidden btn-ghost -ml-2">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
            </svg>
        </button>

        <div class="flex-1">
            <h1 class="text-base sm:text-lg font-semibold tracking-tight">
                @yield('page-title', 'Dashboard')
            </h1>
            <p class="text-xs text-slate-500 dark:text-slate-400 hidden sm:block">
                @yield('page-subtitle', 'Welcome back, '.$u?->name.'.')
            </p>
        </div>

        {{-- Language switcher --}}
        @include('partials.lang-switcher')

        {{-- Theme toggle --}}
        <button @click="$store.theme.cycle()" class="btn-ghost" title="{{ __('Theme') }}">
            <template x-if="$store.theme.mode === 'light'">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707m12.728 0l-.707-.707M6.343 6.343l-.707-.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
            </template>
            <template x-if="$store.theme.mode === 'dark'">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
            </template>
            <template x-if="$store.theme.mode === 'system'">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
            </template>
        </button>

        {{-- Notifications bell --}}
        <div x-data="{open:false, unread:{{ $u ? $u->unreadNotifications()->count() : 0 }}}" class="relative">
            <button @click="open=!open" class="btn-ghost relative">
                <x-icon name="bell" class="w-5 h-5"/>
                <span x-show="unread>0" x-text="unread>9?'9+':unread"
                      class="absolute -top-0.5 -end-0.5 min-w-[18px] h-[18px] px-1 rounded-full bg-rose-600 text-white text-[10px] flex items-center justify-center"></span>
            </button>
            <div x-show="open" @click.outside="open=false"
                 x-transition.origin.top.right
                 class="absolute end-0 mt-2 w-80 card overflow-hidden" style="display:none">
                <div class="px-4 py-3 border-b border-slate-200/70 dark:border-slate-800 flex items-center justify-between">
                    <span class="font-semibold text-sm">{{ __('Notifications') }}</span>
                    <form method="POST" action="{{ route('notifications.read-all') }}">@csrf
                        <button class="text-xs text-brand-600 hover:underline">{{ __('Mark all read') }}</button>
                    </form>
                </div>
                <div class="max-h-80 overflow-y-auto">
                    @forelse($bellRows as $row)
                        <a href="{{ $row['href'] }}"
                           class="block px-4 py-3 border-b border-slate-100 dark:border-slate-800 text-sm hover:bg-slate-50 dark:hover:bg-slate-800/60 transition {{ $row['n']->read_at ? '' : 'bg-brand-50/40 dark:bg-brand-900/10' }}">
                            <div class="flex items-start gap-2.5">
                                <div class="w-7 h-7 rounded-full {{ $row['tone'] }} flex items-center justify-center shrink-0">
                                    <x-icon :name="$row['icon']" class="w-3.5 h-3.5"/>
                                </div>
                                <div class="min-w-0 flex-1">
                                    <div class="font-medium truncate flex items-center gap-2">
                                        <span class="truncate">{{ $row['title'] }}</span>
                                        @if(! $row['n']->read_at)<span class="w-1.5 h-1.5 rounded-full bg-brand-500 shrink-0"></span>@endif
                                    </div>
                                    <div class="text-slate-500 dark:text-slate-400 text-xs line-clamp-2">{{ $row['msg'] }}</div>
                                    <div class="text-[10px] text-slate-400 mt-1">{{ $row['n']->created_at?->diffForHumans() }}</div>
                                </div>
                            </div>
                        </a>
                    @empty
                        <div class="px-4 py-10 text-center text-sm text-slate-500 dark:text-slate-400">
                            <x-icon name="bell" class="w-8 h-8 mx-auto mb-2 opacity-40"/>
                            {{ __("You're all caught up.") }}
                        </div>
                    @endforelse
                </div>
                <a href="{{ route('notifications.index') }}"
                   class="block text-center text-xs py-2 text-brand-600 hover:bg-slate-50 dark:hover:bg-slate-800">{{ __('View all') }}</a>
            </div>
        </div>

        {{-- User menu --}}
        <div x-data="{open:false}" class="relative">
            <button @click="open=!open" class="flex items-center gap-2 rounded-full ps-1 pe-2 py-1 hover:bg-slate-100 dark:hover:bg-slate-800 transition">
                <span class="w-8 h-8 rounded-full bg-gradient-to-br from-brand-500 to-brand-700 text-white flex items-center justify-center text-xs font-semibold">{{ $u?->initials() }}</span>
                <span class="hidden md:block text-sm font-medium">{{ $u?->name }}</span>
                <svg class="w-4 h-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
            </button>
            <div x-show="open" @click.outside="open=false"
                 x-transition.origin.top.right
                 class="absolute end-0 mt-2 w-56 card overflow-hidden" style="display:none">
                <div class="px-4 py-3 border-b border-slate-200/70 dark:border-slate-800">
                    <div class="text-sm font-medium truncate">{{ $u?->name }}</div>
                    <div class="text-xs text-slate-500 dark:text-slate-400 truncate">{{ $u?->email }}</div>
                    <div class="mt-1">
                        @switch($u?->role)
                            @case(\App\Models\User::ROLE_SUPER_ADMIN) <span class="badge-info">{{ __('Super Admin') }}</span> @break
                            @case(\App\Models\User::ROLE_TENANT_ADMIN) <span class="badge-success">{{ __('Tenant Admin') }}</span> @break
                            @default <span class="badge-neutral">{{ __('User') }}</span>
                        @endswitch
                    </div>
                </div>
                <a href="{{ route('profile.edit') }}" class="block px-4 py-2 text-sm hover:bg-slate-50 dark:hover:bg-slate-800">{{ __('Profile & security') }}</a>
                <form method="POST" action="{{ route('logout') }}">
                    @csrf
                    <button class="w-full text-start px-4 py-2 text-sm text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-900/20">{{ __('Sign out') }}</button>
                </form>
            </div>
        </div>
    </div>
</header>