@extends('layouts.goberdata')

@section('title', 'Reportes Globales')
@section('page_title', 'Reportes Globales')
@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-gray-100">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <h1 class="text-2xl font-semibold text-white">
                        📊 Reportes Globales
                    </h1>
                </div>
                <div class="flex items-center space-x-4">
                    <span id="userName" class="text-white">Super Admin</span>
                    <button onclick="logout()" class="bg-red-600 text-white px-4 py-2 rounded-lg font-semibold hover:bg-red-700">
                        <i class="fas fa-sign-out-alt"></i> Salir
                    </button>
                </div>
            </header>

            <!-- Main Content -->
            <main class="bg-gray-100 p-2">
                <div class="w-full">
        <!-- Filters Panel -->
        <div class="bg-white rounded-xl shadow-lg mb-6">
            <div class="gd-header text-white p-4 rounded-t-xl flex justify-between items-center">
                <h5 class="text-xl font-bold">
                    <i class="fas fa-filter"></i> Filtros Avanzados
                </h5>
                <div class="flex gap-2">
                    <button type="button" id="clearFiltersBtn" class="bg-white bg-opacity-20 px-4 py-2 rounded-lg font-semibold hover:bg-opacity-30">
                        <i class="fas fa-times"></i> Limpiar Filtros
                    </button>
                    <button type="button" id="exportCsvBtn" class="bg-green-600 px-4 py-2 rounded-lg font-semibold hover:bg-green-700">
                        <i class="fas fa-download"></i> Exportar CSV
                    </button>
                </div>
            </div>
            <div class="p-6">
                <form id="filtersForm">
                    <!-- Fila 1 -->
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
                        <!-- Date Range -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Rango de Fechas</label>
                            <div class="flex gap-2">
                                <input type="date" id="startDate" name="start_date" class="w-full px-3 py-2 border rounded-lg text-sm" onchange="applyFilters()">
                                <input type="date" id="endDate" name="end_date" class="w-full px-3 py-2 border rounded-lg text-sm" onchange="applyFilters()">
                            </div>
                        </div>

                        <!-- Country -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">País</label>
                            <select id="countryFilter" name="country_id" class="w-full px-3 py-2 border rounded-lg text-sm" onchange="loadStatesFilter(); applyFilters();">
                                <option value="">Todos los países</option>
                            </select>
                        </div>

                        <!-- State -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Departamento/Estado</label>
                            <select id="stateFilter" name="state_id" class="w-full px-3 py-2 border rounded-lg text-sm" onchange="loadCitiesFilter(); applyFilters();" disabled>
                                <option value="">Todos los departamentos</option>
                            </select>
                        </div>

                        <!-- City -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Ciudad</label>
                            <select id="cityFilter" name="city_id" class="w-full px-3 py-2 border rounded-lg text-sm" onchange="applyFilters()" disabled>
                                <option value="">Todas las ciudades</option>
                            </select>
                        </div>
                    </div>

                    <!-- Fila 2 -->
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                        <!-- Level -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Nivel Electoral</label>
                            <select id="levelFilter" name="level" class="w-full px-3 py-2 border rounded-lg text-sm" onchange="applyFilters()">
                                <option value="">Todos los niveles</option>
                                <option value="municipal">Municipal (Alcaldía)</option>
                                <option value="regional">Regional (Gobernación)</option>
                                <option value="national">Nacional (Presidencia)</option>
                            </select>
                        </div>

                        <!-- Candidates -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Candidatos</label>
                            <select id="candidatesFilter" name="candidates[]" class="w-full px-3 py-2 border rounded-lg text-sm" multiple onchange="applyFilters()">
                                <option value="">Todos los candidatos</option>
                            </select>
                        </div>

                        <!-- Categories -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Categorías</label>
                            <select id="categoriesFilter" name="categories[]" class="w-full px-3 py-2 border rounded-lg text-sm" multiple onchange="applyFilters()">
                                <option value="">Todas</option>
                                <option value="education">Educación</option>
                                <option value="transport">Transporte</option>
                                <option value="infrastructure">Infraestructura</option>
                                <option value="health">Salud</option>
                                <option value="security">Seguridad</option>
                                <option value="economy">Economía</option>
                            </select>
                        </div>

                        <!-- Emotions -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Emociones</label>
                            <select id="emotionsFilter" name="emotions[]" class="w-full px-3 py-2 border rounded-lg text-sm" multiple onchange="applyFilters()">
                                <option value="">Todas</option>
                                <option value="positive">Positiva</option>
                                <option value="negative">Negativa</option>
                                <option value="neutral">Neutral</option>
                            </select>
                        </div>
                    </div>

                    <!-- Fila 3 -->
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mt-4">
                        <!-- Source -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Fuente de Datos</label>
                            <select id="sourceFilter" name="source" class="w-full px-3 py-2 border rounded-lg text-sm" onchange="applyFilters()">
                                <option value="">Todas las fuentes</option>
                                <option value="polls">Encuestas</option>
                                <option value="social">Redes Sociales</option>
                            </select>
                        </div>

                        <!-- Aggregation -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Agregación</label>
                            <select id="aggregationFilter" name="aggregation" class="w-full px-3 py-2 border rounded-lg text-sm" onchange="applyFilters()">
                                <option value="total">Total</option>
                                <option value="average">Promedio</option>
                                <option value="trend">Tendencia</option>
                            </select>
                        </div>

                        <!-- Rows per page -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">Filas por página</label>
                            <select id="rowsPerPage" class="w-full px-3 py-2 border rounded-lg text-sm" onchange="currentPage = 1; renderTable();">
                                <option value="10">10</option>
                                <option value="25" selected>25</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>
                        </div>

                        <div class="flex items-end">
                            <div class="text-sm text-gray-600">
                                <i class="fas fa-info-circle text-blue-500"></i> Los filtros se aplican automáticamente
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Stats Cards -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
            <div class="bg-gradient-to-br from-blue-500 to-blue-700 text-white rounded-lg p-6">
                <div class="flex justify-between items-center">
                    <div>
                        <h4 class="text-3xl font-bold" id="totalCampaigns">0</h4>
                        <p class="text-sm opacity-90">Campañas</p>
                    </div>
                    <i class="fas fa-flag text-4xl opacity-50"></i>
                </div>
            </div>
            <div class="bg-gradient-to-br from-green-500 to-green-700 text-white rounded-lg p-6">
                <div class="flex justify-between items-center">
                    <div>
                        <h4 class="text-3xl font-bold" id="totalCandidates">0</h4>
                        <p class="text-sm opacity-90">Candidatos</p>
                    </div>
                    <i class="fas fa-user-tie text-4xl opacity-50"></i>
                </div>
            </div>
            <div class="bg-gradient-to-br from-purple-500 to-purple-700 text-white rounded-lg p-6">
                <div class="flex justify-between items-center">
                    <div>
                        <h4 class="text-3xl font-bold" id="totalPolls">0</h4>
                        <p class="text-sm opacity-90">Encuestas</p>
                    </div>
                    <i class="fas fa-poll text-4xl opacity-50"></i>
                </div>
            </div>
            <div class="bg-gradient-to-br from-orange-500 to-orange-700 text-white rounded-lg p-6">
                <div class="flex justify-between items-center">
                    <div>
                        <h4 class="text-3xl font-bold" id="totalResults">0</h4>
                        <p class="text-sm opacity-90">Resultados</p>
                    </div>
                    <i class="fas fa-chart-line text-4xl opacity-50"></i>
                </div>
            </div>
        </div>

        <!-- Tabs -->
        <div class="bg-white rounded-xl shadow-lg">
            <div class="flex border-b overflow-x-auto">
                <button onclick="switchTab('popularity')" id="tabPopularity" class="tab-btn px-6 py-4 font-semibold text-blue-600 border-b-2 border-blue-600 whitespace-nowrap">
                    <i class="fas fa-poll"></i> Popularidad
                </button>
                <button onclick="switchTab('sentiment')" id="tabSentiment" class="tab-btn px-6 py-4 font-semibold text-gray-500 hover:text-blue-600 whitespace-nowrap">
                    <i class="fas fa-heart"></i> Sentimiento
                </button>
                <button onclick="switchTab('engagement')" id="tabEngagement" class="tab-btn px-6 py-4 font-semibold text-gray-500 hover:text-blue-600 whitespace-nowrap">
                    <i class="fas fa-users"></i> Engagement
                </button>
                <button onclick="switchTab('comparison')" id="tabComparison" class="tab-btn px-6 py-4 font-semibold text-gray-500 hover:text-blue-600 whitespace-nowrap">
                    <i class="fas fa-balance-scale"></i> Comparación
                </button>
            </div>

            <!-- Popularity Tab -->
            <div id="contentPopularity" class="p-6">
                <div class="bg-gray-50 rounded-lg p-4 mb-4" style="height: 350px;">
                    <canvas id="popularityChart"></canvas>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm border-collapse">
                        <thead>
                            <tr class="bg-gray-100 border-b-2 border-gray-300">
                                <th class="px-4 py-3 text-left font-semibold cursor-pointer hover:bg-gray-200 transition" onclick="sortBy('popularity', 'name')">
                                    Candidato <i class="fas fa-sort text-xs ml-1 text-gray-400"></i>
                                </th>
                                <th class="px-4 py-3 text-left font-semibold cursor-pointer hover:bg-gray-200 transition" onclick="sortBy('popularity', 'campaign_name')">
                                    Campaña <i class="fas fa-sort text-xs ml-1 text-gray-400"></i>
                                </th>
                                <th class="px-4 py-3 text-left font-semibold">Ciudad</th>
                                <th class="px-4 py-3 text-right font-semibold cursor-pointer hover:bg-gray-200 transition" onclick="sortBy('popularity', 'popularity')">
                                    Popularidad (%) <i class="fas fa-sort text-xs ml-1 text-gray-400"></i>
                                </th>
                                <th class="px-4 py-3 text-center font-semibold">Tendencia</th>
                                <th class="px-4 py-3 text-center font-semibold">Última Actualización</th>
                            </tr>
                        </thead>
                        <tbody id="popularityTable">
                            <tr><td colspan="6" class="px-4 py-8 text-center text-gray-500">Cargando datos...</td></tr>
                        </tbody>
                    </table>
                    <div id="popularityPagination" class="flex justify-between items-center mt-4 text-sm text-gray-600 border-t pt-4"></div>
                </div>
            </div>

            <!-- Sentiment Tab -->
            <div id="contentSentiment" class="p-6 hidden">
                <div class="bg-gray-50 rounded-lg p-4 mb-4" style="height: 450px;">
                    <canvas id="sentimentChart"></canvas>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm border-collapse">
                        <thead>
                            <tr class="bg-gray-100 border-b-2 border-gray-300">
                                <th class="px-4 py-3 text-left font-semibold cursor-pointer hover:bg-gray-200" onclick="sortBy('sentiment', 'name')">
                                    Candidato <i class="fas fa-sort text-xs ml-1 text-gray-400"></i>
                                </th>
                                <th class="px-4 py-3 text-left font-semibold">Campaña</th>
                                <th class="px-4 py-3 text-right font-semibold cursor-pointer hover:bg-gray-200" onclick="sortBy('sentiment', 'positive')">
                                    Positivo (%) <i class="fas fa-sort text-xs ml-1 text-gray-400"></i>
                                </th>
                                <th class="px-4 py-3 text-right font-semibold cursor-pointer hover:bg-gray-200" onclick="sortBy('sentiment', 'negative')">
                                    Negativo (%) <i class="fas fa-sort text-xs ml-1 text-gray-400"></i>
                                </th>
                                <th class="px-4 py-3 text-right font-semibold">Neutral (%)</th>
                                <th class="px-4 py-3 text-center font-semibold cursor-pointer hover:bg-gray-200" onclick="sortBy('sentiment', 'net_score')">
                                    Score Neto <i class="fas fa-sort text-xs ml-1 text-gray-400"></i>
                                </th>
                            </tr>
                        </thead>
                        <tbody id="sentimentTable">
                            <tr><td colspan="6" class="px-4 py-8 text-center text-gray-500">Cargando datos...</td></tr>
                        </tbody>
                    </table>
                    <div id="sentimentPagination" class="flex justify-between items-center mt-4 text-sm text-gray-600 border-t pt-4"></div>
                </div>
            </div>

            <!-- Engagement Tab -->
            <div id="contentEngagement" class="p-6 hidden">
                <div class="bg-gray-50 rounded-lg p-4 mb-4" style="height: 350px;">
                    <canvas id="engagementChart"></canvas>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm border-collapse">
                        <thead>
                            <tr class="bg-gray-100 border-b-2 border-gray-300">
                                <th class="px-4 py-3 text-left font-semibold cursor-pointer hover:bg-gray-200" onclick="sortBy('engagement', 'name')">
                                    Candidato <i class="fas fa-sort text-xs ml-1 text-gray-400"></i>
                                </th>
                                <th class="px-4 py-3 text-left font-semibold">Campaña</th>
                                <th class="px-4 py-3 text-right font-semibold cursor-pointer hover:bg-gray-200" onclick="sortBy('engagement', 'total_followers')">
                                    Seguidores <i class="fas fa-sort text-xs ml-1 text-gray-400"></i>
                                </th>
                                <th class="px-4 py-3 text-right font-semibold cursor-pointer hover:bg-gray-200" onclick="sortBy('engagement', 'engagement_rate')">
                                    Engagement Rate <i class="fas fa-sort text-xs ml-1 text-gray-400"></i>
                                </th>
                                <th class="px-4 py-3 text-right font-semibold">Posts/Mes</th>
                    <th class="px-4 py-3 text-center font-semibold cursor-pointer hover:bg-gray-200" onclick="sortBy('engagement', 'growth')">
                                    Crecimiento <i class="fas fa-sort text-xs ml-1 text-gray-400"></i>
                                </th>
                            </tr>
                        </thead>
                        <tbody id="engagementTable">
                <tr><td colspan="6" class="px-4 py-8 text-center text-gray-500">Cargando datos...</td></tr>
                        </tbody>
                    </table>
                    <div id="engagementPagination" class="flex justify-between items-center mt-4 text-sm text-gray-600 border-t pt-4"></div>
                </div>
            </div>

            <!-- Comparison Tab -->
            <div id="contentComparison" class="p-6 hidden">
                <div class="bg-gray-50 rounded-lg p-4 mb-4" style="height: 350px;">
                    <canvas id="comparisonChart"></canvas>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-sm border-collapse">
                        <thead>
                            <tr class="bg-gray-100 border-b-2 border-gray-300">
                                <th class="px-4 py-3 text-left font-semibold cursor-pointer hover:bg-gray-200" onclick="sortBy('comparison', 'name')">
                                    Candidato <i class="fas fa-sort text-xs ml-1 text-gray-400"></i>
                                </th>
                                <th class="px-4 py-3 text-left font-semibold">Campaña</th>
                                <th class="px-4 py-3 text-right font-semibold cursor-pointer hover:bg-gray-200" onclick="sortBy('comparison', 'popularity')">
                                    Popularidad <i class="fas fa-sort text-xs ml-1 text-gray-400"></i>
                                </th>
                                <th class="px-4 py-3 text-right font-semibold cursor-pointer hover:bg-gray-200" onclick="sortBy('comparison', 'sentiment_score')">
                                    Sentimiento <i class="fas fa-sort text-xs ml-1 text-gray-400"></i>
                                </th>
                                <th class="px-4 py-3 text-right font-semibold">Engagement</th>
                                <th class="px-4 py-3 text-right font-semibold cursor-pointer hover:bg-gray-200" onclick="sortBy('comparison', 'total_score')">
                                    Score Total <i class="fas fa-sort text-xs ml-1 text-gray-400"></i>
                                </th>
                            </tr>
                        </thead>
                        <tbody id="comparisonTable">
                            <tr><td colspan="6" class="px-4 py-8 text-center text-gray-500">Cargando datos...</td></tr>
                        </tbody>
                    </table>
                    <div id="comparisonPagination" class="flex justify-between items-center mt-4 text-sm text-gray-600 border-t pt-4"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Toast Container -->
    <div id="toastContainer" class="fixed top-5 right-5 z-[100] space-y-3"></div>

    
                </div>
            </main>
        </div>
