@extends('admin.layouts.app')
@section('title', 'Vidora X • Ultra Analytics Dashboard')

@section('content')
    <div class="space-y-10 motion-safe:animate-fadeIn font-inter text-slate-900 dark:text-white">

        {{-- 🧭 Floating Command Bar --}}
        <div
            class="flex items-center justify-between rounded-3xl 
        bg-gradient-to-r from-indigo-600 via-purple-600 to-blue-600 text-white 
        p-6 shadow-[0_0_40px_rgba(99,102,241,0.5)] backdrop-blur-2xl border border-white/20">
            <div>
                <h1 class="text-3xl font-bold tracking-tight drop-shadow">Vidora X Analytics</h1>
                <p class="text-sm opacity-90 mt-1">An intelligent insight system powered by motion, realism & minimalism.</p>
            </div>
        </div>

        {{-- ⚡ KPIs --}}
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">

            {{-- 🟢 Total Videos --}}
            <div
                class="group rounded-2xl border border-slate-200 bg-white/90 backdrop-blur-md p-6 shadow-md hover:shadow-xl transition duration-300">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-slate-500">Total Videos</p>
                        <h3 id="total-videos-count" class="mt-2 text-3xl font-bold text-slate-800">0</h3>
                        <p id="total-videos-change" class="text-xs mt-1 font-medium flex items-center gap-1">
                            <svg id="total-videos-icon" xmlns="http://www.w3.org/2000/svg"
                                class="w-3.5 h-3.5 transition-transform duration-300" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path id="total-videos-path" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M5 15l7-7 7 7" />
                            </svg>
                            <span id="total-videos-text">+0%</span>
                        </p>
                    </div>
                    <div class="p-3 rounded-xl bg-emerald-100 text-emerald-600">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M15 10l4.553-4.553A9 9 0 1111 3v7z" />
                        </svg>
                    </div>
                </div>
            </div>

            {{-- 🔵 Today Views --}}
            <div
                class="group rounded-2xl border border-slate-200 bg-white/90 backdrop-blur-md p-6 shadow-md hover:shadow-xl transition duration-300">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-slate-500">Today Views</p>
                        <h3 id="today-views-count" class="text-4xl font-extrabold mt-1 transition-all duration-300">0</h3>
                        <p class="text-sm opacity-70">views</p>

                        <p id="today-views-change" class="text-xs mt-1 font-medium flex items-center gap-1">
                            <svg id="today-change-icon" xmlns="http://www.w3.org/2000/svg"
                                class="w-3.5 h-3.5 transition-transform duration-300" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path id="today-change-path" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M5 15l7-7 7 7" />
                            </svg>
                            <span id="today-change-text">+0%</span>
                        </p>
                    </div>
                    <div class="p-3 rounded-xl bg-blue-100 text-blue-600">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                        </svg>
                    </div>
                </div>
            </div>

            {{-- 🟠 Total Views --}}
            <div
                class="group rounded-2xl border border-slate-200 bg-white/90 backdrop-blur-md p-6 shadow-md hover:shadow-xl transition duration-300">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-slate-500">Total Views</p>
                        <h3 id="total-views-count" class="text-4xl font-extrabold mt-1 transition-all duration-300">0</h3>
                        <p class="text-sm opacity-70">views</p>

                        <p id="total-views-change" class="text-xs mt-1 font-medium flex items-center gap-1">
                            <svg id="total-views-icon" xmlns="http://www.w3.org/2000/svg"
                                class="w-3.5 h-3.5 transition-transform duration-300" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path id="total-views-path" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M5 15l7-7 7 7" />
                            </svg>
                            <span id="total-views-text">+0%</span>
                        </p>
                    </div>
                    <div class="p-3 rounded-xl bg-blue-100 text-blue-600">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                        </svg>
                    </div>
                </div>
            </div>

            {{-- 💾 Storage Used --}}
            <div
                class="group rounded-2xl border border-slate-200 bg-white/90 backdrop-blur-md p-6 shadow-md hover:shadow-xl transition duration-300">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm font-medium text-slate-500">Total Documents Upload </p>
                        <h3 class="mt-2 text-3xl font-bold text-slate-800">12</h3>
                        <div class="mt-3 h-2 w-full bg-slate-200 rounded-full overflow-hidden">
                            <div class="h-2 bg-slate-800 w-2/3 transition-all duration-500"></div>
                        </div>
                        <p class="text-[11px] text-slate-500 mt-2">66% of 100%</p>
                    </div>

                    <!-- 📄 Document Icon -->
                    <div class="p-3 rounded-xl bg-indigo-100 text-indigo-600">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24"
                            stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M7 21h10a2 2 0 002-2V9.414a2 2 0 00-.586-1.414l-4.414-4.414A2 2 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M9 13h6m-6 4h6M9 9h2" />
                        </svg>
                    </div>
                </div>
            </div>

        </div>

        {{-- 📊 Most Watched Categories --}}
        <div
            class="rounded-3xl bg-white/90 dark:bg-slate-900/90 shadow-2xl p-6 backdrop-blur-xl border border-slate-200/50">
            <div class="flex justify-between items-center mb-4">
                <h4 class="text-lg font-semibold">📊 Most Watched Categories</h4>
                <p class="text-sm text-slate-500 dark:text-slate-400">Top-performing content areas</p>
            </div>
            <div id="category-chart" class="h-[360px]"></div>
        </div>

        {{-- 📈 Engagement Overview --}}
        <div
            class="rounded-3xl bg-white/90 dark:bg-slate-900/90 shadow-2xl p-6 backdrop-blur-xl border border-slate-200/50">
            <div class="flex justify-between items-center mb-4">
                <h4 class="text-lg font-semibold">📈 Engagement Overview (2025)</h4>
                <p class="text-sm text-slate-500 dark:text-slate-400">Views • Watch Hours • Retention</p>
            </div>
            <div id="main-chart" class="h-[420px]"></div>
        </div>

        {{-- 🌍 Region + Devices --}}
        <div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
            <div
                class="rounded-3xl bg-white/90 dark:bg-slate-900/90 shadow-2xl p-6 backdrop-blur-xl border border-slate-200/50">
                <h4 class="text-lg font-semibold mb-4">📱 Device Usage</h4>
                <div id="device-chart" class="h-[340px]"></div>
            </div>
            <div
                class="rounded-3xl bg-white/90 dark:bg-slate-900/90 shadow-2xl p-6 backdrop-blur-xl border border-slate-200/50">
                <h4 class="text-lg font-semibold mb-4">🇮🇳 Viewers by Region (India)</h4>
                <div id="region-chart" class="h-[340px]"></div>
            </div>
        </div>

        {{-- 👥 Live User Access Table --}}
        <div
            class="rounded-3xl bg-gradient-to-br from-white/80 to-slate-50 dark:from-slate-800 dark:to-slate-900 
        shadow-[0_0_40px_rgba(99,102,241,0.2)] p-6 backdrop-blur-2xl border border-slate-200/50 mt-10">
            <div class="flex justify-between items-center mb-6">
                <h4 class="text-lg font-semibold flex items-center gap-2">
                    <i class="ri-map-pin-user-line text-indigo-500"></i> Live User Access (QR Captured)
                </h4>
                <span class="text-sm text-slate-500 dark:text-slate-400">Auto-captured via QR code scans</span>
            </div>

            <div class="overflow-x-auto rounded-2xl border border-slate-200/50 shadow-inner">
                <table class="min-w-full text-sm text-left rounded-2xl overflow-hidden">
                    <thead class="bg-gradient-to-r from-indigo-600 to-blue-500 text-white">
                        <tr>
                            <th class="px-4 py-3 font-semibold">#</th>
                            <th class="px-4 py-3 font-semibold">Device</th>
                            <th class="px-4 py-3 font-semibold">Browser</th>
                            <th class="px-4 py-3 font-semibold">OS</th>
                            <th class="px-4 py-3 font-semibold">Location</th>
                            <th class="px-4 py-3 font-semibold">IP</th>
                            <th class="px-4 py-3 font-semibold">Time</th>
                        </tr>
                    </thead>
                    <tbody id="user-table"
                        class="divide-y divide-slate-200 dark:divide-slate-700 bg-white/80 dark:bg-slate-800/80">
                        {{-- Populated by JS --}}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const premiumFont = "Inter, sans-serif";

            // ===== 📊 Most Watched Categories =====
            const categoryNames = @json($categoryNames);
            const categoryViews = @json($categoryViews);

            new ApexCharts(document.querySelector("#category-chart"), {
                chart: {
                    type: "bar",
                    height: 350,
                    toolbar: {
                        show: false
                    },
                    fontFamily: premiumFont
                },
                plotOptions: {
                    bar: {
                        borderRadius: 6,
                        horizontal: true,
                        distributed: true
                    }
                },
                series: [{
                    name: "Views",
                    data: categoryViews
                }],
                xaxis: {
                    categories: categoryNames
                },
                colors: ["#6366F1", "#10B981", "#F59E0B", "#F43F5E", "#3B82F6"],
            }).render();

            // ===== 📈 Engagement Overview =====
            const months = @json($months);
            const viewsPerMonth = @json($viewsPerMonth);
            const watchHoursPerMonth = @json($watchHoursPerMonth);

            new ApexCharts(document.querySelector("#main-chart"), {
                chart: {
                    type: "line",
                    height: 420,
                    toolbar: {
                        show: false
                    },
                    fontFamily: premiumFont
                },
                series: [{
                        name: "Views",
                        type: "area",
                        data: viewsPerMonth
                    },
                    {
                        name: "Watch Hours",
                        type: "line",
                        data: watchHoursPerMonth
                    },
                    {
                        name: "Retention %",
                        type: "line",
                        data: viewsPerMonth.map(v => Math.min(100, (v / Math.max(...viewsPerMonth)) *
                            100))
                    }
                ],
                colors: ["#10B981", "#6366F1", "#F59E0B"],
                stroke: {
                    curve: "smooth",
                    width: [3, 3, 2]
                },
                fill: {
                    type: "gradient",
                    gradient: {
                        opacityFrom: 0.3,
                        opacityTo: 0.8
                    }
                },
                xaxis: {
                    categories: months
                },
            }).render();

            // ===== 📱 Device Usage =====
            const deviceLabels = @json($deviceLabels);
            const deviceData = @json($deviceData);

            new ApexCharts(document.querySelector("#device-chart"), {
                chart: {
                    type: "donut",
                    height: 340,
                    fontFamily: premiumFont
                },
                series: deviceData,
                labels: deviceLabels,
                colors: ["#6366F1", "#10B981", "#F59E0B", "#EF4444"],
            }).render();

            // ===== 🌍 Region Chart =====
            const regionNames = @json($regionNames);
            const regionViews = @json($regionViews);

            new ApexCharts(document.querySelector("#region-chart"), {
                chart: {
                    type: "bar",
                    height: 340,
                    fontFamily: premiumFont
                },
                plotOptions: {
                    bar: {
                        horizontal: true,
                        borderRadius: 6,
                        distributed: true,
                        barHeight: "60%"
                    }
                },
                series: [{
                    name: "Views",
                    data: regionViews
                }],
                xaxis: {
                    categories: regionNames
                },
                colors: ["#6366F1", "#10B981", "#F59E0B", "#3B82F6", "#F43F5E", "#8B5CF6", "#14B8A6"],
            }).render();
        });
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const formatNumber = (num) => {
                if (num >= 1_000_000) return (num / 1_000_000).toFixed(1).replace(/\.0$/, '') + 'M';
                if (num >= 1_000) return (num / 1_000).toFixed(1).replace(/\.0$/, '') + 'K';
                return num;
            };

            function updateArrowBlock(prefix, percent) {
                const text = document.getElementById(`${prefix}-text`);
                const path = document.getElementById(`${prefix}-path`);
                const container = document.getElementById(`${prefix}-change`);
                const value = percent ?? 0;
                const percentText = `${value >= 0 ? '+' : ''}${value}%`;
                text.textContent = percentText;

                if (value > 0) {
                    container.className = "text-xs mt-1 text-emerald-600 font-medium flex items-center gap-1";
                    path.setAttribute("d", "M5 15l7-7 7 7");
                } else if (value < 0) {
                    container.className = "text-xs mt-1 text-red-500 font-medium flex items-center gap-1";
                    path.setAttribute("d", "M19 9l-7 7-7-7");
                } else {
                    container.className = "text-xs mt-1 text-slate-500 font-medium flex items-center gap-1";
                    path.setAttribute("d", "M5 12h14");
                }
            }

            async function fetchTotalVideos() {
                const res = await fetch("https://vej.cjx.mybluehostin.me/video/public/api/dashboard/total-videos");
                const data = await res.json();
                document.getElementById("total-videos-count").textContent = formatNumber(data.total_videos);
                updateArrowBlock("total-videos", data.change_percent);
            }

            async function fetchTotalViews() {
                const res = await fetch("https://vej.cjx.mybluehostin.me/video/public/api/dashboard/total-views");
                const data = await res.json();
                document.getElementById("total-views-count").textContent = formatNumber(data.total_views);
                updateArrowBlock("total-views", data.change_percent);
            }

            async function fetchTodayViews() {
                const res = await fetch("https://vej.cjx.mybluehostin.me/video/public/api/dashboard/today-views");
                const data = await res.json();
                document.getElementById("today-views-count").textContent = formatNumber(data.today_views);
                updateArrowBlock("today-views", data.change_percent);
            }

            fetchTotalVideos();
            fetchTotalViews();
            fetchTodayViews();

            setInterval(fetchTotalVideos, 30000);
            setInterval(fetchTotalViews, 15000);
            setInterval(fetchTodayViews, 15000);
        });
    </script>

    <script>
        async function loadLiveUsers() {
            const tableBody = document.getElementById('user-table');
            tableBody.innerHTML = `<tr><td colspan="7" class="text-center py-3 text-gray-500">Loading...</td></tr>`;
            try {
                const res = await fetch("https://vej.cjx.mybluehostin.me/video/public/api/live-users");
                const result = await res.json();
                if (!result.success || !result.data.length) {
                    tableBody.innerHTML =
                        `<tr><td colspan="7" class="text-center py-3 text-gray-500">No user data available</td></tr>`;
                    return;
                }
                tableBody.innerHTML = "";
                result.data.forEach((row, i) => {
                    const tr = document.createElement('tr');
                    tr.className = "hover:bg-slate-100 dark:hover:bg-slate-700 transition";
                    tr.innerHTML = `
                <td class="py-2 px-3 text-center">${i + 1}</td>
                <td class="py-2 px-3 text-center">${row.device_type || '-'}</td>
                <td class="py-2 px-3 text-center">${row.browser || '-'}</td>
                <td class="py-2 px-3 text-center">${row.os || '-'}</td>
                <td class="py-2 px-3 text-center">${row.region || 'Unknown'}</td>
                <td class="py-2 px-3 text-center">${row.ip || '-'}</td>
                <td class="py-2 px-3 text-center">${row.time || '-'}</td>
            `;
                    tableBody.appendChild(tr);
                });
            } catch (err) {
                console.error("Error loading live users:", err);
                tableBody.innerHTML =
                    `<tr><td colspan="7" class="text-center py-3 text-red-500">Failed to load user data</td></tr>`;
            }
        }
        loadLiveUsers();
        setInterval(loadLiveUsers, 10000);
    </script>
@endpush