@php
    // Tiny inline sparkline for the KPI cards.
    $spark = function (array $pts, string $color) {
        $max = max($pts) ?: 1; $min = min($pts); $w = 100; $h = 30; $n = count($pts);
        $coords = [];
        foreach ($pts as $i => $v) {
            $x = $n <= 1 ? 0 : $i / ($n - 1) * $w;
            $y = $h - ($max == $min ? 0.5 : ($v - $min) / ($max - $min)) * ($h - 4) - 2;
            $coords[] = round($x, 1).','.round($y, 1);
        }
        return '<svg viewBox="0 0 '.$w.' '.$h.'" class="h-8 w-full" preserveAspectRatio="none"><polyline points="'.implode(' ', $coords).'" fill="none" stroke="'.$color.'" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
    };

    $kpiCards = [
        ['icon' => 'users', 'tint' => '#7c3aed', 'label' => 'Total Users', 'value' => number_format($kpis['total_users']), 'delta' => 12.4, 'up' => true, 'spark' => [4,6,5,7,8,7,9]],
        ['icon' => 'crown', 'tint' => '#f59e0b', 'label' => 'Active Subscriptions', 'value' => number_format($kpis['active_subscriptions']), 'delta' => 9.8, 'up' => true, 'spark' => [3,4,4,5,6,7,8]],
        ['icon' => 'dollar-sign', 'tint' => '#22c55e', 'label' => 'Total Revenue', 'value' => '$'.number_format($kpis['mrr']), 'delta' => 18.2, 'up' => true, 'spark' => [5,6,6,8,7,9,11]],
        ['icon' => 'send', 'tint' => '#3b82f6', 'label' => 'Total Posts Today', 'value' => number_format($kpis['posts_today']), 'delta' => 24.6, 'up' => true, 'spark' => [6,7,8,7,9,10,12], 'sub' => 'vs yesterday'],
        ['icon' => 'layers', 'tint' => '#8b5cf6', 'label' => 'Platform Accounts', 'value' => number_format($kpis['connected_accounts']), 'delta' => 16.8, 'up' => true, 'spark' => [4,5,6,6,7,8,9]],
        ['icon' => 'shield-check', 'tint' => '#22c55e', 'label' => 'System Uptime', 'value' => $kpis['uptime'].'%', 'delta' => null, 'up' => true, 'spark' => [9,9,10,9,10,10,10], 'ok' => 'Operational'],
    ];

    $donutTotal = collect($plans)->sum('count');
    $statusColor = ['active' => 'text-green-400', 'suspended' => 'text-red-400', 'pending' => 'text-amber-400'];
    $planBadge = ['Pro' => 'text-amber-400 bg-amber-500/10', 'Business' => 'text-blue-400 bg-blue-500/10', 'Agency' => 'text-pink-400 bg-pink-500/10', 'Free' => 'text-slate-400 bg-slate-500/10'];
@endphp

