@php
    $fmt = fn ($v) => '$'.number_format((float) $v, 2);
    $rev = $m['revenue'];
    $subs = $m['subscriptions'];
    $growth = $m['revenue_growth'];
@endphp

<div>
    <nav class="mb-2 flex items-center gap-1.5 text-xs text-slate-500">
        <a href="{{ route('admin.dashboard') }}" wire:navigate class="hover:text-slate-300">Dashboard</a><x-lucide-chevron-right class="h-3.5 w-3.5" />
        <span class="text-slate-300">Billing</span>
    </nav>
    <x-admin.page-head title="Billing Dashboard" subtitle="Revenue, recurring income and subscription performance at a glance.">
        <a href="{{ route('admin.invoices') }}" wire:navigate class="inline-flex items-center gap-2 rounded-xl border border-edge bg-card px-3.5 py-2.5 text-sm text-slate-200 hover:bg-raised"><x-lucide-receipt class="h-4 w-4" /> Invoices</a>
        <a href="{{ route('admin.payments') }}" wire:navigate class="inline-flex items-center gap-2 rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-brand/25 hover:bg-brand-700"><x-lucide-wallet class="h-4 w-4" /> Payments</a>
    </x-admin.page-head>

    {{-- KPI cards --}}
    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <x-admin.stat icon="dollar-sign" label="Total Revenue" :value="$fmt($rev['total'])" tint="#22c55e" sub="All succeeded payments" />
        <x-admin.stat icon="calendar" label="This Month" :value="$fmt($rev['this_month'])" tint="#3b82f6"
            :sub="($growth >= 0 ? '▲ ' : '▼ ').abs($growth).'% vs last month'" />
        <x-admin.stat icon="sunrise" label="Today" :value="$fmt($rev['today'])" tint="#f59e0b" />
        <x-admin.stat icon="hourglass" label="Pending" :value="$fmt($rev['pending'])" tint="#eab308" sub="Awaiting confirmation" />
        <x-admin.stat icon="repeat" label="MRR" :value="$fmt($m['mrr'])" tint="#7c3aed" sub="Monthly recurring" />
        <x-admin.stat icon="trending-up" label="ARR" :value="$fmt($m['arr'])" tint="#8b5cf6" sub="Annual run-rate" />
        <x-admin.stat icon="users" label="Active Subs" :value="number_format($subs['active'])" tint="#06b6d4"
            :sub="$subs['trials'].' on trial'" />
        <x-admin.stat icon="rotate-ccw" label="Refunded" :value="$fmt($rev['refunded'])" tint="#ef4444" />
    </div>

    <div class="mt-5 grid gap-5 lg:grid-cols-3">
        {{-- Revenue chart --}}
        <x-admin.card title="Revenue — last 6 months" class="lg:col-span-2">
            <div class="h-64" wire:ignore><canvas id="billingRevChart"></canvas></div>
        </x-admin.card>

        {{-- Subscription funnel --}}
        <x-admin.card title="Subscriptions">
            <div class="space-y-2.5">
                @php
                    $funnel = [
                        ['Active', $subs['active'], '#22c55e'],
                        ['Trials', $subs['trials'], '#3b82f6'],
                        ['Renewing', $subs['renewing'], '#7c3aed'],
                        ['Grace', $subs['grace'], '#f59e0b'],
                        ['Suspended', $subs['suspended'], '#eab308'],
                        ['Expired', $subs['expired'], '#94a3b8'],
                        ['Cancelled', $subs['cancelled'], '#ef4444'],
                    ];
                    $maxF = max(1, collect($funnel)->max(fn ($f) => $f[1]));
                @endphp
                @foreach ($funnel as [$label, $count, $color])
                    <div>
                        <div class="mb-1 flex items-center justify-between text-xs">
                            <span class="text-slate-300">{{ $label }}</span>
                            <span class="font-semibold text-white">{{ number_format($count) }}</span>
                        </div>
                        <div class="h-1.5 overflow-hidden rounded-full bg-edge">
                            <div class="h-full rounded-full" style="width: {{ round($count / $maxF * 100) }}%; background: {{ $color }}"></div>
                        </div>
                    </div>
                @endforeach
                <div class="mt-3 flex items-center justify-between rounded-xl border border-amber-500/25 bg-amber-500/10 px-3 py-2 text-xs">
                    <span class="text-amber-300">Renewals due (15 days)</span>
                    <span class="font-bold text-white">{{ $subs['renewals_due'] }}</span>
                </div>
            </div>
        </x-admin.card>
    </div>

    <div class="mt-5 grid gap-5 lg:grid-cols-2">
        {{-- Recent invoices --}}
        <x-admin.card title="Recent Invoices">
            <x-slot:action><a href="{{ route('admin.invoices') }}" wire:navigate class="text-xs text-brand-500 hover:underline">View all</a></x-slot:action>
            <div class="space-y-1">
                @forelse ($recentInvoices as $inv)
                    <div class="flex items-center justify-between rounded-lg px-2 py-2 hover:bg-raised">
                        <div class="min-w-0">
                            <div class="truncate text-sm text-slate-200">{{ $inv->invoice_number }}</div>
                            <div class="truncate text-xs text-slate-500">{{ $inv->user?->name ?? '—' }}</div>
                        </div>
                        <div class="text-right">
                            <div class="text-sm font-semibold text-white">{{ $fmt($inv->total) }}</div>
                            <span class="admin-chip {{ $inv->status === 'paid' ? 'bg-green-500/15 text-green-400' : 'bg-slate-500/15 text-slate-400' }}">{{ $inv->status }}</span>
                        </div>
                    </div>
                @empty
                    <p class="py-6 text-center text-sm text-slate-500">No invoices yet.</p>
                @endforelse
            </div>
        </x-admin.card>

        {{-- Recent payments --}}
        <x-admin.card title="Recent Payments">
            <x-slot:action><a href="{{ route('admin.payments') }}" wire:navigate class="text-xs text-brand-500 hover:underline">View all</a></x-slot:action>
            <div class="space-y-1">
                @forelse ($recentPayments as $pay)
                    <div class="flex items-center justify-between rounded-lg px-2 py-2 hover:bg-raised">
                        <div class="min-w-0">
                            <div class="truncate text-sm text-slate-200">{{ $pay->user?->name ?? '—' }}</div>
                            <div class="truncate text-xs text-slate-500">{{ ucfirst($pay->gateway) }} · {{ $pay->created_at->diffForHumans() }}</div>
                        </div>
                        <div class="text-right">
                            <div class="text-sm font-semibold text-white">{{ $fmt($pay->amount) }}</div>
                            <span class="admin-chip {{ $pay->status === 'succeeded' ? 'bg-green-500/15 text-green-400' : ($pay->status === 'pending' ? 'bg-amber-500/15 text-amber-400' : 'bg-red-500/15 text-red-400') }}">{{ $pay->status }}</span>
                        </div>
                    </div>
                @empty
                    <p class="py-6 text-center text-sm text-slate-500">No payments yet.</p>
                @endforelse
            </div>
        </x-admin.card>
    </div>
</div>

@script
<script>
    const s = @js($series);
    const el = document.getElementById('billingRevChart');
    if (el && window.renderChart) {
        const ctx = el.getContext('2d');
        const grad = ctx.createLinearGradient(0, 0, 0, 240);
        grad.addColorStop(0, 'rgba(124,58,237,0.35)');
        grad.addColorStop(1, 'rgba(124,58,237,0)');
        window.renderChart('billingRevChart', {
            type: 'line',
            data: { labels: s.map(p => p.label), datasets: [{ data: s.map(p => p.total), borderColor: '#7c3aed', backgroundColor: grad, fill: true, tension: 0.4, borderWidth: 2.5, pointRadius: 3, pointBackgroundColor: '#7c3aed', pointBorderColor: '#fff', pointBorderWidth: 1 }] },
            options: { maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { grid: { display: false }, ticks: { color: '#64748b' } }, y: { grid: { color: 'rgba(148,163,184,0.1)' }, ticks: { color: '#64748b', callback: v => '$' + v } } } }
        });
    }
</script>
@endscript