@extends('layouts.goberdata')

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

@push('styles')
<style>
        .chart-container {
            position: relative;
            height: 300px;
            width: 100%;
        }
    </style>
<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-green-100">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <h1 class="text-2xl font-semibold text-white">
                        🗳️ Votantes 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">
                    <!-- Global Stats Cards -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                        <div class="bg-gradient-to-br from-blue-500 to-blue-700 text-white rounded-xl shadow-lg p-6">
                            <div class="flex items-center justify-between mb-2">
                                <p class="text-sm font-semibold opacity-90">Total Votantes</p>
                                <i class="fas fa-users text-3xl opacity-50"></i>
                            </div>
                            <p id="totalVoters" class="text-4xl font-bold">0</p>
                            <p class="text-xs opacity-75 mt-1">Todas las campañas</p>
                        </div>
                        <div class="bg-gradient-to-br from-green-500 to-green-700 text-white rounded-xl shadow-lg p-6">
                            <div class="flex items-center justify-between mb-2">
                                <p class="text-sm font-semibold opacity-90">Campañas Activas</p>
                                <i class="fas fa-flag text-3xl opacity-50"></i>
                            </div>
                            <p id="activeCampaigns" class="text-4xl font-bold">0</p>
                            <p class="text-xs opacity-75 mt-1">Con votantes</p>
                        </div>
                        <div class="bg-gradient-to-br from-purple-500 to-purple-700 text-white rounded-xl shadow-lg p-6">
                            <div class="flex items-center justify-between mb-2">
                                <p class="text-sm font-semibold opacity-90">Total Contactos</p>
                                <i class="fas fa-phone text-3xl opacity-50"></i>
                            </div>
                            <p id="totalContacts" class="text-4xl font-bold">0</p>
                            <p class="text-xs opacity-75 mt-1">Realizados</p>
                        </div>
                        <div class="bg-gradient-to-br from-orange-500 to-orange-700 text-white rounded-xl shadow-lg p-6">
                            <div class="flex items-center justify-between mb-2">
                                <p class="text-sm font-semibold opacity-90">Tasa Promedio</p>
                                <i class="fas fa-percentage text-3xl opacity-50"></i>
                            </div>
                            <p id="avgContactRate" class="text-4xl font-bold">0%</p>
                            <p class="text-xs opacity-75 mt-1">Contacto</p>
                        </div>
                    </div>

                    <!-- Charts Section -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
                        <div class="bg-white rounded-xl shadow-lg p-6">
                            <h3 class="text-lg font-bold mb-4">Votantes por Campaña</h3>
                            <div class="chart-container">
                                <canvas id="campaignChart"></canvas>
                            </div>
                        </div>
                        <div class="bg-white rounded-xl shadow-lg p-6">
                            <h3 class="text-lg font-bold mb-4">Distribución por Intención</h3>
                            <div class="chart-container">
                                <canvas id="intentionChart"></canvas>
                            </div>
                        </div>
                    </div>

                    <!-- Campaign Comparison -->
                    <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
                        <h3 class="text-lg font-bold mb-4">Comparación por Campaña</h3>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Campaña</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Votantes</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contactados</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tasa Contacto</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Alta Intención</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Apoyo Fuerte</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody id="campaignsTableBody" class="bg-white divide-y divide-gray-200">
                                    <!-- Data will be loaded here -->
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Geographic Distribution -->
                    <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
                        <h3 class="text-lg font-bold mb-4">Distribución Geográfica</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="geographicContainer">
                            <!-- Geographic data will be loaded here -->
                        </div>
                    </div>

                    <!-- Recent Activity -->
                    <div class="bg-white rounded-xl shadow-lg p-6">
                        <h3 class="text-lg font-bold mb-4">Actividad Reciente</h3>
                        <div class="space-y-4" id="recentActivityContainer">
                            <!-- Recent activity will be loaded here -->
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
@endsection

