<x-app-layout>
    <div class="container mx-auto px-4 py-8 md:py-16 max-w-7xl">
        {{-- Header Section --}}
        <section class="text-center mb-10 md:mb-14">
            <div class="flex justify-center mb-6">
                <img 
                    src="/images/cropped-HS-1-270x270.webp" 
                    alt="hstream.moe Logo"
                    class="max-w-[120px] w-full h-auto rounded-xl shadow-lg hover:scale-105 transition-transform duration-300"
                />
            </div>
            <h1 class="text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-white mb-2 tracking-tight">
                Site Statistics
            </h1>
            <p class="text-gray-500 dark:text-neutral-400 text-sm md:text-base max-w-lg mx-auto">
                A comprehensive overview of hstream.moe's content and community activity
            </p>
            <div class="mt-5 flex justify-center">
                <div class="inline-flex items-center gap-2 px-4 py-1.5 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full text-xs font-semibold">
                    <span class="relative flex h-2 w-2">
                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
                    </span>
                    Live data · Updated hourly
                </div>
            </div>
        </section>

        {{-- Primary Stats Grid --}}
        <section class="mb-8">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-5">
                {{-- Total Views --}}
                <div class="relative overflow-hidden bg-white dark:bg-neutral-900 rounded-2xl p-4 md:p-6 shadow-sm border border-gray-100 dark:border-neutral-800 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300 group">
                    <div class="absolute top-0 right-0 w-24 h-24 bg-sky-400/10 dark:bg-sky-500/10 rounded-bl-[80px] -mr-4 -mt-4"></div>
                    <div class="relative z-10">
                        <div class="flex items-center gap-2 mb-3">
                            <div class="w-9 h-9 rounded-xl bg-sky-100 dark:bg-sky-900/50 flex items-center justify-center">
                                <i class="fa-solid fa-eye text-sky-600 dark:text-sky-400 text-sm"></i>
                            </div>
                        </div>
                        <div class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1 stat-counter" data-target="{{ $viewCount }}">
                            {{ number_format($viewCount) }}
                        </div>
                        <p class="text-xs md:text-sm text-gray-500 dark:text-neutral-400 font-medium">Total Views</p>
                    </div>
                </div>

                {{-- Total Episodes --}}
                <div class="relative overflow-hidden bg-white dark:bg-neutral-900 rounded-2xl p-4 md:p-6 shadow-sm border border-gray-100 dark:border-neutral-800 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300 group">
                    <div class="absolute top-0 right-0 w-24 h-24 bg-violet-400/10 dark:bg-violet-500/10 rounded-bl-[80px] -mr-4 -mt-4"></div>
                    <div class="relative z-10">
                        <div class="flex items-center gap-2 mb-3">
                            <div class="w-9 h-9 rounded-xl bg-violet-100 dark:bg-violet-900/50 flex items-center justify-center">
                                <i class="fa-solid fa-video text-violet-600 dark:text-violet-400 text-sm"></i>
                            </div>
                        </div>
                        <div class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1 stat-counter" data-target="{{ $episodeCount }}">
                            {{ number_format($episodeCount) }}
                        </div>
                        <p class="text-xs md:text-sm text-gray-500 dark:text-neutral-400 font-medium">Episodes</p>
                    </div>
                </div>

                {{-- Total Series --}}
                <div class="relative overflow-hidden bg-white dark:bg-neutral-900 rounded-2xl p-4 md:p-6 shadow-sm border border-gray-100 dark:border-neutral-800 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300 group">
                    <div class="absolute top-0 right-0 w-24 h-24 bg-rose-400/10 dark:bg-rose-500/10 rounded-bl-[80px] -mr-4 -mt-4"></div>
                    <div class="relative z-10">
                        <div class="flex items-center gap-2 mb-3">
                            <div class="w-9 h-9 rounded-xl bg-rose-100 dark:bg-rose-900/50 flex items-center justify-center">
                                <i class="fa-solid fa-list text-rose-600 dark:text-rose-400 text-sm"></i>
                            </div>
                        </div>
                        <div class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1 stat-counter" data-target="{{ $hentaiCount }}">
                            {{ number_format($hentaiCount) }}
                        </div>
                        <p class="text-xs md:text-sm text-gray-500 dark:text-neutral-400 font-medium">Series</p>
                    </div>
                </div>

                {{-- Total Users --}}
                <div class="relative overflow-hidden bg-white dark:bg-neutral-900 rounded-2xl p-4 md:p-6 shadow-sm border border-gray-100 dark:border-neutral-800 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300 group">
                    <div class="absolute top-0 right-0 w-24 h-24 bg-emerald-400/10 dark:bg-emerald-500/10 rounded-bl-[80px] -mr-4 -mt-4"></div>
                    <div class="relative z-10">
                        <div class="flex items-center gap-2 mb-3">
                            <div class="w-9 h-9 rounded-xl bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center">
                                <i class="fa-solid fa-users text-emerald-600 dark:text-emerald-400 text-sm"></i>
                            </div>
                        </div>
                        <div class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1 stat-counter" data-target="{{ $userCount }}">
                            {{ number_format($userCount) }}
                        </div>
                        <p class="text-xs md:text-sm text-gray-500 dark:text-neutral-400 font-medium">Registered Users</p>
                    </div>
                </div>
            </div>
        </section>

        {{-- Secondary Stats Grid --}}
        <section class="mb-8">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-5">
                {{-- Total Likes --}}
                <div class="relative overflow-hidden bg-white dark:bg-neutral-900 rounded-2xl p-4 md:p-6 shadow-sm border border-gray-100 dark:border-neutral-800 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300 group">
                    <div class="relative z-10">
                        <div class="flex items-center gap-2 mb-3">
                            <div class="w-9 h-9 rounded-xl bg-red-100 dark:bg-red-900/50 flex items-center justify-center">
                                <i class="fa-solid fa-heart text-red-500 dark:text-red-400 text-sm"></i>
                            </div>
                        </div>
                        <div class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1 stat-counter" data-target="{{ $likeCount }}">
                            {{ number_format($likeCount) }}
                        </div>
                        <p class="text-xs md:text-sm text-gray-500 dark:text-neutral-400 font-medium">Total Likes</p>
                    </div>
                </div>

                {{-- Total Comments --}}
                <div class="relative overflow-hidden bg-white dark:bg-neutral-900 rounded-2xl p-4 md:p-6 shadow-sm border border-gray-100 dark:border-neutral-800 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300 group">
                    <div class="relative z-10">
                        <div class="flex items-center gap-2 mb-3">
                            <div class="w-9 h-9 rounded-xl bg-amber-100 dark:bg-amber-900/50 flex items-center justify-center">
                                <i class="fa-solid fa-comments text-amber-600 dark:text-amber-400 text-sm"></i>
                            </div>
                        </div>
                        <div class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1 stat-counter" data-target="{{ $commentCount }}">
                            {{ number_format($commentCount) }}
                        </div>
                        <p class="text-xs md:text-sm text-gray-500 dark:text-neutral-400 font-medium">Comments</p>
                    </div>
                </div>

                {{-- Total Downloads --}}
                <div class="relative overflow-hidden bg-white dark:bg-neutral-900 rounded-2xl p-4 md:p-6 shadow-sm border border-gray-100 dark:border-neutral-800 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300 group">
                    <div class="relative z-10">
                        <div class="flex items-center gap-2 mb-3">
                            <div class="w-9 h-9 rounded-xl bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center">
                                <i class="fa-solid fa-download text-blue-600 dark:text-blue-400 text-sm"></i>
                            </div>
                        </div>
                        <div class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1 stat-counter" data-target="{{ $downloadCount }}">
                            {{ number_format($downloadCount) }}
                        </div>
                        <p class="text-xs md:text-sm text-gray-500 dark:text-neutral-400 font-medium">Downloads</p>
                    </div>
                </div>

                {{-- Avg Views Per Episode --}}
                <div class="relative overflow-hidden bg-white dark:bg-neutral-900 rounded-2xl p-4 md:p-6 shadow-sm border border-gray-100 dark:border-neutral-800 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300 group">
                    <div class="relative z-10">
                        <div class="flex items-center gap-2 mb-3">
                            <div class="w-9 h-9 rounded-xl bg-orange-100 dark:bg-orange-900/50 flex items-center justify-center">
                                <i class="fa-solid fa-chart-simple text-orange-600 dark:text-orange-400 text-sm"></i>
                            </div>
                        </div>
                        <div class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1 stat-counter" data-target="{{ $avgViewsPerEpisode }}">
                            {{ number_format($avgViewsPerEpisode) }}
                        </div>
                        <p class="text-xs md:text-sm text-gray-500 dark:text-neutral-400 font-medium">Avg Views / Episode</p>
                    </div>
                </div>
            </div>
        </section>

        {{-- Tertiary Stats Row: Today, This Week, New Episodes, 4K Content --}}
        <section class="mb-10">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-5">
                {{-- Today's Views --}}
                <div class="relative overflow-hidden bg-gradient-to-br from-sky-50 to-sky-100/50 dark:from-sky-950/40 dark:to-sky-900/20 rounded-2xl p-4 md:p-6 shadow-sm border border-sky-200/50 dark:border-sky-800/50 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300">
                    <div class="relative z-10">
                        <p class="text-xs text-sky-600 dark:text-sky-400 font-semibold uppercase tracking-wider mb-2">Today</p>
                        <div class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1 stat-counter" data-target="{{ $todayViews }}">
                            {{ number_format($todayViews) }}
                        </div>
                        <p class="text-xs text-gray-500 dark:text-neutral-400 font-medium">views so far</p>
                    </div>
                </div>

                {{-- This Week's Views with Trend --}}
                <div class="relative overflow-hidden bg-gradient-to-br from-violet-50 to-violet-100/50 dark:from-violet-950/40 dark:to-violet-900/20 rounded-2xl p-4 md:p-6 shadow-sm border border-violet-200/50 dark:border-violet-800/50 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300">
                    <div class="relative z-10">
                        <p class="text-xs text-violet-600 dark:text-violet-400 font-semibold uppercase tracking-wider mb-2">Views This Week</p>
                        <div class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1 stat-counter" data-target="{{ $weeklyViews }}">
                            {{ number_format($weeklyViews) }}
                        </div>
                        <div class="flex items-center gap-1">
                            @php
                                $trend = $prevWeeklyViews > 0 ? round((($weeklyViews - $prevWeeklyViews) / $prevWeeklyViews) * 100) : 0;
                            @endphp
                            @if($trend > 0)
                                <i class="fa-solid fa-arrow-trend-up text-green-500 text-xs"></i>
                                <span class="text-xs text-green-600 dark:text-green-400 font-semibold">{{ $trend }}% vs last week</span>
                            @elseif($trend < 0)
                                <i class="fa-solid fa-arrow-trend-down text-red-500 text-xs"></i>
                                <span class="text-xs text-red-600 dark:text-red-400 font-semibold">{{ abs($trend) }}% vs last week</span>
                            @else
                                <span class="text-xs text-gray-500 dark:text-neutral-400 font-medium">same as last week</span>
                            @endif
                        </div>
                    </div>
                </div>

                {{-- New Episodes This Week --}}
                <div class="relative overflow-hidden bg-gradient-to-br from-emerald-50 to-emerald-100/50 dark:from-emerald-950/40 dark:to-emerald-900/20 rounded-2xl p-4 md:p-6 shadow-sm border border-emerald-200/50 dark:border-emerald-800/50 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300">
                    <div class="relative z-10">
                        <p class="text-xs text-emerald-600 dark:text-emerald-400 font-semibold uppercase tracking-wider mb-2">New This Week</p>
                        <div class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1 stat-counter" data-target="{{ $newEpisodesThisWeek }}">
                            {{ number_format($newEpisodesThisWeek) }}
                        </div>
                        <p class="text-xs text-gray-500 dark:text-neutral-400 font-medium">episodes added</p>
                    </div>
                </div>

                {{-- 4K / 48fps Content --}}
                <div class="relative overflow-hidden bg-gradient-to-br from-rose-50 to-rose-100/50 dark:from-rose-950/40 dark:to-rose-900/20 rounded-2xl p-4 md:p-6 shadow-sm border border-rose-200/50 dark:border-rose-800/50 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300">
                    <div class="relative z-10">
                        <p class="text-xs text-rose-600 dark:text-rose-400 font-semibold uppercase tracking-wider mb-2">High Quality</p>
                        <div class="flex items-baseline gap-2 mb-1">
                            <span class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white stat-counter" data-target="{{ $episodes4k }}">{{ number_format($episodes4k) }}</span>
                            <span class="text-sm text-gray-500 dark:text-neutral-400">4K</span>
                            <span class="text-gray-300 dark:text-neutral-700">/</span>
                            <span class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white stat-counter" data-target="{{ $episodesUHD48 }}">{{ number_format($episodesUHD48) }}</span>
                            <span class="text-sm text-gray-500 dark:text-neutral-400">48fps</span>
                        </div>
                        <p class="text-xs text-gray-500 dark:text-neutral-400 font-medium">4K & 48fps content</p>
                    </div>
                </div>
            </div>
        </section>

        {{-- Views Chart Section --}}
        <section class="mb-10">
            <div class="bg-white dark:bg-neutral-900 rounded-2xl shadow-sm border border-gray-100 dark:border-neutral-800 p-4 md:p-6">
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <h2 class="text-lg font-bold text-gray-900 dark:text-white">Views Over Time</h2>
                        <p class="text-xs text-gray-500 dark:text-neutral-400">Daily views for the past 28 days</p>
                    </div>
                    <div class="hidden sm:flex items-center gap-3 text-xs text-gray-500 dark:text-neutral-400">
                        <span class="flex items-center gap-1">
                            <span class="w-2.5 h-2.5 rounded-full bg-rose-500"></span> Views
                        </span>
                    </div>
                </div>

                {{-- Chart wrapper with skeleton loader --}}
                <div class="relative min-h-[300px] md:min-h-[350px]">
                    {{-- Skeleton Loader --}}
                    <div id="chart-skeleton" class="absolute inset-0 flex flex-col justify-end px-1 pb-6 z-10">
                        <div class="flex items-end justify-between gap-1 md:gap-2 h-full">
                            @for ($i = 0; $i < 28; $i++)
                                @php
                                    $heights = [55, 40, 65, 35, 60, 45, 70, 50, 75, 38, 58, 42, 80, 48, 68, 33, 62, 44, 72, 52, 55, 40, 65, 58, 78, 46, 63, 50];
                                    $h = $heights[$i % count($heights)];
                                @endphp
                                <div class="flex-1 flex flex-col items-center justify-end gap-1">
                                    <div class="w-full rounded-md bg-gray-200 dark:bg-neutral-800 animate-pulse" style="height: {{ $h }}%; min-height: 8px;"></div>
                                </div>
                            @endfor
                        </div>
                        {{-- Shimmer overlay --}}
                        <div class="absolute inset-0 shimmer-overlay rounded-lg"></div>
                    </div>

                    {{-- Actual Chart Canvas --}}
                    <canvas id="monthlyChart" class="w-full h-[300px] md:h-[350px] relative z-0 opacity-0 transition-opacity duration-500"></canvas>

                    {{-- Error State --}}
                    <div id="chart-error" class="absolute inset-0 hidden flex-col items-center justify-center bg-white/90 dark:bg-neutral-900/90 rounded-lg z-20">
                        <div class="w-14 h-14 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center mb-3">
                            <i class="fa-solid fa-triangle-exclamation text-red-500 text-xl"></i>
                        </div>
                        <p class="text-sm text-gray-600 dark:text-neutral-300 font-medium">Unable to load chart data</p>
                        <button onclick="retryChart()" class="mt-3 px-4 py-2 text-xs font-semibold text-white bg-rose-600 hover:bg-rose-700 rounded-lg transition-colors">
                            <i class="fa-solid fa-rotate mr-1"></i> Retry
                        </button>
                    </div>
                </div>

                {{-- Mobile legend --}}
                <div class="flex sm:hidden items-center justify-center gap-3 mt-3 text-xs text-gray-500 dark:text-neutral-400">
                    <span class="flex items-center gap-1">
                        <span class="w-2.5 h-2.5 rounded-full bg-rose-500"></span> Views
                    </span>
                </div>
            </div>
        </section>

        {{-- Bottom Section: Top Tags --}}
        @if($topTags->isNotEmpty())
        <section class="mb-8">
            <div class="bg-white dark:bg-neutral-900 rounded-2xl shadow-sm border border-gray-100 dark:border-neutral-800 p-4 md:p-6">
                <h2 class="text-lg font-bold text-gray-900 dark:text-white mb-4">Most Popular Tags</h2>
                <div class="flex flex-wrap gap-2">
                    @foreach($topTags as $tag)
                        <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-semibold
                            bg-gray-100 dark:bg-neutral-800 text-gray-700 dark:text-neutral-300
                            hover:bg-rose-100 dark:hover:bg-rose-900/40 hover:text-rose-700 dark:hover:text-rose-400
                            transition-colors duration-200 cursor-default">
                            #{{ $tag->name }}
                            <span class="text-[10px] text-gray-400 dark:text-neutral-500">{{ number_format($tag->count) }}</span>
                        </span>
                    @endforeach
                </div>
            </div>
        </section>
        @endif

        {{-- Footer Note --}}
        <div class="text-center text-xs text-gray-400 dark:text-neutral-600">
            Statistics are cached and update periodically. Data shown may not reflect real-time changes.
        </div>
    </div>

    {{-- Animated Counter Script --}}
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const animateCounters = () => {
                document.querySelectorAll('.stat-counter').forEach(counter => {
                    const target = parseInt(counter.dataset.target, 10);
                    if (isNaN(target)) return;

                    const duration = 1500;
                    const start = performance.now();
                    const startVal = 0;

                    const step = (currentTime) => {
                        const elapsed = currentTime - start;
                        const progress = Math.min(elapsed / duration, 1);
                        // Ease out cubic
                        const eased = 1 - Math.pow(1 - progress, 3);
                        const current = Math.round(startVal + (target - startVal) * eased);

                        const formatted = new Intl.NumberFormat().format(current);
                        counter.textContent = formatted;

                        if (progress < 1) {
                            requestAnimationFrame(step);
                        }
                    };

                    requestAnimationFrame(step);
                });
            };

            // Use IntersectionObserver to trigger counters when visible
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        animateCounters();
                        observer.disconnect();
                    }
                });
            }, { threshold: 0.3 });

            const firstCounter = document.querySelector('.stat-counter');
            if (firstCounter) {
                observer.observe(firstCounter);
            } else {
                // Fallback
                animateCounters();
            }
        });
    </script>

    @vite(['resources/js/stats.js'])
</x-app-layout>