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

<header class="no-print sticky top-0 z-20 flex h-16 shrink-0 items-center gap-3 border-b border-slate-200 bg-white/95 px-4 backdrop-blur sm:px-6 lg:px-8">
    <button type="button" @click="sidebarOpen = true"
            class="rounded-lg p-2 text-slate-500 hover:bg-slate-100 lg:hidden">
        <x-icon name="menu" />
    </button>

    @if (Route::has('patients.index') && $user?->can('patients.view'))
        <form method="GET" action="{{ route('patients.index') }}" class="hidden flex-1 sm:block sm:max-w-md">
            <div class="relative">
                <span class="pointer-events-none absolute inset-y-0 left-3 grid place-items-center text-slate-400">
                    <x-icon name="search" size="sm" />
                </span>
                <input type="search" name="q" value="{{ request('q') }}"
                       placeholder="Search patient by name, MRN or phone…"
                       class="hms-input pl-9">
            </div>
        </form>
    @endif

    <div class="ml-auto flex items-center gap-2">
        @if (Route::has('patients.create') && $user?->can('patients.create'))
            <a href="{{ route('patients.create') }}" class="hms-btn-primary hms-btn-sm">
                <x-icon name="user-plus" size="sm" />
                <span class="hidden sm:inline">New Patient</span>
            </a>
        @endif

        @if ($user?->requiresMfa() && ! $user->hasMfaEnabled())
            <a href="{{ route('mfa.setup') }}"
               class="inline-flex items-center gap-1.5 rounded-full bg-amber-50 px-3 py-1.5 text-xs font-semibold text-amber-800 ring-1 ring-inset ring-amber-200 hover:bg-amber-100">
                <x-icon name="shield" size="xs" />
                Enable MFA
            </a>
        @endif

        <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 text-left hover:bg-slate-100">
                <span class="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-brand-600 text-xs font-semibold text-white">
                    {{ $user?->initials ?? '—' }}
                </span>

                <span class="hidden min-w-0 sm:block">
                    <span class="block truncate text-sm font-semibold text-slate-800">{{ $user?->name }}</span>
                    <span class="block truncate text-[11px] text-slate-500">{{ $user?->role_label }}</span>
                </span>

                <x-icon name="chevron-down" size="sm" class="text-slate-400" />
            </button>

            <div x-show="open" x-cloak @click.outside="open = false" x-transition
                 class="absolute right-0 z-30 mt-2 w-64 overflow-hidden rounded-xl border border-slate-200 bg-white shadow-raised">
                <div class="border-b border-slate-100 px-4 py-3">
                    <p class="truncate text-sm font-semibold text-slate-800">{{ $user?->name }}</p>
                    <p class="truncate text-xs text-slate-500">{{ $user?->email }}</p>
                    <div class="mt-2 flex flex-wrap items-center gap-1.5">
                        <x-status-badge color="brand" :label="$user?->role_label" :dot="true" size="sm" />
                        @if ($user?->hasMfaEnabled())
                            <x-status-badge color="green" label="MFA on" size="sm" />
                        @elseif ($user?->requiresMfa())
                            <x-status-badge color="amber" label="MFA required" size="sm" />
                        @endif
                    </div>
                </div>

                <div class="py-1">
                    <a href="{{ route('profile.edit') }}" class="flex items-center gap-2.5 px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">
                        <x-icon name="users" size="sm" class="text-slate-400" /> My profile
                    </a>

                    @if (Route::has('mfa.setup'))
                        <a href="{{ $user?->hasMfaEnabled() ? route('mfa.manage') : route('mfa.setup') }}"
                           class="flex items-center gap-2.5 px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">
                            <x-icon name="shield-check" size="sm" class="text-slate-400" /> Security & MFA
                        </a>
                    @endif

                    @if ($user?->isAdmin() && Route::has('admin.audit-logs.index'))
                        <a href="{{ route('admin.audit-logs.index') }}" class="flex items-center gap-2.5 px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">
                            <x-icon name="fingerprint" size="sm" class="text-slate-400" /> Audit trail
                        </a>
                    @endif
                </div>

                <div class="border-t border-slate-100 py-1">
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="flex w-full items-center gap-2.5 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50">
                            <x-icon name="logout" size="sm" /> Log out
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</header>