@php
    use App\Models\User;

    $initials = fn (?string $name) => strtoupper(collect(explode(' ', trim((string) $name)))
        ->filter()->map(fn ($p) => mb_substr($p, 0, 1))->take(2)->implode('')) ?: '?';

    // Combined status pill from progress (same vocabulary as the list cards).
    [$statusLabel, $statusVariant, $statusIcon] = match (true) {
        $pct >= 100 => ['Over target', 'success', 'fa-light fa-trophy'],
        $pct >= 90 => ['Almost there', 'sky', null],
        $pct < 50 => ['Behind', 'amber', 'fa-light fa-gauge-simple-low'],
        default => ['On track', 'neutral', null],
    };

    $captain = $group->captain;
@endphp

<x-admin.layout :title="$group->name ?: 'Group'" active="groups">
    <x-admin.backlink :href="route('admin.groups')">Groups</x-admin.backlink>

    {{-- Header --}}
    <div class="view-head" style="margin-top:.8rem;">
        <div style="display:flex;gap:.9rem;align-items:center;min-width:0;">
            <span class="gc-ico" style="width:56px;height:56px;border-radius:15px;font-size:1.4rem;"><i class="fa-light fa-people-group"></i></span>
            <div style="min-width:0;">
                <h2>{{ $group->name }}</h2>
                <p class="lede">
                    <span>/group/{{ $group->slug }}</span> · {{ $memberCount }} {{ \Illuminate\Support\Str::plural('member', $memberCount) }}
                    @if ($group->created_at) · created {{ $group->created_at->format('d M Y') }}@endif
                    &nbsp;<x-admin.pill :variant="$statusVariant" :icon="$statusIcon">{{ $statusLabel }}</x-admin.pill>
                </p>
            </div>
        </div>
        <div style="display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;">
            <x-admin.btn variant="navy" sm icon="fa-light fa-pen" :href="route('admin.groups.edit', $group)" wire:navigate>Edit group</x-admin.btn>
            <x-admin.btn variant="ghost" sm icon="fa-light fa-arrow-up-right-from-square" :href="$group->publicUrl()">View public page</x-admin.btn>
        </div>
    </div>

    <div class="grid-2 cols-edit">
        {{-- Left column --}}
        <div style="display:flex;flex-direction:column;gap:1rem;min-width:0;">
            {{-- Combined progress --}}
            <x-admin.panel pad>
                <x-admin.eyebrow icon="fa-light fa-mountain-sun">Combined progress</x-admin.eyebrow>
                <div style="display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-top:.7rem;">
                    <span class="big-num" data-count="{{ (int) $raised }}" data-count-prefix="€">€{{ number_format($raised, 0) }}</span>
                    <span class="sub">of €{{ number_format($goal, 0) }} group goal · {{ $donations }} {{ \Illuminate\Support\Str::plural('donation', $donations) }}</span>
                </div>
                <div style="margin-top:.6rem;"><x-admin.mini-thermometer :pct="$pct" :over="$raised > $goal" /></div>
                <div class="stat-grid" style="margin-top:1rem;">
                    <x-admin.stat-tile icon="fa-light fa-percent" label="To group goal" style="box-shadow:none;">{{ $pct }}%</x-admin.stat-tile>
                    <x-admin.stat-tile icon="fa-light fa-user-group" label="Members" style="box-shadow:none;">{{ $memberCount }}</x-admin.stat-tile>
                    <x-admin.stat-tile icon="fa-light fa-coins" label="Avg / member" style="box-shadow:none;">€{{ number_format($avgPerMember, 0) }}</x-admin.stat-tile>
                </div>
            </x-admin.panel>

            {{-- Member leaderboard --}}
            <x-admin.panel>
                <x-admin.panel-head title="Member leaderboard">
                    <x-admin.pill variant="neutral">{{ $memberCount }} {{ \Illuminate\Support\Str::plural('member', $memberCount) }}</x-admin.pill>
                </x-admin.panel-head>
                <div class="tbl-wrap">
                    <table class="tbl tbl-cards">
                        <thead>
                            <tr><th>#</th><th>Fundraiser</th><th>Role</th><th class="r">Raised</th><th>Progress</th><th>Status</th><th>Voucher</th><th class="r"></th></tr>
                        </thead>
                        <tbody>
                            @forelse ($rows as $i => $row)
                                @php $m = $row['model']; @endphp
                                <tr class="click" wire:key="m-{{ $m->id }}" onclick="window.location='{{ route('admin.users.show', $m) }}'">
                                    <td data-label="#"><span class="rank {{ $i < 3 ? 'r'.($i + 1) : '' }}">{{ $i + 1 }}</span></td>
                                    <td data-label="Fundraiser">
                                        <div class="nm">{{ $m->full_name ?: $m->username }}</div>
                                        <div class="sub">{{ '@'.$m->username }} · {{ $m->county ?: '—' }}</div>
                                    </td>
                                    <td data-label="Role">
                                        @if ($row['is_captain'])
                                            <x-admin.pill variant="amber" icon="fa-light fa-crown">Captain</x-admin.pill>
                                        @else
                                            <x-admin.pill variant="neutral">Member</x-admin.pill>
                                        @endif
                                    </td>
                                    <td class="r num" data-label="Raised">€{{ number_format($row['raised'], 0) }}</td>
                                    <td data-label="Progress" style="min-width:140px;"><x-admin.mini-thermometer :pct="$row['pct']" :over="$row['raised'] > $row['goal']" /></td>
                                    <td data-label="Status"><x-admin.pill :variant="$row['status'][1]" icon="fa-solid fa-circle">{{ $row['status'][0] }}</x-admin.pill></td>
                                    <td data-label="Voucher">
                                        @if ($row['voucher_met'])
                                            <x-admin.pill variant="success" icon="fa-light fa-ticket">Earned</x-admin.pill>
                                        @else
                                            <x-admin.pill variant="neutral">Below</x-admin.pill>
                                        @endif
                                    </td>
                                    <td class="r" data-label="" onclick="event.stopPropagation()">
                                        {{-- The captain already has the invite link in their own portal. --}}
                                        @unless ($row['is_captain'])
                                            <form method="POST" action="{{ route('admin.groups.resend-invite', [$group, $m]) }}" style="display:inline;">
                                                @csrf
                                                <x-admin.btn type="submit" variant="ghost" sm icon="fa-light fa-paper-plane" title="Email this member the group invite link">Resend link</x-admin.btn>
                                            </form>
                                        @endunless
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="8">
                                    <div class="empty-state">
                                        <i class="fa-light fa-user-group"></i>
                                        <div><div class="es-title">No members yet</div><div class="sub">Add fundraisers via <a href="{{ route('admin.groups.edit', $group) }}" wire:navigate>Edit group</a>.</div></div>
                                    </div>
                                </td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </x-admin.panel>
        </div>

        {{-- Right column --}}
        <div style="display:flex;flex-direction:column;gap:1rem;min-width:0;">
            {{-- Group details --}}
            <x-admin.panel pad>
                <x-admin.eyebrow icon="fa-light fa-circle-info">Group details</x-admin.eyebrow>
                <div class="mt-1">
                    <x-admin.kv label="Captain">
                        @if ($captain)
                            <span class="mini-av">{{ $initials($captain->full_name ?: $captain->username) }}</span> <strong>{{ $captain->full_name ?: $captain->username }}</strong>
                        @else
                            <span class="sub">No captain set</span>
                        @endif
                    </x-admin.kv>
                    <x-admin.kv label="Members"><strong>{{ $memberCount }}</strong></x-admin.kv>
                    <x-admin.kv label="Group goal"><strong>€{{ number_format($goal, 0) }}</strong></x-admin.kv>
                    <x-admin.kv label="Raised"><strong>€{{ number_format($raised, 0) }}</strong> <span class="sub">· {{ $pct }}%</span><x-slot:trailing><x-admin.pill :variant="$pct >= 100 ? 'success' : 'neutral'">{{ $pct }}%</x-admin.pill></x-slot:trailing></x-admin.kv>
                    <x-admin.kv label="Voucher threshold">€{{ number_format($threshold, 0) }} <span class="sub">internal minimum</span><x-slot:trailing><x-admin.tag-src type="readonly">Σ members</x-admin.tag-src></x-slot:trailing></x-admin.kv>
                    <x-admin.kv label="Each member's share">€{{ number_format($group->shareGoal(), 0) }}<x-slot:trailing><x-admin.tag-src type="controlled">goal ÷ members</x-admin.tag-src></x-slot:trailing></x-admin.kv>
                    <x-admin.kv label="Created">{{ $group->created_at?->format('d M Y') ?: '—' }}</x-admin.kv>
                    <x-admin.kv label="Public page"><a class="lk" href="{{ $group->publicUrl() }}" target="_blank" rel="noopener noreferrer">/group/{{ $group->slug }}</a></x-admin.kv>
                </div>
            </x-admin.panel>

            {{-- Needs attention --}}
            @if ($needs->isNotEmpty())
                <x-admin.panel pad>
                    <x-admin.eyebrow icon="fa-light fa-circle-exclamation">Needs attention</x-admin.eyebrow>
                    <div class="mt-1">
                        @foreach ($needs as $row)
                            @php $m = $row['model']; $pending = $row['status'][0] !== 'Active'; @endphp
                            <div class="attn-row {{ $pending ? 'warn' : '' }}" onclick="window.location='{{ route('admin.users.show', $m) }}'">
                                <span class="ico"><i class="fa-light {{ $pending ? 'fa-id-badge' : 'fa-circle-dashed' }}"></i></span>
                                <span class="tx">{{ $m->full_name ?: $m->username }}</span>
                                <x-admin.pill :variant="$pending ? 'amber' : 'neutral'">{{ $pending ? $row['status'][0] : 'No donations yet' }}</x-admin.pill>
                                <i class="fa-light fa-chevron-right chev"></i>
                            </div>
                        @endforeach
                    </div>
                </x-admin.panel>
            @endif

            {{-- Captain & membership (editing lives in the form) --}}
            <x-admin.panel pad>
                <x-admin.eyebrow icon="fa-light fa-gear">Captain &amp; membership</x-admin.eyebrow>
                <p class="sub" style="margin:.7rem 0 .8rem;line-height:1.5;">
                    A fundraiser can belong to one group only. Reassigning the captain or adding/removing a
                    member updates their individual goal split and public group page.
                </p>
                <x-admin.btn variant="ghost" sm icon="fa-light fa-users-gear" :href="route('admin.groups.edit', $group)" wire:navigate>Manage members &amp; captain</x-admin.btn>
            </x-admin.panel>
        </div>
    </div>
</x-admin.layout>