@php
    $fmt = fn (?array $v): ?string => $v ? implode(', ', array_map('strval', array_values($v))) : null;
    $busy = 'search,gotoPage,previousPage,nextPage,goTo';
@endphp

<div wire:loading.class="is-busy" wire:target="{{ $busy }}">
    <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 admin, fundraiser, action, entity&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>
        <x-admin.pill variant="navy"><i class="fa-light fa-lock"></i> Append-only</x-admin.pill>
        <span class="sub" style="margin-left:auto;white-space:nowrap;">{{ number_format($entries->total()) }} {{ \Illuminate\Support\Str::plural('entry', $entries->total()) }}</span>
    </x-admin.toolbar>

    <x-admin.panel>
        <div class="tbl-wrap">
            <table class="tbl tbl-cards">
                <thead>
                    <tr>
                        <th>Acting admin · IP</th>
                        <th>Fundraiser</th>
                        <th>Action · Entity</th>
                        <th>Old → New</th>
                        <th>Reason</th>
                        <th>When</th>
                    </tr>
                </thead>

                <tbody wire:loading.remove wire:target="{{ $busy }}">
                    @forelse ($entries as $e)
                        <tr class="click" wire:key="a-{{ $e->id }}" wire:click="goTo({{ $e->id }})">
                            <td data-label="Acting admin">
                                <div class="nm" style="font-size:.82rem;">{{ $e->actor?->full_name ?: 'System' }}</div>
                                <div class="sub">{{ $e->ip_address ?: '—' }}</div>
                            </td>
                            <td data-label="Fundraiser">
                                <div>{{ $e->affectedUser?->full_name ?: '—' }}</div>
                                @if ($e->affected_u_ident)<div class="sub">{{ $e->affected_u_ident }}</div>@endif
                            </td>
                            <td data-label="Action">
                                <div>{{ $e->action }}</div>
                                @if ($e->entity_type)<div class="sub">{{ $e->entity_type }}@if ($e->entity_id) #{{ $e->entity_id }}@endif</div>@endif
                            </td>
                            <td data-label="Old → New">
                                @if ($fmt($e->old_value) || $fmt($e->new_value))
                                    <x-admin.diff :old="$fmt($e->old_value)" :new="$fmt($e->new_value)" />
                                @else
                                    <span class="sub">—</span>
                                @endif
                            </td>
                            <td class="sub" data-label="Reason">{{ $e->reason ?: '—' }}</td>
                            <td class="sub" data-label="When" style="white-space:nowrap;">{{ $e->created_at?->format('d M Y, H:i') }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="6">
                            <div class="empty-state">
                                <i class="fa-light fa-scroll"></i>
                                <div>
                                    <div class="es-title">No audit entries</div>
                                    <div class="sub">Nothing matches your search.</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:14px;width:60%;"></div><div class="skel" style="height:10px;width:40%;margin-top:.4rem;"></div></td>
                            <td><div class="skel" style="height:12px;width:70%;"></div></td>
                            <td><div class="skel" style="height:12px;width:70%;"></div></td>
                            <td><div class="skel" style="height:12px;width:80%;"></div></td>
                            <td><div class="skel" style="height:12px;width:50%;"></div></td>
                            <td><div class="skel" style="height:12px;width:80px;"></div></td>
                        </tr>
                    @endfor
                </tbody>
            </table>
        </div>

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