@php
    use App\Enums\ModerationSource;
    $busy = 'search,setSource,gotoPage,previousPage,nextPage,goTo';
    $sources = ['' => 'All', ModerationSource::DonationMessage->value => 'Donor messages', ModerationSource::CampaignStory->value => 'Stories', ModerationSource::Username->value => 'Usernames'];
@endphp

<div wire:loading.class="is-busy" wire:target="{{ $busy }}">
    @if ($error)
        <x-admin.panel pad>
            <div class="empty-state">
                <i class="fa-light fa-database" style="color:var(--coral);"></i>
                <div>
                    <div class="es-title">Moderation log unavailable</div>
                    <div class="sub">{{ $error }}</div>
                </div>
                <button type="button" class="btn btn-navy btn-sm" wire:click="$refresh" style="margin-left:auto;"><i class="fa-light fa-rotate-right"></i> Retry</button>
            </div>
        </x-admin.panel>
    @else
    {{-- KPI strip --}}
    <div class="stat-grid mb-1">
        <div class="stat-tile"><span class="ico"><i class="fa-light fa-shield-check"></i></span>
            <span class="v">{{ number_format($kpi['total']) }}</span><span class="k">Events</span></div>
        <div class="stat-tile"><span class="ico"><i class="fa-light fa-broom-wide"></i></span>
            <span class="v">{{ number_format($kpi['cleaned']) }}</span><span class="k">Auto-cleaned</span></div>
        <div class="stat-tile"><span class="ico"><i class="fa-light fa-at"></i></span>
            <span class="v">{{ number_format($kpi['usernames']) }}</span><span class="k">Usernames rejected</span></div>
        <div class="stat-tile"><span class="ico"><i class="fa-light fa-flag"></i></span>
            <span class="v">{{ number_format($kpi['review']) }}</span><span class="k">Needs review</span></div>
    </div>

    <x-admin.toolbar>
        <div class="tb-search">
            <i class="fa-light fa-magnifying-glass" wire:loading.remove wire:target="search"></i>
            <i class="fa-light fa-spinner-third fa-spin" wire:loading wire:target="search" style="color:var(--sky);"></i>
            <input type="text" wire:model.live.debounce.300ms="search" placeholder="Search term, text, user, email&hellip;" autocomplete="off">
            @if ($search !== '')
                <button type="button" class="ibtn" wire:click="$set('search','')" aria-label="Clear" style="border:none;background:transparent;"><i class="fa-light fa-xmark"></i></button>
            @endif
        </div>
        @foreach ($sources as $key => $label)
            <button type="button" class="fchip {{ $source === $key ? 'on' : '' }}" wire:click="setSource('{{ $key }}')">{{ $label }}</button>
        @endforeach
        <span class="sub" style="margin-left:auto;white-space:nowrap;">{{ number_format($events->total()) }} result{{ $events->total() === 1 ? '' : 's' }}</span>
    </x-admin.toolbar>

    <x-admin.panel>
        <div class="tbl-wrap">
            <table class="tbl tbl-cards">
                <thead>
                    <tr>
                        <th>When</th>
                        <th>Source</th>
                        <th>Event</th>
                        <th>User</th>
                        <th>Matched</th>
                        <th>Content</th>
                    </tr>
                </thead>

                <tbody wire:loading.remove wire:target="{{ $busy }}">
                    @forelse ($events as $e)
                        <tr class="click" wire:key="m-{{ $e->id }}" wire:click="goTo({{ $e->id }})">
                            <td class="sub" data-label="When" style="white-space:nowrap;">{{ $e->created_at?->format('d M Y, H:i') ?: '—' }}</td>
                            <td data-label="Source"><x-admin.pill variant="neutral" :icon="$e->source->icon()">{{ $e->source->label() }}</x-admin.pill></td>
                            <td data-label="Event"><x-admin.pill :variant="$e->type->tone()">{{ $e->type->label() }}</x-admin.pill></td>
                            <td data-label="User">
                                <div>{{ $users[$e->u_ident] ?? ($e->email ?: '—') }}</div>
                                @if ($e->u_ident)<div class="sub">{{ $e->u_ident }}</div>@endif
                            </td>
                            <td data-label="Matched">
                                @php $terms = $e->matched_terms ?? []; @endphp
                                @if ($terms !== [])<span style="color:var(--coral);">{{ implode(', ', $terms) }}</span>@else—@endif
                            </td>
                            <td data-label="Content" class="sub">{{ \Illuminate\Support\Str::limit(trim((string) ($e->original_text ?: $e->note)), 60) ?: '—' }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="6">
                            <div class="empty-state">
                                <i class="fa-light fa-shield-check"></i>
                                <div>
                                    <div class="es-title">Nothing to moderate</div>
                                    <div class="sub">No moderation events match.
                                        @if ($source)<button type="button" class="linkish" wire:click="setSource('')">Clear the filter</button>@endif
                                    </div>
                                </div>
                            </div>
                        </td></tr>
                    @endforelse
                </tbody>

                <tbody wire:loading.delay wire:target="{{ $busy }}">
                    @for ($i = 0; $i < 8; $i++)
                        <tr>
                            <td><div class="skel" style="height:12px;width:80px;"></div></td>
                            <td><div class="skel" style="height:18px;width:90px;border-radius:999px;"></div></td>
                            <td><div class="skel" style="height:18px;width:90px;border-radius:999px;"></div></td>
                            <td><div class="skel" style="height:12px;width:70%;"></div></td>
                            <td><div class="skel" style="height:12px;width:50px;"></div></td>
                            <td><div class="skel" style="height:12px;width:80%;"></div></td>
                        </tr>
                    @endfor
                </tbody>
            </table>
        </div>

        @if ($events->hasPages())
            <div class="tbl-foot">
                <span class="sub">Showing {{ $events->firstItem() }}–{{ $events->lastItem() }} of {{ number_format($events->total()) }}</span>
                <div style="display:flex;gap:.4rem;">
                    <button class="fchip" wire:click="previousPage" @disabled($events->onFirstPage())><i class="fa-light fa-chevron-left"></i> Prev</button>
                    <button class="fchip" wire:click="nextPage" @disabled(! $events->hasMorePages())>Next <i class="fa-light fa-chevron-right"></i></button>
                </div>
            </div>
        @endif
    </x-admin.panel>
    @endif
</div>