@php
    use App\Services\Notifications\NotificationService;
    $cats = NotificationService::CATEGORIES;
    $chips = [
        'all' => ['All', null],
        'unread' => ['Unread'.($unread ? ' · '.$unread : ''), 'fa-circle'],
        'task' => ['Tasks', 'fa-square-check'],
        'approval' => ['Approvals', 'fa-stamp'],
        'group' => ['Groups', 'fa-people-group'],
        'content' => ['Content', 'fa-pen-field'],
        'moderation' => ['Moderation', 'fa-message-exclamation'],
        'donation' => ['Donations', 'fa-hand-holding-heart'],
        'system' => ['System', 'fa-heart-pulse'],
    ];
@endphp

<div>
    <x-admin.view-head icon="fa-light fa-bell" eyebrow="Operations" title="Notifications"
        lede="Everything happening across the portal — reminders, approvals, content and system alerts in one feed.">
        <x-slot:actions>
            <x-admin.pill :variant="$unread ? 'coral' : 'neutral'">{{ $unread }} unread</x-admin.pill>
            <button type="button" class="btn btn-ghost btn-sm" wire:click="markAllRead"
                @disabled($unread === 0) @style(['opacity:.45;cursor:not-allowed;' => $unread === 0])>
                <i class="fa-light fa-check-double"></i> Mark all read
            </button>
        </x-slot:actions>
    </x-admin.view-head>

    <div class="dash-grid" style="margin-top:0;">
        {{-- Feed --}}
        <x-admin.panel pad style="padding-top:.75rem;">
            <x-admin.toolbar style="margin-bottom:.5rem;">
                @foreach ($chips as $key => [$label, $ic])
                    <button type="button" class="fchip {{ $filter === $key ? 'on' : '' }}" wire:click="setFilter('{{ $key }}')">
                        @if ($ic)<i class="fa-light {{ $ic }}"></i> @endif{{ $label }}
                    </button>
                @endforeach
                @if ($unread > 0)
                    <button type="button" class="btn btn-ghost btn-sm" wire:click="markAllRead" style="margin-left:auto;"><i class="fa-light fa-check-double"></i> Mark all read</button>
                @endif
            </x-admin.toolbar>

            @forelse ($groups as $group)
                <div class="tgroup"><span class="lbl">{{ $group['day'] }}</span><span class="ct">{{ $group['items']->count() }}</span><span class="line"></span></div>
                @foreach ($group['items'] as $n)
                    <div class="ntf-row cat-{{ $n['cat'] }} {{ $n['urgent'] ? 'urgent' : '' }} {{ $n['unread'] ? 'unread' : 'read' }}"
                        wire:key="ntf-{{ $n['key'] }}" wire:click="open('{{ $n['key'] }}')">
                        @if ($n['unread'])<span class="accent"></span>@endif
                        <span class="ico"><i class="fa-light {{ $n['icon'] }}"></i></span>
                        <div class="ttl">{{ $n['title'] }}</div>
                        <div class="tx">{{ $n['text'] }}</div>
                        <span class="when">{{ $n['when'] }}</span>
                    </div>
                @endforeach
            @empty
                <div class="task-empty">
                    <i class="fa-light fa-bell-slash" style="font-size:1.4rem;color:var(--ink-soft);display:block;margin-bottom:.5rem;"></i>
                    {{ $filter === 'unread' ? 'No unread notifications — you’re all caught up.' : 'Nothing here right now.' }}
                </div>
            @endforelse
        </x-admin.panel>

        {{-- Preferences + digest --}}
        <div style="display:flex;flex-direction:column;gap:1rem;min-width:0;">
            <x-admin.panel pad>
                <x-admin.eyebrow icon="fa-light fa-sliders">Notification preferences</x-admin.eyebrow>
                <div class="mt-1">
                    @foreach ($cats as $key => $meta)
                        @php $on = ($prefs[$key] ?? true) !== false; $ct = $catCounts[$key] ?? 0; @endphp
                        <div class="pref-row">
                            <span class="ico"><i class="fa-light {{ $meta['icon'] }}"></i></span>
                            <div class="mid">
                                <div class="nm">{{ $meta['label'] }}@if ($ct)<x-admin.pill variant="neutral" style="font-size:.62rem;padding:.02rem .4rem;">{{ $ct }}</x-admin.pill>@endif</div>
                                <div class="ds">{{ $meta['desc'] }}</div>
                            </div>
                            <label class="switch">
                                <input type="checkbox" @checked($on) wire:click="togglePref('{{ $key }}')">
                                <span class="track"></span><span class="knob"></span>
                            </label>
                        </div>
                    @endforeach
                </div>

                <div style="border-top:1px solid var(--line);margin-top:.7rem;padding-top:.5rem;">
                    <x-admin.eyebrow icon="fa-light fa-paper-plane" style="font-size:.66rem;">Delivery</x-admin.eyebrow>
                    <div class="mt-1" style="margin-top:.5rem;">
                        @foreach (NotificationService::CHANNELS as $ch => $meta)
                            @php $on = ($prefs['ch_'.$ch] ?? true) !== false; @endphp
                            <div class="pref-row">
                                <span class="ico"><i class="fa-light {{ $meta['icon'] }}"></i></span>
                                <div class="mid"><div class="nm">{!! $meta['label'] !!}</div></div>
                                <label class="switch">
                                    <input type="checkbox" @checked($on) wire:click="togglePref('ch_{{ $ch }}')">
                                    <span class="track"></span><span class="knob"></span>
                                </label>
                            </div>
                        @endforeach
                    </div>
                </div>
            </x-admin.panel>

            <x-admin.panel pad>
                <x-admin.eyebrow icon="fa-light fa-envelope-open-text">Daily digest</x-admin.eyebrow>
                <p style="font-size:.84rem;color:var(--ink-soft);margin:.7rem 0 0;line-height:1.5;">
                    @if ($unread)
                        You have <strong style="font-family:'Quicksand',sans-serif;color:var(--navy);">{{ $unread }}</strong> unread notification{{ $unread === 1 ? '' : 's' }}.
                    @else
                        You’re all caught up.
                    @endif
                    A summary email is sent each morning at <strong style="font-family:'Quicksand',sans-serif;color:var(--navy);">08:00</strong> to {{ $recipient }}.
                </p>
                <div style="display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap;">
                    <button type="button" class="btn btn-ghost btn-sm" wire:click="sendDigestPreview">
                        <i class="fa-light fa-paper-plane"></i> Send me a preview
                    </button>
                </div>
            </x-admin.panel>
        </div>
    </div>
</div>