@php
    $user = auth()->user();
    $userName = trim($user->name ?? $user->first_name ?? 'User');
    $notificationsIndexRoute = match ($user->type ?? null) {
        'student' => route('student.notifications.index'),
        'teacher' => route('teacher.notifications.index'),
        'staff' => route('admin.notifications.index'),
        'social_worker' => route('social-worker.home'),
        'health_visitor' => route('health-visitor.home'),
        default => route('admin.notifications.index'),
    };
    $supportedLocales = config('app.supported_locales', []);
    $languageNames = [
        'ar' => 'العربية',
        'en' => 'English',
        'es' => 'Español',
        'du' => 'Deutsch',
        'ja' => '日本語',
        'fr' => 'Français',
        'zh' => '中文',
    ];
    $userInitials = collect(preg_split('/\s+/', $userName, -1, PREG_SPLIT_NO_EMPTY))
        ->take(2)
        ->map(fn ($part) => mb_substr($part, 0, 1))
        ->implode('');
    $isAr = app()->getLocale() === 'ar';
    $notifCount = count(getLatestUpdatesNotifications()) + count(getLatestAlertsNotifications());
@endphp

<div class="flex items-center gap-2 sm:gap-2.5">
    {{-- Global Search --}}
    <div class="relative"
         x-data="{
             open: false,
             query: '',
             results: [],
             loading: false,
             timer: null,
             typeLabels: {
                 student: '{{ $isAr ? 'الطلاب' : 'Students' }}',
                 teacher: '{{ $isAr ? 'المعلمون' : 'Teachers' }}',
                 course: '{{ $isAr ? 'الكورسات' : 'Courses' }}',
                 assignment: '{{ $isAr ? 'الواجبات' : 'Assignments' }}',
                 material: '{{ $isAr ? 'المواد' : 'Materials' }}',
             },
             typeIcons: {
                 student: 'fa-user-graduate',
                 teacher: 'fa-chalkboard-teacher',
                 course: 'fa-book-open',
                 assignment: 'fa-file-alt',
                 material: 'fa-paperclip',
             },
             grouped() {
                 const g = {};
                 this.results.forEach(r => {
                     if (!g[r.type]) g[r.type] = [];
                     g[r.type].push(r);
                 });
                 return g;
             },
             onInput() {
                 clearTimeout(this.timer);
                 if (this.query.length < 2) { this.results = []; this.open = false; return; }
                 this.timer = setTimeout(() => this.fetch(), 300);
             },
             async fetch() {
                 this.loading = true;
                 try {
                     const res = await fetch('{{ route('admin.search.global') }}?q=' + encodeURIComponent(this.query), {
                         headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
                     });
                     this.results = await res.json();
                     this.open = this.results.length > 0;
                 } catch(e) { this.results = []; }
                 this.loading = false;
             }
         }"
         @click.outside="open = false">
        <div class="relative">
            <span class="pointer-events-none absolute inset-y-0 {{ $isAr ? 'right-0 pr-3' : 'left-0 pl-3' }} flex items-center text-surface-400">
                <i class="fa-solid fa-magnifying-glass text-xs" :class="loading && 'animate-pulse'"></i>
            </span>
            <input
                type="text"
                x-model="query"
                @input="onInput"
                @focus="query.length >= 2 && results.length && (open = true)"
                placeholder="{{ $isAr ? 'بحث...' : 'Search...' }}"
                class="h-9 w-36 sm:w-52 rounded-lg border border-surface-200 bg-surface-50 {{ $isAr ? 'pr-9 pl-3' : 'pl-9 pr-3' }} text-xs text-surface-700 placeholder-surface-400 transition focus:border-blue-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-100 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-200 dark:placeholder-surface-500 dark:focus:border-blue-500 dark:focus:bg-surface-950"
            >
        </div>

        <div x-show="open"
             x-cloak
             x-transition:enter="transition ease-out duration-150"
             x-transition:enter-start="opacity-0 translate-y-1 scale-95"
             x-transition:enter-end="opacity-100 translate-y-0 scale-100"
             x-transition:leave="transition ease-in duration-100"
             x-transition:leave-start="opacity-100 translate-y-0 scale-100"
             x-transition:leave-end="opacity-0 translate-y-1 scale-95"
             class="absolute {{ $isAr ? 'right-0' : 'left-0' }} z-50 mt-2 w-72 overflow-hidden rounded-xl border border-surface-200 bg-white shadow-lg dark:border-surface-800 dark:bg-surface-950">
            <div class="max-h-80 overflow-y-auto py-2">
                <template x-for="[type, items] in Object.entries(grouped())" :key="type">
                    <div>
                        <div class="flex items-center gap-2 px-4 py-1.5">
                            <i class="fa-solid text-[10px] text-surface-400" :class="typeIcons[type]"></i>
                            <span class="text-[10px] font-black uppercase tracking-widest text-surface-400" x-text="typeLabels[type] ?? type"></span>
                        </div>
                        <template x-for="item in items" :key="item.id">
                            <a :href="item.url"
                               @click="open = false; query = ''"
                               class="flex items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-surface-50 dark:hover:bg-surface-900">
                                <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-surface-100 text-surface-500 dark:bg-surface-800 dark:text-surface-400">
                                    <i class="fa-solid text-xs" :class="typeIcons[type]"></i>
                                </span>
                                <span class="min-w-0 flex-1">
                                    <span class="block truncate font-bold text-surface-800 dark:text-surface-200" x-text="item.label"></span>
                                    <span x-show="item.sub" class="block truncate text-xs text-surface-400 dark:text-surface-500" x-text="item.sub"></span>
                                </span>
                            </a>
                        </template>
                    </div>
                </template>
            </div>
        </div>
    </div>

    <div class="relative" x-data="{ notifOpen: false }">
        <button @click="notifOpen = !notifOpen" @click.outside="notifOpen = false"
                type="button"
                aria-haspopup="true"
                :aria-expanded="notifOpen.toString()"
                aria-controls="header-notifications-menu"
                aria-label="{{ $isAr ? 'فتح الإشعارات' : 'Open notifications' }}"
                class="group relative inline-flex h-10 w-10 items-center justify-center rounded-lg bg-transparent text-surface-500 transition hover:bg-surface-100 hover:text-surface-900 dark:text-surface-400 dark:hover:bg-surface-800 dark:hover:text-white">
            <i aria-hidden="true" class="fa-regular fa-bell text-base"></i>
            @if($notifCount > 0)
                <span aria-hidden="true" class="absolute end-2 top-2 h-2.5 w-2.5 rounded-full bg-rose-500 ring-2 ring-white dark:ring-surface-950"></span>
            @endif
            <span class="sr-only">{{ $isAr ? 'الإشعارات' : 'Notifications' }}</span>
        </button>

        <div x-show="notifOpen"
             id="header-notifications-menu"
             role="menu"
             :aria-hidden="(!notifOpen).toString()"
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 translate-y-2 scale-95"
             x-transition:enter-end="opacity-100 translate-y-0 scale-100"
             x-transition:leave="transition ease-in duration-150"
             x-transition:leave-start="opacity-100 translate-y-0 scale-100"
             x-transition:leave-end="opacity-0 translate-y-2 scale-95"
             x-cloak
             class="absolute end-0 z-50 mt-3 w-[22rem] overflow-hidden rounded-xl border border-surface-200 bg-white shadow-lg shadow-surface-900/5 dark:border-surface-800 dark:bg-surface-950">
            <div class="flex items-center justify-between border-b border-surface-100 bg-surface-50 px-5 py-4 dark:border-surface-800 dark:bg-surface-900">
                <div>
                    <p class="text-[10px] font-black uppercase tracking-[0.24em] text-surface-400 dark:text-surface-500">{{ $isAr ? 'التنبيهات' : 'Updates' }}</p>
                    <h3 class="mt-1 text-sm font-black text-surface-900 dark:text-white">{{ __('dashboard.Notifications') }}</h3>
                </div>
                <span class="rounded-full bg-blue-50 px-3 py-1 text-[11px] font-black text-blue-700 dark:bg-blue-500/10 dark:text-blue-300">
                    {{ $notifCount }} {{ __('dashboard.New') }}
                </span>
            </div>

            <div class="max-h-80 overflow-y-auto p-2">
                @if (count(getLatestUpdatesNotifications()) > 0)
                    @foreach (getLatestUpdatesNotifications() as $item)
                        <div class="group flex gap-4 rounded-lg px-3 py-3 transition hover:bg-surface-50 dark:hover:bg-surface-900">
                            <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-300">
                                <i aria-hidden="true" class="fa-solid fa-bell"></i>
                            </div>
                            <div class="min-w-0 flex-1">
                                <div class="flex items-start justify-between gap-3">
                                    <p class="line-clamp-1 text-sm font-bold text-surface-900 dark:text-white">{{ $item->title }}</p>
                                    <span class="shrink-0 text-[10px] font-bold uppercase tracking-[0.16em] text-surface-400 dark:text-surface-500">{{ $item->created_at->diffForHumans() }}</span>
                                </div>
                                <p class="mt-1 line-clamp-2 text-xs leading-6 text-surface-500 dark:text-surface-400">{{ $item->body }}</p>
                            </div>
                        </div>
                    @endforeach
                @else
                    <div class="px-6 py-10 text-center">
                        <div class="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-surface-50 text-surface-300 dark:bg-surface-900 dark:text-surface-600">
                            <i aria-hidden="true" class="fa-regular fa-bell-slash text-xl"></i>
                        </div>
                        <p class="mt-4 text-sm font-bold text-surface-500 dark:text-surface-400">{{ __('dashboard.No Notifications Found') }}</p>
                    </div>
                @endif
            </div>

            <a href="{{ $notificationsIndexRoute }}" class="block border-t border-surface-100 px-5 py-4 text-center text-xs font-black uppercase tracking-[0.18em] text-blue-700 transition hover:bg-blue-50 dark:border-surface-800 dark:text-blue-300 dark:hover:bg-surface-900">
                {{ __('dashboard.View All Notifications') }}
            </a>
        </div>
    </div>

    {{-- Divider --}}
    <div class="h-5 w-px bg-surface-200 dark:bg-surface-700 mx-1"></div>

    <div class="relative" x-data="{ profileOpen: false, activeTab: 'main' }">
        <button @click="profileOpen = !profileOpen" @click.outside="profileOpen = false; setTimeout(() => activeTab = 'main', 200)"
                type="button"
                aria-haspopup="true"
                :aria-expanded="profileOpen.toString()"
                aria-controls="header-profile-menu"
                aria-label="{{ $isAr ? 'فتح قائمة المستخدم' : 'Open user menu' }}"
                class="flex items-center gap-2 h-10 px-2 rounded-lg bg-transparent transition hover:bg-surface-100 dark:hover:bg-surface-800">
            @if ($user->avatar)
                <img src="{{ $user->avatar }}" alt="{{ $userName }}" class="h-8 w-8 rounded-md object-cover shrink-0">
            @else
                <div class="flex h-8 w-8 items-center justify-center rounded-md bg-brand-600 text-xs font-black text-white dark:bg-brand-500 shrink-0">
                    {{ $userInitials !== '' ? $userInitials : 'U' }}
                </div>
            @endif
            <span class="hidden sm:block text-xs font-bold text-surface-700 dark:text-surface-300 max-w-[100px] truncate">{{ explode(' ', $userName)[0] }}</span>
        </button>

        <div x-show="profileOpen"
             id="header-profile-menu"
             :aria-hidden="(!profileOpen).toString()"
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 translate-y-2 scale-95"
             x-transition:enter-end="opacity-100 translate-y-0 scale-100"
             x-transition:leave="transition ease-in duration-150"
             x-transition:leave-start="opacity-100 translate-y-0 scale-100"
             x-transition:leave-end="opacity-0 translate-y-2 scale-95"
             x-cloak
             class="absolute end-0 z-50 mt-3 w-72 overflow-hidden rounded-xl border border-surface-200 bg-white shadow-lg shadow-surface-900/5 dark:border-surface-800 dark:bg-surface-950">

            <div x-show="activeTab === 'main'">
                <div class="border-b border-surface-100 bg-surface-50 px-5 py-5 dark:border-surface-800 dark:bg-surface-900">
                    <div class="flex items-center gap-4">
                        @if ($user->avatar)
                            <img src="{{ $user->avatar }}" alt="{{ $userName }}" class="h-12 w-12 rounded-lg object-cover">
                        @else
                            <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-surface-900 text-lg font-black text-white dark:bg-surface-700">
                                {{ $userInitials !== '' ? $userInitials : 'U' }}
                            </div>
                        @endif
                        <div class="min-w-0">
                            <p class="truncate text-base font-black text-surface-900 dark:text-white">{{ $userName }}</p>
                            <p class="mt-1 truncate text-xs text-surface-500 dark:text-surface-400">{{ $user->email }}</p>
                        </div>
                    </div>
                </div>

                <div class="space-y-1 p-3">
                    <a href="{{ route('profile.show') }}" class="flex items-center justify-between rounded-lg px-3 py-3 text-sm font-bold text-surface-700 transition hover:bg-surface-50 dark:text-surface-300 dark:hover:bg-surface-900">
                        <span class="flex items-center gap-3">
                            <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-surface-50 text-surface-500 dark:bg-surface-900 dark:text-surface-400">
                                <i aria-hidden="true" class="fa-solid fa-user text-xs"></i>
                            </span>
                            <span>{{ __('dashboard.My Profile') }}</span>
                        </span>
                        <i aria-hidden="true" class="fa-solid fa-chevron-{{ $isAr ? 'left' : 'right' }} text-[10px] text-surface-300 dark:text-surface-600"></i>
                    </a>

                    <a href="{{ route('profile.editCredentials') }}" class="flex items-center justify-between rounded-lg px-3 py-3 text-sm font-bold text-surface-700 transition hover:bg-surface-50 dark:text-surface-300 dark:hover:bg-surface-900">
                        <span class="flex items-center gap-3">
                            <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-surface-50 text-surface-500 dark:bg-surface-900 dark:text-surface-400">
                                <i aria-hidden="true" class="fa-solid fa-shield-halved text-xs"></i>
                            </span>
                            <span>{{ $isAr ? 'الأمان' : 'Security' }}</span>
                        </span>
                        <i aria-hidden="true" class="fa-solid fa-chevron-{{ $isAr ? 'left' : 'right' }} text-[10px] text-surface-300 dark:text-surface-600"></i>
                    </a>

                    <button type="button" @click.stop="activeTab = 'language'" class="flex w-full items-center justify-between rounded-lg px-3 py-3 text-sm font-bold text-surface-700 transition hover:bg-surface-50 dark:text-surface-300 dark:hover:bg-surface-900">
                        <span class="flex items-center gap-3">
                            <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-surface-50 text-surface-500 dark:bg-surface-900 dark:text-surface-400">
                                <i aria-hidden="true" class="fa-solid fa-language text-xs"></i>
                            </span>
                            <span>{{ __('dashboard.Language') }}</span>
                        </span>
                        <span class="flex items-center gap-2 text-xs text-surface-400 dark:text-surface-500">
                            <span>{{ $languageNames[app()->getLocale()] ?? strtoupper(app()->getLocale()) }}</span>
                            <i aria-hidden="true" class="fa-solid fa-chevron-{{ $isAr ? 'left' : 'right' }} text-[10px]"></i>
                        </span>
                    </button>

                    <button type="button" @click.stop="activeTab = 'theme'" class="flex w-full items-center justify-between rounded-lg px-3 py-3 text-sm font-bold text-surface-700 transition hover:bg-surface-50 dark:text-surface-300 dark:hover:bg-surface-900">
                        <span class="flex items-center gap-3">
                            <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-surface-50 text-surface-500 dark:bg-surface-900 dark:text-surface-400">
                                <i aria-hidden="true" class="fa-solid fa-palette text-xs"></i>
                            </span>
                            <span>{{ __('dashboard.Appearance') }}</span>
                        </span>
                        <span class="flex items-center gap-2 text-xs text-surface-400 dark:text-surface-500">
                            <span x-text="currentTheme === 'light' ? '{{ __('dashboard.Light') }}' : (currentTheme === 'dark' ? '{{ __('dashboard.Dark') }}' : '{{ __('dashboard.System') }}')"></span>
                            <i aria-hidden="true" class="fa-solid fa-chevron-{{ $isAr ? 'left' : 'right' }} text-[10px]"></i>
                        </span>
                    </button>
                </div>

                <div class="border-t border-surface-100 bg-surface-50/60 p-3 dark:border-surface-800 dark:bg-surface-900/50">
                    <a href="{{ route('logout') }}"
                       onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
                       class="flex items-center justify-center gap-2 rounded-lg border border-surface-200 bg-white px-4 py-3 text-sm font-black text-rose-600 transition hover:border-rose-200 hover:bg-rose-50 dark:border-surface-800 dark:bg-surface-950 dark:hover:border-rose-900/30 dark:hover:bg-rose-500/10">
                        <i aria-hidden="true" class="fa-solid fa-right-from-bracket {{ $isAr ? 'fa-flip-horizontal' : '' }}"></i>
                        <span>{{ __('dashboard.Logout') }}</span>
                    </a>
                </div>
            </div>

            <div x-show="activeTab === 'language'" x-cloak>
                <div class="flex items-center gap-3 border-b border-surface-100 px-4 py-4 dark:border-surface-800">
                    <button type="button" @click.stop="activeTab = 'main'" class="flex h-8 w-8 items-center justify-center rounded-full text-surface-400 transition hover:bg-surface-100 hover:text-surface-700 dark:hover:bg-surface-900 dark:hover:text-surface-300">
                        <i aria-hidden="true" class="fa-solid fa-arrow-{{ $isAr ? 'right' : 'left' }}"></i>
                    </button>
                    <span class="font-black text-surface-900 dark:text-white">{{ __('dashboard.Select Language') }}</span>
                </div>
                <div class="max-h-[300px] space-y-1 overflow-y-auto p-3">
                    @foreach ($supportedLocales as $locale)
                        <a href="{{ route('switchLanguage', ['locale' => $locale]) }}"
                           class="flex items-center justify-between rounded-lg border px-3 py-3 text-sm font-bold transition {{ app()->getLocale() === $locale ? 'border-blue-100 bg-blue-50 text-blue-700 dark:border-blue-500/20 dark:bg-blue-500/10 dark:text-blue-300' : 'border-transparent text-surface-600 hover:bg-surface-50 dark:text-surface-400 dark:hover:bg-surface-900' }}">
                            <span class="flex items-center gap-3">
                                <span class="w-6 text-center text-lg">{{ $locale === 'ar' ? '🇸🇦' : ($locale === 'en' ? '🇺🇸' : '🌐') }}</span>
                                <span>{{ $languageNames[$locale] ?? strtoupper($locale) }}</span>
                            </span>
                            @if(app()->getLocale() === $locale)
                                <i aria-hidden="true" class="fa-solid fa-circle-check"></i>
                            @endif
                        </a>
                    @endforeach
                </div>
            </div>

            <div x-show="activeTab === 'theme'" x-cloak>
                <div class="flex items-center gap-3 border-b border-surface-100 px-4 py-4 dark:border-surface-800">
                    <button type="button" @click.stop="activeTab = 'main'" class="flex h-8 w-8 items-center justify-center rounded-full text-surface-400 transition hover:bg-surface-100 hover:text-surface-700 dark:hover:bg-surface-900 dark:hover:text-surface-300">
                        <i aria-hidden="true" class="fa-solid fa-arrow-{{ $isAr ? 'right' : 'left' }}"></i>
                    </button>
                    <span class="font-black text-surface-900 dark:text-white">{{ __('dashboard.Select Appearance') }}</span>
                </div>
                <div class="space-y-2 p-3">
                    <button type="button" @click.stop="setTheme('light'); profileOpen = false"
                            class="flex w-full items-center justify-between rounded-lg border px-4 py-4 text-sm font-bold transition"
                            :class="currentTheme === 'light' ? 'border-amber-100 bg-amber-50 text-amber-700 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-300' : 'border-transparent text-surface-600 hover:bg-surface-50 dark:text-surface-400 dark:hover:bg-surface-900'">
                        <span class="flex items-center gap-3">
                            <i aria-hidden="true" class="fa-solid fa-sun"></i>
                            <span>{{ __('dashboard.Light') }}</span>
                        </span>
                        <i x-show="currentTheme === 'light'" aria-hidden="true" class="fa-solid fa-circle-check"></i>
                    </button>

                    <button type="button" @click.stop="setTheme('dark'); profileOpen = false"
                            class="flex w-full items-center justify-between rounded-lg border px-4 py-4 text-sm font-bold transition"
                            :class="currentTheme === 'dark' ? 'border-indigo-100 bg-indigo-50 text-indigo-700 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-indigo-300' : 'border-transparent text-surface-600 hover:bg-surface-50 dark:text-surface-400 dark:hover:bg-surface-900'">
                        <span class="flex items-center gap-3">
                            <i aria-hidden="true" class="fa-solid fa-moon"></i>
                            <span>{{ __('dashboard.Dark') }}</span>
                        </span>
                        <i x-show="currentTheme === 'dark'" aria-hidden="true" class="fa-solid fa-circle-check"></i>
                    </button>

                    <button type="button" @click.stop="setTheme('system'); profileOpen = false"
                            class="flex w-full items-center justify-between rounded-lg border px-4 py-4 text-sm font-bold transition"
                            :class="currentTheme === 'system' ? 'border-surface-300 bg-surface-100 text-surface-900 dark:border-surface-700 dark:bg-surface-800 dark:text-white' : 'border-transparent text-surface-600 hover:bg-surface-50 dark:text-surface-400 dark:hover:bg-surface-900'">
                        <span class="flex items-center gap-3">
                            <i aria-hidden="true" class="fa-solid fa-laptop"></i>
                            <span>{{ __('dashboard.System') }}</span>
                        </span>
                        <i x-show="currentTheme === 'system'" aria-hidden="true" class="fa-solid fa-circle-check"></i>
                    </button>
                </div>
            </div>
        </div>

        <form id="logout-form" action="{{ route('logout') }}" method="POST" class="hidden">
            @csrf
        </form>
    </div>
</div>