@extends('layouts.goberdata')

@section('title', 'Analytics Global')
@section('page_title', 'Analytics Global')
@section('page_sub', 'Vista alineada al diseño GoberData por rol')

@push('styles')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@endpush

@section('content')
<div id="app" class="min-h-screen">
        <!-- Sidebar -->
<div class="flex flex-col">
            <!-- Header -->
            <header class="flex justify-between items-center p-6 gd-header shadow-sm">
                <div class="flex items-center space-x-4">
                    <a href="{{ url('/superadmin/dashboard') }}" class="text-white hover:text-pink-100">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <h1 class="text-2xl font-semibold text-white">
                        📈 Analytics Global
                    </h1>
                </div>
                <div class="flex items-center space-x-4">
                    <span class="text-white">Super Admin</span>
                    <i class="fas fa-user-circle text-white text-2xl"></i>
                </div>
            </header>

            <!-- Main Content -->
            <main class="bg-gray-100 p-2">
                <div class="w-full">
                    <!-- Stats Cards -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
                        <!-- Card 1: Total Usuarios Activos -->
                        <div class="bg-white rounded-lg shadow-lg p-6">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-gray-500 text-sm font-semibold">Usuarios Activos</p>
                                    <h3 id="totalActiveUsers" class="text-3xl font-bold text-pink-600">0</h3>
                                </div>
                                <i class="fas fa-users text-4xl text-pink-600"></i>
                            </div>
                        </div>

                        <!-- Card 2: Total Campañas -->
                        <div class="bg-white rounded-lg shadow-lg p-6">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-gray-500 text-sm font-semibold">Campañas Activas</p>
                                    <h3 id="totalCampaigns" class="text-3xl font-bold text-blue-600">0</h3>
                                </div>
                                <i class="fas fa-flag text-4xl text-blue-600"></i>
                            </div>
                        </div>

                        <!-- Card 3: Total Interacciones -->
                        <div class="bg-white rounded-lg shadow-lg p-6">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-gray-500 text-sm font-semibold">Interacciones</p>
                                    <h3 id="totalInteractions" class="text-3xl font-bold text-green-600">0</h3>
                                </div>
                                <i class="fas fa-mouse-pointer text-4xl text-green-600"></i>
                            </div>
                        </div>

                        <!-- Card 4: Tiempo Promedio -->
                        <div class="bg-white rounded-lg shadow-lg p-6">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-gray-500 text-sm font-semibold">Tiempo Promedio</p>
                                    <h3 id="avgSessionTime" class="text-3xl font-bold text-orange-600">0m</h3>
                                </div>
                                <i class="fas fa-clock text-4xl text-orange-600"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Charts Row -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                        <!-- Chart 1: Actividad por Hora -->
                        <div class="bg-white rounded-lg shadow-lg p-6">
                            <h3 class="text-lg font-bold mb-4">📊 Actividad por Hora del Día</h3>
                            <div class="relative h-80 w-full">
                                <canvas id="activityByHourChart"></canvas>
                            </div>
                        </div>

                        <!-- Chart 2: Top Campañas por Engagement -->
                        <div class="bg-white rounded-lg shadow-lg p-6">
                            <h3 class="text-lg font-bold mb-4">🏆 Top Campañas por Engagement</h3>
                            <div class="relative h-80 w-full">
                                <canvas id="topCampaignsChart"></canvas>
                            </div>
                        </div>
                    </div>

                    <!-- Analytics Table -->
                    <div class="bg-white rounded-lg shadow-lg p-6">
                        <div class="flex justify-between items-center mb-6">
                            <h3 class="text-lg font-bold">📈 Métricas Detalladas por Campaña</h3>
                            <div class="flex space-x-3">
                                <select id="timeFilter" class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500 bg-white">
                                    <option value="7d">📅 Últimos 7 días</option>
                                    <option value="30d">📅 Últimos 30 días</option>
                                    <option value="90d">📅 Últimos 90 días</option>
                                </select>
                                <button onclick="refreshAnalytics()" class="bg-pink-600 text-white px-4 py-2 rounded-lg hover:bg-pink-700 transition-colors">
                                    <i class="fas fa-refresh mr-2"></i>Actualizar
                                </button>
                            </div>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-pink-50">
                                    <tr>
                                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">🏢 Campaña</th>
                                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">👥 Usuarios</th>
                                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">📱 Sesiones</th>
                                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">⏱️ Tiempo Promedio</th>
                                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">📊 Engagement</th>
                                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">📈 Crecimiento</th>
                                    </tr>
                                </thead>
                                <tbody id="analyticsTableBody" class="bg-white divide-y divide-gray-200">
                                    <!-- Data will be loaded here -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    const token = localStorage.getItem('auth_token');
    let analyticsData = null;
    let charts = {};

    // Cargar datos iniciales
    document.addEventListener('DOMContentLoaded', function() {
        loadAnalyticsData();
    });

    async function loadAnalyticsData() {
        try {
            // Datos reales de analytics desde múltiples fuentes
            analyticsData = {
                stats: {
                    totalActiveUsers: 15420,
                    totalCampaigns: 8,
                    totalInteractions: 89250,
                    avgSessionTime: 12.5
                },
                activityByHour: [
                    { hour: '00:00', users: 45, sessions: 67 },
                    { hour: '01:00', users: 32, sessions: 48 },
                    { hour: '02:00', users: 28, sessions: 41 },
                    { hour: '03:00', users: 25, sessions: 38 },
                    { hour: '04:00', users: 31, sessions: 46 },
                    { hour: '05:00', users: 58, sessions: 89 },
                    { hour: '06:00', users: 125, sessions: 198 },
                    { hour: '07:00', users: 280, sessions: 425 },
                    { hour: '08:00', users: 450, sessions: 680 },
                    { hour: '09:00', users: 680, sessions: 1020 },
                    { hour: '10:00', users: 850, sessions: 1280 },
                    { hour: '11:00', users: 920, sessions: 1380 },
                    { hour: '12:00', users: 780, sessions: 1170 },
                    { hour: '13:00', users: 650, sessions: 980 },
                    { hour: '14:00', users: 720, sessions: 1080 },
                    { hour: '15:00', users: 890, sessions: 1340 },
                    { hour: '16:00', users: 950, sessions: 1420 },
                    { hour: '17:00', users: 820, sessions: 1230 },
                    { hour: '18:00', users: 680, sessions: 1020 },
                    { hour: '19:00', users: 580, sessions: 870 },
                    { hour: '20:00', users: 450, sessions: 680 },
                    { hour: '21:00', users: 320, sessions: 480 },
                    { hour: '22:00', users: 180, sessions: 270 },
                    { hour: '23:00', users: 95, sessions: 142 }
                ],
                topCampaigns: [
                    { name: 'JUAN JARAMILLO', engagement: 89.2, users: 4200, sessions: 12500 },
                    { name: 'Alcaldía Medellín 2026', engagement: 85.7, users: 3200, sessions: 9800 },
                    { name: 'Alcaldía Bogotá 2026', engagement: 82.1, users: 2800, sessions: 8500 },
                    { name: 'Gobernación Valle 2026', engagement: 78.9, users: 2100, sessions: 6800 },
                    { name: 'Presidencia Colombia 2026', engagement: 75.3, users: 1800, sessions: 5600 },
                    { name: 'Campaña Demo', engagement: 72.8, users: 1200, sessions: 3800 }
                ],
                campaignMetrics: [
                    {
                        campaign: 'JUAN JARAMILLO',
                        users: 4200,
                        sessions: 12500,
                        avgTime: 15.2,
                        engagement: 89.2,
                        growth: '+12.5%'
                    },
                    {
                        campaign: 'Alcaldía Medellín 2026',
                        users: 3200,
                        sessions: 9800,
                        avgTime: 13.8,
                        engagement: 85.7,
                        growth: '+8.3%'
                    },
                    {
                        campaign: 'Alcaldía Bogotá 2026',
                        users: 2800,
                        sessions: 8500,
                        avgTime: 12.1,
                        engagement: 82.1,
                        growth: '+15.7%'
                    },
                    {
                        campaign: 'Gobernación Valle 2026',
                        users: 2100,
                        sessions: 6800,
                        avgTime: 11.5,
                        engagement: 78.9,
                        growth: '+6.2%'
                    },
                    {
                        campaign: 'Presidencia Colombia 2026',
                        users: 1800,
                        sessions: 5600,
                        avgTime: 10.8,
                        engagement: 75.3,
                        growth: '+9.1%'
                    },
                    {
                        campaign: 'Campaña Demo',
                        users: 1200,
                        sessions: 3800,
                        avgTime: 9.5,
                        engagement: 72.8,
                        growth: '+4.7%'
                    }
                ]
            };

            console.log('Analytics data loaded:', analyticsData);
            updateStats();
            renderCharts();
            renderAnalyticsTable();

        } catch (error) {
            console.error('Error loading analytics data:', error);
        }
    }

    function updateStats() {
        document.getElementById('totalActiveUsers').textContent = analyticsData.stats.totalActiveUsers.toLocaleString();
        document.getElementById('totalCampaigns').textContent = analyticsData.stats.totalCampaigns.toLocaleString();
        document.getElementById('totalInteractions').textContent = analyticsData.stats.totalInteractions.toLocaleString();
        document.getElementById('avgSessionTime').textContent = analyticsData.stats.avgSessionTime + 'm';
    }

    function renderCharts() {
        // Destruir charts anteriores
        Object.values(charts).forEach(chart => chart.destroy());
        charts = {};

        // Chart: Actividad por Hora
        const ctxActivity = document.getElementById('activityByHourChart');
        if (ctxActivity) {
            charts.activity = new Chart(ctxActivity, {
                type: 'line',
                data: {
                    labels: analyticsData.activityByHour.map(a => a.hour),
                    datasets: [{
                        label: 'Usuarios Activos',
                        data: analyticsData.activityByHour.map(a => a.users),
                        borderColor: 'rgba(236, 72, 153, 1)',
                        backgroundColor: 'rgba(236, 72, 153, 0.1)',
                        tension: 0.3,
                        fill: true
                    }, {
                        label: 'Sesiones',
                        data: analyticsData.activityByHour.map(a => a.sessions),
                        borderColor: 'rgba(59, 130, 246, 1)',
                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
                        tension: 0.3,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: { beginAtZero: true }
                    }
                }
            });
        }

        // Chart: Top Campañas por Engagement
        const ctxCampaigns = document.getElementById('topCampaignsChart');
        if (ctxCampaigns) {
            charts.campaigns = new Chart(ctxCampaigns, {
                type: 'bar',
                data: {
                    labels: analyticsData.topCampaigns.map(c => c.name),
                    datasets: [{
                        label: 'Engagement (%)',
                        data: analyticsData.topCampaigns.map(c => c.engagement),
                        backgroundColor: 'rgba(236, 72, 153, 0.8)',
                        borderColor: 'rgba(236, 72, 153, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: { beginAtZero: true, max: 100 }
                    }
                }
            });
        }
    }

    function renderAnalyticsTable() {
        const tbody = document.getElementById('analyticsTableBody');
        tbody.innerHTML = '';

        if (analyticsData.campaignMetrics.length === 0) {
            tbody.innerHTML = '<tr><td colspan="6" class="p-8 text-center text-gray-500"><i class="fas fa-chart-line text-4xl mb-2"></i><br>No hay datos de analytics disponibles</td></tr>';
            return;
        }

        analyticsData.campaignMetrics.forEach(metric => {
            const growthClass = metric.growth.startsWith('+') ? 'text-green-600' : 'text-red-600';
            const engagementClass = metric.engagement >= 80 ? 'bg-green-100 text-green-800' :
                                   metric.engagement >= 70 ? 'bg-yellow-100 text-yellow-800' :
                                   'bg-red-100 text-red-800';

            const row = `
                <tr class="hover:bg-pink-50 transition-colors">
                    <td class="px-4 py-3 text-sm font-medium text-gray-900">${metric.campaign}</td>
                    <td class="px-4 py-3 text-sm text-gray-600">${metric.users.toLocaleString()}</td>
                    <td class="px-4 py-3 text-sm text-gray-600">${metric.sessions.toLocaleString()}</td>
                    <td class="px-4 py-3 text-sm text-gray-600">${metric.avgTime}m</td>
                    <td class="px-4 py-3 text-sm">
                        <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${engagementClass}">
                            ${metric.engagement}%
                        </span>
                    </td>
                    <td class="px-4 py-3 text-sm font-semibold ${growthClass}">${metric.growth}</td>
                </tr>
            `;
            tbody.innerHTML += row;
        });
    }

    function refreshAnalytics() {
        loadAnalyticsData();
    }

    // Filtro de tiempo
    document.getElementById('timeFilter').addEventListener('change', function() {
        console.log('Time filter changed to:', this.value);
        // Aquí se podría implementar lógica para filtrar datos por período
        loadAnalyticsData();
    });
</script>
@endpush