<div class="space-y-6">
    {{-- Title row --}}
    <div class="flex flex-wrap items-start justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-white">Admin Dashboard</h1>
            <p class="mt-1 text-sm text-slate-400">Complete overview of your CC Publisher SaaS platform</p>
        </div>
        @can('users.manage')
            <a href="{{ route('admin.users') }}" 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-plus class="h-4 w-4" /> Create User
                <x-lucide-chevron-down class="h-4 w-4 opacity-80" />
            </a>
        @endcan
    </div>

    {{-- KPI cards --}}
    <div class="grid grid-cols-2 gap-4 md:grid-cols-3 xl:grid-cols-6">
        @foreach ($kpiCards as $c)
            <div class="admin-card p-4">
                <div class="flex items-center gap-2.5">
                    <span class="grid h-11 w-11 place-items-center rounded-xl" style="background: {{ $c['tint'] }}22; color: {{ $c['tint'] }}">
                        <x-dynamic-component :component="'lucide-'.$c['icon']" class="h-5 w-5" />
                    </span>
                    <span class="text-xs font-medium text-slate-400">{{ $c['label'] }}</span>
                </div>
                <div class="mt-3 text-2xl font-bold text-white">{{ $c['value'] }}</div>
                <div class="mt-1 flex items-center justify-between">
                    @if (! is_null($c['delta']))
                        <span class="inline-flex items-center gap-1 text-xs font-semibold {{ $c['up'] ? 'text-green-400' : 'text-red-400' }}">
                            <x-dynamic-component :component="'lucide-trending-'.($c['up'] ? 'up' : 'down')" class="h-3.5 w-3.5" />
                            {{ $c['delta'] }}% <span class="font-normal text-slate-500">{{ $c['sub'] ?? 'this month' }}</span>
                        </span>
                    @elseif (! empty($c['ok']))
                        <span class="inline-flex items-center gap-1.5 text-xs font-medium text-green-400"><span class="h-1.5 w-1.5 rounded-full bg-green-400"></span>{{ $c['ok'] }}</span>
                    @endif
                </div>
                <div class="-mb-1 mt-1 opacity-70">{!! $spark($c['spark'], $c['tint']) !!}</div>
            </div>
        @endforeach
    </div>

    {{-- Charts + Recent Activity --}}
    <div class="grid grid-cols-1 gap-5 xl:grid-cols-12">
        {{-- Revenue --}}
        <section class="admin-card p-5 xl:col-span-5">
            <div class="mb-4 flex items-center justify-between">
                <h3 class="text-base font-semibold text-white">Revenue Overview</h3>
                <select wire:model.live="range" class="rounded-lg border-edge bg-ink py-1.5 pl-3 pr-8 text-xs text-slate-300 focus:ring-brand">
                    <option value="7">Last 7 Days</option>
                    <option value="30">Last 30 Days</option>
                    <option value="90">Last 90 Days</option>
                </select>
            </div>
            <div class="h-64" wire:ignore><canvas id="revChart"></canvas></div>
        </section>

        {{-- Users Growth --}}
        <section class="admin-card p-5 xl:col-span-4">
            <div class="mb-4 flex items-center justify-between">
                <h3 class="text-base font-semibold text-white">Users Growth</h3>
                <div class="flex items-center gap-3 text-xs text-slate-400">
                    <span class="flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-brand"></span>New Users</span>
                    <span class="flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-accent2"></span>Active Users</span>
                </div>
            </div>
            <div class="h-64" wire:ignore><canvas id="growthChart"></canvas></div>
        </section>

        {{-- Recent Activity --}}
        <section class="admin-card p-5 xl:col-span-3">
            <div class="mb-3 flex items-center justify-between">
                <h3 class="text-base font-semibold text-white">Recent Activity</h3>
                <a href="{{ route('admin.activity') }}" wire:navigate class="text-xs font-semibold text-brand-500 hover:underline">View All</a>
            </div>
            <div class="space-y-3">
                @forelse ($recent as $log)
                    <div class="flex items-start gap-3">
                        <span class="mt-0.5 grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-raised text-slate-400"><x-lucide-activity class="h-4 w-4" /></span>
                        <div class="min-w-0 flex-1">
                            <div class="truncate text-[13px] font-medium text-slate-200">{{ $log->description ?? $log->action }}</div>
                            <div class="truncate text-xs text-slate-500">{{ $log->causer?->email ?? 'system' }}</div>
                        </div>
                        <span class="whitespace-nowrap text-[11px] text-slate-500">{{ $log->created_at->diffForHumans(null, true) }}</span>
                    </div>
                @empty
                    <div class="py-6 text-center text-sm text-slate-500">No activity yet.</div>
                @endforelse
            </div>
        </section>
    </div>

    {{-- Distribution + Platform Usage + System Health --}}
    <div class="grid grid-cols-1 gap-5 xl:grid-cols-12">
        {{-- Subscriptions by Plan --}}
        <section class="admin-card p-5 xl:col-span-5">
            <h3 class="mb-4 text-base font-semibold text-white">Subscriptions by Plan</h3>
            <div class="flex items-center gap-6">
                <div class="relative h-40 w-40 shrink-0" wire:ignore>
                    <canvas id="planChart"></canvas>
                    <div class="pointer-events-none absolute inset-0 grid place-content-center text-center">
                        <div class="text-2xl font-bold text-white">{{ number_format($donutTotal) }}</div>
                        <div class="text-xs text-slate-500">Active</div>
                    </div>
                </div>
                <div class="flex-1 space-y-3">
                    @foreach ($plans as $p)
                        <div class="flex items-center gap-2.5 text-sm">
                            <span class="h-2.5 w-2.5 rounded-full" style="background: {{ $p['color'] }}"></span>
                            <span class="flex-1 text-slate-300">{{ $p['name'] }}</span>
                            <span class="font-semibold text-white">{{ $p['pct'] }}%</span>
                            <span class="text-xs text-slate-500">({{ number_format($p['count']) }})</span>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        {{-- Platform Usage --}}
        <section class="admin-card p-5 xl:col-span-4">
            <h3 class="mb-4 text-base font-semibold text-white">Platform Usage</h3>
            <div class="space-y-3.5">
                @foreach ($platforms as $pf)
                    <div class="flex items-center gap-3">
                        <span class="grid h-8 w-8 shrink-0 place-items-center rounded-lg text-[11px] font-bold text-white" style="background: {{ $pf['color'] }}">{{ strtoupper(substr($pf['label'], 0, 2)) }}</span>
                        <span class="w-20 shrink-0 truncate text-sm text-slate-300">{{ $pf['label'] }}</span>
                        <div class="h-2 flex-1 overflow-hidden rounded-full bg-raised">
                            <div class="h-full rounded-full" style="width: {{ max(4, $pf['pct']) }}%; background: {{ $pf['color'] }}"></div>
                        </div>
                        <span class="w-12 shrink-0 text-right text-xs font-semibold text-slate-300">{{ number_format($pf['count']) }}</span>
                        <span class="w-9 shrink-0 text-right text-xs text-slate-500">{{ $pf['pct'] }}%</span>
                    </div>
                @endforeach
            </div>
        </section>

        {{-- System Health --}}
        <section class="admin-card p-5 xl:col-span-3">
            <div class="mb-4 flex items-center justify-between">
                <h3 class="text-base font-semibold text-white">System Health</h3>
                <span class="inline-flex items-center gap-1.5 text-xs text-green-400"><span class="h-1.5 w-1.5 rounded-full bg-green-400"></span>All Operational</span>
            </div>
            <div class="grid grid-cols-2 gap-3">
                @foreach ($health as $h)
                    <div class="rounded-xl border border-edge bg-ink p-3">
                        <div class="flex items-center gap-2 text-slate-400">
                            <x-dynamic-component :component="'lucide-'.$h['icon']" class="h-4 w-4" />
                            <span class="text-xs">{{ $h['label'] }}</span>
                        </div>
                        <div class="mt-1.5 text-lg font-bold text-white">{{ $h['value'] }}</div>
                        <div class="mt-0.5 inline-flex items-center gap-1.5 text-[11px] {{ $h['ok'] ? 'text-green-400' : 'text-red-400' }}">
                            <span class="h-1.5 w-1.5 rounded-full {{ $h['ok'] ? 'bg-green-400' : 'bg-red-400' }}"></span>{{ $h['ok'] ? 'Healthy' : 'Down' }}
                        </div>
                    </div>
                @endforeach
            </div>
        </section>
    </div>

    {{-- Recent Users + Global Statistics --}}
    <div class="grid grid-cols-1 gap-5 xl:grid-cols-12">
        {{-- Recent Users --}}
        <section class="admin-card p-5 xl:col-span-8">
            <div class="mb-4 flex items-center justify-between">
                <h3 class="text-base font-semibold text-white">Recent Users</h3>
                <a href="{{ route('admin.users') }}" wire:navigate class="text-xs font-semibold text-brand-500 hover:underline">View All</a>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-left text-sm">
                    <thead>
                        <tr class="border-b border-edge text-xs uppercase tracking-wide text-slate-500">
                            <th class="pb-2 pr-4 font-medium">User</th>
                            <th class="pb-2 pr-4 font-medium">Plan</th>
                            <th class="pb-2 pr-4 font-medium">Accounts</th>
                            <th class="pb-2 pr-4 font-medium">Posts Today</th>
                            <th class="pb-2 pr-4 font-medium">Status</th>
                            <th class="pb-2 pr-4 font-medium">Joined</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-edge">
                        @forelse ($recentUsers as $u)
                            <tr class="text-slate-300">
                                <td class="py-3 pr-4">
                                    <div class="flex items-center gap-3">
                                        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-gradient-to-br from-brand to-accent2 text-xs font-bold text-white">{{ strtoupper(substr($u['name'] ?: $u['email'], 0, 1)) }}</span>
                                        <div class="min-w-0">
                                            <div class="truncate font-medium text-white">{{ $u['name'] }}</div>
                                            <div class="truncate text-xs text-slate-500">{{ $u['email'] }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-3 pr-4"><span class="admin-chip {{ $planBadge[$u['plan']] ?? 'bg-slate-500/10 text-slate-400' }}">{{ $u['plan'] }}</span></td>
                                <td class="py-3 pr-4">{{ $u['accounts'] }}</td>
                                <td class="py-3 pr-4">{{ number_format($u['posts_today']) }}</td>
                                <td class="py-3 pr-4">
                                    <span class="inline-flex items-center gap-1.5 {{ $statusColor[$u['status']] ?? 'text-slate-400' }}">
                                        <span class="h-1.5 w-1.5 rounded-full bg-current"></span>{{ ucfirst($u['status']) }}
                                    </span>
                                </td>
                                <td class="py-3 pr-4 text-slate-400">{{ $u['joined'] }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="6" class="py-8 text-center text-slate-500">No users yet.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </section>

        {{-- Global Statistics --}}
        <section class="admin-card p-5 xl:col-span-4">
            <div class="mb-4 flex items-center justify-between">
                <h3 class="text-base font-semibold text-white">Global Statistics</h3>
                <a href="{{ route('admin.reports') }}" wire:navigate class="text-xs font-semibold text-brand-500 hover:underline">View Report</a>
            </div>
            <div class="relative mb-4 grid h-40 place-items-center overflow-hidden rounded-xl border border-edge bg-gradient-to-br from-brand/10 to-ink">
                <x-lucide-globe class="h-16 w-16 text-brand-500/40" />
                <span class="absolute left-[20%] top-[30%] h-1.5 w-1.5 rounded-full bg-brand-500 shadow-[0_0_8px_2px] shadow-brand/50"></span>
                <span class="absolute left-[55%] top-[45%] h-1.5 w-1.5 rounded-full bg-accent2 shadow-[0_0_8px_2px] shadow-accent2/50"></span>
                <span class="absolute left-[72%] top-[28%] h-1.5 w-1.5 rounded-full bg-green-400 shadow-[0_0_8px_2px] shadow-green-400/50"></span>
                <span class="absolute left-[40%] top-[62%] h-1.5 w-1.5 rounded-full bg-amber-400 shadow-[0_0_8px_2px] shadow-amber-400/50"></span>
            </div>
            <div class="grid grid-cols-3 gap-3 text-center">
                <div class="rounded-xl border border-edge bg-ink p-3">
                    <x-lucide-globe class="mx-auto h-4 w-4 text-brand-500" />
                    <div class="mt-1 text-lg font-bold text-white">{{ number_format($globalStats['users_worldwide']) }}</div>
                    <div class="text-[11px] text-slate-500">Users Worldwide</div>
                </div>
                <div class="rounded-xl border border-edge bg-ink p-3">
                    <x-lucide-shield-check class="mx-auto h-4 w-4 text-accent2" />
                    <div class="mt-1 text-lg font-bold text-white">{{ $globalStats['countries'] }}</div>
                    <div class="text-[11px] text-slate-500">Countries</div>
                </div>
                <div class="rounded-xl border border-edge bg-ink p-3">
                    <x-lucide-send class="mx-auto h-4 w-4 text-green-400" />
                    <div class="mt-1 text-lg font-bold text-white">{{ number_format($globalStats['posts_today']) }}</div>
                    <div class="text-[11px] text-slate-500">Posts Today</div>
                </div>
            </div>
        </section>
    </div>

    @script
    <script>
        const palette = { brand: '#7c3aed', blue: '#3b82f6', green: '#22c55e', grid: 'rgba(36,48,74,0.5)' };

        function grad(ctx) {
            const g = ctx.createLinearGradient(0, 0, 0, 240);
            g.addColorStop(0, 'rgba(124,58,237,0.35)');
            g.addColorStop(1, 'rgba(124,58,237,0)');
            return g;
        }
        function lineOpts() {
            return { maintainAspectRatio: false, plugins: { legend: { display: false },
                tooltip: { callbacks: { label: (c) => '$' + Number(c.parsed.y).toLocaleString() } } },
                scales: { x: { grid: { display: false } }, y: { grid: { color: palette.grid }, ticks: { callback: (v) => '$' + (v >= 1000 ? (v / 1000) + 'K' : v) } } } };
        }
        function barOpts() {
            return { maintainAspectRatio: false, plugins: { legend: { display: false } },
                scales: { x: { grid: { display: false } }, y: { grid: { color: palette.grid }, beginAtZero: true } } };
        }
        function drawRevenue(d) {
            const el = document.getElementById('revChart'); if (!el) return;
            window.renderChart('revChart', { type: 'line', data: { labels: d.labels, datasets: [{ data: d.values, borderColor: palette.brand, backgroundColor: grad(el.getContext('2d')), fill: true, tension: 0.4, borderWidth: 2.5, pointRadius: 3, pointBackgroundColor: palette.brand, pointBorderColor: '#fff', pointBorderWidth: 1 }] }, options: lineOpts() });
        }
        function drawGrowth(d) {
            window.renderChart('growthChart', { type: 'bar', data: { labels: d.labels, datasets: [
                { label: 'New Users', data: d.new, backgroundColor: palette.brand, borderRadius: 5, barPercentage: 0.7, categoryPercentage: 0.6 },
                { label: 'Active Users', data: d.active, backgroundColor: palette.blue, borderRadius: 5, barPercentage: 0.7, categoryPercentage: 0.6 } ] }, options: barOpts() });
        }
        const planData = @js($plans);
        window.renderChart('planChart', { type: 'doughnut', data: { labels: planData.map(p => p.name), datasets: [{ data: planData.map(p => p.count), backgroundColor: planData.map(p => p.color), borderWidth: 0, cutout: '72%' }] }, options: { maintainAspectRatio: false, plugins: { legend: { display: false } } } });

        drawRevenue(@js($revenue));
        drawGrowth(@js($growth));

        $wire.on('dashboard-range', (e) => {
            const p = Array.isArray(e) ? e[0] : e;
            drawRevenue(p.revenue);
            drawGrowth(p.growth);
        });
    </script>
    @endscript
</div>