@extends('layouts.goberdata')

@section('title', 'Competidores Globales')
@section('page_title', 'Competidores 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-red-100">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <h1 class="text-2xl font-semibold text-white">
                        🏆 Competidores Globales
                    </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 Candidatos -->
                        <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">Total Candidatos</p>
                                    <h3 id="totalCandidates" class="text-3xl font-bold text-red-600">0</h3>
                                </div>
                                <i class="fas fa-users text-4xl text-red-600"></i>
                            </div>
                        </div>

                        <!-- Card 2: Candidatos con Plan -->
                        <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">Con Plan Activo</p>
                                    <h3 id="candidatesWithPlan" class="text-3xl font-bold text-green-600">0</h3>
                                </div>
                                <i class="fas fa-crown text-4xl text-green-600"></i>
                            </div>
                        </div>

                        <!-- Card 3: Competidores Rivales -->
                        <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">Competidores</p>
                                    <h3 id="totalCompetitors" class="text-3xl font-bold text-blue-600">0</h3>
                                </div>
                                <i class="fas fa-user-shield text-4xl text-blue-600"></i>
                            </div>
                        </div>

                        <!-- Card 4: Popularidad 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">Popularidad Promedio</p>
                                    <h3 id="avgPopularity" class="text-3xl font-bold text-purple-600">0%</h3>
                                </div>
                                <i class="fas fa-chart-line text-4xl text-purple-600"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Filtros -->
                    <div class="bg-white rounded-lg shadow-lg p-6 mb-6">
                        <h3 class="text-lg font-bold mb-4">🔍 Filtros de Búsqueda</h3>
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Departamento</label>
                                <select id="filterDepartment" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500">
                                    <option value="">Todos los departamentos</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Ciudad</label>
                                <select id="filterCity" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500">
                                    <option value="">Todas las ciudades</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Tipo de Elección</label>
                                <select id="filterElectionType" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500">
                                    <option value="">Todas las elecciones</option>
                                    <option value="presidencial">Presidencial</option>
                                    <option value="gobernacion">Gobernación</option>
                                    <option value="alcaldia">Alcaldía</option>
                                    <option value="concejo">Concejo</option>
                                </select>
                            </div>
                            <div class="flex items-end">
                                <button onclick="applyFilters()" class="w-full bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors">
                                    <i class="fas fa-search mr-2"></i>Filtrar
                                </button>
                            </div>
                        </div>
                    </div>

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

                        <!-- Chart 2: Popularidad por Candidato -->
                        <div class="bg-white rounded-lg shadow-lg p-6">
                            <h3 class="text-lg font-bold mb-4">📈 Top 10 Candidatos por Popularidad</h3>
                            <div class="relative h-80 w-full">
                                <canvas id="popularityChart"></canvas>
                            </div>
                        </div>
                    </div>

                    <!-- Tabla de Candidatos -->
                    <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">🏆 Lista de Candidatos y Competidores</h3>
                            <div class="flex space-x-3">
                                <button onclick="exportData()" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors">
                                    <i class="fas fa-download mr-2"></i>Exportar
                                </button>
                                <button onclick="refreshData()" class="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-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-red-50">
                                    <tr>
                                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">👤 Candidato</th>
                                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">🏢 Cargo</th>
                                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">📍 Ubicación</th>
                                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">📊 Popularidad</th>
                                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">💳 Plan</th>
                                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">🏆 Competidores</th>
                                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">📱 Redes Sociales</th>
                                    </tr>
                                </thead>
                                <tbody id="candidatesTableBody" 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 competitorsData = null;
    let charts = {};

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

    async function loadGeographyFilters() {
        try {
            const response = await fetch('/api/test/competitors/geography');
            const result = await response.json();

            if (result.success) {
                const departmentSelect = document.getElementById('filterDepartment');
                result.data.departments.forEach(dept => {
                    departmentSelect.innerHTML += `<option value="${dept.id}">${dept.name}</option>`;
                });

                // Cargar ciudades cuando se seleccione departamento
                document.getElementById('filterDepartment').addEventListener('change', function() {
                    const departmentId = this.value;
                    const citySelect = document.getElementById('filterCity');
                    citySelect.innerHTML = '<option value="">Todas las ciudades</option>';

                    if (departmentId) {
                        const cities = result.data.cities.filter(city => city.state_id == departmentId);
                        cities.forEach(city => {
                            citySelect.innerHTML += `<option value="${city.name}">${city.name}</option>`;
                        });
                    }
                });
            } else {
                console.error('Error loading geography data:', result.message);
            }

        } catch (err) {
            console.error('Error loading geography filters:', err);
        }
    }

    async function loadCompetitorsData() {
        try {
            console.log('Loading competitors data...');
            // Cargar datos reales desde la API
            const response = await fetch('/api/test/competitors');
            console.log('API Response status:', response.status);

            const result = await response.json();
            console.log('API Response data:', result);

            if (result.success) {
                competitorsData = result.data;
                console.log('Competitors data loaded from API:', competitorsData);
                console.log('Stats:', competitorsData.stats);
                console.log('Candidates:', competitorsData.candidates);
                console.log('Top Candidates:', competitorsData.topCandidates);

                updateStats();
                renderCharts();
                renderCandidatesTable();
            } else {
                console.error('Error loading competitors data:', result.message);
                // Fallback a datos básicos si falla la API
                loadFallbackData();
            }

        } catch (error) {
            console.error('Error loading competitors data:', error);
            // Fallback a datos básicos si falla la API
            loadFallbackData();
        }
    }

    function loadFallbackData() {
        // Datos de respaldo básicos
        competitorsData = {
            stats: {
                totalCandidates: 0,
                candidatesWithPlan: 0,
                totalCompetitors: 0,
                avgPopularity: 0
            },
            candidatesByDepartment: [],
            topCandidates: [],
            candidates: []
        };

        updateStats();
        renderCharts();
        renderCandidatesTable();
    }

    function updateStats() {
        document.getElementById('totalCandidates').textContent = competitorsData.stats.totalCandidates.toLocaleString();
        document.getElementById('candidatesWithPlan').textContent = competitorsData.stats.candidatesWithPlan.toLocaleString();
        document.getElementById('totalCompetitors').textContent = competitorsData.stats.totalCompetitors.toLocaleString();
        document.getElementById('avgPopularity').textContent = competitorsData.stats.avgPopularity + '%';
    }

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

            // Chart: Candidatos por Departamento
            const ctxDepartment = document.getElementById('candidatesByDepartmentChart');
            if (ctxDepartment && competitorsData.candidatesByDepartment && competitorsData.candidatesByDepartment.length > 0) {
                charts.department = new Chart(ctxDepartment, {
                    type: 'bar',
                    data: {
                        labels: competitorsData.candidatesByDepartment.map(d => d.department),
                        datasets: [{
                            label: 'Total Candidatos',
                            data: competitorsData.candidatesByDepartment.map(d => d.candidates),
                            backgroundColor: 'rgba(239, 68, 68, 0.8)',
                            borderColor: 'rgba(239, 68, 68, 1)',
                            borderWidth: 1
                        }, {
                            label: 'Con Plan Activo',
                            data: competitorsData.candidatesByDepartment.map(d => d.withPlan),
                            backgroundColor: 'rgba(34, 197, 94, 0.8)',
                            borderColor: 'rgba(34, 197, 94, 1)',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            y: { beginAtZero: true }
                        }
                    }
                });
            }

            // Chart: Top Candidatos por Popularidad
            const ctxPopularity = document.getElementById('popularityChart');
            if (ctxPopularity && competitorsData.topCandidates && competitorsData.topCandidates.length > 0) {
                charts.popularity = new Chart(ctxPopularity, {
                    type: 'bar',
                    data: {
                        labels: competitorsData.topCandidates.map(c => c.name),
                        datasets: [{
                            label: 'Popularidad (%)',
                            data: competitorsData.topCandidates.map(c => c.popularity),
                            backgroundColor: 'rgba(147, 51, 234, 0.8)',
                            borderColor: 'rgba(147, 51, 234, 1)',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        indexAxis: 'y',
                        scales: {
                            x: { beginAtZero: true, max: 100 }
                        }
                    }
                });
            }
        } catch (error) {
            console.error('Error rendering charts:', error);
        }
    }

    function renderCandidatesTable() {
        const tbody = document.getElementById('candidatesTableBody');
        tbody.innerHTML = '';

        if (competitorsData.candidates.length === 0) {
            tbody.innerHTML = '<tr><td colspan="7" class="p-8 text-center text-gray-500"><i class="fas fa-users text-4xl mb-2"></i><br>No hay candidatos para mostrar</td></tr>';
            return;
        }

        competitorsData.candidates.forEach(candidate => {
            const planBadge = candidate.hasPlan ?
                `<span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                    <i class="fas fa-crown mr-1"></i>${candidate.planType}
                </span>` :
                `<span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                    Sin Plan
                </span>`;

            const popularityClass = candidate.popularity >= 80 ? 'bg-green-100 text-green-800' :
                                   candidate.popularity >= 60 ? 'bg-yellow-100 text-yellow-800' :
                                   'bg-red-100 text-red-800';

            const row = `
                <tr class="hover:bg-red-50 transition-colors">
                    <td class="px-4 py-3 text-sm font-medium text-gray-900">${candidate.name}</td>
                    <td class="px-4 py-3 text-sm text-gray-600">${candidate.position}</td>
                    <td class="px-4 py-3 text-sm text-gray-600">${candidate.location}</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 ${popularityClass}">
                            ${candidate.popularity}%
                        </span>
                    </td>
                    <td class="px-4 py-3 text-sm">${planBadge}</td>
                    <td class="px-4 py-3 text-sm text-gray-600">${candidate.competitors} rivales</td>
                    <td class="px-4 py-3 text-sm">
                        <div class="flex space-x-2">
                            <span class="text-blue-600" title="Facebook">📘 ${candidate.socialMedia.facebook}</span>
                            <span class="text-blue-400" title="Twitter">🐦 ${candidate.socialMedia.twitter}</span>
                            <span class="text-pink-500" title="Instagram">📷 ${candidate.socialMedia.instagram}</span>
                            <span class="text-black" title="TikTok">🎵 ${candidate.socialMedia.tiktok}</span>
                        </div>
                    </td>
                </tr>
            `;
            tbody.innerHTML += row;
        });
    }

    async function applyFilters() {
        console.log('Applying filters...');

        const department = document.getElementById('filterDepartment').value;
        const city = document.getElementById('filterCity').value;
        const electionType = document.getElementById('filterElectionType').value;

        try {
            const params = new URLSearchParams();
            if (department) params.append('department', department);
            if (city) params.append('city', city);
            if (electionType) params.append('election_type', electionType);

            const response = await fetch(`/api/test/competitors?${params.toString()}`);
            const result = await response.json();

            if (result.success) {
                competitorsData = result.data;
                updateStats();
                renderCharts();
                renderCandidatesTable();
            } else {
                console.error('Error applying filters:', result.message);
            }
        } catch (error) {
            console.error('Error applying filters:', error);
        }
    }

    function exportData() {
        console.log('Exporting data...');
        // Implementar exportación de datos
    }

    function refreshData() {
        loadCompetitorsData();
    }
</script>
@endpush