@php
    $user = auth()->user();
    $firstName = \Illuminate\Support\Str::of($user->name ?? 'there')->before(' ');
    $hour = now()->hour;
    $greeting = $hour < 12 ? 'Good morning' : ($hour < 18 ? 'Good afternoon' : 'Good evening');

    $planName = $sub?->plan?->name ?? 'Free';
    $quotas = $limits['quotas'];

    // Tiny inline sparkline for the KPI cards (same helper style as admin).
    $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>';
    };
    $sparkTail = array_slice($trend['values'], -7);

    $fmtCap = fn (?int $cap) => $cap === null ? '∞' : number_format($cap);

    $kpiCards = [
        [
            'icon' => 'send', 'tint' => '#3b82f6', 'label' => 'Posts published today',
            'value' => number_format($kpis['posts_today']),
            'sub' => $quotas['posts_per_day'] !== null ? 'of '.number_format($quotas['posts_per_day']).' daily limit' : 'no daily limit',
            'spark' => $sparkTail,
        ],
        [
            'icon' => 'calendar-clock', 'tint' => '#8b5cf6', 'label' => 'Scheduled posts',
            'value' => number_format($kpis['scheduled']),
            'sub' => $quotas['max_scheduled'] !== null ? 'of '.number_format($quotas['max_scheduled']).' allowed' : 'no schedule limit',
            'spark' => array_map(fn ($v) => (int) round($v * 0.7), $sparkTail),
        ],
        [
            'icon' => 'check-circle-2', 'tint' => '#22c55e', 'label' => 'Success rate',
            'value' => $kpis['success_rate'] !== null ? $kpis['success_rate'].'%' : '—',
            'sub' => $kpis['success_rate'] !== null ? 'last 30 days' : 'reported after your first sync',
            'spark' => array_map(fn ($v) => 90 + ($v % 8), $sparkTail),
        ],
        [
            'icon' => 'list-checks', 'tint' => '#94a3b8', 'label' => 'Jobs in queue',
            'value' => number_format($kpis['queue']),
            'sub' => $quotas['queue_size'] !== null ? 'of '.number_format($quotas['queue_size']).' queue slots' : 'no queue limit',
            'spark' => array_reverse(array_map(fn ($v) => (int) round($v * 0.4), $sparkTail)),
        ],
    ];

    $totalAccounts = $kpis['accounts'];
    $accountCapTotal = collect($limits['accounts'])->reject(fn ($v) => $v === null)->sum();
    $hasUnlimitedAccounts = collect($limits['accounts'])->contains(null);

    $periodTotal = array_sum($trend['values']);
    $periodAvg = count($trend['values']) ? (int) round($periodTotal / count($trend['values'])) : 0;
    $periodBest = count($trend['values']) ? max($trend['values']) : 0;

    $platformTotal = max(1, collect($platforms)->sum('connected'));

    $quickActions = [
        ['user.automation', 'zap', 'New automation'],
        ['user.accounts', 'plug', 'Connect account'],
        ['user.automation', 'calendar-plus', 'Create schedule'],
        ['user.queue', 'list-checks', 'View queue'],
        ['user.reports', 'file-text', 'Reports'],
        ['billing', 'crown', 'Upgrade plan'],
    ];

    $notifStyle = [
        'success' => ['check-circle-2', 'text-green-400', 'bg-green-500/10'],
        'warning' => ['alert-triangle', 'text-amber-400', 'bg-amber-500/10'],
        'error' => ['alert-circle', 'text-red-400', 'bg-red-500/10'],
        'info' => ['info', 'text-blue-400', 'bg-blue-500/10'],
    ];

    $activityIcon = function (string $action) {
        return match (true) {
            str_contains($action, 'login') || str_contains($action, 'auth') => 'log-in',
            str_contains($action, 'payment') || str_contains($action, 'invoice') => 'credit-card',
            str_contains($action, 'subscription') || str_contains($action, 'plan') => 'refresh-ccw',
            str_contains($action, 'profile') || str_contains($action, 'user') => 'user',
            default => 'activity',
        };
    };
