@php
    $eur = fn ($n) => '€'.number_format((float) $n);
    $initials = fn ($u) => strtoupper(mb_substr((string) $u->first_name, 0, 1).mb_substr((string) $u->last_name, 0, 1)) ?: '?';
    $alphabet = range('A', 'Z');
@endphp

<div wire:loading.class="is-busy" wire:target="search,setLetter,setPerPage,gotoPage,nextPage,previousPage">
    {{-- Search panel --}}
    <section class="panel panel-pad">
        <div class="search-grid">
            <div>
                <label class="az-label" for="q"><i class="fa-light fa-magnifying-glass"></i>&nbsp; Search by name or username</label>
                <div class="search-bar {{ $search !== '' ? 'has-text' : '' }}">
                    <i class="fa-light fa-magnifying-glass lead"></i>
                    <input type="text" id="q" wire:model.live.debounce.300ms="search" autocomplete="off"
                           placeholder="e.g. Aoife, Walsh or aoifew…" aria-label="Search fundraisers">
                    @if ($search !== '')
                        <button type="button" class="clear" wire:click="$set('search','')" aria-label="Clear search"><i class="fa-light fa-xmark"></i></button>
                    @endif
                </div>
                <div class="search-hint">Matches first name, last name or campaign username.</div>
            </div>
            <div>
                <span class="az-label"><i class="fa-light fa-list"></i>&nbsp; Browse by surname A&ndash;Z</span>
                <div class="az-row">
                    <button class="az-btn all {{ $letter === 'all' ? 'on' : '' }}" wire:click="setLetter('all')">All</button>
                    @foreach ($alphabet as $L)
                        <button class="az-btn {{ $letter === $L ? 'on' : '' }}" wire:click="setLetter('{{ $L }}')" @disabled(! isset($available[$L]))>{{ $L }}</button>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    {{-- Results meta --}}
    <div class="results-meta">
        <div class="count">
            @if ($fundraisers->total() === 0)
                No matches
            @else
                Showing <strong>{{ $fundraisers->firstItem() }}&ndash;{{ $fundraisers->lastItem() }}</strong> of <strong>{{ number_format($fundraisers->total()) }}</strong> {{ \Illuminate\Support\Str::plural('fundraiser', $fundraisers->total()) }}
                @if ($letter !== 'all') · surname “{{ $letter }}”@endif
                @if ($search !== '') · “{{ $search }}”@endif
            @endif
        </div>
        <div class="perpage">
            <span>Show</span>
            <select wire:model.live="perPage" aria-label="Results per page">
                @foreach ($perPageOptions as $opt)
                    <option value="{{ $opt }}">{{ $opt }}</option>
                @endforeach
            </select>
            <span>per page</span>
        </div>
    </div>

    {{-- Results --}}
    @if ($fundraisers->isEmpty())
        <div class="no-results">
            <i class="fa-light fa-user-slash"></i>
            <div style="font-family:'Quicksand',sans-serif;font-weight:700;color:var(--navy);font-size:1.1rem;">No fundraisers found</div>
            <div>Try a different name, username, or letter.</div>
        </div>
    @else
        <div class="result-grid">
            @foreach ($fundraisers as $u)
                @php
                    $raised = (float) ($u->campaign?->available_fund ?? 0);
                    $goal = (int) ($u->campaign?->goal ?: $u->goal ?: 600);
                    $pct = $goal > 0 ? (int) round($raised / $goal * 100) : 0;
                    $over = $raised >= $goal && $goal > 0;
                    $url = route('campaign.show', $u->username);
                @endphp
                <article class="result-card" wire:key="fr-{{ $u->id }}">
                    {{-- Whole-card link to the campaign page (the Sponsor button sits above it). --}}
                    <a href="{{ $url }}" class="rc-cardlink" aria-label="View {{ $u->full_name ?: $u->first_name }}’s campaign"></a>
                    <div class="rc-top">
                        <span class="rc-av">{{ $initials($u) }}</span>
                        <div style="min-width:0;">
                            <div class="rc-name">{{ $u->full_name ?: trim($u->first_name.' '.$u->last_name) }}</div>
                            <div class="rc-user">{{ '@'.$u->username }}</div>
                            @if ($u->county)<div class="rc-county"><i class="fa-light fa-location-dot"></i> {{ $u->county }}</div>@endif
                        </div>
                        {{-- Listed participants are non-closed → authorised. --}}
                        <span class="badge-auth"><i class="fa-light fa-shield-check"></i> Authorised</span>
                    </div>
                    <div class="rc-thermo">
                        <div class="track"><div class="fill {{ $over ? 'over' : '' }}" style="width:{{ min($pct, 100) }}%"></div></div>
                        <div class="rc-figs">
                            <span><span class="raised">{{ $eur($raised) }}</span> <span class="goal">of {{ $eur($goal) }}</span></span>
                            <span class="pct">{{ $pct }}%</span>
                        </div>
                    </div>
                    <div class="rc-actions">
                        <a href="{{ $url }}" class="btn btn-donate"><i class="fa-light fa-hand-holding-heart"></i> Sponsor</a>
                    </div>
                </article>
            @endforeach
        </div>

        {{-- Pagination --}}
        @if ($fundraisers->hasPages())
            <nav class="pager" aria-label="Results pages">
                <button wire:click="previousPage" @disabled($fundraisers->onFirstPage()) aria-label="Previous"><i class="fa-light fa-chevron-left"></i></button>
                @foreach ($fundraisers->getUrlRange(max(1, $fundraisers->currentPage() - 1), min($fundraisers->lastPage(), $fundraisers->currentPage() + 1)) as $page => $url)
                    <button wire:click="gotoPage({{ $page }})" class="{{ $page === $fundraisers->currentPage() ? 'on' : '' }}">{{ $page }}</button>
                @endforeach
                <button wire:click="nextPage" @disabled(! $fundraisers->hasMorePages()) aria-label="Next"><i class="fa-light fa-chevron-right"></i></button>
            </nav>
        @endif
    @endif
</div>