@extends('layouts.goberdata')

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

@push('styles')
<style>
        #heatmap {
            height: 500px;
            border-radius: 12px;
            z-index: 1;
        }
        .chart-container {
            position: relative;
            height: 300px;
            width: 100%;
        }
        /* Asegurar que el mapa no se superponga al sidebar */
        .leaflet-container {
            z-index: 1 !important;
        }
        .leaflet-control-container {
            z-index: 2 !important;
        }
    </style>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet.heatmap@0.2.0/dist/leaflet-heatmap.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-blue-100">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    <h1 class="text-2xl font-semibold text-white">
                        📱 QR Campaigns 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">
                    <!-- 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 Posters</p>
                                <i class="fas fa-qrcode text-3xl opacity-50"></i>
                            </div>
                            <p id="totalPosters" 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">Total Escaneos</p>
                                <i class="fas fa-mobile-alt text-3xl opacity-50"></i>
                            </div>
                            <p id="totalScans" 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-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">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 QR</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 Escaneo</p>
                                <i class="fas fa-percentage text-3xl opacity-50"></i>
                            </div>
                            <p id="scanRate" class="text-4xl font-bold">0%</p>
                            <p class="text-xs opacity-75 mt-1">Promedio</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">Posters 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">Escaneos por Ciudad</h3>
                            <div class="chart-container">
                                <canvas id="cityChart"></canvas>
                            </div>
                        </div>
                    </div>

                    <!-- Heatmap -->
                    <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
                        <h3 class="text-lg font-bold mb-4">Heatmap de Escaneos QR</h3>
                        <div id="heatmap" class="shadow-lg"></div>
                        <div class="mt-4 text-sm text-gray-600">
                            <strong>Fuente de datos:</strong> Escaneos QR georeferenciados de todas las campañas.
                            <br><strong>Cómo leer el mapa:</strong> Las áreas más calientes (rojas) indican mayor actividad de escaneos QR.
                        </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 Posters</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Escaneos</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tasa Escaneo</th>
                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Opiniones</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>

                    <!-- 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';
        }

        let heatmap;

        document.addEventListener('DOMContentLoaded', function() {
            console.log('🚀 DOM cargado, iniciando carga de datos...');
            // Pequeño delay para asegurar que el DOM esté completamente renderizado
            setTimeout(() => {
                loadGlobalData();
            }, 100);
        });

        async function loadGlobalData() {
            try {
                console.log('🚀 Cargando datos QR desde API centralizada...');

                // Usar el nuevo sistema centralizado de datos
                const [heatmapResponse, statsResponse] = await Promise.all([
                    fetch('/api/data/qr', {
                        headers: {
                            'Authorization': `Bearer ${token}`,
                            'Accept': 'application/json'
                        }
                    }),
                    fetch('/api/data/global-stats', {
                        headers: {
                            'Authorization': `Bearer ${token}`,
                            'Accept': 'application/json'
                        }
                    })
                ]);

                if (heatmapResponse.ok && statsResponse.ok) {
                    const heatmapResult = await heatmapResponse.json();
                    const statsResult = await statsResponse.json();

                    console.log('✅ Datos reales cargados desde API centralizada:', { heatmapResult, statsResult });

                    // Procesar datos reales
                    if (heatmapResult.success && heatmapResult.data && statsResult.success && statsResult.data) {
                        const heatmapData = heatmapResult.data;
                        const globalStats = statsResult.data;

                        processCampaignData(heatmapData);
                        processCityData(heatmapData);
                        generateRecentActivity(heatmapData);
                        loadHeatmap(heatmapData);

                        // Actualizar estadísticas desde datos globales
                        document.getElementById('totalPosters').textContent = globalStats.qr_campaigns?.total_posters || 0;
                        document.getElementById('totalScans').textContent = (globalStats.qr_campaigns?.total_scans || 0).toLocaleString();
                        document.getElementById('totalOpinions').textContent = (globalStats.qr_campaigns?.total_opinions || 0).toLocaleString();
                        document.getElementById('avgIntensity').textContent = (globalStats.qr_campaigns?.avg_intensity || 0).toFixed(1) + '%';

                        console.log('✅ Datos QR globales cargados exitosamente desde API');
                        return;
                    }
                }

                console.log('⚠️ API no disponible, cargando datos mock...');
                loadMockData();

            } catch (error) {
                console.error('❌ Error cargando datos globales:', error);
                console.log('🔄 Cargando datos mock como fallback...');
                loadMockData();
            }
        }

        function processCampaignData(heatmapData) {
            // Agrupar por campaña (simulado por ahora)
            const campaigns = {};

            heatmapData.forEach(point => {
                const campaignName = `Campaña ${point.zone}`;
                if (!campaigns[campaignName]) {
                    campaigns[campaignName] = {
                        name: campaignName,
                        posters: 0,
                        scans: 0,
                        scan_rate: 0,
                        opinions: 0
                    };
                }
                campaigns[campaignName].posters += 1;
                campaigns[campaignName].scans += point.scans;
                campaigns[campaignName].opinions += point.opinions;
            });

            // Calcular tasas de escaneo
            Object.values(campaigns).forEach(campaign => {
                campaign.scan_rate = campaign.posters > 0 ? Math.round((campaign.scans / campaign.posters) * 10) : 0;
            });

            return Object.values(campaigns);
        }

        function processCityData(heatmapData) {
            // Agrupar por zona
            const cities = {};

            heatmapData.forEach(point => {
                if (!cities[point.zone]) {
                    cities[point.zone] = {
                        name: point.zone,
                        scans: 0,
                        posters: 0
                    };
                }
                cities[point.zone].scans += point.scans;
                cities[point.zone].posters += 1;
            });

            return Object.values(cities);
        }

        function generateRecentActivity(heatmapData) {
            const activities = [];
            const locations = heatmapData.slice(0, 5); // Tomar las primeras 5 ubicaciones

            locations.forEach((location, index) => {
                const actions = [
                    'QR escaneado',
                    'Opinión registrada',
                    'Nuevo poster QR creado',
                    'Actividad QR detectada'
                ];

                activities.push({
                    campaign: `Campaña ${location.zone}`,
                    action: actions[index % actions.length],
                    location: location.neighborhood,
                    scans: location.scans,
                    time: `${index + 1} hora${index > 0 ? 's' : ''}`
                });
            });

            return activities;
        }

        async function loadMockData() {
            try {
                console.log('Loading QR campaigns data...');
                // Cargar datos reales desde la API
                const response = await fetch('/api/test/qr-campaigns');
                const result = await response.json();

                if (result.success) {
                    const data = result.data;
                    console.log('QR campaigns data loaded from API:', data);

                    // Update stats
                    document.getElementById('totalPosters').textContent = data.stats.total_posters.toLocaleString();
                    document.getElementById('totalScans').textContent = data.stats.total_scans.toLocaleString();
                    document.getElementById('activeCampaigns').textContent = data.stats.active_campaigns.toLocaleString();
                    document.getElementById('scanRate').textContent = data.stats.scan_rate + '%';

                    // Render charts
                    renderCampaignChart(data.campaigns);
                    renderCityChart(data.cities);

                    // Load additional data
                    loadCampaignComparison(data.campaigns);

                    console.log('🗺️ Cargando mapa de calor con datos reales:', data.heatmap_data);
                    loadHeatmap(data.heatmap_data);

                    // Load recent activity
                    loadRecentActivity(data.recent_activity);
                } else {
                    console.error('Error loading QR campaigns data:', result.message);
                    loadFallbackData();
                }
            } catch (error) {
                console.error('Error loading QR campaigns data:', error);
                loadFallbackData();
            }
        }

        function loadFallbackData() {
            // Datos de respaldo básicos
            const mockData = {
                stats: {
                    total_posters: 22,
                    total_scans: 45000,
                    active_campaigns: 15,
                    scan_rate: 78.5
                },
                campaigns: [
                    { name: 'Campaña Alcaldía Bogotá', posters: 12, scans: 25000, scan_rate: 85, opinions: 1800 },
                    { name: 'Campaña Gobernación', posters: 6, scans: 12000, scan_rate: 82, opinions: 900 },
                    { name: 'Campaña Concejo', posters: 4, scans: 8000, scan_rate: 80, opinions: 600 }
                ],
                cities: [
                    { name: 'Centro', scans: 15000, posters: 6 },
                    { name: 'Norte', scans: 18000, posters: 6 },
                    { name: 'Occidente', scans: 8000, posters: 6 },
                    { name: 'Sur', scans: 4000, posters: 4 }
                ],
                heatmap_data: [
                    // Centro - Alta densidad
                    { lat: 4.5981, lng: -74.0758, intensity: 95, scans: 4500, opinions: 320, location_name: 'Plaza de Bolívar', zone: 'Centro', neighborhood: 'La Candelaria', color: '#ff0000' },
                    { lat: 4.6000, lng: -74.0700, intensity: 88, scans: 3800, opinions: 280, location_name: 'Museo del Oro', zone: 'Centro', neighborhood: 'La Candelaria', color: '#ff2200' },
                    { lat: 4.6050, lng: -74.0550, intensity: 82, scans: 3200, opinions: 240, location_name: 'Monserrate', zone: 'Centro', neighborhood: 'La Candelaria', color: '#ff4400' },
                    { lat: 4.6320, lng: -74.0850, intensity: 75, scans: 2800, opinions: 200, location_name: 'Corferias', zone: 'Centro', neighborhood: 'Teusaquillo', color: '#ff6600' },
                    { lat: 4.6375, lng: -74.0830, intensity: 68, scans: 2400, opinions: 180, location_name: 'Universidad Nacional', zone: 'Centro', neighborhood: 'Teusaquillo', color: '#ff8800' },
                    { lat: 4.6470, lng: -74.0740, intensity: 62, scans: 2000, opinions: 150, location_name: 'Estadio El Campín', zone: 'Centro', neighborhood: 'Teusaquillo', color: '#ffaa00' },

                    // Norte - Media-Alta densidad
                    { lat: 4.7648, lng: -74.0472, intensity: 85, scans: 4200, opinions: 300, location_name: 'Centro Santafé', zone: 'Norte', neighborhood: 'Usaquén', color: '#ff0000' },
                    { lat: 4.6950, lng: -74.0380, intensity: 78, scans: 3500, opinions: 260, location_name: 'Unicentro', zone: 'Norte', neighborhood: 'Usaquén', color: '#ff2200' },
                    { lat: 4.6768, lng: -74.0500, intensity: 72, scans: 3000, opinions: 220, location_name: 'Parque 93', zone: 'Norte', neighborhood: 'Chicó', color: '#ff4400' },
                    { lat: 4.6690, lng: -74.0520, intensity: 68, scans: 2600, opinions: 190, location_name: 'Centro Andino', zone: 'Norte', neighborhood: 'Chapinero', color: '#ff6600' },
                    { lat: 4.6700, lng: -74.0550, intensity: 65, scans: 2300, opinions: 170, location_name: 'Zona Rosa', zone: 'Norte', neighborhood: 'Chapinero', color: '#ff8800' },
                    { lat: 4.6280, lng: -74.0640, intensity: 58, scans: 1900, opinions: 140, location_name: 'U. Javeriana', zone: 'Norte', neighborhood: 'Chapinero', color: '#ffaa00' },

                    // Occidente - Media densidad
                    { lat: 4.6590, lng: -74.0850, intensity: 55, scans: 1800, opinions: 130, location_name: 'Parque Simón Bolívar', zone: 'Occidente', neighborhood: 'Barrios Unidos', color: '#ffcc00' },
                    { lat: 4.6580, lng: -74.0900, intensity: 48, scans: 1500, opinions: 110, location_name: 'Biblioteca Virgilio Barco', zone: 'Occidente', neighborhood: 'Barrios Unidos', color: '#ffee00' },
                    { lat: 4.6470, lng: -74.0900, intensity: 42, scans: 1200, opinions: 90, location_name: 'Gran Estación', zone: 'Occidente', neighborhood: 'Teusaquillo', color: '#ccff00' },
                    { lat: 4.6700, lng: -74.1200, intensity: 38, scans: 1000, opinions: 75, location_name: 'Centro Hayuelos', zone: 'Occidente', neighborhood: 'Fontibón', color: '#aaff00' },
                    { lat: 4.6600, lng: -74.1000, intensity: 35, scans: 900, opinions: 65, location_name: 'Maloka', zone: 'Occidente', neighborhood: 'Fontibón', color: '#88ff00' },
                    { lat: 4.7100, lng: -74.1000, intensity: 32, scans: 800, opinions: 60, location_name: 'Portal 80', zone: 'Occidente', neighborhood: 'Engativá', color: '#66ff00' },

                    // Sur - Baja densidad
                    { lat: 4.5500, lng: -74.1200, intensity: 28, scans: 600, opinions: 45, location_name: 'Plaza Sur', zone: 'Sur', neighborhood: 'Tunjuelito', color: '#44ff00' },
                    { lat: 4.5400, lng: -74.1300, intensity: 25, scans: 500, opinions: 38, location_name: 'Portal Tunal', zone: 'Sur', neighborhood: 'Tunjuelito', color: '#22ff00' },
                    { lat: 4.5200, lng: -74.1400, intensity: 22, scans: 400, opinions: 30, location_name: 'Centro Comercial Sur', zone: 'Sur', neighborhood: 'Ciudad Bolívar', color: '#00ff00' },
                    { lat: 4.5100, lng: -74.1500, intensity: 18, scans: 300, opinions: 22, location_name: 'Parque Sur', zone: 'Sur', neighborhood: 'Usme', color: '#00ff22' }
                ],
                recent_activity: [
                    { campaign: 'Campaña Alcaldía Bogotá', action: 'QR escaneado', location: 'Plaza de Bolívar', scans: 150, time: 'Hace 2 horas' },
                    { campaign: 'Campaña Gobernación', action: 'Opinión registrada', location: 'Centro Santafé', scans: 89, time: 'Hace 4 horas' },
                    { campaign: 'Campaña Concejo', action: 'QR escaneado', location: 'Parque 93', scans: 67, time: 'Hace 6 horas' },
                    { campaign: 'Campaña Alcaldía Bogotá', action: 'Nuevo poster QR', location: 'Zona Rosa', time: 'Hace 8 horas' },
                    { campaign: 'Campaña Gobernación', action: 'QR escaneado', location: 'Universidad Nacional', scans: 45, time: 'Hace 10 horas' }
                ]
            };

            // Update stats cards
            document.getElementById('totalPosters').textContent = mockData.stats.total_posters.toLocaleString();
            document.getElementById('totalScans').textContent = mockData.stats.total_scans.toLocaleString();
            document.getElementById('activeCampaigns').textContent = mockData.stats.active_campaigns.toLocaleString();
            document.getElementById('scanRate').textContent = mockData.stats.scan_rate + '%';

            // Render charts
            renderCampaignChart(mockData.campaigns);
            renderCityChart(mockData.cities);

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

            // Load heatmap
            console.log('🗺️ Cargando mapa de calor con datos mock:', mockData.heatmap_data);
            loadHeatmap(mockData.heatmap_data);

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

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

        function renderCityChart(cities) {
            const ctx = document.getElementById('cityChart').getContext('2d');
            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: cities.map(c => c.name),
                    datasets: [{
                        data: cities.map(c => c.scans),
                        backgroundColor: ['#EF4444', '#F59E0B', '#10B981', '#3B82F6', '#8B5CF6', '#F97316', '#06B6D4', '#84CC16'],
                        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.posters}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campaign.scans.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 ${getScanRateBadge(campaign.scan_rate)}">
                                ${campaign.scan_rate}%
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campaign.opinions.toLocaleString()}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <button onclick="viewCampaignQR('${campaign.name}')" class="text-blue-600 hover:text-blue-900 mr-2">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button onclick="exportCampaignQR('${campaign.name}')" class="text-green-600 hover:text-green-900">
                                <i class="fas fa-download"></i>
                            </button>
                        </td>
                    </tr>
                `;
                tbody.innerHTML += row;
            });
        }

        function loadHeatmap(data) {
            try {
                console.log('🗺️ Iniciando carga del mapa de calor con datos:', data);

                // Verificar que el elemento del mapa existe
                const mapElement = document.getElementById('heatmap');
                if (!mapElement) {
                    console.error('❌ Elemento #heatmap no encontrado en el DOM');
                    return;
                }
                console.log('✅ Elemento #heatmap encontrado:', mapElement);

                if (heatmap) {
                    console.log('🗺️ Removiendo mapa anterior');
                    heatmap.remove();
                }

                console.log('🗺️ Creando nuevo mapa en elemento #heatmap');
                heatmap = L.map('heatmap').setView([4.6097, -74.0817], 11); // Bogotá con zoom más cercano

                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '© OpenStreetMap contributors'
                }).addTo(heatmap);

                console.log('🗺️ Preparando datos para heatmap con zonas diferenciadas...');

                // Preparar datos para el heatmap real con gradientes suaves
                const heatmapData = data.map(point => [
                    parseFloat(point.lat),
                    parseFloat(point.lng),
                    parseFloat(point.intensity) / 100 // Normalizar intensidad entre 0-1
                ]);

                console.log('🗺️ Datos del heatmap preparados:', heatmapData.length, 'puntos');

                // Crear el heatmap real con gradientes suaves
                const heatmapLayer = L.heatLayer(heatmapData, {
                    radius: 40,           // Radio más grande para mejor cobertura
                    blur: 30,             // Blur más suave
                    maxZoom: 18,          // Máximo zoom
                    max: 1.0,            // Valor máximo normalizado
                    gradient: {
                        0.0: '#00ff88',   // Verde muy claro - Muy baja intensidad
                        0.2: '#88ff00',   // Verde claro - Baja intensidad
                        0.4: '#ffdd00',   // Amarillo - Media intensidad
                        0.6: '#ff8800',   // Naranja - Media-alta intensidad
                        0.8: '#ff4400',   // Rojo claro - Alta intensidad
                        1.0: '#ff0000'    // Rojo intenso - Muy alta intensidad
                    }
                }).addTo(heatmap);

                console.log('🗺️ Heatmap layer creado exitosamente');

                // Agregar marcadores individuales para información detallada
                data.forEach((point, index) => {
                    // Función para obtener color basado en intensidad
                    function getIntensityColor(intensity) {
                        if (intensity >= 80) return '#dc2626'; // Rojo intenso - Muy alta intensidad
                        if (intensity >= 60) return '#ea580c'; // Naranja intenso - Alta intensidad
                        if (intensity >= 40) return '#d97706'; // Amarillo intenso - Media intensidad
                        if (intensity >= 20) return '#16a34a'; // Verde intenso - Baja intensidad
                        return '#059669'; // Verde oscuro - Muy baja intensidad
                    }

                    // Función para obtener tamaño basado en escaneos
                    function getMarkerSize(scans) {
                        if (scans >= 2000) return 12; // Grande - Muchos escaneos
                        if (scans >= 1000) return 10; // Mediano - Escaneos regulares
                        if (scans >= 500) return 8;  // Pequeño - Pocos escaneos
                        return 6; // Muy pequeño - Muy pocos escaneos
                    }

                    // Función para obtener texto descriptivo
                    function getScanLevel(scans) {
                        if (scans >= 2000) return 'MUCHOS ESCANEOS';
                        if (scans >= 1000) return 'ESCANEOS REGULARES';
                        if (scans >= 500) return 'POCOS ESCANEOS';
                        return 'MUY POCOS ESCANEOS';
                    }

                    const marker = L.circleMarker([point.lat, point.lng], {
                        radius: getMarkerSize(point.scans),
                        fillColor: getIntensityColor(point.intensity),
                        color: '#ffffff',
                        weight: 2,
                        opacity: 1,
                        fillOpacity: 0.8
                    }).addTo(heatmap);

                    marker.bindPopup(`
                        <div class="p-2 min-w-[200px]">
                            <h4 class="font-bold text-gray-800 mb-2">${point.location_name}</h4>
                            <div class="space-y-1 text-sm">
                                <p><strong>Zona:</strong> ${point.zone}</p>
                                <p><strong>Barrio:</strong> ${point.neighborhood}</p>
                                <p><strong>Escaneos:</strong> <span class="font-bold text-blue-600">${point.scans.toLocaleString()}</span></p>
                                <p><strong>Opiniones:</strong> ${point.opinions.toLocaleString()}</p>
                                <p><strong>Intensidad:</strong> ${point.intensity.toFixed(1)}%</p>
                            </div>
                            <div class="mt-3 p-2 rounded-lg" style="background-color: ${getIntensityColor(point.intensity)}20; border-left: 4px solid ${getIntensityColor(point.intensity)};">
                                <div class="text-xs font-bold" style="color: ${getIntensityColor(point.intensity)};">
                                    ${getScanLevel(point.scans)}
                                </div>
                                <div class="text-xs text-gray-600 mt-1">
                                    Nivel de actividad QR
                                </div>
                            </div>
                        </div>
                    `);
                });

                // Agregar controles de capas
                const baseMaps = {
                    "OpenStreetMap": L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                        attribution: '© OpenStreetMap contributors'
                    }),
                    "Satélite": L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
                        attribution: '© Esri'
                    })
                };

                const overlayMaps = {
                    "Heatmap QR": heatmapLayer
                };

                L.control.layers(baseMaps, overlayMaps).addTo(heatmap);

                // Agregar leyenda mejorada con niveles de escaneos
                const legend = L.control({position: 'bottomright'});
                legend.onAdd = function (map) {
                    const div = L.DomUtil.create('div', 'info legend');
                    div.innerHTML = `
                        <div style="background: white; padding: 15px; border-radius: 10px; box-shadow: 0 0 25px rgba(0,0,0,0.3); min-width: 250px;">
                            <h4 style="margin: 0 0 15px 0; font-weight: bold; color: #333; text-align: center;">🔥 Niveles de Escaneos QR</h4>

                            <div style="margin-bottom: 10px; padding: 8px; border-radius: 6px; background-color: #dc262620; border-left: 4px solid #dc2626;">
                                <span style="color: #dc2626; font-size: 16px; font-weight: bold;">●</span>
                                <span style="margin-left: 8px; font-weight: bold;">MUCHOS ESCANEOS (2000+)</span>
                                <div style="font-size: 11px; color: #666; margin-left: 24px;">Zonas de alta actividad</div>
                            </div>

                            <div style="margin-bottom: 10px; padding: 8px; border-radius: 6px; background-color: #ea580c20; border-left: 4px solid #ea580c;">
                                <span style="color: #ea580c; font-size: 16px; font-weight: bold;">●</span>
                                <span style="margin-left: 8px; font-weight: bold;">ESCANEOS REGULARES (1000-1999)</span>
                                <div style="font-size: 11px; color: #666; margin-left: 24px;">Zonas de actividad media</div>
                            </div>

                            <div style="margin-bottom: 10px; padding: 8px; border-radius: 6px; background-color: #d9770620; border-left: 4px solid #d97706;">
                                <span style="color: #d97706; font-size: 16px; font-weight: bold;">●</span>
                                <span style="margin-left: 8px; font-weight: bold;">POCOS ESCANEOS (500-999)</span>
                                <div style="font-size: 11px; color: #666; margin-left: 24px;">Zonas de baja actividad</div>
                            </div>

                            <div style="margin-bottom: 10px; padding: 8px; border-radius: 6px; background-color: #16a34a20; border-left: 4px solid #16a34a;">
                                <span style="color: #16a34a; font-size: 16px; font-weight: bold;">●</span>
                                <span style="margin-left: 8px; font-weight: bold;">MUY POCOS ESCANEOS (<500)</span>
                                <div style="font-size: 11px; color: #666; margin-left: 24px;">Zonas de muy baja actividad</div>
                            </div>

                            <div style="margin-top: 15px; padding-top: 10px; border-top: 2px solid #eee; font-size: 12px; color: #666;">
                                <div><strong>Total ubicaciones:</strong> ${data.length}</div>
                                <div><strong>Escaneos totales:</strong> ${data.reduce((sum, p) => sum + p.scans, 0).toLocaleString()}</div>
                                <div><strong>Intensidad promedio:</strong> ${(data.reduce((sum, p) => sum + p.intensity, 0) / data.length).toFixed(1)}%</div>
                            </div>
                        </div>
                    `;
                    return div;
                };
                legend.addTo(heatmap);

                // Agregar información de estadísticas en la esquina superior izquierda
                const info = L.control({position: 'topleft'});
                info.onAdd = function (map) {
                    const div = L.DomUtil.create('div', 'info stats-info');
                    div.innerHTML = `
                        <div style="background: rgba(255,255,255,0.95); padding: 12px; border-radius: 8px; box-shadow: 0 0 20px rgba(0,0,0,0.2);">
                            <h5 style="margin: 0 0 10px 0; font-weight: bold; color: #333;">📊 Estadísticas QR</h5>
                            <div style="font-size: 12px; color: #555;">
                                <div><strong>Ubicaciones:</strong> ${data.length}</div>
                                <div><strong>Escaneos totales:</strong> ${data.reduce((sum, p) => sum + p.scans, 0).toLocaleString()}</div>
                                <div><strong>Opiniones:</strong> ${data.reduce((sum, p) => sum + p.opinions, 0).toLocaleString()}</div>
                                <div><strong>Intensidad promedio:</strong> ${(data.reduce((sum, p) => sum + p.intensity, 0) / data.length).toFixed(1)}%</div>
                                <div style="margin-top: 8px; padding-top: 8px; border-top: 1px solid #eee;">
                                    <div><strong>Zonas con más escaneos:</strong> ${data.filter(p => p.scans >= 2000).length}</div>
                                    <div><strong>Zonas regulares:</strong> ${data.filter(p => p.scans >= 1000 && p.scans < 2000).length}</div>
                                    <div><strong>Zonas con pocos escaneos:</strong> ${data.filter(p => p.scans < 1000).length}</div>
                                </div>
                            </div>
                        </div>
                    `;
                    return div;
                };
                info.addTo(heatmap);

                console.log(`🗺️ Heatmap QR cargado exitosamente con ${data.length} puntos de calor diferenciados por niveles de escaneos`);

            } catch (err) {
                console.error('❌ Error loading QR heatmap:', err);
                console.error('❌ Stack trace:', err.stack);
            }
        }

        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>
                            <span class="text-gray-600 ml-2">- ${activity.location}</span>
                            ${activity.scans ? `<span class="text-blue-600 ml-2">(${activity.scans} escaneos)</span>` : ''}
                        </div>
                        <span class="text-xs text-gray-500">${activity.time}</span>
                    </div>
                `;
                container.innerHTML += activityItem;
            });
        }

        function getScanRateBadge(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 viewCampaignQR(campaignName) {
            alert(`Ver QR de ${campaignName} - Funcionalidad pendiente`);
        }

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