@push('scripts')
<script>
        const token = localStorage.getItem('auth_token');
        if (!token) {
            window.location.href = '/login';
        }

        document.addEventListener('DOMContentLoaded', function() {
            loadGlobalData();
        });

        async function loadGlobalData() {
            try {
                // Simular datos globales ya que no tenemos endpoint específico
                const mockData = {
                    stats: {
                        total_voters: 11116,
                        active_campaigns: 23,
                        total_contacts: 10840,
                        avg_contact_rate: 78.5
                    },
                    campaigns: [
                        { name: 'Campaña Bogotá', voters: 2500, contacted: 2100, contact_rate: 84, high_intention: 1200, strong_support: 800 },
                        { name: 'Campaña Medellín', voters: 2200, contacted: 1800, contact_rate: 82, high_intention: 1000, strong_support: 700 },
                        { name: 'Campaña Cali', voters: 2000, contacted: 1600, contact_rate: 80, high_intention: 900, strong_support: 600 },
                        { name: 'Campaña Barranquilla', voters: 1800, contacted: 1400, contact_rate: 78, high_intention: 800, strong_support: 500 },
                        { name: 'Campaña Cartagena', voters: 1500, contacted: 1200, contact_rate: 80, high_intention: 700, strong_support: 450 }
                    ],
                    intentions: [
                        { intention: 'high', count: 4500 },
                        { intention: 'medium', count: 3500 },
                        { intention: 'low', count: 2000 },
                        { intention: 'unknown', count: 1116 }
                    ],
                    geographic: [
                        { city: 'Bogotá', voters: 2500, percentage: 22.5 },
                        { city: 'Medellín', voters: 2200, percentage: 19.8 },
                        { city: 'Cali', voters: 2000, percentage: 18.0 },
                        { city: 'Barranquilla', voters: 1800, percentage: 16.2 },
                        { city: 'Cartagena', voters: 1500, percentage: 13.5 },
                        { city: 'Otras', voters: 1116, percentage: 10.0 }
                    ],
                    recent_activity: [
                        { campaign: 'Campaña Bogotá', action: 'Nuevos votantes agregados', count: 150, time: '2 horas' },
                        { campaign: 'Campaña Medellín', action: 'Contactos realizados', count: 85, time: '4 horas' },
                        { campaign: 'Campaña Cali', action: 'Actualización de intenciones', count: 200, time: '6 horas' },
                        { campaign: 'Campaña Barranquilla', action: 'Nuevos votantes agregados', count: 120, time: '8 horas' },
                        { campaign: 'Campaña Cartagena', action: 'Contactos realizados', count: 95, time: '10 horas' }
                    ]
                };

                // Update stats cards
                document.getElementById('totalVoters').textContent = mockData.stats.total_voters.toLocaleString();
                document.getElementById('activeCampaigns').textContent = mockData.stats.active_campaigns.toLocaleString();
                document.getElementById('totalContacts').textContent = mockData.stats.total_contacts.toLocaleString();
                document.getElementById('avgContactRate').textContent = mockData.stats.avg_contact_rate + '%';

                // Render charts
                renderCampaignChart(mockData.campaigns);
                renderIntentionChart(mockData.intentions);

                // Load campaign comparison
                loadCampaignComparison(mockData.campaigns);

                // Load geographic distribution
                loadGeographicDistribution(mockData.geographic);

                // Load recent activity
                loadRecentActivity(mockData.recent_activity);

            } catch (error) {
                console.error('Error loading global voters data:', error);
                alert('Error al cargar los datos globales de votantes. Por favor, intente de nuevo.');
            }
        }

        function renderCampaignChart(campaigns) {
            const ctx = document.getElementById('campaignChart').getContext('2d');
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: campaigns.map(c => c.name),
                    datasets: [{
                        label: 'Total Votantes',
                        data: campaigns.map(c => c.voters),
                        backgroundColor: '#6366F1',
                        borderColor: '#4F46E5',
                        borderWidth: 1
                    }, {
                        label: 'Contactados',
                        data: campaigns.map(c => c.contacted),
                        backgroundColor: '#10B981',
                        borderColor: '#059669',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        function renderIntentionChart(intentions) {
            const ctx = document.getElementById('intentionChart').getContext('2d');
            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: intentions.map(i => i.intention),
                    datasets: [{
                        data: intentions.map(i => i.count),
                        backgroundColor: ['#10B981', '#F59E0B', '#EF4444', '#6B7280'],
                        hoverOffset: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                        }
                    }
                }
            });
        }

        function loadCampaignComparison(campaigns) {
            const tbody = document.getElementById('campaignsTableBody');
            tbody.innerHTML = '';

            campaigns.forEach(campaign => {
                const row = `
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${campaign.name}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campaign.voters.toLocaleString()}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campaign.contacted.toLocaleString()}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            <span class="px-2 py-1 text-xs font-semibold rounded-full ${getContactRateBadge(campaign.contact_rate)}">
                                ${campaign.contact_rate}%
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campaign.high_intention.toLocaleString()}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campaign.strong_support.toLocaleString()}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <button onclick="viewCampaignVoters('${campaign.name}')" class="text-blue-600 hover:text-blue-900 mr-2">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button onclick="exportCampaignVoters('${campaign.name}')" class="text-green-600 hover:text-green-900">
                                <i class="fas fa-download"></i>
                            </button>
                        </td>
                    </tr>
                `;
                tbody.innerHTML += row;
            });
        }

        function loadGeographicDistribution(geographic) {
            const container = document.getElementById('geographicContainer');
            container.innerHTML = '';

            geographic.forEach(location => {
                const locationCard = `
                    <div class="bg-gray-50 rounded-lg p-4">
                        <h4 class="font-semibold text-gray-800 mb-2">${location.city}</h4>
                        <div class="mb-2">
                            <div class="flex justify-between text-sm">
                                <span>${location.voters.toLocaleString()} votantes</span>
                                <span>${location.percentage}%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-blue-600 h-2 rounded-full" style="width: ${location.percentage}%"></div>
            </div>
        </div>
    </div>
                `;
                container.innerHTML += locationCard;
            });
        }

        function loadRecentActivity(activities) {
            const container = document.getElementById('recentActivityContainer');
            container.innerHTML = '';

            activities.forEach(activity => {
                const activityItem = `
                    <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                        <div>
                            <span class="font-semibold text-gray-800">${activity.campaign}</span>
                            <span class="text-gray-600 ml-2">${activity.action}</span>
                        </div>
                        <div class="text-right">
                            <span class="text-sm font-semibold text-blue-600">${activity.count}</span>
                            <span class="text-xs text-gray-500 ml-2">${activity.time}</span>
                        </div>
                    </div>
                `;
                container.innerHTML += activityItem;
            });
        }

        function getContactRateBadge(rate) {
            if (rate >= 80) return 'bg-green-100 text-green-800';
            if (rate >= 60) return 'bg-yellow-100 text-yellow-800';
            return 'bg-red-100 text-red-800';
        }

        function viewCampaignVoters(campaignName) {
            alert(`Ver votantes de ${campaignName} - Funcionalidad pendiente`);
        }

        function exportCampaignVoters(campaignName) {
            alert(`Exportar votantes de ${campaignName} - Funcionalidad pendiente`);
        }
    </script>
@endpush