@php
    $reports = [
        'publishing' => [
            'icon' => 'send', 'tint' => 'bg-blue-500/10 text-blue-400',
            'title' => 'Publishing summary',
            'desc' => 'Posts published and failed per day over the last 90 days, from your synced jobs.',
        ],
        'automations' => [
            'icon' => 'workflow', 'tint' => 'bg-brand/15 text-brand-500',
            'title' => 'Automation performance',
            'desc' => 'Every workflow with its route, frequency, status, posts published and success rate.',
        ],
        'accounts' => [
            'icon' => 'share-2', 'tint' => 'bg-green-500/10 text-green-400',
            'title' => 'Connected accounts',
            'desc' => 'All social accounts with platform, role, connection status and token expiry.',
        ],
        'failures' => [
            'icon' => 'alert-triangle', 'tint' => 'bg-red-500/10 text-red-400',
            'title' => 'Failure log',
            'desc' => 'Failed publishing jobs with their platform, automation, attempts and error message.',
        ],
    ];
@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">Reports</h1>
            <p class="mt-1 text-sm text-slate-400">Download your publishing data as CSV — opens in Excel and Google Sheets.</p>
        </div>
        <a href="{{ route('user.analytics') }}" wire:navigate
           class="inline-flex items-center gap-2 rounded-xl border border-edge bg-card px-4 py-2.5 text-sm font-semibold text-slate-300 hover:bg-raised">
            <x-lucide-bar-chart-3 class="h-4 w-4" /> View analytics
        </a>
    </div>

    {{-- Report cards --}}
    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
        @foreach ($reports as $key => $r)
            @php($s = $stats[$key])
            <section class="admin-card flex flex-col p-5 transition hover:-translate-y-px hover:border-slate-600/40">
                <div class="flex items-start gap-3.5">
                    <span class="grid h-11 w-11 shrink-0 place-items-center rounded-xl {{ $r['tint'] }}">
                        <x-dynamic-component :component="'lucide-'.$r['icon']" class="h-5 w-5" />
                    </span>
                    <div class="min-w-0 flex-1">
                        <h3 class="text-sm font-semibold text-white">{{ $r['title'] }}</h3>
                        <p class="mt-1 text-xs leading-relaxed text-slate-400">{{ $r['desc'] }}</p>
                    </div>
                </div>
                <div class="mt-4 flex items-center justify-between gap-3 border-t border-edge pt-4">
                    <span class="text-xs text-slate-500 tabular-nums">{{ $s['headline'] }}</span>
                    @if ($s['empty'])
                        <span class="rounded-lg border border-edge px-3 py-1.5 text-xs font-medium text-slate-600" title="Nothing to export yet">No data yet</span>
                    @else
                        <a href="{{ route('user.reports.export', $key) }}"
                           class="inline-flex items-center gap-1.5 rounded-lg bg-brand px-3 py-1.5 text-xs font-semibold text-white shadow-lg shadow-brand/25 hover:bg-brand-700">
                            <x-lucide-download class="h-3.5 w-3.5" /> Download CSV
                        </a>
                    @endif
                </div>
            </section>
        @endforeach
    </div>

    {{-- Invoices pointer --}}
    <section class="admin-card flex flex-wrap items-center justify-between gap-3 p-5">
        <div class="flex items-center gap-3.5">
            <span class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-amber-500/10 text-amber-400"><x-lucide-receipt class="h-5 w-5" /></span>
            <div>
                <h3 class="text-sm font-semibold text-white">Invoices &amp; payments</h3>
                <p class="mt-0.5 text-xs text-slate-400">PDF invoices and your payment history live on the billing page.</p>
            </div>
        </div>
        <a href="{{ route('billing') }}" wire:navigate class="rounded-lg border border-edge px-3.5 py-1.5 text-xs font-medium text-slate-300 hover:bg-raised">Open billing</a>
    </section>

    <p class="text-xs text-slate-600">Reports reflect what your desktop app has synced. Data updates with every sync.</p>
</div>