@php
    // Tone → the icon chip's colours. Kept here so both lists (delivered and
    // derived) read identically in the panel.
    $chip = [
        'info' => 'bg-sky-50 text-sky-600',
        'success' => 'bg-emerald-50 text-emerald-600',
        'warning' => 'bg-amber-50 text-amber-600',
        'danger' => 'bg-rose-50 text-rose-600',
    ];
@endphp

<div>
    <x-dropdown align="right" width="80" contentClasses="py-0 bg-white">
        <x-slot name="trigger">
            <button type="button" class="relative inline-flex h-9 w-9 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-500 shadow-xs transition hover:border-slate-300 hover:bg-slate-50 hover:text-slate-700 focus:outline-none focus:ring-2 focus:ring-accent-500">
                <x-icon name="bell" class="h-[18px] w-[18px]" />
                @if ($total > 0)
                    <span class="absolute -right-1 -top-1 flex h-5 min-w-[1.25rem] items-center justify-center rounded-full bg-rose-500 px-1 text-[10px] font-bold text-white ring-2 ring-white">
                        {{ $total > 9 ? '9+' : $total }}
                    </span>
                @endif
            </button>
        </x-slot>

        <x-slot name="content">
            <div class="flex items-center justify-between border-b border-slate-100 px-4 py-3">
                <p class="text-sm font-semibold text-slate-900">{{ __('Notifications') }}</p>
                <div class="flex items-center gap-2">
                    @if ($total > 0)
                        <span class="rounded-full bg-rose-50 px-2 py-0.5 text-xs font-semibold text-rose-600">{{ $total }} {{ __('new') }}</span>
                    @endif
                    @if ($unreadCount > 0)
                        <button type="button" wire:click="markAllRead" class="text-xs font-medium text-indigo-600 transition hover:text-indigo-800">
                            {{ __('Mark all read') }}
                        </button>
                    @endif
                </div>
            </div>

            <div class="max-h-[26rem] divide-y divide-slate-100 overflow-y-auto">
                @if ($pendingRelease)
                    <a href="{{ route('releases.index') }}" class="flex items-start gap-3 bg-indigo-50/40 px-4 py-3 transition hover:bg-indigo-50">
                        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-brand-gradient text-white shadow-sm">
                            <x-icon name="sparkles" class="h-5 w-5" />
                        </span>
                        <div class="min-w-0">
                            <p class="text-sm font-medium text-slate-900">{{ __('BillPro was updated to v:version', ['version' => $pendingRelease->version]) }}</p>
                            <p class="truncate text-xs text-slate-500">{{ $pendingRelease->title }}</p>
                        </div>
                    </a>
                @endif

                {{-- Delivered: addressed to this user, someone is waiting on them. --}}
                @foreach ($delivered as $item)
                    <div class="group flex items-start gap-3 bg-indigo-50/30 px-4 py-3 transition hover:bg-slate-50">
                        <button type="button" wire:click="open('{{ $item['id'] }}')" class="flex min-w-0 flex-1 items-start gap-3 text-left">
                            <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl {{ $chip[$item['tone']] ?? $chip['info'] }}">
                                <x-icon :name="$item['icon']" class="h-5 w-5" />
                            </span>
                            <span class="min-w-0">
                                <span class="block text-sm font-medium text-slate-900">{{ $item['title'] }}</span>
                                <span class="block text-xs text-slate-500">{{ $item['message'] }}</span>
                                {{-- The figures an alert carries. Every system
                                     notification records these (they are the
                                     email's detail table) and the bell used to
                                     drop them, so a digest whose figures ARE the
                                     message arrived as one sentence. --}}
                                @if (! empty($item['details']))
                                    <span class="mt-1.5 block space-y-0.5 rounded-lg bg-white/70 px-2 py-1.5 ring-1 ring-slate-100">
                                        @foreach ($item['details'] as $label => $value)
                                            <span class="flex items-baseline justify-between gap-3 text-[11px]">
                                                <span class="truncate text-slate-400">{{ $label }}</span>
                                                <span class="shrink-0 font-semibold text-slate-700 tabular-nums">{{ $value }}</span>
                                            </span>
                                        @endforeach
                                    </span>
                                @endif
                                @if ($item['when'])
                                    <span class="mt-0.5 block text-[11px] text-slate-400">{{ $item['when'] }}</span>
                                @endif
                            </span>
                        </button>
                        <button type="button" wire:click="markRead('{{ $item['id'] }}')" title="{{ __('Mark as read') }}"
                                class="mt-1 shrink-0 rounded-md p-1 text-slate-300 opacity-0 transition hover:bg-slate-100 hover:text-slate-500 focus:opacity-100 group-hover:opacity-100">
                            <x-icon name="check" class="h-4 w-4" />
                        </button>
                    </div>
                @endforeach

                {{-- Derived: recomputed live, nothing to mark read. --}}
                @foreach ($derived as $item)
                    <a href="{{ $item['url'] }}" class="flex items-start gap-3 px-4 py-3 transition hover:bg-slate-50">
                        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl {{ $chip[$item['tone']] ?? $chip['info'] }}">
                            <x-icon :name="$item['icon']" class="h-5 w-5" />
                        </span>
                        <div class="min-w-0">
                            <p class="text-sm font-medium text-slate-900">{{ $item['title'] }}</p>
                            <p class="text-xs text-slate-500">{{ $item['message'] }}</p>
                        </div>
                    </a>
                @endforeach

                @if ($total === 0)
                    <div class="flex flex-col items-center gap-2 px-4 py-8 text-center">
                        <span class="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-50 text-emerald-600">
                            <x-icon name="check-circle" class="h-6 w-6" />
                        </span>
                        <p class="text-sm font-medium text-slate-700">{{ __("You're all caught up") }}</p>
                        <p class="text-xs text-slate-400">{{ __('Nothing needs your attention right now.') }}</p>
                    </div>
                @endif
            </div>

            {{-- One-time nudge, shown only while this device is not on push and
                 the server can actually do it. It disappears the moment the
                 device is registered, so it can never become wallpaper. --}}
            <div x-data="{ show: false }"
                 x-init="window.BillPro?.push?.state().then(s => show = s.supported && s.configured && !s.subscribed)"
                 x-on:billpro:push-state.window="window.BillPro?.push?.state().then(s => show = s.supported && s.configured && !s.subscribed)"
                 x-show="show"
                 x-cloak>
                <a href="{{ route('notifications.index') }}"
                   class="flex items-start gap-3 border-t border-slate-100 bg-amber-50/50 px-4 py-3 transition hover:bg-amber-50">
                    <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl bg-amber-100 text-amber-600">
                        <x-icon name="bell-alert" class="h-4 w-4" />
                    </span>
                    <span class="min-w-0">
                        <span class="block text-sm font-medium text-slate-900">{{ __('Get these on your phone') }}</span>
                        <span class="block text-xs text-slate-500">{{ __('Turn on notifications for this device') }}</span>
                    </span>
                </a>
            </div>

            <div class="grid grid-cols-2 divide-x divide-slate-100 border-t border-slate-100">
                <a href="{{ route('activity.index') }}" class="px-4 py-2.5 text-center text-sm font-medium text-indigo-600 transition hover:bg-slate-50">
                    {{ __('All activity') }}
                </a>
                <a href="{{ route('notifications.index') }}" class="px-4 py-2.5 text-center text-sm font-medium text-slate-500 transition hover:bg-slate-50 hover:text-slate-700">
                    {{ __('Settings') }}
                </a>
            </div>

            @if ($currentVersion)
                <a href="{{ route('releases.index') }}" class="flex items-center justify-center gap-1.5 border-t border-slate-100 px-4 py-2 text-center text-[11px] font-medium text-slate-400 transition hover:bg-slate-50 hover:text-slate-600">
                    <x-icon name="sparkles" class="h-3.5 w-3.5" />
                    {{ __('BillPro v:version · What\'s new', ['version' => $currentVersion]) }}
                </a>
            @endif
        </x-slot>
    </x-dropdown>
</div>