@props([
    'variant' => 'light',
])

@php
    use App\Enums\ApplicationStatus;
    use App\Enums\UserRole;
    use App\Models\Application;
    use Illuminate\Support\Facades\Cache;

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

@if ($authUser)
    @php
        $cacheKey = 'notif_bell:'.$authUser->id;

        $data = Cache::remember($cacheKey, now()->addSeconds(15), function () use ($authUser) {
            $base = Application::query()->where('is_submitted', true);

            $base = match ($authUser->role) {
                UserRole::Admin   => $base,
                UserRole::Agent   => $base->where('agent_id', $authUser->id),
                UserRole::Customer=> $base->where('user_id', $authUser->id),
                default           => $base->whereRaw('1=0'),
            };

            $base->where('status', ApplicationStatus::Pending->value)
                ->whereNotExists(function ($q) use ($authUser): void {
                    $q->select(\Illuminate\Support\Facades\DB::raw(1))
                      ->from('notification_reads')
                      ->whereColumn('notification_reads.application_id', 'applications.id')
                      ->where('notification_reads.user_id', $authUser->id);
                });

            $count = (clone $base)->count();

            $items = (clone $base)
                ->latest('created_at')
                ->limit(5)
                ->get(['id', 'full_name', 'passport_number', 'created_at']);

            return ['count' => $count, 'items' => $items];
        });

        $count = (int) ($data['count'] ?? 0);
        $items = $data['items'] ?? collect();

        $listRoute = match ($authUser->role) {
            UserRole::Admin    => route('admin.applications.index'),
            UserRole::Agent    => route('agent.applications.index'),
            UserRole::Customer => route('customer.applications.index'),
            default            => '#',
        };

        $isDark = $variant === 'dark';
        $btnClasses = $isDark
            ? 'relative rounded-full p-2 text-cv-navy-light hover:bg-cv-cream'
            : 'relative rounded-full p-2 text-ui-nav hover:bg-slate-100';
        $badgeClasses = $isDark
            ? 'absolute right-1 top-1 flex h-4 min-w-[16px] items-center justify-center rounded-full bg-cv-gold px-1 text-[10px] font-bold text-cv-navy-deep'
            : 'absolute -right-1 -top-1 inline-flex h-4 min-w-[16px] items-center justify-center rounded-full bg-ui-gold px-1 text-[9px] font-bold leading-none text-white';
    @endphp

    <div x-data="{ open: false }"
         @click.outside="open = false"
         @keydown.escape.window="open = false"
         class="relative">

        <button type="button"
                @click="open = !open"
                class="{{ $btnClasses }}"
                aria-label="Notifications"
                title="New applications">
            @if ($isDark)
                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
            @else
                <i class="fa-regular fa-bell text-[18px]"></i>
            @endif

            @if ($count > 0)
                <span class="{{ $badgeClasses }}">{{ $count > 99 ? '99+' : $count }}</span>
            @endif
        </button>

        <div x-show="open"
             x-transition.opacity.duration.120ms
             x-cloak
             class="absolute right-0 z-50 mt-2 w-[320px] origin-top-right rounded-xl border border-slate-200 bg-white shadow-xl ring-1 ring-black/5"
             role="menu">

            <div class="flex items-center justify-between border-b border-slate-100 px-4 py-3">
                <div>
                    <p class="text-[13px] font-bold text-cv-navy-deep">New applications</p>
                    <p class="text-[11px] text-cv-navy-light">
                        @if ($count === 0)
                            Nothing new right now.
                        @elseif ($count === 1)
                            1 application awaiting attention.
                        @else
                            {{ $count }} applications awaiting attention.
                        @endif
                    </p>
                </div>
                @if ($count > 0)
                    <form method="POST" action="{{ route('notifications.read-all') }}">
                        @csrf
                        <button type="submit"
                                class="rounded-full bg-cv-gold/15 px-2 py-1 text-[10px] font-bold text-cv-gold transition hover:bg-cv-gold/25"
                                title="Mark all as read">
                            Mark all read
                        </button>
                    </form>
                @endif
            </div>

            <div class="max-h-[320px] overflow-y-auto">
                @forelse ($items as $item)
                    <a href="{{ route('notifications.open', $item->id) }}"
                       class="flex items-start gap-3 border-b border-slate-50 px-4 py-3 transition hover:bg-slate-50 last:border-b-0">
                        <span class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-cv-gold/15 text-cv-gold">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                        </span>
                        <div class="min-w-0 flex-1">
                            <p class="truncate text-[13px] font-semibold text-cv-navy-deep">
                                {{ $item->full_name ?: 'Unnamed applicant' }}
                            </p>
                            <p class="truncate text-[11.5px] text-cv-navy-light">
                                {{ $item->passport_number ?: 'No passport #' }}
                                · {{ optional($item->created_at)->diffForHumans() }}
                            </p>
                        </div>
                        <span class="mt-1 inline-flex shrink-0 items-center rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-semibold text-amber-800">
                            New
                        </span>
                    </a>
                @empty
                    <div class="flex flex-col items-center justify-center px-4 py-8 text-center">
                        <span class="flex h-10 w-10 items-center justify-center rounded-full bg-slate-100 text-slate-400">
                            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                        </span>
                        <p class="mt-3 text-[12.5px] font-semibold text-cv-navy-deep">You're all caught up</p>
                        <p class="mt-1 text-[11.5px] text-cv-navy-light">New applications will appear here.</p>
                    </div>
                @endforelse
            </div>

            <a href="{{ $listRoute }}"
               class="block border-t border-slate-100 px-4 py-2.5 text-center text-[12.5px] font-semibold text-cv-navy-deep hover:bg-slate-50 hover:text-cv-gold">
                View all applications
            </a>
        </div>
    </div>
@endif