@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">{{ $greeting }}, {{ $firstName }}</h1>
            <p class="mt-1 text-sm text-slate-400">
                {{ now()->format('l, F j, Y') }} · <span class="font-medium text-slate-300">{{ $planName }} plan</span>
                @if ($kpis['reported_at'])
                    · synced {{ $kpis['reported_at']->diffForHumans() }}
                @endif
            </p>
        </div>
        <a href="{{ route('user.automation') }}" 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" /> New Automation
        </a>
    </div>

    {{-- KPI cards --}}
    <div class="grid grid-cols-2 gap-4 xl:grid-cols-4">
        @foreach ($kpiCards as $c)
            <div class="admin-card p-4 transition hover:-translate-y-px hover:border-slate-600/40">
                <div class="flex items-center gap-2.5">
                    <span class="grid h-10 w-10 place-items-center rounded-xl" style="background: {{ $c['tint'] }}22; color: {{ $c['tint'] }}">
                        <x-dynamic-component :component="'lucide-'.$c['icon']" class="h-[18px] w-[18px]" />
                    </span>
                    <span class="text-xs font-medium text-slate-400">{{ $c['label'] }}</span>
                </div>
                <div class="mt-3 text-[26px] font-bold leading-none text-white tabular-nums">{{ $c['value'] }}</div>
                <div class="mt-1.5 text-xs text-slate-500">{{ $c['sub'] }}</div>
                <div class="-mb-1 mt-2 opacity-70">{!! $spark($c['spark'], $c['tint']) !!}</div>
            </div>
        @endforeach
    </div>

    {{-- Stat 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-brand/15 text-brand-500"><x-lucide-file-text class="h-4 w-4" /></span>
            <div class="min-w-0">
                <div class="text-[15px] font-bold text-white tabular-nums">{{ number_format($kpis['posts_month']) }} <span class="text-xs font-medium text-slate-500">/ {{ $fmtCap($quotas['posts_per_month']) }}</span></div>
                <div class="truncate text-[11.5px] text-slate-500">Monthly posts used</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-share-2 class="h-4 w-4" /></span>
            <div class="min-w-0">
                <div class="text-[15px] font-bold text-white tabular-nums">{{ $totalAccounts }}@if(!$hasUnlimitedAccounts && $accountCapTotal > 0) <span class="text-xs font-medium text-slate-500">of {{ $accountCapTotal }}</span>@endif</div>
                <div class="truncate text-[11.5px] text-slate-500">Connected accounts</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-blue-500/10 text-blue-400"><x-lucide-monitor-smartphone class="h-4 w-4" /></span>
            <div class="min-w-0">
                <div class="text-[15px] font-bold text-white">{{ $kpis['reported_at']?->diffForHumans() ?? 'Not yet' }}</div>
                <div class="truncate text-[11.5px] text-slate-500">Last desktop sync</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-crown class="h-4 w-4" /></span>
            <div class="min-w-0">
                @if ($sub && $sub->accessEndsAt())
                    <div class="text-[15px] font-bold text-white">{{ $sub->accessEndsAt()->format('M j, Y') }}</div>
                    <div class="truncate text-[11.5px] text-slate-500">Renews · {{ $sub->remainingDays() }} days left</div>
                @elseif ($sub)
                    <div class="text-[15px] font-bold text-white">Lifetime</div>
                    <div class="truncate text-[11.5px] text-slate-500">{{ $planName }} plan</div>
                @else
                    <div class="text-[15px] font-bold text-white">Free</div>
                    <a href="{{ route('billing') }}" wire:navigate class="truncate text-[11.5px] font-semibold text-brand-500 hover:underline">Choose a plan</a>
                @endif
            </div>
        </div>
    </div>

    {{-- Quick actions --}}
    <div class="flex flex-wrap gap-2.5">
        @foreach ($quickActions as [$route, $icon, $label])
            <a href="{{ route($route) }}" wire:navigate
               class="inline-flex items-center gap-2 rounded-full border border-edge bg-card px-3.5 py-2 text-xs font-medium text-slate-400 transition hover:border-brand/40 hover:bg-brand/10 hover:text-white">
                <x-dynamic-component :component="'lucide-'.$icon" class="h-3.5 w-3.5" /> {{ $label }}
            </a>
        @endforeach
    </div>

    {{-- Main grid --}}
    <div class="grid grid-cols-1 gap-5 xl:grid-cols-12">
        {{-- ====== Main column ====== --}}
        <div class="space-y-5 xl:col-span-8">
            {{-- Publishing activity --}}
            <section class="admin-card p-5">
                <div class="mb-1 flex flex-wrap items-center justify-between gap-3">
                    <div>
                        <h3 class="text-base font-semibold text-white">Publishing activity</h3>
                        <p class="mt-0.5 text-xs text-slate-500">Posts published across all platforms</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>
                <div class="mb-3 flex gap-8 border-b border-edge pb-3 pt-2">
                    <div><div class="text-[11px] text-slate-500">Total published</div><div class="text-lg font-bold text-white tabular-nums">{{ number_format($periodTotal) }}</div></div>
                    <div><div class="text-[11px] text-slate-500">Daily average</div><div class="text-lg font-bold text-white tabular-nums">{{ number_format($periodAvg) }}</div></div>
                    <div><div class="text-[11px] text-slate-500">Best day</div><div class="text-lg font-bold text-white tabular-nums">{{ number_format($periodBest) }}</div></div>
                </div>
                <div class="h-60" wire:ignore><canvas id="postsChart"></canvas></div>
                @if (!$kpis['reported_at'])
                    <p class="mt-2 text-[11px] text-slate-600">Illustrative until your desktop app reports publishing data.</p>
                @endif
            </section>

            {{-- Connected platforms --}}
            <section class="admin-card p-5">
                <div class="mb-4 flex items-center justify-between">
                    <div>
                        <h3 class="text-base font-semibold text-white">Connected platforms</h3>
                        <p class="mt-0.5 text-xs text-slate-500">{{ $totalAccounts }} {{ \Illuminate\Support\Str::plural('account', $totalAccounts) }} across {{ collect($platforms)->where('connected', '>', 0)->count() }} platforms</p>
                    </div>
                    <a href="{{ route('user.accounts') }}" wire:navigate class="text-xs font-semibold text-brand-500 hover:underline">Manage all</a>
                </div>

                @if ($totalAccounts > 0)
                    {{-- Distribution bar --}}
                    <div class="mb-2 flex h-2 gap-0.5 overflow-hidden rounded-full">
                        @foreach ($platforms as $p)
                            @if ($p['connected'] > 0)
                                <div style="width: {{ round($p['connected'] / $platformTotal * 100, 1) }}%; background: {{ $p['color'] }}"></div>
                            @endif
                        @endforeach
                    </div>
                    <div class="mb-4 flex flex-wrap gap-x-4 gap-y-1 text-[11px] text-slate-400">
                        @foreach ($platforms as $p)
                            @if ($p['connected'] > 0)
                                <span class="inline-flex items-center gap-1.5"><span class="h-2 w-2 rounded-sm" style="background: {{ $p['color'] }}"></span>{{ $p['label'] }} <span class="text-slate-600 tabular-nums">{{ $p['connected'] }}</span></span>
                            @endif
                        @endforeach
                    </div>
                @endif

                <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
                    @forelse ($platforms as $p)
                        <div class="rounded-xl border border-edge bg-ink/40 p-3.5 transition hover:border-slate-600/40">
                            <div class="mb-2.5 flex items-center gap-2.5">
                                <span class="grid h-8 w-8 shrink-0 place-items-center rounded-lg text-[10px] font-bold text-white" style="background: {{ $p['color'] }}">{{ $p['short'] }}</span>
                                <div class="min-w-0">
                                    <div class="truncate text-[13px] font-semibold text-white">{{ $p['label'] }}</div>
                                    <div class="text-[11px] text-slate-500 tabular-nums">
                                        {{ $p['connected'] }}@if($p['cap'] !== null) / {{ $p['cap'] }}@endif {{ \Illuminate\Support\Str::plural('account', $p['connected']) }}
                                    </div>
                                </div>
                            </div>
                            <div class="flex items-center justify-between">
                                @if ($p['connected'] > 0 && $p['cap'] !== null && $p['connected'] >= $p['cap'])
                                    <span class="inline-flex items-center gap-1.5 text-[11px] font-medium text-amber-400"><span class="h-1.5 w-1.5 rounded-full bg-amber-400"></span>At plan limit</span>
                                @elseif ($p['connected'] > 0)
                                    <span class="inline-flex items-center gap-1.5 text-[11px] font-medium text-green-400"><span class="h-1.5 w-1.5 rounded-full bg-green-400 shadow-[0_0_6px] shadow-green-400/60"></span>Connected</span>
                                @else
                                    <span class="inline-flex items-center gap-1.5 text-[11px] font-medium text-slate-500"><span class="h-1.5 w-1.5 rounded-full bg-slate-600"></span>Not connected</span>
                                @endif
                                <a href="{{ route('user.accounts') }}" wire:navigate class="rounded-lg border border-edge px-2.5 py-1 text-[11px] font-medium text-slate-400 hover:border-slate-500 hover:text-white">Manage</a>
                            </div>
                        </div>
                    @empty
                        <div class="col-span-full py-8 text-center text-sm text-slate-500">
                            Your plan doesn't include platform accounts yet — <a href="{{ route('billing') }}" wire:navigate class="font-semibold text-brand-500 hover:underline">upgrade to connect</a>.
                        </div>
                    @endforelse
                </div>
            </section>
        </div>

        {{-- ====== Rail ====== --}}
        <div class="space-y-5 xl:col-span-4">
            {{-- Subscription --}}
            <section class="admin-card relative overflow-hidden p-5">
                <div class="pointer-events-none absolute -right-16 -top-16 h-44 w-44 rounded-full bg-brand/20 blur-3xl"></div>
                <div class="relative">
                    <div class="flex items-center justify-between">
                        <div class="text-lg font-bold text-white">{{ $planName }} plan</div>
                        @if ($sub?->isTrial())
                            <span class="admin-chip bg-blue-500/15 text-blue-400">Trial</span>
                        @elseif ($sub?->onGrace())
                            <span class="admin-chip bg-amber-500/15 text-amber-400">Grace period</span>
                        @elseif ($sub)
                            <span class="admin-chip bg-green-500/15 text-green-400">Active</span>
                        @else
                            <span class="admin-chip bg-slate-500/15 text-slate-400">No subscription</span>
                        @endif
                    </div>
                    @if ($sub && $sub->accessEndsAt())
                        <p class="mt-1 text-xs text-slate-400">Renews <span class="font-semibold text-slate-200">{{ $sub->accessEndsAt()->format('M j, Y') }}</span> · {{ $sub->remainingDays() }} days left</p>
                    @elseif ($sub)
                        <p class="mt-1 text-xs text-slate-400">Lifetime access — no renewal needed.</p>
                    @else
                        <p class="mt-1 text-xs text-slate-400">Pick a plan to start publishing.</p>
                    @endif

                    <div class="mt-4">
                        <div class="mb-1.5 flex justify-between text-xs">
                            <span class="text-slate-400">Monthly posts</span>
                            <span class="font-semibold text-white tabular-nums">{{ number_format($kpis['posts_month']) }} / {{ $fmtCap($quotas['posts_per_month']) }}</span>
                        </div>
                        <div class="h-1.5 overflow-hidden rounded-full bg-raised">
                            @php($pmPct = ($quotas['posts_per_month'] ?? 0) > 0 ? min(100, round($kpis['posts_month'] / $quotas['posts_per_month'] * 100)) : ($quotas['posts_per_month'] === null ? 8 : 0))
                            <div class="h-full rounded-full bg-gradient-to-r from-brand-700 to-brand-500" style="width: {{ $pmPct }}%"></div>
                        </div>
                    </div>

                    <div class="mt-4 flex gap-2.5">
                        <a href="{{ route('billing') }}" wire:navigate class="flex-1 rounded-xl border border-edge py-2 text-center text-xs font-semibold text-slate-300 hover:bg-raised">Manage</a>
                        <a href="{{ route('billing') }}" wire:navigate class="flex-1 rounded-xl bg-brand py-2 text-center text-xs font-semibold text-white shadow-lg shadow-brand/25 hover:bg-brand-700">Upgrade</a>
                    </div>
                </div>
            </section>

            @if ($edition === 'cloud')
                {{-- Cloud storage --}}
                <section class="admin-card p-5">
                    <div class="mb-3 flex items-center justify-between">
                        <h3 class="text-base font-semibold text-white">Cloud storage</h3>
                        <span class="admin-chip bg-blue-500/15 text-blue-400"><x-lucide-cloud class="h-3 w-3" /> Web Cloud</span>
                    </div>
                    <div class="mb-1.5 flex justify-between text-xs">
                        <span class="text-slate-400">Permanent uploads</span>
                        <span class="font-semibold text-white tabular-nums">
                            {{ number_format($storage['used_mb'] / 1024, 1) }} GB
                            @if ($storage['cap_mb'] !== null) / {{ number_format($storage['cap_mb'] / 1024) }} GB @else / ∞ @endif
                        </span>
                    </div>
                    <div class="h-1.5 overflow-hidden rounded-full bg-raised">
                        <div class="h-full rounded-full {{ ($storage['pct'] ?? 0) >= 85 ? 'bg-amber-400' : 'bg-accent2' }}" style="width: {{ $storage['pct'] ?? ($storage['cap_mb'] === null ? 6 : 0) }}%"></div>
                    </div>
                    <p class="mt-2 text-[11px] text-slate-600">Temporary source downloads are cleaned up automatically and never count against storage.</p>
                </section>
            @elseif ($edition === 'desktop')
                {{-- Desktop devices --}}
                <section class="admin-card p-5">
                    <div class="mb-3 flex items-center justify-between">
                        <h3 class="text-base font-semibold text-white">Desktop devices</h3>
                        <a class="text-xs font-semibold text-brand-500 hover:underline" href="{{ route('user.devices') }}" wire:navigate>License</a>
                    </div>
                    @if ($license)
                        <div class="mb-3 flex items-center justify-between rounded-xl border border-edge bg-ink/40 px-3 py-2 text-xs">
                            <span class="text-slate-400">License</span>
                            <span class="admin-chip {{ $license->status === 'active' ? 'bg-green-500/15 text-green-400' : 'bg-amber-500/15 text-amber-400' }}">{{ ucfirst($license->status) }}</span>
                        </div>
                    @endif
                    <div class="space-y-2.5">
                        @forelse ($devices as $d)
                            <div class="flex items-center gap-2.5">
                                <span class="h-2 w-2 shrink-0 rounded-full {{ $d['online'] ? 'bg-green-400 shadow-[0_0_6px] shadow-green-400/60' : 'bg-slate-600' }}"></span>
                                <div class="min-w-0 flex-1">
                                    <div class="truncate text-[13px] font-medium text-slate-200">{{ $d['name'] }}</div>
                                    <div class="truncate text-[11px] text-slate-500">{{ $d['online'] ? 'Online now' : ($d['heartbeat'] ? 'Last seen '.$d['heartbeat']->diffForHumans() : 'Never connected') }}@if($d['version']) · v{{ $d['version'] }}@endif</div>
                                </div>
                            </div>
                        @empty
                            <p class="py-3 text-center text-xs text-slate-500">No devices activated yet — install the desktop app to get started.</p>
                        @endforelse
                    </div>
                </section>
            @endif

            {{-- Plan usage --}}
            <section class="admin-card p-5">
                <div class="mb-4 flex items-center justify-between">
                    <h3 class="text-base font-semibold text-white">Plan usage</h3>
                    <a href="{{ route('billing') }}" wire:navigate class="text-xs font-semibold text-brand-500 hover:underline">Details</a>
                </div>
                <div class="space-y-3.5">
                    @foreach ($meters as $m)
                        <div>
                            <div class="mb-1.5 flex justify-between text-xs">
                                <span class="text-slate-400">{{ $m['label'] }}</span>
                                <span class="font-semibold tabular-nums {{ ($m['pct'] ?? 0) >= 85 ? 'text-amber-400' : 'text-white' }}">
                                    {{ number_format($m['value']) }} / {{ $fmtCap($m['cap']) }}
                                </span>
                            </div>
                            <div class="h-1.5 overflow-hidden rounded-full bg-raised">
                                <div class="h-full rounded-full {{ ($m['pct'] ?? 0) >= 85 ? 'bg-amber-400' : 'bg-accent2' }}"
                                     style="width: {{ $m['pct'] ?? ($m['cap'] === null ? 6 : 0) }}%"></div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </section>

            {{-- Notifications --}}
            <section class="admin-card p-5">
                <div class="mb-3 flex items-center justify-between">
                    <h3 class="text-base font-semibold text-white">Notifications</h3>
                    <a href="{{ route('user.notifications') }}" wire:navigate class="text-xs font-semibold text-brand-500 hover:underline">View all</a>
                </div>
                <div class="space-y-1">
                    @forelse ($notifications as $n)
                        @php([$nIcon, $nText, $nBg] = $notifStyle[$n->level] ?? $notifStyle['info'])
                        <div class="flex gap-3 rounded-xl p-2.5 transition hover:bg-raised/60">
                            <span class="mt-0.5 grid h-8 w-8 shrink-0 place-items-center rounded-lg {{ $nBg }} {{ $nText }}">
                                <x-dynamic-component :component="'lucide-'.$nIcon" class="h-4 w-4" />
                            </span>
                            <div class="min-w-0 flex-1">
                                <div class="truncate text-[13px] font-medium text-slate-200">{{ $n->title }}</div>
                                <div class="line-clamp-2 text-xs leading-relaxed text-slate-500">{{ $n->body }}</div>
                            </div>
                            <span class="whitespace-nowrap text-[11px] text-slate-600">{{ $n->created_at->diffForHumans(null, true) }}</span>
                        </div>
                    @empty
                        <div class="py-6 text-center text-sm text-slate-500">You're all caught up.</div>
                    @endforelse
                </div>
            </section>

            {{-- Recent activity --}}
            <section class="admin-card p-5">
                <div class="mb-3 flex items-center justify-between">
                    <h3 class="text-base font-semibold text-white">Recent activity</h3>
                </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-dynamic-component :component="'lucide-'.$activityIcon($log->action)" 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="text-xs text-slate-500">{{ $log->created_at->diffForHumans() }}</div>
                            </div>
                        </div>
                    @empty
                        <div class="py-6 text-center text-sm text-slate-500">Activity will appear as you use CC Publisher.</div>
                    @endforelse
                </div>
            </section>
        </div>
    </div>

    @script
    <script>
        const chartBlue = '#3b82f6', chartViolet = '#8b5cf6';

        function drawPosts(d) {
            const n = d.values.length;
            window.renderChart('postsChart', {
                type: 'bar',
                data: {
                    labels: d.labels,
                    datasets: [{
                        data: d.values,
                        backgroundColor: d.values.map((_, i) => i === n - 1 ? chartViolet : chartBlue + 'c4'),
                        hoverBackgroundColor: d.values.map((_, i) => i === n - 1 ? chartViolet : chartBlue),
                        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 } },
                    },
                },
            });
        }

        drawPosts(@js($trend));

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