@endsection

@push('scripts')
<script>
        // Global variables
        let charts = {};
        let currentTab = 'popularity';
        let currentPage = 1;
        let sortField = null;
        let sortDir = 'asc';
        let allData = { popularity: [], sentiment: [], engagement: [], comparison: [] };
        const token = localStorage.getItem('auth_token');

        // Check auth
        if (!token) {
            window.location.href = '/login';
        }

        const user = JSON.parse(localStorage.getItem('user') || '{}');
        document.getElementById('userName').textContent = user.name || 'Admin';

        function logout() {
            localStorage.removeItem('auth_token');
            localStorage.removeItem('user');
            window.location.href = '/login';
        }

        // Initialize
        document.addEventListener('DOMContentLoaded', function() {
            initFilters();
            loadFilterOptions();
            loadAllData();
        });

        function initFilters() {
            const endDate = new Date();
            const startDate = new Date();
            startDate.setDate(startDate.getDate() - 30);

            document.getElementById('startDate').value = startDate.toISOString().split('T')[0];
            document.getElementById('endDate').value = endDate.toISOString().split('T')[0];
        }

        // Clear filters
        document.getElementById('clearFiltersBtn').onclick = function() {
            document.getElementById('filtersForm').reset();
            initFilters();

            document.getElementById('stateFilter').innerHTML = '<option value="">Todos los departamentos</option>';
            document.getElementById('stateFilter').disabled = true;
            document.getElementById('cityFilter').innerHTML = '<option value="">Todas las ciudades</option>';
            document.getElementById('cityFilter').disabled = true;

            currentPage = 1;
            applyFilters();
            showToast('Filtros limpiados', 'info');
        };

        // Export CSV
        document.getElementById('exportCsvBtn').onclick = function() {
            const endpoint = currentTab === 'popularity' ? 'popularity' :
                            currentTab === 'sentiment' ? 'sentiment' :
                            currentTab === 'engagement' ? 'engagement' : 'compare';

            const params = getFilterParams();
            const url = `/api/superadmin/reports/${endpoint}/export?${params}`;

            fetch(url, {
                headers: { 'Authorization': 'Bearer ' + token }
            })
            .then(response => response.blob())
            .then(blob => {
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = `reporte_${endpoint}_${new Date().toISOString().split('T')[0]}.csv`;
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(url);
                document.body.removeChild(a);
                showToast('CSV descargado', 'success');
            })
            .catch(e => {
                console.error('Error CSV:', e);
                showToast('Error al exportar CSV', 'error');
            });
        };

        function loadFilterOptions() {
            // Load countries
            fetch('/api/superadmin/reports/countries', {
                headers: { 'Authorization': 'Bearer ' + token, 'Accept': 'application/json' }
            })
            .then(r => r.json())
            .then(data => {
                const sel = document.getElementById('countryFilter');
                (data.countries || []).forEach(c => {
                    const opt = document.createElement('option');
                    opt.value = c.id;
                    opt.textContent = c.name;
                    sel.appendChild(opt);
                });
            })
            .catch(e => console.error('Error loading countries:', e));

            // Load candidates
            fetch('/api/superadmin/reports/candidates', {
                headers: { 'Authorization': 'Bearer ' + token, 'Accept': 'application/json' }
            })
            .then(r => r.json())
            .then(data => {
                const sel = document.getElementById('candidatesFilter');
                (data.candidates || []).forEach(c => {
                    const opt = document.createElement('option');
                    opt.value = c.id;
                    opt.textContent = c.name + ' (' + c.campaign_name + ')';
                    sel.appendChild(opt);
                });
            })
            .catch(e => console.error('Error loading candidates:', e));
        }

        function loadStatesFilter() {
            const countryId = document.getElementById('countryFilter').value;
            const stateSel = document.getElementById('stateFilter');
            const citySel = document.getElementById('cityFilter');

            stateSel.innerHTML = '<option value="">Todos los departamentos</option>';
            stateSel.disabled = !countryId;
            citySel.innerHTML = '<option value="">Todas las ciudades</option>';
            citySel.disabled = true;

            if (!countryId) return;

            fetch(`/api/superadmin/reports/countries/${countryId}/states`, {
                headers: { 'Authorization': 'Bearer ' + token, 'Accept': 'application/json' }
            })
            .then(r => r.json())
            .then(data => {
                (data.states || []).forEach(s => {
                    const opt = document.createElement('option');
                    opt.value = s.id;
                    opt.textContent = s.name;
                    stateSel.appendChild(opt);
                });
                stateSel.disabled = false;
            })
            .catch(e => console.error('Error loading states:', e));
        }

        function loadCitiesFilter() {
            const stateId = document.getElementById('stateFilter').value;
            const citySel = document.getElementById('cityFilter');

            citySel.innerHTML = '<option value="">Todas las ciudades</option>';
            citySel.disabled = !stateId;

            if (!stateId) return;

            fetch(`/api/geography/states/${stateId}/cities`, {
                headers: { 'Accept': 'application/json' }
            })
            .then(r => r.json())
            .then(data => {
                (data.cities || []).forEach(c => {
                    const opt = document.createElement('option');
                    opt.value = c.id;
                    opt.textContent = c.name;
                    citySel.appendChild(opt);
                });
                citySel.disabled = false;
            })
            .catch(e => console.error('Error loading cities:', e));
        }

        function getFilterParams() {
            const params = {};

            const country = document.getElementById('countryFilter').value;
            const state = document.getElementById('stateFilter').value;
            const city = document.getElementById('cityFilter').value;
            const level = document.getElementById('levelFilter').value;
            const startDate = document.getElementById('startDate').value;
            const endDate = document.getElementById('endDate').value;
            const source = document.getElementById('sourceFilter').value;
            const aggregation = document.getElementById('aggregationFilter').value;

            if (country) params.country_id = country;
            if (state) params.state_id = state;
            if (city) params.city_id = city;
            if (level) params.level = level;
            if (startDate) params.start_date = startDate;
            if (endDate) params.end_date = endDate;
            if (source) params.source = source;
            if (aggregation) params.aggregation = aggregation;

            // Candidates multi-select
            const candidatesSelect = document.getElementById('candidatesFilter');
            const selectedCandidates = Array.from(candidatesSelect.selectedOptions).map(opt => opt.value).filter(v => v);
            if (selectedCandidates.length > 0) {
                selectedCandidates.forEach((id, index) => {
                    params[`candidates[${index}]`] = id;
                });
            }

            return new URLSearchParams(params).toString();
        }

        function applyFilters() {
            currentPage = 1;
            loadAllData();
        }

        function loadAllData() {
            const params = getFilterParams();

            console.log('Loading data with params:', params);

            // Overview stats
            fetch(`/api/superadmin/reports/overview?${params}`, {
                headers: { 'Authorization': 'Bearer ' + token, 'Accept': 'application/json' }
            })
            .then(r => r.json())
            .then(data => {
                console.log('Overview data:', data);
                document.getElementById('totalCampaigns').textContent = data.total_campaigns || 0;
                document.getElementById('totalCandidates').textContent = data.total_candidates || 0;
                document.getElementById('totalPolls').textContent = data.total_polls || 0;
                document.getElementById('totalResults').textContent = data.total_posts || 0;
            })
            .catch(e => {
                console.error('Error overview:', e);
                showToast('Error al cargar estadísticas', 'error');
            });

            // Load current tab data
            loadTabData();
        }

        function loadTabData() {
            const params = getFilterParams();
            const endpoints = {
                popularity: '/api/superadmin/reports/popularity',
                sentiment: '/api/superadmin/reports/sentiment',
                engagement: '/api/superadmin/reports/engagement',
                comparison: '/api/superadmin/reports/compare'
            };

            const url = `${endpoints[currentTab]}?${params}`;

            console.log(`Loading ${currentTab} from:`, url);

            fetch(url, {
                headers: { 'Authorization': 'Bearer ' + token, 'Accept': 'application/json' }
            })
            .then(r => {
                console.log(`${currentTab} response status:`, r.status);
                return r.json();
            })
            .then(data => {
                console.log(`${currentTab} data:`, data);

                allData[currentTab] = data.table_data || [];

                if (allData[currentTab].length === 0) {
                    console.warn(`No data for ${currentTab}`);
                }

                createChart(currentTab, data.chart_data || {});
                renderTable();
            })
            .catch(e => {
                console.error(`Error ${currentTab}:`, e);
                showToast(`Error al cargar datos de ${currentTab}`, 'error');

                // Show empty state
                const tbody = document.getElementById(currentTab + 'Table');
                tbody.innerHTML = '<tr><td colspan="6" class="px-4 py-8 text-center text-red-500">Error al cargar datos. Revisa la consola (F12).</td></tr>';
            });
        }

        function switchTab(tab) {
            currentTab = tab;
            currentPage = 1;

            // Update tab buttons
            document.querySelectorAll('.tab-btn').forEach(btn => {
                btn.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600');
                btn.classList.add('text-gray-500');
            });

            // Hide all tab contents
            document.querySelectorAll('[id^="content"]').forEach(content => {
                content.classList.add('hidden');
            });

            // Show selected tab
            const btn = document.getElementById('tab' + tab.charAt(0).toUpperCase() + tab.slice(1));
            btn.classList.remove('text-gray-500');
            btn.classList.add('text-blue-600', 'border-b-2', 'border-blue-600');

            const content = document.getElementById('content' + tab.charAt(0).toUpperCase() + tab.slice(1));
            content.classList.remove('hidden');

            // Load data for this tab (con pequeño delay para asegurar que el DOM esté listo)
            setTimeout(() => loadTabData(), 100);
        }

        function createChart(type, data) {
            const canvasId = type + 'Chart';
            const canvas = document.getElementById(canvasId);

            if (!canvas) {
                console.error('Canvas not found:', canvasId);
                return;
            }

            // Verificar que el canvas esté visible
            if (canvas.offsetParent === null) {
                console.warn(`Canvas ${canvasId} is hidden, retrying...`);
                setTimeout(() => createChart(type, data), 200);
                return;
            }

            // Destroy existing chart
            if (charts[type]) {
                try {
                    charts[type].destroy();
                    charts[type] = null;
                } catch (e) {
                    console.warn(`Error destroying ${type} chart:`, e);
                }
            }

            // Validate data
            if (!data || !data.labels || !data.datasets) {
                console.warn(`${type} chart: Invalid data structure`, data);
                data = {
                    labels: ['Sin datos'],
                    datasets: [{
                        label: 'Sin datos',
                        data: [0],
                        backgroundColor: 'rgba(200, 200, 200, 0.6)'
                    }]
                };
            }

            const ctx = canvas.getContext('2d');

            const chartConfigs = {
                popularity: {
                    type: 'bar',
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            title: { display: true, text: 'Popularidad por Candidato', font: { size: 16 } },
                            legend: { display: false }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                max: 100,
                                ticks: { callback: function(value) { return value + '%'; } }
                            }
                        }
                    }
                },
                sentiment: {
                    type: 'doughnut',
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            title: { display: true, text: 'Distribución de Sentimientos', font: { size: 18 } },
                            legend: { position: 'bottom', labels: { font: { size: 14 }, padding: 20 } }
                        }
                    }
                },
                engagement: {
                    type: 'bar',
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            title: { display: true, text: 'Seguidores por Candidato', font: { size: 16 } },
                            legend: { display: true, position: 'top' }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: { callback: function(value) { return value + 'K'; } }
                            }
                        }
                    }
                },
                comparison: {
                    type: 'bar',
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            title: { display: true, text: 'Comparación de Candidatos', font: { size: 16 } },
                            legend: { display: true, position: 'top' }
                        },
                        scales: { y: { beginAtZero: true } }
                    }
                }
            };

            const config = chartConfigs[type];

            try {
                charts[type] = new Chart(ctx, {
                    type: config.type,
                    data: data,
                    options: config.options
                });

                console.log(`✅ Chart ${type} created successfully with ${data.labels?.length || 0} items`);

                // Forzar actualización visual
                if (charts[type]) {
                    charts[type].update();
                }
            } catch (error) {
                console.error(`❌ Error creating ${type} chart:`, error);
                console.error('Chart data was:', data);
            }
        }

        function renderTable() {
            const data = allData[currentTab] || [];
            const rowsPerPage = parseInt(document.getElementById('rowsPerPage').value);
            const start = (currentPage - 1) * rowsPerPage;
            const pageData = data.slice(start, start + rowsPerPage);

            console.log(`Rendering ${currentTab} table. Total: ${data.length}, Page: ${pageData.length}`);

            const tbody = document.getElementById(currentTab + 'Table');

            if (pageData.length === 0) {
                tbody.innerHTML = '<tr><td colspan="6" class="px-4 py-8 text-center text-gray-500">No hay datos para mostrar con los filtros seleccionados</td></tr>';
                document.getElementById(currentTab + 'Pagination').innerHTML = '';
                return;
            }

            tbody.innerHTML = '';

            pageData.forEach(row => {
                const tr = document.createElement('tr');
                tr.className = 'border-b hover:bg-gray-50';

                if (currentTab === 'popularity') {
                    const mainStar = row.name && row.name.includes('⭐') ? '' : (row.is_main_candidate ? ' ⭐' : '');
                    tr.innerHTML = `
                        <td class="px-4 py-2">${(row.name || 'N/A') + mainStar}</td>
                        <td class="px-4 py-2">${row.campaign_name || ''}</td>
                        <td class="px-4 py-2">${row.city || ''}</td>
                        <td class="px-4 py-2 text-right font-bold text-blue-600">${row.popularity || 0}%</td>
                        <td class="px-4 py-2 text-center">${getTrendBadge(row.trend, row.trend_text)}</td>
                        <td class="px-4 py-2 text-center text-gray-600">${row.last_update || 'N/A'}</td>
                    `;
                } else if (currentTab === 'sentiment') {
                    tr.innerHTML = `
                        <td class="px-4 py-2">${row.name || 'N/A'}</td>
                        <td class="px-4 py-2">${row.campaign_name || ''}</td>
                        <td class="px-4 py-2 text-right text-green-600">${row.positive || 0}%</td>
                        <td class="px-4 py-2 text-right text-red-600">${row.negative || 0}%</td>
                        <td class="px-4 py-2 text-right text-gray-600">${row.neutral || 0}%</td>
                        <td class="px-4 py-2 text-center">${getScoreBadge(row.net_score)}</td>
                    `;
                } else if (currentTab === 'engagement') {
                    tr.innerHTML = `
                        <td class="px-4 py-2">${row.name || 'N/A'}</td>
                        <td class="px-4 py-2">${row.campaign_name || ''}</td>
                        <td class="px-4 py-2 text-right font-semibold">${(row.total_followers || 0).toLocaleString()}</td>
                        <td class="px-4 py-2 text-right text-purple-600">${row.engagement_rate || 0}%</td>
                        <td class="px-4 py-2 text-right">${row.posts_per_month || 0}</td>
                        <td class="px-4 py-2 text-center">${getGrowthBadge(row.growth)}</td>
                    `;
                } else if (currentTab === 'comparison') {
                    tr.innerHTML = `
                        <td class="px-4 py-2">${row.name || 'N/A'}</td>
                        <td class="px-4 py-2">${row.campaign_name || ''}</td>
                        <td class="px-4 py-2 text-right">${row.popularity || 0}%</td>
                        <td class="px-4 py-2 text-right">${row.sentiment_score || 0}</td>
                        <td class="px-4 py-2 text-right">${row.engagement_score || 0}</td>
                        <td class="px-4 py-2 text-right font-bold text-blue-600 text-lg">${row.total_score || 0}</td>
                    `;
                }

                tbody.appendChild(tr);
            });

            renderPagination(data.length, rowsPerPage);
        }

        function getTrendBadge(trend, text) {
            const colors = {
                'up': 'bg-green-100 text-green-800',
                'down': 'bg-red-100 text-red-800',
                'stable': 'bg-gray-100 text-gray-800'
            };
            return `<span class="px-2 py-1 rounded text-xs font-semibold ${colors[trend] || colors.stable}">${text || '→ Estable'}</span>`;
        }

        function getScoreBadge(score) {
            const color = score >= 0 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800';
            return `<span class="px-3 py-1 rounded font-bold ${color}">${score || 0}</span>`;
        }

        function getGrowthBadge(growth) {
            const color = growth >= 0 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800';
            const icon = growth >= 0 ? '↗' : '↘';
            return `<span class="px-2 py-1 rounded text-xs font-semibold ${color}">${icon} ${growth || 0}%</span>`;
        }

        function renderPagination(total, rowsPerPage) {
            const totalPages = Math.ceil(total / rowsPerPage);
            const paginationEl = document.getElementById(currentTab + 'Pagination');

            if (total === 0) {
                paginationEl.innerHTML = '';
                return;
            }

            if (total <= rowsPerPage) {
                paginationEl.innerHTML = `<div class="text-gray-600">Mostrando ${total} de ${total} registros</div>`;
                return;
            }

            const start = (currentPage - 1) * rowsPerPage + 1;
            const end = Math.min(start + rowsPerPage - 1, total);

            let html = `<div class="text-gray-600 font-semibold">Mostrando ${start}-${end} de ${total} registros</div><div class="flex gap-2">`;

            // Prev button
            const prevDisabled = currentPage === 1;
            html += `<button onclick="changePage(${currentPage - 1})" ${prevDisabled ? 'disabled' : ''} class="px-3 py-1 rounded transition ${prevDisabled ? 'bg-gray-200 text-gray-400 cursor-not-allowed' : 'bg-blue-600 text-white hover:bg-blue-700'}">
                <i class="fas fa-chevron-left"></i>
            </button>`;

            // Page numbers (show max 5)
            const startPage = Math.max(1, currentPage - 2);
            const endPage = Math.min(totalPages, startPage + 4);

            for (let i = startPage; i <= endPage; i++) {
                const active = i === currentPage;
                html += `<button onclick="changePage(${i})" class="px-3 py-1 rounded transition ${active ? 'bg-blue-600 text-white font-bold' : 'bg-gray-200 hover:bg-gray-300'}">${i}</button>`;
            }

            // Next button
            const nextDisabled = currentPage === totalPages;
            html += `<button onclick="changePage(${currentPage + 1})" ${nextDisabled ? 'disabled' : ''} class="px-3 py-1 rounded transition ${nextDisabled ? 'bg-gray-200 text-gray-400 cursor-not-allowed' : 'bg-blue-600 text-white hover:bg-blue-700'}">
                <i class="fas fa-chevron-right"></i>
            </button>`;

            html += '</div>';
            paginationEl.innerHTML = html;
        }

        function changePage(page) {
            const rowsPerPage = parseInt(document.getElementById('rowsPerPage').value);
            const totalPages = Math.ceil((allData[currentTab] || []).length / rowsPerPage);

            if (page < 1 || page > totalPages) return;

            currentPage = page;
            renderTable();
        }

        function sortBy(tab, field) {
            if (sortField === field) {
                sortDir = sortDir === 'asc' ? 'desc' : 'asc';
            } else {
                sortField = field;
                sortDir = 'asc';
            }

            console.log(`Sorting ${tab} by ${field} (${sortDir})`);

            allData[tab].sort((a, b) => {
                let aVal = a[field];
                let bVal = b[field];

                // Handle null/undefined
                if (aVal === null || aVal === undefined) aVal = 0;
                if (bVal === null || bVal === undefined) bVal = 0;

                // Convert to numbers if possible
                if (typeof aVal === 'string' && !isNaN(parseFloat(aVal))) {
                    aVal = parseFloat(aVal);
                }
                if (typeof bVal === 'string' && !isNaN(parseFloat(bVal))) {
                    bVal = parseFloat(bVal);
                }

                if (sortDir === 'asc') {
                    return aVal > bVal ? 1 : -1;
                } else {
                    return aVal < bVal ? 1 : -1;
                }
            });

            renderTable();
        }

        function showToast(msg, type = 'info') {
            const container = document.getElementById('toastContainer');
            const colors = { success: 'bg-green-600', error: 'bg-red-600', warning: 'bg-yellow-600', info: 'bg-blue-600' };
            const icons = { success: 'fa-check-circle', error: 'fa-exclamation-circle', warning: 'fa-exclamation-triangle', info: 'fa-info-circle' };

            const toast = document.createElement('div');
            toast.className = `${colors[type]} text-white px-6 py-4 rounded-lg shadow-lg flex items-center gap-3 transform transition-all duration-300`;
            toast.innerHTML = `<i class="fas ${icons[type]}"></i><span>${msg}</span>`;

            container.appendChild(toast);

            setTimeout(() => {
                toast.classList.add('opacity-0');
                setTimeout(() => toast.remove(), 300);
            }, 3000);
        }
    </script>
@endpush