@php
    $sortIcon = function (string $col) use ($sort, $direction): string {
        if ($sort !== $col) return 'fa-light fa-arrows-up-down';
        return $direction === 'asc' ? 'fa-solid fa-caret-up' : 'fa-solid fa-caret-down';
    };
    $busy = 'search,setStatus,sortBy,gotoPage,previousPage,nextPage,goTo';
@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">Donations are temporarily 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
    {{-- Date-range selector — drives both the KPIs and the table (default Today).
         A search overrides it and covers all dates. --}}
    <div style="display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-bottom:.75rem;">
        <span class="sub" style="margin-right:.25rem;white-space:nowrap;"><i class="fa-light fa-calendar-range"></i> Period</span>
        @foreach (['today' => 'Today', '7days' => '7 days', '30days' => '30 days', 'year' => 'This year', 'all' => 'All'] as $key => $label)
            <button type="button" class="fchip {{ $range === $key ? 'on' : '' }}" wire:click="setRange('{{ $key }}')" @disabled($searching)>{{ $label }}</button>
        @endforeach
        @if ($searching)
            <span class="sub" style="margin-left:.25rem;white-space:nowrap;"><i class="fa-light fa-circle-info"></i> Search covers all dates</span>
        @endif
    </div>

    {{-- KPI strip --}}
    <div class="stat-grid mb-1">
        <div class="stat-tile"><span class="ico"><i class="fa-light fa-hand-holding-heart"></i></span>
            <span class="v">€{{ number_format($kpi['raised'], 0) }}</span><span class="k">Raised</span></div>
        <div class="stat-tile"><span class="ico"><i class="fa-light fa-receipt"></i></span>
            <span class="v">{{ number_format($kpi['count']) }}</span><span class="k">Donations</span></div>
        <div class="stat-tile"><span class="ico"><i class="fa-light fa-chart-simple"></i></span>
            <span class="v">€{{ number_format($kpi['average'], 0) }}</span><span class="k">Average gift</span></div>
        <div class="stat-tile"><span class="ico"><i class="fa-light fa-rotate-left"></i></span>
            <span class="v">{{ number_format($kpi['refunded']) }}</span><span class="k">Refunded</span></div>
    </div>
    @unless ($searching)
        <p class="sub" style="margin:-.35rem 0 .9rem;font-size:.78rem;">
            <i class="fa-light fa-clock-rotate-left"></i>
            @if ($kpiComputedAt)
                Updated {{ $kpiComputedAt->diffForHumans() }}
            @else
                Updating…
            @endif
        </p>
    @endunless

    <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 donor, email, amount, reference&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 (['' => 'All', 'passed' => 'Passed', 'refunded' => 'Refunded'] as $key => $label)
            <button type="button" class="fchip {{ $status === $key ? 'on' : '' }}" wire:click="setStatus('{{ $key }}')">{{ $label }}</button>
        @endforeach
        <span class="sub" style="margin-left:auto;white-space:nowrap;">{{ number_format($donations->total()) }} result{{ $donations->total() === 1 ? '' : 's' }}</span>
    </x-admin.toolbar>

    <x-admin.panel>
        <div class="tbl-wrap">
            <table class="tbl tbl-cards">
                <thead>
                    <tr>
                        <th class="sortable" wire:click="sortBy('d_name')">Donor <i class="{{ $sortIcon('d_name') }}"></i></th>
                        <th>Fundraiser</th>
                        <th class="r sortable" wire:click="sortBy('d_amount')">Amount <i class="{{ $sortIcon('d_amount') }}"></i></th>
                        <th class="sortable" wire:click="sortBy('d_date')">Date <i class="{{ $sortIcon('d_date') }}"></i></th>
                        <th>Visibility</th>
                        <th>Status</th>
                    </tr>
                </thead>

                <tbody wire:loading.remove wire:target="{{ $busy }}">
                    @forelse ($donations as $d)
                        @php
                            $anon = (int) $d->anon === 1;
                            $refunded = (bool) $d->refunded;
                        @endphp
                        <tr class="click" wire:key="d-{{ $d->id }}" wire:click="goTo({{ $d->id }})">
                            <td data-label="Donor">
                                <div class="nm">{{ trim((string) $d->d_name) ?: '—' }}</div>
                                <div class="sub">{{ $d->d_email ?: ($d->d_ident ?: '#'.$d->id) }}</div>
                            </td>
                            <td data-label="Fundraiser">
                                <div>{{ trim((string) $d->d_desc) ?: '—' }}</div>
                                <div class="sub">{{ $d->u_ident }}</div>
                            </td>
                            <td class="num r" data-label="Amount">€{{ number_format((float) $d->d_amount, 0) }}</td>
                            <td class="sub" data-label="Date" style="white-space:nowrap;">{{ $d->d_date?->format('d M Y') ?: '—' }}</td>
                            <td data-label="Visibility">
                                @if ($anon)
                                    <x-admin.pill variant="navy"><i class="fa-light fa-user-secret"></i> Anon</x-admin.pill>
                                @else
                                    <x-admin.pill variant="neutral">Public</x-admin.pill>
                                @endif
                            </td>
                            <td data-label="Status">
                                @if ($refunded)
                                    <x-admin.pill variant="coral">Refunded</x-admin.pill>
                                @else
                                    <x-admin.pill variant="success">{{ $d->d_status ?: 'PASSED' }}</x-admin.pill>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="6">
                            <div class="empty-state">
                                <i class="fa-light fa-hand-holding-heart"></i>
                                <div>
                                    <div class="es-title">No donations match</div>
                                    <div class="sub">
                                        Nothing matches your search.
                                        @if ($status)<button type="button" class="linkish" wire:click="setStatus('')">Clear the {{ $status }} 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: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:40px;margin-left:auto;"></div></td>
                            <td><div class="skel" style="height:12px;width:72px;"></div></td>
                            <td><div class="skel" style="height:18px;width:60px;border-radius:999px;"></div></td>
                            <td><div class="skel" style="height:18px;width:74px;border-radius:999px;"></div></td>
                        </tr>
                    @endfor
                </tbody>
            </table>
        </div>

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