@php
    use Illuminate\Support\Str;

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

    $eur = fn ($n) => '€'.number_format((float) $n, 0);

    $periods = ['today' => 'Today', '7days' => '7 days', '30days' => '30 days', 'year' => 'YTD'];
    $sparkMax = max(1, max($sparkline));
@endphp

<x-admin.layout title="Dashboard" active="dashboard">
    <x-admin.view-head icon="fa-light fa-gauge" eyebrow="Overview" :title="$greeting"
        :lede="'Campaign pulse for Skydive For Life — '.$today.'.'">
        <x-slot:actions>
            <a class="hdr-badge" href="{{ route('admin.approvals') }}" wire:navigate>
                <i class="fa-light fa-stamp"></i> {{ $isSuper ? 'Approvals required' : 'My requests' }}
                <span class="cnt {{ $approvalsCount ? '' : 'zero' }}">{{ $approvalsCount }}</span>
            </a>
            <a class="hdr-badge" href="{{ route('admin.tasks') }}" wire:navigate>
                <i class="fa-light fa-square-check"></i> Tasks outstanding
                <span class="cnt amber {{ $openTasks ? '' : 'zero' }}">{{ $openTasks }}</span>
            </a>
            <x-admin.btn variant="navy" sm icon="fa-light fa-plus" :href="route('admin.tasks')" wire:navigate>New task</x-admin.btn>
        </x-slot:actions>
    </x-admin.view-head>

    {{-- Global timeframe (drives the money KPIs + registrations only) --}}
    <x-admin.toolbar style="margin:.2rem 0 1.1rem;">
        <span class="sub" style="font-family:'Quicksand',sans-serif;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.7rem;margin-right:.2rem;">Timeframe</span>
        @foreach ($periods as $key => $label)
            <a class="fchip {{ $range === $key ? 'on' : '' }}" href="{{ route('admin.dashboard', ['period' => $key]) }}" wire:navigate>{{ $label }}</a>
        @endforeach
        <span class="sub" style="margin-left:.35rem;">Showing <strong style="color:var(--navy);font-family:'Quicksand',sans-serif;">{{ $rangeLabel }}</strong></span>
    </x-admin.toolbar>

    {{-- KPI tiles --}}
    <div class="stat-grid">
        <a href="{{ route('admin.donations') }}" wire:navigate style="text-decoration:none;"><x-admin.stat-tile icon="fa-light fa-sack-dollar" :label="'Raised · '.$rangeLabel">{{ $eur($money['raised']) }}</x-admin.stat-tile></a>
        <a href="{{ route('admin.donations') }}" wire:navigate style="text-decoration:none;"><x-admin.stat-tile icon="fa-light fa-hand-holding-heart" :label="'Donations · '.$rangeLabel">{{ number_format($money['count']) }}</x-admin.stat-tile></a>
        <x-admin.stat-tile icon="fa-light fa-chart-simple" label="Avg donation">{{ $eur($money['average']) }}</x-admin.stat-tile>
        <a href="{{ route('admin.groups') }}" wire:navigate style="text-decoration:none;"><x-admin.stat-tile icon="fa-light fa-people-group" label="Active groups">{{ number_format($activeGroups) }}</x-admin.stat-tile></a>
    </div>

    {{-- Hero: campaign progress + 14-day sparkline --}}
    <x-admin.panel pad style="margin-top:1rem;">
        <div class="grid-2" style="gap:1.6rem;align-items:center;">
            <div>
                <x-admin.eyebrow icon="fa-light fa-mountain-sun">Campaign progress</x-admin.eyebrow>
                <div class="hero-fig"><span class="amt">{{ $eur($money['raised']) }}</span><span class="goal">raised {{ $rangeLabel }}</span></div>
                <div class="hero-meta">{{ number_format($money['count']) }} donations · avg {{ $eur($money['average']) }} · {{ number_format($users['active']) }} active fundraisers</div>
                @if ($campaignGoal > 0)
                    <div style="margin-top:1rem;border-top:1px solid var(--line);padding-top:.85rem;">
                        <div style="display:flex;justify-content:space-between;align-items:baseline;font-size:.8rem;color:var(--ink-soft);margin-bottom:.45rem;">
                            <span style="font-family:'Quicksand',sans-serif;font-weight:700;">Campaign to date</span>
                            <span><strong style="color:var(--navy);font-family:'Quicksand',sans-serif;">{{ $eur($campaignRaised) }}</strong> of {{ $eur($campaignGoal) }} · {{ $campaignPct }}%</span>
                        </div>
                        <div class="hero-th"><div class="track"><div class="fill {{ $campaignPct >= 100 ? 'over' : '' }}" style="width:{{ $campaignPct }}%"></div></div></div>
                    </div>
                @else
                    <div class="hero-meta" style="margin-top:.85rem;">Campaign to date: <strong style="color:var(--navy);">{{ $eur($campaignRaised) }}</strong> <span class="sub">· set a campaign goal in Controlled Settings to show a target.</span></div>
                @endif
            </div>
            <div>
                <div class="spark-head"><span>Donations · last 14 days</span><span class="pill success"><i class="fa-light fa-arrow-trend-up"></i> {{ $eur(array_sum($sparkline)) }}</span></div>
                <div class="spark">
                    @php $sparkDays = count($sparkline); @endphp
                    @foreach ($sparkline as $i => $d)
                        @php $barDate = now()->subDays($sparkDays - 1 - $i); $isToday = $i === $sparkDays - 1; @endphp
                        <div class="spark-col {{ $isToday ? 'today' : '' }}" tabindex="0"
                             aria-label="{{ $isToday ? 'Today' : $barDate->format('D j M') }}: {{ $eur($d) }}">
                            <div class="spark-tip" aria-hidden="true">
                                <span class="d">{{ $isToday ? 'Today' : $barDate->format('D j M') }}</span>
                                <span class="a">{{ $eur($d) }}</span>
                            </div>
                            <div class="spark-bar" style="height:{{ (int) round($d / $sparkMax * 100) }}%"></div>
                        </div>
                    @endforeach
                </div>
                <div class="spark-foot"><span>{{ now()->subDays(13)->format('j M') }}</span><span>Today</span></div>
            </div>
        </div>
    </x-admin.panel>

    {{-- Registrations & users (same timeframe) --}}
    <x-admin.panel pad style="margin-top:1rem;">
        <x-admin.panel-head title="" style="padding:0 0 .85rem;">
            <h3><i class="fa-light fa-user-plus" style="color:var(--sky);margin-right:.4rem;"></i>Registrations &amp; users <span class="sub" style="font-weight:400;">· {{ $rangeLabel }}</span></h3>
            <a class="all" href="{{ route('admin.users') }}" wire:navigate style="font-family:'Quicksand',sans-serif;font-weight:600;font-size:.78rem;">All users →</a>
        </x-admin.panel-head>
        <div class="stat-grid">
            <a href="{{ route('admin.users') }}" wire:navigate style="text-decoration:none;"><x-admin.stat-tile icon="fa-light fa-user-plus" label="New registrations">{{ number_format($users['new']) }}</x-admin.stat-tile></a>
            <a href="{{ route('admin.users') }}" wire:navigate style="text-decoration:none;"><x-admin.stat-tile icon="fa-light fa-user-check" label="Active users">{{ number_format($users['active']) }}</x-admin.stat-tile></a>
            <a href="{{ route('admin.users') }}" wire:navigate style="text-decoration:none;"><x-admin.stat-tile icon="fa-light fa-user-clock" label="Awaiting activation">{{ number_format($users['pending']) }}</x-admin.stat-tile></a>
            <a href="{{ route('admin.users') }}" wire:navigate style="text-decoration:none;"><x-admin.stat-tile icon="fa-light fa-user-xmark" label="Closed accounts">{{ number_format($users['closed']) }}</x-admin.stat-tile></a>
        </div>
        <p class="sub" style="font-size:.74rem;margin:.85rem 0 0;">
            <i class="fa-light fa-circle-info" style="color:var(--sky);"></i>
            Active users = received a donation in the period. Awaiting activation = registered but not yet verified.
        </p>
    </x-admin.panel>

    <div class="dash-grid">
        {{-- Left column --}}
        <div style="display:flex;flex-direction:column;gap:1rem;min-width:0;">
            {{-- Approvals (role-aware) --}}
            <x-admin.panel>
                <x-admin.panel-head :title="$isSuper ? 'Needs Super Admin approval' : 'My pending requests'">
                    <a class="all" href="{{ route('admin.approvals') }}" wire:navigate style="font-family:'Quicksand',sans-serif;font-weight:600;font-size:.78rem;">{{ $isSuper ? 'Open queue' : 'View all' }} →</a>
                </x-admin.panel-head>
                <div style="padding:.25rem .5rem .6rem;">
                    @forelse ($approvals as $r)
                        <div class="apr-row" onclick="window.location='{{ route('admin.approvals.show', $r) }}'">
                            <span class="ic"><i class="fa-light fa-stamp"></i></span>
                            <div class="l1"><span class="ty">{{ $r->action->label() }}</span><x-admin.pill variant="amber">Pending</x-admin.pill></div>
                            <div class="l2">{{ $r->requester?->full_name ?: $r->requested_by }} · {{ $r->reason ?: 'change request' }}</div>
                            <span class="when">{{ $r->requested_at?->diffForHumans(short: true) }}</span>
                        </div>
                    @empty
                        <p class="sub" style="padding:.5rem .75rem;">{{ $isSuper ? 'Nothing awaiting approval.' : 'You have no pending requests.' }}</p>
                    @endforelse
                </div>
            </x-admin.panel>

            {{-- Top fundraisers --}}
            <x-admin.panel>
                <x-admin.panel-head title="Top fundraisers">
                    <a class="all" href="{{ route('admin.users') }}" wire:navigate style="font-family:'Quicksand',sans-serif;font-weight:600;font-size:.78rem;">All fundraisers →</a>
                </x-admin.panel-head>
                <div style="padding:.25rem .5rem .6rem;">
                    @forelse ($topFundraisers as $i => $f)
                        <div class="lead-row" @if ($f['user']) onclick="window.location='{{ route('admin.users.show', $f['user']) }}'" @endif>
                            <span class="rank {{ $i < 3 ? 'r'.($i + 1) : '' }}">{{ $i + 1 }}</span>
                            <span class="mini-av">{{ $initials($f['name']) }}</span>
                            <div class="mid"><div class="nm">{{ $f['name'] }}</div><div class="sub">{{ $eur($f['raised']) }} of {{ $eur($f['goal']) }} target</div></div>
                            <div class="th"><x-admin.mini-thermometer :pct="$f['goal'] > 0 ? (int) round($f['raised'] / $f['goal'] * 100) : 0" :over="$f['raised'] > $f['goal']" /></div>
                        </div>
                    @empty
                        <p class="sub" style="padding:.5rem .75rem;">No fundraiser totals yet.</p>
                    @endforelse
                </div>
            </x-admin.panel>

            {{-- Top groups --}}
            <x-admin.panel>
                <x-admin.panel-head title="Top fundraising groups">
                    <a class="all" href="{{ route('admin.groups') }}" wire:navigate style="font-family:'Quicksand',sans-serif;font-weight:600;font-size:.78rem;">All groups →</a>
                </x-admin.panel-head>
                <div style="padding:.25rem .5rem .6rem;">
                    @forelse ($topGroups as $row)
                        @php $g = $row['model']; @endphp
                        <div class="lead-row" onclick="window.location='{{ route('admin.groups.show', $g) }}'">
                            <span class="ico"><i class="fa-light fa-people-group"></i></span>
                            <div class="mid"><div class="nm">{{ $g->name }}</div><div class="sub">{{ $row['members'] }} members · {{ $eur($row['raised']) }} of {{ $eur($g->goal) }}</div></div>
                            <div class="th"><x-admin.mini-thermometer :pct="$g->goal > 0 ? (int) round($row['raised'] / $g->goal * 100) : 0" :over="$row['raised'] > $g->goal" /></div>
                        </div>
                    @empty
                        <p class="sub" style="padding:.5rem .75rem;">No groups yet.</p>
                    @endforelse
                </div>
            </x-admin.panel>
        </div>

        {{-- Right column --}}
        <div style="display:flex;flex-direction:column;gap:1rem;min-width:0;">
            {{-- My tasks --}}
            <x-admin.panel>
                <x-admin.panel-head title="My tasks">
                    <a class="all" href="{{ route('admin.tasks') }}" wire:navigate style="font-family:'Quicksand',sans-serif;font-weight:600;font-size:.78rem;">All tasks →</a>
                </x-admin.panel-head>
                <div style="padding:.25rem .5rem .6rem;">
                    @forelse ($tasks as $t)
                        <div class="attn-row" onclick="window.location='{{ route('admin.tasks') }}'">
                            <span class="ico"><i class="fa-light fa-square-check"></i></span>
                            <span class="tx">{{ $t->title }}</span>
                            @php $due = $t->due_at; $overdue = $t->isOverdue(); @endphp
                            <x-admin.pill :variant="$overdue ? 'coral' : ($due && $due->isToday() ? 'amber' : 'neutral')">{{ $due ? ($due->isToday() ? 'Today' : $due->format('j M')) : 'No date' }}</x-admin.pill>
                        </div>
                    @empty
                        <p class="sub" style="padding:.5rem .75rem;">You're all caught up — no open tasks.</p>
                    @endforelse
                </div>
            </x-admin.panel>

            {{-- Needs attention --}}
            <x-admin.panel>
                <x-admin.panel-head title="Needs attention" />
                <div style="padding:.25rem .5rem .6rem;">
                    @forelse ($attention as $row)
                        <div class="attn-row {{ $row['class'] }}" onclick="window.location='{{ $row['url'] }}'">
                            <span class="ico"><i class="{{ $row['icon'] }}"></i></span>
                            <span class="tx">{{ $row['label'] }}</span>
                            <span class="ct">{{ number_format($row['count']) }}</span>
                            <i class="fa-light fa-chevron-right chev"></i>
                        </div>
                    @empty
                        <div class="skel-note" style="margin:.4rem .5rem;"><i class="fa-light fa-circle-check" style="color:var(--success);"></i> Nothing needs attention right now.</div>
                    @endforelse
                </div>
            </x-admin.panel>

            @if ($isSuper)
                {{-- process.yspi.ie integrations health (D83 email gate + D84 registration). --}}
                @php
                    $stateMeta = [
                        'ok' => ['OK', 'success', 'fa-circle-check', 'var(--success)'],
                        'unconfigured' => ['Not configured', 'neutral', 'fa-circle-minus', 'var(--ink-soft)'],
                        'forbidden' => ['Missing ability', 'coral', 'fa-circle-exclamation', 'var(--coral)'],
                        'unauthorized' => ['Bad token', 'coral', 'fa-circle-exclamation', 'var(--coral)'],
                        'unreachable' => ['Unreachable', 'amber', 'fa-triangle-exclamation', 'var(--coral)'],
                        'error' => ['Error', 'coral', 'fa-circle-exclamation', 'var(--coral)'],
                    ];
                @endphp
                <x-admin.panel>
                    <x-admin.panel-head title="YSPI integrations">
                        @if ($processStatus)<span class="sub" style="font-size:.72rem;">checked {{ \Illuminate\Support\Carbon::parse($processStatus['checked_at'])->diffForHumans() }}</span>@endif
                    </x-admin.panel-head>
                    <div style="padding:.25rem .5rem .6rem;">
                        @if (! $processStatus)
                            <div class="skel-note" style="margin:.4rem .5rem;"><i class="fa-light fa-circle-info"></i> Not checked yet — refreshes every 30 min, or run <code>php artisan process:check</code>.</div>
                        @else
                            @foreach (['email', 'registration'] as $k)
                                @php $r = $processStatus[$k]; $m = $stateMeta[$r['state']] ?? $stateMeta['error']; @endphp
                                <div class="attn-row">
                                    <span class="ico"><i class="fa-light {{ $m[2] }}" style="color:{{ $m[3] }};"></i></span>
                                    <span class="tx">{{ $r['label'] }} <span class="sub">· {{ $r['ability'] }}</span></span>
                                    <x-admin.pill :variant="$m[1]">{{ $m[0] }}</x-admin.pill>
                                </div>
                            @endforeach
                            <p class="sub" style="padding:.4rem .75rem 0;">{{ $processStatus['email']['base_url'] }}</p>
                        @endif
                    </div>
                </x-admin.panel>
            @endif
        </div>
    </div>
</x-admin.layout>