@props([
    'breadcrumbs' => [],
])

@php
    $unreadMessages = $adminUnreadMessages ?? 0;
    $notifications = $adminRecentNotifications ?? collect();
    $adminUser = auth()->user();
@endphp

<header class="sticky top-0 z-30 border-b border-brand-border bg-brand-white/95 backdrop-blur">
    <div class="flex items-center gap-3 px-4 py-3 sm:px-6">
        <button type="button" data-drawer-toggle aria-expanded="false" class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-brand-border text-brand-ink lg:hidden">
            <span class="sr-only">Ouvrir le menu</span>
            <x-icon name="menu" class="h-5 w-5" />
        </button>

        <div class="min-w-0 flex-1">
            <x-admin.breadcrumb :items="$breadcrumbs" />
        </div>

        <label class="relative hidden max-w-xs flex-1 sm:block">
            <span class="sr-only">Recherche administrative</span>
            <x-icon name="search" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-brand-muted" />
            <input type="search" placeholder="Rechercher..." class="admin-field-input pl-9" disabled aria-disabled="true" title="Recherche globale a venir">
        </label>

        <button type="button" data-modal-open="admin-notifications-modal" class="relative flex h-9 w-9 items-center justify-center rounded-lg border border-brand-border text-brand-muted hover:text-brand-primary">
            <span class="sr-only">Notifications</span>
            <x-icon name="bell" class="h-4.5 w-4.5" />
            @if ($unreadMessages > 0)
                <span class="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-brand-primary px-1 text-[0.625rem] font-bold text-brand-white">
                    {{ $unreadMessages }}
                </span>
            @endif
        </button>

        <button type="button" data-modal-open="admin-user-menu-modal" class="flex items-center gap-2 rounded-lg border border-brand-border py-1 pl-1 pr-2.5 hover:border-brand-primary">
            <span class="flex h-7 w-7 items-center justify-center rounded-full bg-brand-primary/10 text-xs font-bold text-brand-primary">
                {{ strtoupper(substr($adminUser?->name ?? 'A', 0, 1)) }}
            </span>
            <span class="hidden text-sm font-medium text-brand-ink sm:inline">{{ $adminUser?->name ?? 'Administrateur' }}</span>
            <x-icon name="chevron-down" class="hidden h-3.5 w-3.5 text-brand-muted sm:inline" />
        </button>
    </div>

    <div class="border-t border-dashed border-brand-primary/30 bg-brand-primary/5 px-4 py-1.5 text-center text-xs font-medium text-brand-primary sm:px-6">
        Interface connectee - les actions sont enregistrees en base.
    </div>
</header>

<div id="admin-user-menu-modal" data-modal data-open="false" class="admin-modal-backdrop fixed inset-0 z-50 flex items-start justify-end bg-brand-ink/40 p-4 pt-16">
    <div data-modal-panel tabindex="-1" class="admin-modal-panel admin-card w-full max-w-xs p-2 shadow-2xl">
        <div class="border-b border-brand-border p-3">
            <p class="text-sm font-semibold text-brand-ink">{{ $adminUser?->name ?? 'Administrateur' }}</p>
            <p class="text-xs text-brand-muted">{{ $adminUser?->email }}</p>
        </div>
        <div class="p-1">
            <a href="{{ route('admin.users.index') }}" class="admin-nav-link"><x-icon name="user" class="h-4 w-4" /> Utilisateurs</a>
            <a href="{{ route('admin.settings.general') }}" class="admin-nav-link"><x-icon name="settings" class="h-4 w-4" /> Parametres</a>
            <form method="POST" action="{{ route('admin.logout') }}">
                @csrf
                <button type="submit" class="admin-nav-link w-full"><x-icon name="logout" class="h-4 w-4" /> Se deconnecter</button>
            </form>
        </div>
        <button type="button" data-modal-close class="sr-only">Fermer</button>
    </div>
</div>

<div id="admin-notifications-modal" data-modal data-open="false" class="admin-modal-backdrop fixed inset-0 z-50 flex items-start justify-end bg-brand-ink/40 p-4 pt-16">
    <div data-modal-panel tabindex="-1" class="admin-modal-panel admin-card w-full max-w-sm p-0 shadow-2xl">
        <div class="flex items-center justify-between border-b border-brand-border p-3">
            <p class="text-sm font-semibold text-brand-ink">Notifications</p>
            <span class="demo-badge">{{ $unreadMessages }} non lu(s)</span>
        </div>
        <ul class="max-h-80 divide-y divide-brand-border overflow-y-auto">
            @forelse ($notifications as $notif)
                <li class="p-3 text-sm">
                    <p class="font-medium text-brand-ink">{{ $notif['subject'] }}</p>
                    <p class="text-xs text-brand-muted">{{ $notif['received_at_demo'] }}</p>
                </li>
            @empty
                <li class="p-3 text-sm text-brand-muted">Aucune notification.</li>
            @endforelse
        </ul>
        <div class="border-t border-brand-border p-2">
            <a href="{{ route('admin.messages.index') }}" class="btn-text block px-2 py-1.5 text-sm font-semibold">Voir tous les messages</a>
        </div>
        <button type="button" data-modal-close class="sr-only">Fermer</button>
    </div>
</div>
