@php
    $platformMeta = \App\Services\UserDashboardMetrics::PLATFORM_META;
    $periodTotal = array_sum($series['values']);
    $periodBest = count($series['values']) ? max($series['values']) : 0;
    $periodAvg = count($series['values']) ? (int) round($periodTotal / count($series['values'])) : 0;
    // Real outcome rate when the queue mirror has data; else the KPI estimate.
    $rate = $success['rate'] ?? $kpis['success_rate'];
    $running = auth()->user()->automations()->running()->count();
@endphp

<div class="space-y-5">

    {{-- Title row --}}
    <div class="flex flex-wrap items-start justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-white">Analytics</h1>
            <p class="mt-1 text-sm text-slate-400">How your publishing performed across platforms and automations.</p>
        </div>
        <div class="flex rounded-lg border border-edge bg-ink p-0.5 text-xs">
            @foreach ([7 => '7 days', 30 => '30 days', 90 => '90 days'] as $days => $label)
                <button wire:click="$set('range', {{ $days }})"
                        class="rounded-md px-3 py-1.5 font-medium transition {{ $range === $days ? 'bg-raised text-white shadow' : 'text-slate-500 hover:text-slate-300' }}">
                    {{ $label }}
                </button>
            @endforeach
        </div>
    </div>

    {{-- KPI strip --}}
    <div class="admin-card grid grid-cols-2 divide-y divide-edge lg:grid-cols-4 lg:divide-x lg:divide-y-0">
        <div class="flex items-center gap-3 p-4">
            <span class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-blue-500/10 text-blue-400"><x-lucide-send class="h-4 w-4" /></span>
            <div><div class="text-[15px] font-bold text-white tabular-nums">{{ number_format($periodTotal) }}</div><div class="text-[11.5px] text-slate-500">Published · last {{ $range }} days</div></div>
        </div>
        <div class="flex items-center gap-3 p-4">
            <span class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-green-500/10 text-green-400"><x-lucide-check-circle-2 class="h-4 w-4" /></span>
            <div><div class="text-[15px] font-bold text-white tabular-nums">{{ $rate !== null ? $rate.'%' : '—' }}</div><div class="text-[11.5px] text-slate-500">Success rate</div></div>
        </div>
        <div class="flex items-center gap-3 p-4">
            <span class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-brand/15 text-brand-500"><x-lucide-trending-up class="h-4 w-4" /></span>
            <div><div class="text-[15px] font-bold text-white tabular-nums">{{ number_format($periodBest) }}</div><div class="text-[11.5px] text-slate-500">Best day · avg {{ number_format($periodAvg) }}</div></div>
        </div>
        <div class="flex items-center gap-3 p-4">
            <span class="grid h-9 w-9 shrink-0 place-items-center rounded-lg bg-amber-500/10 text-amber-400"><x-lucide-workflow class="h-4 w-4" /></span>
            <div><div class="text-[15px] font-bold text-white tabular-nums">{{ $running }}</div><div class="text-[11.5px] text-slate-500">Active automations</div></div>
        </div>
    </div>

    <div class="grid grid-cols-1 gap-5 xl:grid-cols-12">
        {{-- Publishing activity --}}
        <section class="admin-card p-5 xl:col-span-8">
            <div class="mb-4 flex items-center justify-between">
                <div>
                    <h3 class="text-base font-semibold text-white">Publishing activity</h3>
                    <p class="mt-0.5 text-xs text-slate-500">Posts published per day</p>
                </div>
                @unless ($series['real'])
                    <span class="admin-chip bg-raised text-slate-500" title="Your desktop app hasn't reported per-day history yet">Estimated</span>
                @endunless
            </div>
            <div class="h-64" wire:ignore><canvas id="analyticsChart"></canvas></div>
        </section>

        {{-- Platform distribution --}}
        <section class="admin-card p-5 xl:col-span-4">
            <div class="mb-4">
                <h3 class="text-base font-semibold text-white">Platform distribution</h3>
                <p class="mt-0.5 text-xs text-slate-500">{{ $distribution['mode'] === 'published' ? 'Published posts per platform' : 'Connected accounts per platform' }}</p>
            </div>
            @if ($distribution['total'] > 0)
                <div class="relative mx-auto h-44 w-44" wire:ignore>
                    <canvas id="platformDonut"></canvas>
                    <div class="pointer-events-none absolute inset-0 grid place-content-center text-center">
                        <div class="text-2xl font-bold text-white tabular-nums">{{ number_format($distribution['total']) }}</div>
                        <div class="text-[11px] text-slate-500">{{ $distribution['mode'] === 'published' ? 'posts' : 'accounts' }}</div>
                    </div>
                </div>
                <div class="mt-4 space-y-1.5">
                    @foreach ($distribution['items'] as $d)
                        <div class="flex items-center gap-2.5 text-xs">
                            <span class="h-2.5 w-2.5 rounded-sm" style="background: {{ $d['color'] }}"></span>
                            <span class="flex-1 text-slate-300">{{ $d['label'] }}</span>
                            <span class="font-semibold text-white tabular-nums">{{ number_format($d['count']) }}</span>
                            <span class="w-10 text-right text-slate-500 tabular-nums">{{ $d['pct'] }}%</span>
                        </div>
                    @endforeach
                </div>
            @else
                <p class="py-10 text-center text-sm text-slate-500">Distribution appears once accounts are connected and posts publish.</p>
            @endif
        </section>

        {{-- Top automations --}}
        <section class="admin-card p-5 xl:col-span-8">
            <div class="mb-3 flex items-center justify-between">
                <h3 class="text-base font-semibold text-white">Top performing automations</h3>
                <a href="{{ route('user.automation') }}" wire:navigate class="text-xs font-semibold text-brand-500 hover:underline">View all</a>
            </div>
            @if ($topAutomations->count())
                @php($maxPosts = max(1, $topAutomations->max('posts_published')))
                <div class="space-y-1">
                    @foreach ($topAutomations as $a)
                        @php($src = $platformMeta[$a->source_platform] ?? [ucfirst($a->source_platform), '#64748b', ''])
                        @php($dst = $platformMeta[$a->target_platform] ?? [ucfirst($a->target_platform), '#64748b', ''])
                        <div class="grid grid-cols-[1fr_120px_70px] items-center gap-4 rounded-lg px-2 py-2 hover:bg-raised/40">
                            <div class="min-w-0">
                                <div class="truncate text-[13px] font-semibold text-white">{{ $a->name }}</div>
                                <div class="mt-0.5 flex items-center gap-1.5 text-[11px] text-slate-500">
                                    <span class="h-2 w-2 rounded-sm" style="background: {{ $src[1] }}"></span>{{ $src[0] }}
                                    <x-lucide-arrow-right class="h-3 w-3 text-slate-600" />
                                    <span class="h-2 w-2 rounded-sm" style="background: {{ $dst[1] }}"></span>{{ $dst[0] }}
                                </div>
                            </div>
                            <div class="h-1.5 overflow-hidden rounded-full bg-raised">
                                <div class="h-full rounded-full bg-gradient-to-r from-brand-700 to-brand-500" style="width: {{ round($a->posts_published / $maxPosts * 100) }}%"></div>
                            </div>
                            <div class="text-right">
                                <div class="text-[13px] font-semibold text-white tabular-nums">{{ number_format($a->posts_published) }}</div>
                                <div class="text-[11px] tabular-nums {{ $a->success_rate === null ? 'text-slate-600' : ($a->success_rate < 90 ? 'text-amber-400' : 'text-green-400') }}">
                                    {{ $a->success_rate === null ? '—' : rtrim(rtrim(number_format($a->success_rate, 2), '0'), '.').'%' }}
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <p class="py-8 text-center text-sm text-slate-500">Create an automation to see its performance here.</p>
            @endif
        </section>

        {{-- Outcomes --}}
        <section class="admin-card p-5 xl:col-span-4">
            <h3 class="mb-4 text-base font-semibold text-white">Publish outcomes</h3>
            @if (($success['published'] + $success['failed']) > 0)
                @php($outTotal = $success['published'] + $success['failed'])
                <div class="mb-2 flex h-2.5 gap-0.5 overflow-hidden rounded-full">
                    @if ($success['published'])<div style="width: {{ round($success['published'] / $outTotal * 100, 1) }}%" class="bg-green-500"></div>@endif
                    @if ($success['failed'])<div style="width: {{ round($success['failed'] / $outTotal * 100, 1) }}%" class="bg-red-500"></div>@endif
                </div>
                <div class="space-y-2 pt-2">
                    <div class="flex items-center gap-2.5 text-xs"><span class="h-2.5 w-2.5 rounded-sm bg-green-500"></span><span class="flex-1 text-slate-300">Published</span><span class="font-semibold text-white tabular-nums">{{ number_format($success['published']) }}</span></div>
                    <div class="flex items-center gap-2.5 text-xs"><span class="h-2.5 w-2.5 rounded-sm bg-red-500"></span><span class="flex-1 text-slate-300">Failed</span><span class="font-semibold text-white tabular-nums">{{ number_format($success['failed']) }}</span></div>
                </div>
                <div class="mt-4 rounded-xl border border-edge bg-ink/40 p-3 text-center">
                    <div class="text-2xl font-bold tabular-nums {{ ($success['rate'] ?? 100) < 90 ? 'text-amber-400' : 'text-green-400' }}">{{ $success['rate'] }}%</div>
                    <div class="text-[11px] text-slate-500">success rate · from synced jobs</div>
                </div>
                @if ($success['failed'] > 0)
                    <a href="{{ route('user.queue', ['status' => 'failed']) }}" wire:navigate class="mt-3 block rounded-lg border border-edge py-1.5 text-center text-xs font-medium text-slate-300 hover:bg-raised">Review failed jobs</a>
                @endif
            @else
                <p class="py-8 text-center text-sm text-slate-500">Outcomes appear once your desktop app syncs published and failed jobs.</p>
            @endif
        </section>
    </div>

    @script
    <script>
        function drawAnalytics(d) {
            const n = d.values.length;
            window.renderChart('analyticsChart', {
                type: 'bar',
                data: {
                    labels: d.labels,
                    datasets: [{
                        data: d.values,
                        backgroundColor: d.values.map((_, i) => i === n - 1 ? '#8b5cf6' : '#3b82f6c4'),
                        hoverBackgroundColor: '#3b82f6',
                        borderRadius: 4,
                        barPercentage: 0.72,
                        categoryPercentage: 0.85,
                    }],
                },
                options: {
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: { callbacks: { label: (c) => Number(c.parsed.y).toLocaleString() + ' posts' } },
                    },
                    scales: {
                        x: { grid: { display: false }, ticks: { maxTicksLimit: 10, maxRotation: 0 } },
                        y: { grid: { color: 'rgba(36,48,74,0.5)' }, beginAtZero: true, ticks: { maxTicksLimit: 5 } },
                    },
                },
            });
        }

        drawAnalytics(@js($series));

        const dist = @js($distribution['items']);
        if (dist.length) {
            window.renderChart('platformDonut', {
                type: 'doughnut',
                data: {
                    labels: dist.map(d => d.label),
                    datasets: [{ data: dist.map(d => d.count), backgroundColor: dist.map(d => d.color), borderWidth: 2, borderColor: '#182234', cutout: '72%' }],
                },
                options: { maintainAspectRatio: false, plugins: { legend: { display: false } } },
            });
        }

        $wire.on('analytics-range', (e) => {
            const p = Array.isArray(e) ? e[0] : e;
            drawAnalytics(p.series);
        });
    </script>
    @endscript
</div>