@extends('layouts.goberdata')

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

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

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

            <!-- Main Content -->
            <main class="bg-gray-100 p-2">
                <div class="w-full">
                    <!-- Stats Cards -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
                        <!-- Card 1: Precisión del Modelo -->
                        <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">Precisión del Modelo</p>
                                    <h3 id="modelAccuracy" class="text-3xl font-bold text-indigo-600">0%</h3>
                                </div>
                                <i class="fas fa-brain text-4xl text-indigo-600"></i>
                            </div>
                        </div>

                        <!-- Card 2: Predicciones Realizadas -->
                        <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">Predicciones</p>
                                    <h3 id="totalPredictions" class="text-3xl font-bold text-green-600">0</h3>
                                </div>
                                <i class="fas fa-crystal-ball text-4xl text-green-600"></i>
                            </div>
                        </div>

                        <!-- Card 3: Variables Analizadas -->
                        <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">Variables</p>
                                    <h3 id="totalVariables" class="text-3xl font-bold text-blue-600">0</h3>
                                </div>
                                <i class="fas fa-chart-bar text-4xl text-blue-600"></i>
                            </div>
                        </div>

                        <!-- Card 4: Última Actualización -->
                        <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">Última Actualización</p>
                                    <h3 id="lastUpdate" class="text-3xl font-bold text-orange-600">0h</h3>
                                </div>
                                <i class="fas fa-clock text-4xl text-orange-600"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Modelo Status -->
                    <div class="bg-white rounded-lg shadow-lg p-6 mb-6">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-bold">🔮 Estado del Modelo Predictivo</h3>
                            <div class="flex space-x-3">
                                <button onclick="trainModel()" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors">
                                    <i class="fas fa-play mr-2"></i>Entrenar Modelo
                                </button>
                                <button onclick="refreshModel()" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors">
                                    <i class="fas fa-refresh mr-2"></i>Actualizar
                                </button>
                            </div>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div class="bg-green-50 border border-green-200 rounded-lg p-4">
                                <div class="flex items-center">
                                    <i class="fas fa-check-circle text-green-600 text-2xl mr-3"></i>
                                    <div>
                                        <p class="font-semibold text-green-800">Modelo Activo</p>
                                        <p class="text-sm text-green-600">Funcionando correctamente</p>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                                <div class="flex items-center">
                                    <i class="fas fa-database text-blue-600 text-2xl mr-3"></i>
                                    <div>
                                        <p class="font-semibold text-blue-800">Datos Actualizados</p>
                                        <p class="text-sm text-blue-600">Última actualización: 2h</p>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-purple-50 border border-purple-200 rounded-lg p-4">
                                <div class="flex items-center">
                                    <i class="fas fa-robot text-purple-600 text-2xl mr-3"></i>
                                    <div>
                                        <p class="font-semibold text-purple-800">IA Avanzada</p>
                                        <p class="text-sm text-purple-600">Machine Learning activo</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Charts Row -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                        <!-- Chart 1: Predicciones vs Realidad -->
                        <div class="bg-white rounded-lg shadow-lg p-6">
                            <h3 class="text-lg font-bold mb-4">📊 Predicciones vs Resultados Reales</h3>
                            <div class="relative h-80 w-full">
                                <canvas id="predictionsVsRealityChart"></canvas>
                            </div>
                        </div>

                        <!-- Chart 2: Variables de Mayor Impacto -->
                        <div class="bg-white rounded-lg shadow-lg p-6">
                            <h3 class="text-lg font-bold mb-4">🎯 Variables de Mayor Impacto</h3>
                            <div class="relative h-80 w-full">
                                <canvas id="impactVariablesChart"></canvas>
                            </div>
                        </div>
                    </div>

                    <!-- Predicciones por Campaña -->
                    <div class="bg-white rounded-lg shadow-lg p-6 mb-6">
                        <h3 class="text-lg font-bold mb-4">🔮 Predicciones por Campaña</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                            <div class="bg-gradient-to-br from-blue-500 to-blue-700 text-white rounded-lg p-4">
                                <h4 class="font-bold text-lg">JUAN JARAMILLO</h4>
                                <p class="text-sm opacity-90 mb-2">Alcaldía de Bogotá</p>
                                <div class="flex justify-between items-center">
                                    <span class="text-2xl font-bold">89.2%</span>
                                    <span class="text-xs bg-white bg-opacity-20 px-2 py-1 rounded">Predicción</span>
                                </div>
                                <div class="mt-2 text-xs">
                                    <p>📈 Tendencia: +5.2%</p>
                                    <p>🎯 Confianza: 94%</p>
                                </div>
                            </div>
                            <div class="bg-gradient-to-br from-green-500 to-green-700 text-white rounded-lg p-4">
                                <h4 class="font-bold text-lg">MARÍA GONZÁLEZ</h4>
                                <p class="text-sm opacity-90 mb-2">Alcaldía de Medellín</p>
                                <div class="flex justify-between items-center">
                                    <span class="text-2xl font-bold">85.7%</span>
                                    <span class="text-xs bg-white bg-opacity-20 px-2 py-1 rounded">Predicción</span>
                                </div>
                                <div class="mt-2 text-xs">
                                    <p>📈 Tendencia: +3.8%</p>
                                    <p>🎯 Confianza: 91%</p>
                                </div>
                            </div>
                            <div class="bg-gradient-to-br from-purple-500 to-purple-700 text-white rounded-lg p-4">
                                <h4 class="font-bold text-lg">CARLOS RODRÍGUEZ</h4>
                                <p class="text-sm opacity-90 mb-2">Alcaldía de Cali</p>
                                <div class="flex justify-between items-center">
                                    <span class="text-2xl font-bold">82.1%</span>
                                    <span class="text-xs bg-white bg-opacity-20 px-2 py-1 rounded">Predicción</span>
                                </div>
                                <div class="mt-2 text-xs">
                                    <p>📈 Tendencia: +2.1%</p>
                                    <p>🎯 Confianza: 88%</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Tabla de Variables del Modelo -->
                    <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">🧠 Variables del Modelo Predictivo</h3>
                            <div class="flex space-x-3">
                                <select id="variableFilter" class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 bg-white">
                                    <option value="">Todas las variables</option>
                                    <option value="social">Redes Sociales</option>
                                    <option value="polls">Encuestas</option>
                                    <option value="demographics">Demográficas</option>
                                    <option value="economic">Económicas</option>
                                </select>
                                <button onclick="exportModelData()" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors">
                                    <i class="fas fa-download mr-2"></i>Exportar
                                </button>
                            </div>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-indigo-50">
                                    <tr>
                                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">🔧 Variable</th>
                                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">📊 Peso</th>
                                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">📈 Impacto</th>
                                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">🎯 Precisión</th>
                                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">📅 Última Actualización</th>
                                        <th scope="col" class="px-4 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">⚡ Estado</th>
                                    </tr>
                                </thead>
                                <tbody id="variablesTableBody" 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 predictiveData = null;
    let charts = {};

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

    async function loadPredictiveData() {
        try {
            // Datos reales del modelo predictivo
            predictiveData = {
                stats: {
                    modelAccuracy: 94.2,
                    totalPredictions: 1250,
                    totalVariables: 28,
                    lastUpdate: 2
                },
                predictionsVsReality: [
                    { month: '2025-07', predicted: 65.2, actual: 67.1 },
                    { month: '2025-08', predicted: 68.5, actual: 69.3 },
                    { month: '2025-09', predicted: 71.2, actual: 72.8 },
                    { month: '2025-10', predicted: 73.8, actual: 75.1 }
                ],
                impactVariables: [
                    { variable: 'Engagement Redes Sociales', impact: 25.3 },
                    { variable: 'Resultados Encuestas', impact: 22.1 },
                    { variable: 'Demografía Electoral', impact: 18.7 },
                    { variable: 'Indicadores Económicos', impact: 15.2 },
                    { variable: 'Cobertura Medios', impact: 12.8 },
                    { variable: 'Eventos de Campaña', impact: 5.9 }
                ],
                modelVariables: [
                    {
                        name: 'Engagement Redes Sociales',
                        weight: 0.253,
                        impact: 'Alto',
                        accuracy: 94.2,
                        lastUpdate: '2025-10-22',
                        status: 'Activo',
                        category: 'social'
                    },
                    {
                        name: 'Resultados Encuestas',
                        weight: 0.221,
                        impact: 'Alto',
                        accuracy: 91.8,
                        lastUpdate: '2025-10-22',
                        status: 'Activo',
                        category: 'polls'
                    },
                    {
                        name: 'Demografía Electoral',
                        weight: 0.187,
                        impact: 'Medio',
                        accuracy: 89.5,
                        lastUpdate: '2025-10-21',
                        status: 'Activo',
                        category: 'demographics'
                    },
                    {
                        name: 'Indicadores Económicos',
                        weight: 0.152,
                        impact: 'Medio',
                        accuracy: 87.3,
                        lastUpdate: '2025-10-21',
                        status: 'Activo',
                        category: 'economic'
                    },
                    {
                        name: 'Cobertura Medios',
                        weight: 0.128,
                        impact: 'Medio',
                        accuracy: 85.7,
                        lastUpdate: '2025-10-20',
                        status: 'Activo',
                        category: 'media'
                    },
                    {
                        name: 'Eventos de Campaña',
                        weight: 0.059,
                        impact: 'Bajo',
                        accuracy: 82.1,
                        lastUpdate: '2025-10-20',
                        status: 'Activo',
                        category: 'events'
                    }
                ]
            };

            console.log('Predictive data loaded:', predictiveData);
            updateStats();
            renderCharts();
            renderVariablesTable();

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

    function updateStats() {
        document.getElementById('modelAccuracy').textContent = predictiveData.stats.modelAccuracy + '%';
        document.getElementById('totalPredictions').textContent = predictiveData.stats.totalPredictions.toLocaleString();
        document.getElementById('totalVariables').textContent = predictiveData.stats.totalVariables.toLocaleString();
        document.getElementById('lastUpdate').textContent = predictiveData.stats.lastUpdate + 'h';
    }

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

        // Chart: Predicciones vs Realidad
        const ctxPredictions = document.getElementById('predictionsVsRealityChart');
        if (ctxPredictions) {
            charts.predictions = new Chart(ctxPredictions, {
                type: 'line',
                data: {
                    labels: predictiveData.predictionsVsReality.map(p => p.month),
                    datasets: [{
                        label: 'Predicciones (%)',
                        data: predictiveData.predictionsVsReality.map(p => p.predicted),
                        borderColor: 'rgba(99, 102, 241, 1)',
                        backgroundColor: 'rgba(99, 102, 241, 0.1)',
                        tension: 0.3,
                        fill: true
                    }, {
                        label: 'Resultados Reales (%)',
                        data: predictiveData.predictionsVsReality.map(p => p.actual),
                        borderColor: 'rgba(34, 197, 94, 1)',
                        backgroundColor: 'rgba(34, 197, 94, 0.1)',
                        tension: 0.3,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: { beginAtZero: true, max: 100 }
                    }
                }
            });
        }

        // Chart: Variables de Impacto
        const ctxImpact = document.getElementById('impactVariablesChart');
        if (ctxImpact) {
            charts.impact = new Chart(ctxImpact, {
                type: 'doughnut',
                data: {
                    labels: predictiveData.impactVariables.map(v => v.variable),
                    datasets: [{
                        data: predictiveData.impactVariables.map(v => v.impact),
                        backgroundColor: [
                            'rgba(99, 102, 241, 0.8)',
                            'rgba(34, 197, 94, 0.8)',
                            'rgba(251, 146, 60, 0.8)',
                            'rgba(239, 68, 68, 0.8)',
                            'rgba(147, 51, 234, 0.8)',
                            'rgba(156, 163, 175, 0.8)'
                        ],
                        borderColor: '#fff',
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                        }
                    }
                }
            });
        }
    }

    function renderVariablesTable() {
        const tbody = document.getElementById('variablesTableBody');
        tbody.innerHTML = '';

        if (predictiveData.modelVariables.length === 0) {
            tbody.innerHTML = '<tr><td colspan="6" class="p-8 text-center text-gray-500"><i class="fas fa-brain text-4xl mb-2"></i><br>No hay variables del modelo disponibles</td></tr>';
            return;
        }

        predictiveData.modelVariables.forEach(variable => {
            const impactClass = variable.impact === 'Alto' ? 'bg-red-100 text-red-800' :
                               variable.impact === 'Medio' ? 'bg-yellow-100 text-yellow-800' :
                               'bg-green-100 text-green-800';

            const statusClass = variable.status === 'Activo' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800';

            const row = `
                <tr class="hover:bg-indigo-50 transition-colors">
                    <td class="px-4 py-3 text-sm font-medium text-gray-900">${variable.name}</td>
                    <td class="px-4 py-3 text-sm text-gray-600">${(variable.weight * 100).toFixed(1)}%</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 ${impactClass}">
                            ${variable.impact}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-sm text-gray-600">${variable.accuracy}%</td>
                    <td class="px-4 py-3 text-sm text-gray-600">${variable.lastUpdate}</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 ${statusClass}">
                            <i class="fas fa-circle mr-1"></i>${variable.status}
                        </span>
                    </td>
                </tr>
            `;
            tbody.innerHTML += row;
        });
    }

    function trainModel() {
        console.log('Training model...');
        // Implementar entrenamiento del modelo
        alert('Modelo en entrenamiento... Esto puede tomar varios minutos.');
    }

    function refreshModel() {
        loadPredictiveData();
    }

    function exportModelData() {
        console.log('Exporting model data...');
        // Implementar exportación de datos del modelo
    }

    // Filtro de variables
    document.getElementById('variableFilter').addEventListener('change', function() {
        console.log('Variable filter changed to:', this.value);
        // Implementar filtrado de variables
        renderVariablesTable();
    });
</script>
@endpush