@extends('layouts.admin')

@section('title', 'Dashboard')
@section('header_title', 'Dashboard')
@section('header_subtitle', 'Welcome back, ' . auth()->user()->name)

@push('styles')
<style>
    .kpi-blue { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
    .kpi-green { background: linear-gradient(135deg, #10b981, #047857); }
    .kpi-amber { background: linear-gradient(135deg, #f59e0b, #b45309); }
    .kpi-rose { background: linear-gradient(135deg, #f43f5e, #be123c); }
    .kpi-purple { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
    .kpi-cyan { background: linear-gradient(135deg, #06b6d4, #0e7490); }
    .kpi-slate { background: linear-gradient(135deg, #475569, #1e293b); }
    .kpi-orange { background: linear-gradient(135deg, #fb923c, #c2410c); }
    .trend-up { color: #10b981; }
    .trend-down { color: #ef4444; }
    .trend-neutral { color: #94a3b8; }
    .pulse-dot { animation: pulse 2s infinite; }
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: .4; }
    }
</style>
@endpush

@section('content')
    <div class="space-y-6">

        {{-- Welcome banner --}}
        <div class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-xl shadow-lg p-6 text-white relative overflow-hidden">
            <div class="absolute right-0 top-0 w-64 h-64 bg-white/10 rounded-full -translate-y-32 translate-x-32"></div>
            <div class="absolute right-20 bottom-0 w-32 h-32 bg-white/10 rounded-full translate-y-16"></div>
            <div class="relative">
                <div class="flex items-start justify-between">
                    <div>
                        <h2 class="text-2xl font-bold mb-1">Good {{ now()->hour < 12 ? 'morning' : (now()->hour < 18 ? 'afternoon' : 'evening') }}, {{ explode(' ', auth()->user()->name)[0] }}!</h2>
                        <p class="text-blue-100">Here's what's happening with your newsroom today.</p>
                    </div>
                    <div class="hidden sm:flex items-center gap-2 text-sm bg-white/10 backdrop-blur rounded-lg px-3 py-2">
                        <span class="pulse-dot h-2 w-2 rounded-full bg-emerald-400"></span>
                        <span>All systems operational</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Quick actions --}}
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-4 flex flex-wrap items-center justify-between gap-3">
            <div>
                <div class="text-sm font-semibold text-slate-900">Quick actions</div>
                <div class="text-xs text-slate-500">Pull new stories, write something, or push a breaking alert.</div>
            </div>
            <div class="flex flex-wrap items-center gap-2">
                <a href="{{ route('admin.import.index') }}" class="inline-flex items-center gap-2 bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md text-sm font-medium">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
                    Import news
                </a>
                <a href="{{ route('admin.articles.create') }}" class="inline-flex items-center gap-2 bg-slate-800 hover:bg-slate-900 text-white px-4 py-2 rounded-md text-sm font-medium">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                    New article
                </a>
                <a href="{{ route('admin.alerts.create') }}" class="inline-flex items-center gap-2 bg-amber-500 hover:bg-amber-600 text-white px-4 py-2 rounded-md text-sm font-medium">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
                    Breaking alert
                </a>
                <form action="{{ route('admin.import.rephrase') }}" method="POST" class="inline">
                    @csrf
                    <input type="hidden" name="limit" value="0">
                    <button type="submit" class="inline-flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                        Rephrase
                    </button>
                </form>
                <form action="{{ route('admin.articles.refresh-featured') }}" method="POST" class="inline">
                    @csrf
                    <button type="submit" class="inline-flex items-center gap-2 bg-rose-600 hover:bg-rose-700 text-white px-4 py-2 rounded-md text-sm font-medium">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                        Refresh featured
                    </button>
                </form>
                <form action="{{ route('admin.articles.compact') }}" method="POST" class="inline">
                    @csrf
                    <button type="submit" class="inline-flex items-center gap-2 bg-cyan-600 hover:bg-cyan-700 text-white px-4 py-2 rounded-md text-sm font-medium">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
                        Compact to 2 min
                    </button>
                </form>
            </div>
        </div>

        {{-- KPI Grid --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            @php
                $kpis = [
                    ['label' => 'Total Articles', 'value' => $stats['total_articles'], 'icon' => 'document', 'cls' => 'kpi-blue', 'sub' => $stats['published_today'].' published today'],
                    ['label' => 'Total Views', 'value' => number_format($stats['total_views']), 'icon' => 'eye', 'cls' => 'kpi-cyan', 'sub' => number_format($stats['views_today']).' today', 'trend' => $trends['views_pct']],
                    ['label' => 'Subscribers', 'value' => number_format($stats['newsletter_subscribers']), 'icon' => 'mail', 'cls' => 'kpi-purple', 'sub' => 'newsletter list', 'trend' => $trends['subscribers_pct']],
                    ['label' => 'Pending Comments', 'value' => $stats['pending_comments'], 'icon' => 'chat', 'cls' => 'kpi-amber', 'sub' => $stats['total_comments'].' total'],
                    ['label' => 'Drafts', 'value' => $stats['drafts'], 'icon' => 'pencil', 'cls' => 'kpi-slate', 'sub' => $stats['scheduled'].' scheduled'],
                    ['label' => 'Breaking News', 'value' => $stats['breaking_stories'], 'icon' => 'bolt', 'cls' => 'kpi-rose', 'sub' => $stats['featured_stories'].' featured'],
                    ['label' => 'Active Users', 'value' => $stats['total_users'], 'icon' => 'users', 'cls' => 'kpi-green', 'sub' => 'editors & readers'],
                    ['label' => 'News Tips', 'value' => $stats['pending_tips'], 'icon' => 'tip', 'cls' => 'kpi-orange', 'sub' => 'awaiting review'],
                ];
            @endphp

            @foreach($kpis as $kpi)
                <div class="kpi-card {{ $kpi['cls'] }} rounded-xl shadow-md text-white">
                    <div class="p-5 relative">
                        <div class="flex items-start justify-between mb-3">
                            <div class="text-xs uppercase tracking-wider opacity-80 font-semibold">{{ $kpi['label'] }}</div>
                            @if(isset($kpi['trend']))
                                @php $trend = $kpi['trend']; @endphp
                                <span class="text-xs font-medium {{ $trend > 0 ? 'text-emerald-200' : ($trend < 0 ? 'text-rose-200' : 'text-slate-200') }}">
                                    @if($trend > 0) ↑ @elseif($trend < 0) ↓ @else — @endif
                                    {{ abs($trend) }}%
                                </span>
                            @endif
                        </div>
                        <div class="text-3xl font-bold mb-2">{{ $kpi['value'] }}</div>
                        <div class="text-xs opacity-80">{{ $kpi['sub'] }}</div>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Charts row --}}
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-5 lg:col-span-2">
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <h3 class="text-base font-semibold text-slate-900">Traffic & Publishing</h3>
                        <p class="text-xs text-slate-500">Last 7 days</p>
                    </div>
                    <div class="flex items-center gap-3 text-xs">
                        <span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full bg-blue-500"></span>Views</span>
                        <span class="flex items-center gap-1"><span class="w-2.5 h-2.5 rounded-full bg-emerald-500"></span>Articles</span>
                    </div>
                </div>
                <div style="height: 280px;">
                    <canvas id="mainChart"></canvas>
                </div>
            </div>

            <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-5">
                <div class="mb-4">
                    <h3 class="text-base font-semibold text-slate-900">Article Status</h3>
                    <p class="text-xs text-slate-500">Current breakdown</p>
                </div>
                <div style="height: 200px;">
                    <canvas id="statusChart"></canvas>
                </div>
                <div class="mt-4 space-y-2 text-sm">
                    @php
                        $statusMap = [
                            'published' => ['Published', 'bg-emerald-500'],
                            'draft' => ['Draft', 'bg-slate-500'],
                            'scheduled' => ['Scheduled', 'bg-amber-500'],
                            'archived' => ['Archived', 'bg-rose-500'],
                        ];
                    @endphp
                    @foreach($statusMap as $key => [$label, $cls])
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-2">
                                <span class="w-2.5 h-2.5 rounded-full {{ $cls }}"></span>
                                <span class="text-slate-600">{{ $label }}</span>
                            </div>
                            <span class="font-medium text-slate-900">{{ $statusBreakdown[$key] ?? 0 }}</span>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Hourly + Content performance --}}
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-5">
                <div class="mb-4">
                    <h3 class="text-base font-semibold text-slate-900">Today's Traffic</h3>
                    <p class="text-xs text-slate-500">Hourly page views</p>
                </div>
                <div style="height: 200px;">
                    <canvas id="hourlyChart"></canvas>
                </div>
            </div>

            <div class="lg:col-span-2 bg-white rounded-xl shadow-sm border border-slate-200">
                <div class="flex items-center justify-between px-5 py-4 border-b border-slate-200">
                    <div>
                        <h3 class="text-base font-semibold text-slate-900">Top Performing Stories</h3>
                        <p class="text-xs text-slate-500">By total page views</p>
                    </div>
                    <a href="{{ route('admin.articles.index') }}" class="text-xs text-blue-600 hover:text-blue-700 font-medium">View all →</a>
                </div>
                <div class="divide-y divide-slate-100">
                    @forelse($popularStories as $idx => $story)
                        <a href="{{ route('admin.articles.edit', $story) }}" class="flex items-center gap-4 px-5 py-3 hover:bg-slate-50 transition">
                            <span class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 text-white flex items-center justify-center text-sm font-bold">{{ $idx + 1 }}</span>
                            <div class="flex-1 min-w-0">
                                <div class="text-sm font-medium text-slate-900 truncate">{{ $story->title }}</div>
                                <div class="text-xs text-slate-500">{{ $story->published_at?->diffForHumans() ?? 'Not published' }}</div>
                            </div>
                            <div class="text-right">
                                <div class="text-sm font-semibold text-slate-900">{{ number_format($story->view_count) }}</div>
                                <div class="text-xs text-slate-500">views</div>
                            </div>
                        </a>
                    @empty
                        <div class="px-5 py-8 text-center text-sm text-slate-500">No published stories yet.</div>
                    @endforelse
                </div>
            </div>
        </div>

        {{-- Recent + Categories + Locations + Activity --}}
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

            <div class="bg-white rounded-xl shadow-sm border border-slate-200">
                <div class="flex items-center justify-between px-5 py-4 border-b border-slate-200">
                    <h3 class="text-base font-semibold text-slate-900">Recent Articles</h3>
                    <a href="{{ route('admin.articles.create') }}" class="text-xs text-blue-600 hover:text-blue-700 font-medium">+ New</a>
                </div>
                <div class="divide-y divide-slate-100">
                    @forelse($recentArticles as $article)
                        <a href="{{ route('admin.articles.edit', $article) }}" class="block px-5 py-3 hover:bg-slate-50 transition">
                            <div class="flex items-start gap-2 mb-1">
                                <span class="inline-block px-2 py-0.5 rounded text-xs font-semibold
                                    @switch($article->status)
                                        @case('published') bg-emerald-100 text-emerald-700 @break
                                        @case('draft') bg-slate-100 text-slate-700 @break
                                        @case('scheduled') bg-amber-100 text-amber-700 @break
                                        @default bg-slate-100 text-slate-700
                                    @endswitch
                                ">{{ ucfirst($article->status) }}</span>
                                @if($article->is_breaking)<span class="inline-block px-2 py-0.5 rounded text-xs font-semibold bg-rose-100 text-rose-700">Breaking</span>@endif
                            </div>
                            <div class="text-sm font-medium text-slate-900 line-clamp-2">{{ $article->title }}</div>
                            <div class="text-xs text-slate-500 mt-1">{{ $article->created_at?->diffForHumans() ?? '—' }} · {{ number_format($article->view_count) }} views</div>
                        </a>
                    @empty
                        <div class="px-5 py-8 text-center text-sm text-slate-500">No articles yet.</div>
                    @endforelse
                </div>
            </div>

            <div class="bg-white rounded-xl shadow-sm border border-slate-200">
                <div class="flex items-center justify-between px-5 py-4 border-b border-slate-200">
                    <h3 class="text-base font-semibold text-slate-900">Top Categories</h3>
                    <a href="{{ route('admin.categories.index') }}" class="text-xs text-blue-600 hover:text-blue-700 font-medium">Manage →</a>
                </div>
                <div class="p-5 space-y-3">
                    @forelse($topCategories as $cat)
                        <div>
                            <div class="flex items-center justify-between text-sm mb-1">
                                <span class="font-medium text-slate-900">{{ $cat->name }}</span>
                                <span class="text-slate-500">{{ $cat->articles_count }}</span>
                            </div>
                            <div class="h-1.5 bg-slate-100 rounded-full overflow-hidden">
                                <div class="h-full bg-gradient-to-r from-blue-500 to-indigo-500 rounded-full"
                                    style="width: {{ $topCategories->max('articles_count') > 0 ? ($cat->articles_count / $topCategories->max('articles_count')) * 100 : 0 }}%"></div>
                            </div>
                        </div>
                    @empty
                        <div class="text-sm text-slate-500 text-center py-4">No categories yet.</div>
                    @endforelse
                </div>
            </div>

            <div class="bg-white rounded-xl shadow-sm border border-slate-200">
                <div class="flex items-center justify-between px-5 py-4 border-b border-slate-200">
                    <h3 class="text-base font-semibold text-slate-900">Top Locations</h3>
                    <a href="{{ route('admin.locations.index') }}" class="text-xs text-blue-600 hover:text-blue-700 font-medium">Manage →</a>
                </div>
                <div class="divide-y divide-slate-100">
                    @forelse($topLocations as $loc)
                        <div class="flex items-center justify-between px-5 py-3">
                            <div class="flex items-center gap-2">
                                <svg class="h-4 w-4 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                                <span class="text-sm text-slate-900">{{ $loc->name }}</span>
                            </div>
                            <span class="text-xs font-semibold text-slate-500 bg-gray-100 px-2 py-0.5 rounded-full">{{ $loc->articles_count }}</span>
                        </div>
                    @empty
                        <div class="px-5 py-8 text-center text-sm text-slate-500">No locations yet.</div>
                    @endforelse
                </div>
            </div>
        </div>

        {{-- Bottom row: Comments + Tips --}}
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <div class="bg-white rounded-xl shadow-sm border border-slate-200">
                <div class="flex items-center justify-between px-5 py-4 border-b border-slate-200">
                    <h3 class="text-base font-semibold text-slate-900">Recent Comments</h3>
                    <a href="{{ route('admin.comments.index') }}" class="text-xs text-blue-600 hover:text-blue-700 font-medium">Moderate →</a>
                </div>
                <div class="divide-y divide-slate-100">
                    @forelse($recentComments as $c)
                        <div class="px-5 py-3">
                            <div class="flex items-center justify-between mb-1">
                                <span class="text-sm font-semibold text-slate-900">{{ $c->user?->name ?? 'Anonymous' }}</span>
                                <span class="text-xs px-2 py-0.5 rounded-full font-medium
                                    @switch($c->status)
                                        @case('approved') bg-emerald-100 text-emerald-700 @break
                                        @case('pending') bg-amber-100 text-amber-700 @break
                                        @case('hidden') bg-slate-100 text-slate-700 @break
                                        @default bg-slate-100 text-slate-700
                                    @endswitch
                                ">{{ ucfirst($c->status) }}</span>
                            </div>
                            <p class="text-sm text-slate-600 line-clamp-2">{{ Str::limit(strip_tags($c->body), 120) }}</p>
                            <div class="text-xs text-slate-400 mt-1">on “{{ $c->article?->title ?? '—' }}” · {{ $c->created_at?->diffForHumans() ?? '—' }}</div>
                        </div>
                    @empty
                        <div class="px-5 py-8 text-center text-sm text-slate-500">No comments yet.</div>
                    @endforelse
                </div>
            </div>

            <div class="bg-white rounded-xl shadow-sm border border-slate-200">
                <div class="flex items-center justify-between px-5 py-4 border-b border-slate-200">
                    <h3 class="text-base font-semibold text-slate-900">Recent News Tips</h3>
                    <a href="{{ route('admin.tips.index') }}" class="text-xs text-blue-600 hover:text-blue-700 font-medium">Review →</a>
                </div>
                <div class="divide-y divide-slate-100">
                    @forelse($recentTips as $tip)
                        <a href="{{ route('admin.tips.show', $tip) }}" class="block px-5 py-3 hover:bg-slate-50">
                            <div class="flex items-center justify-between mb-1">
                                <span class="text-sm font-semibold text-slate-900 line-clamp-1">{{ $tip->name }} @if($tip->category)<span class="text-slate-500 font-normal">· {{ $tip->category }}</span>@endif</span>
                                <span class="text-xs px-2 py-0.5 rounded-full font-medium
                                    @switch($tip->status)
                                        @case('approved') bg-emerald-100 text-emerald-700 @break
                                        @case('pending') bg-amber-100 text-amber-700 @break
                                        @case('rejected') bg-rose-100 text-rose-700 @break
                                        @default bg-slate-100 text-slate-700
                                    @endswitch
                                ">{{ ucfirst($tip->status) }}</span>
                            </div>
                            <div class="text-xs text-slate-500">{{ $tip->created_at?->diffForHumans() ?? '—' }}</div>
                        </a>
                    @empty
                        <div class="px-5 py-8 text-center text-sm text-slate-500">No tips submitted.</div>
                    @endforelse
                </div>
            </div>
        </div>

        {{-- Quick actions --}}
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-5">
            <h3 class="text-base font-semibold text-slate-900 mb-4">Quick Actions</h3>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                <a href="{{ route('admin.articles.create') }}" class="flex flex-col items-center justify-center gap-2 p-4 rounded-lg border border-slate-200 hover:border-blue-400 hover:bg-blue-50 transition text-center">
                    <svg class="h-6 w-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
                    <span class="text-sm font-medium text-slate-700">New Article</span>
                </a>
                <a href="{{ route('admin.news.import') }}" class="flex flex-col items-center justify-center gap-2 p-4 rounded-lg border border-slate-200 hover:border-emerald-400 hover:bg-emerald-50 transition text-center">
                    <svg class="h-6 w-6 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
                    <span class="text-sm font-medium text-slate-700">Import News</span>
                </a>
                <a href="{{ route('admin.alerts.create') }}" class="flex flex-col items-center justify-center gap-2 p-4 rounded-lg border border-slate-200 hover:border-rose-400 hover:bg-rose-50 transition text-center">
                    <svg class="h-6 w-6 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5"></path></svg>
                    <span class="text-sm font-medium text-slate-700">Push Alert</span>
                </a>
                <a href="{{ route('admin.media.index') }}" class="flex flex-col items-center justify-center gap-2 p-4 rounded-lg border border-slate-200 hover:border-purple-400 hover:bg-purple-50 transition text-center">
                    <svg class="h-6 w-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14"></path></svg>
                    <span class="text-sm font-medium text-slate-700">Upload Media</span>
                </a>
            </div>
        </div>

    </div>
@endsection

@push('scripts')
<script>
    const labels = @json($labels);
    const dailyViews = @json($dailyViews);
    const dailyArticles = @json($dailyArticles);

    new Chart(document.getElementById('mainChart').getContext('2d'), {
        type: 'line',
        data: {
            labels,
            datasets: [
                {
                    label: 'Views',
                    data: dailyViews,
                    borderColor: '#3b82f6',
                    backgroundColor: 'rgba(59,130,246,.08)',
                    tension: 0.35,
                    fill: true,
                    yAxisID: 'y',
                    borderWidth: 2,
                    pointRadius: 3,
                    pointBackgroundColor: '#3b82f6',
                },
                {
                    label: 'Articles',
                    data: dailyArticles,
                    borderColor: '#10b981',
                    backgroundColor: 'rgba(16,185,129,.15)',
                    tension: 0.35,
                    fill: false,
                    yAxisID: 'y1',
                    borderWidth: 2,
                    pointRadius: 3,
                    pointBackgroundColor: '#10b981',
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: { mode: 'index', intersect: false },
            plugins: { legend: { display: false }, tooltip: { backgroundColor: '#0f172a', padding: 10, cornerRadius: 8 } },
            scales: {
                y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { color: '#64748b' } },
                y1: { beginAtZero: true, position: 'right', grid: { display: false }, ticks: { color: '#64748b' } },
                x: { grid: { display: false }, ticks: { color: '#64748b' } }
            }
        }
    });

    new Chart(document.getElementById('statusChart').getContext('2d'), {
        type: 'doughnut',
        data: {
            labels: ['Published', 'Draft', 'Scheduled', 'Archived'],
            datasets: [{
                data: @json(array_values($statusBreakdown)),
                backgroundColor: ['#10b981', '#64748b', '#f59e0b', '#f43f5e'],
                borderWidth: 0,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '65%',
            plugins: { legend: { display: false } }
        }
    });

    new Chart(document.getElementById('hourlyChart').getContext('2d'), {
        type: 'bar',
        data: {
            labels: @json(array_map(fn($h) => $h . 'h', $hourlyLabels)),
            datasets: [{
                data: @json($hourlyData),
                backgroundColor: '#06b6d4',
                borderRadius: 3,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display: false }, tooltip: { backgroundColor: '#0f172a', padding: 8 } },
            scales: {
                x: { display: false },
                y: { beginAtZero: true, grid: { color: '#f1f5f9' }, ticks: { color: '#94a3b8', font: { size: 10 } } }
            }
        }
    });
</script>
@endpush