@php
    $style = [
        'success' => ['check-circle-2', 'text-green-400', 'bg-green-500/10'],
        'warning' => ['alert-triangle', 'text-amber-400', 'bg-amber-500/10'],
        'error' => ['alert-circle', 'text-red-400', 'bg-red-500/10'],
        'info' => ['info', 'text-blue-400', 'bg-blue-500/10'],
    ];
    $typeAction = [
        \App\Models\BillingNotification::TYPE_PAYMENT_SUCCESS => ['billing', 'View billing'],
        \App\Models\BillingNotification::TYPE_INVOICE_READY => ['billing', 'View invoice'],
        \App\Models\BillingNotification::TYPE_RENEWAL_REMINDER => ['billing', 'Manage plan'],
        \App\Models\BillingNotification::TYPE_SUBSCRIPTION_EXPIRING => ['billing', 'Renew now'],
        \App\Models\BillingNotification::TYPE_EXPIRED => ['billing', 'Renew now'],
        \App\Models\BillingNotification::TYPE_GRACE_REMAINING => ['billing', 'Renew now'],
        \App\Models\BillingNotification::TYPE_DESKTOP_LOCKED => ['user.devices', 'View devices'],
    ];
@endphp

<div class="space-y-5">

    {{-- Title row --}}
    <div class="flex flex-wrap items-start justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-white">Notifications</h1>
            <p class="mt-1 text-sm text-slate-400">Billing alerts, subscription reminders and system messages.</p>
        </div>
        @if ($counts['unread'] > 0)
            <button wire:click="markAllRead"
                    class="inline-flex items-center gap-2 rounded-xl border border-edge bg-card px-4 py-2.5 text-sm font-semibold text-slate-300 hover:bg-raised">
                <x-lucide-check-check class="h-4 w-4" /> Mark all read ({{ $counts['unread'] }})
            </button>
        @endif
    </div>

    {{-- List --}}
    <section class="admin-card">
        <div class="flex items-center gap-3 border-b border-edge p-4">
            <div class="flex rounded-lg border border-edge bg-ink p-0.5 text-xs">
                @foreach (['all' => 'All', 'unread' => 'Unread'] as $key => $label)
                    <button wire:click="setFilter('{{ $key }}')"
                            class="rounded-md px-3 py-1.5 font-medium transition {{ $filter === $key ? 'bg-raised text-white shadow' : 'text-slate-500 hover:text-slate-300' }}">
                        {{ $label }} <span class="tabular-nums {{ $filter === $key ? 'text-slate-400' : 'text-slate-600' }}">{{ $counts[$key] }}</span>
                    </button>
                @endforeach
            </div>
        </div>

        @if ($rows->count())
            <div class="divide-y divide-edge">
                @foreach ($rows as $n)
                    @php([$icon, $text, $bg] = $style[$n->level] ?? $style['info'])
                    @php($action = $typeAction[$n->type] ?? null)
                    @php($unread = $n->read_at === null)
                    <div class="flex gap-3.5 px-5 py-4 transition hover:bg-raised/40 {{ $unread ? '' : 'opacity-70' }}">
                        <span class="relative mt-0.5 grid h-10 w-10 shrink-0 place-items-center rounded-xl {{ $bg }} {{ $text }}">
                            <x-dynamic-component :component="'lucide-'.$icon" class="h-5 w-5" />
                            @if ($unread)
                                <span class="absolute -right-1 -top-1 h-2.5 w-2.5 rounded-full bg-brand-500 ring-2 ring-card"></span>
                            @endif
                        </span>
                        <div class="min-w-0 flex-1">
                            <div class="text-sm font-semibold {{ $unread ? 'text-white' : 'text-slate-300' }}">{{ $n->title }}</div>
                            @if ($n->body)
                                <p class="mt-0.5 text-xs leading-relaxed text-slate-400">{{ $n->body }}</p>
                            @endif
                            <div class="mt-1.5 flex items-center gap-3 text-[11px] text-slate-600">
                                <span>{{ $n->created_at->diffForHumans() }}</span>
                                @if ($action)
                                    <a href="{{ route($action[0]) }}" wire:navigate class="font-semibold text-brand-500 hover:underline">{{ $action[1] }}</a>
                                @endif
                                @if ($unread)
                                    <button wire:click="markRead({{ $n->id }})" class="font-medium text-slate-500 hover:text-slate-300">Mark read</button>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            @if ($rows->hasPages())
                <div class="border-t border-edge px-5 py-3">{{ $rows->links('pagination.dark') }}</div>
            @endif
        @else
            <div class="px-6 py-14 text-center">
                <span class="mx-auto grid h-14 w-14 place-items-center rounded-2xl bg-brand/15 text-brand-500"><x-lucide-bell class="h-7 w-7" /></span>
                <h2 class="mt-4 text-lg font-bold text-white">{{ $filter === 'unread' ? "You're all caught up" : 'No notifications yet' }}</h2>
                <p class="mt-1 text-sm text-slate-400">{{ $filter === 'unread' ? 'Every notification has been read.' : 'Billing and subscription alerts will appear here.' }}</p>
            </div>
        @endif
    </section>
</div>