@php $fmt = app(\App\Services\Formatter::class); @endphp

<div class="mx-auto max-w-3xl">
    <x-ui.page-header title="Notifications" :subtitle="$unread.' unread'">
        <x-slot:actions>
            <select wire:model.live="filter" class="field-input w-auto">
                <option value="">All</option>
                <option value="unread">Unread only</option>
            </select>

            @if ($unread > 0)
                <x-ui.button wire:click="markAllRead" icon="check">Mark all read</x-ui.button>
            @endif
        </x-slot:actions>
    </x-ui.page-header>

    <div class="card overflow-hidden">
        @if ($rows->isEmpty())
            <x-ui.empty icon="bell" title="Nothing here"
                        message="New signups, uploaded payment proofs and subscription reminders land here." />
        @else
            <ul class="divide-y divide-slate-100 dark:divide-slate-800">
                @foreach ($rows as $row)
                    @php
                        $payload = $row->payload ?? [];
                        $tone = [
                            'danger' => 'bg-red-100 text-red-600 dark:bg-red-950',
                            'warning' => 'bg-amber-100 text-amber-600 dark:bg-amber-950',
                            'success' => 'bg-emerald-100 text-emerald-600 dark:bg-emerald-950',
                        ][$payload['level'] ?? ''] ?? 'bg-blue-100 text-blue-600 dark:bg-blue-950';
                    @endphp

                    <li wire:key="ntf-{{ $row->id }}"
                        @class(['flex gap-3 px-5 py-4', 'bg-brand-soft/40' => ! $row->read_at])>

                        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full {{ $tone }}">
                            <x-ui.icon :name="in_array($payload['level'] ?? '', ['danger', 'warning'], true) ? 'alert' : 'info'" class="h-4 w-4" />
                        </span>

                        <div class="min-w-0 flex-1">
                            <p class="text-sm font-semibold text-slate-900 dark:text-white">
                                {{ $payload['title'] ?? 'Notification' }}
                            </p>
                            <p class="mt-0.5 text-sm text-slate-600 dark:text-slate-300">
                                {{ $payload['message'] ?? '' }}
                            </p>

                            <div class="mt-2 flex items-center gap-3 text-xs">
                                <span class="text-slate-400">{{ $fmt->ago($row->created_at) }}</span>

                                @if (! empty($payload['action_url']))
                                    <a href="{{ $payload['action_url'] }}" class="font-medium text-brand hover:underline">Open</a>
                                @endif

                                @unless ($row->read_at)
                                    <button type="button" wire:click="markRead('{{ $row->id }}')"
                                            class="font-medium text-slate-500 hover:text-slate-700">Mark read</button>
                                @endunless
                            </div>
                        </div>
                    </li>
                @endforeach
            </ul>

            <div class="border-t border-slate-200 p-4 text-center dark:border-slate-800">
                <x-ui.button size="sm" wire:click="loadMore">Load more</x-ui.button>
            </div>
        @endif
    </div>
</div>