@extends('layouts.goberdata')

@section('title', 'Modelo Predictivo IA')
@section('page_title', 'Modelo Predictivo IA')
@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')
<!-- Top Bar -->
    <div class="gd-header text-white p-4 shadow-lg">
        <div class="container mx-auto flex justify-between items-center">
            <div class="flex items-center space-x-4">
                <h1 class="text-2xl font-bold">🤖 Modelo Predictivo IA</h1>
                <span id="campaignName" class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm"></span>
            </div>
            <div class="flex items-center space-x-4">
                <button onclick="recalculate()" class="bg-white text-yellow-600 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100">
                    <i class="fas fa-sync-alt"></i> Recalcular
                </button>
                <button onclick="window.location.href='/admin/dashboard'" class="bg-white bg-opacity-20 px-4 py-2 rounded-lg font-semibold hover:bg-opacity-30">
                    <i class="fas fa-arrow-left"></i> Volver
                </button>
            </div>
        </div>
    </div>

    <div class="container mx-auto px-4 py-8">

        <!-- Predicción Principal -->
        <div id="mainPrediction" class="gd-header text-white rounded-xl shadow-2xl p-8 mb-8">
            <div class="grid md:grid-cols-2 gap-8">
                <div>
                    <h2 class="text-3xl font-bold mb-6">📊 Probabilidad de Victoria</h2>
                    <div class="bg-white bg-opacity-20 rounded-xl p-6 mb-4">
                        <p class="text-sm opacity-90 mb-2">TU CANDIDATO</p>
                        <div class="flex items-baseline gap-3">
                            <div id="winProbability" class="text-7xl font-bold">0%</div>
                            <div id="confidence" class="text-2xl opacity-80"></div>
                        </div>
                    </div>
                    <div class="grid grid-cols-3 gap-3 text-sm">
                        <div class="bg-white bg-opacity-10 rounded-lg p-3">
                            <p class="opacity-75">Escenario Optimista</p>
                            <p id="optimistic" class="text-2xl font-bold">0%</p>
                        </div>
                        <div class="bg-white bg-opacity-10 rounded-lg p-3">
                            <p class="opacity-75">Escenario Base</p>
                            <p id="base" class="text-2xl font-bold">0%</p>
                        </div>
                        <div class="bg-white bg-opacity-10 rounded-lg p-3">
                            <p class="opacity-75">Escenario Pesimista</p>
                            <p id="pessimistic" class="text-2xl font-bold">0%</p>
                        </div>
                    </div>
                </div>
                <div class="flex items-center justify-center">
                    <canvas id="predictionChart" width="300" height="300"></canvas>
                </div>
            </div>
        </div>

        <!-- Métricas del Modelo -->
        <div class="grid md:grid-cols-4 gap-6 mb-8">
            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between mb-2">
                    <p class="text-gray-500 text-sm font-semibold">Precisión del Modelo</p>
                    <i class="fas fa-bullseye text-2xl text-green-600"></i>
                </div>
                <p id="accuracy" class="text-3xl font-bold text-green-600">0%</p>
                <p class="text-xs text-gray-500 mt-1">Basado en históricos</p>
            </div>

            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between mb-2">
                    <p class="text-gray-500 text-sm font-semibold">Datos Analizados</p>
                    <i class="fas fa-database text-2xl text-blue-600"></i>
                </div>
                <p id="dataPoints" class="text-3xl font-bold text-blue-600">0</p>
                <p class="text-xs text-gray-500 mt-1">Puntos de datos</p>
            </div>

            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between mb-2">
                    <p class="text-gray-500 text-sm font-semibold">Última Actualización</p>
                    <i class="fas fa-clock text-2xl text-purple-600"></i>
                </div>
                <p id="lastUpdate" class="text-sm font-bold text-purple-600">Nunca</p>
                <p class="text-xs text-gray-500 mt-1">Modelo v2.1</p>
            </div>

            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between mb-2">
                    <p class="text-gray-500 text-sm font-semibold">Margen de Error</p>
                    <i class="fas fa-chart-line text-2xl text-orange-600"></i>
                </div>
                <p id="marginError" class="text-3xl font-bold text-orange-600">±0%</p>
                <p class="text-xs text-gray-500 mt-1">95% confianza</p>
            </div>
        </div>

        <!-- Factores Influyentes -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
            <h3 class="text-2xl font-bold mb-6"><i class="fas fa-brain text-yellow-600"></i> Factores que Influyen en la Predicción</h3>
            <div id="factorsList" class="space-y-4">
                <!-- Se llenará dinámicamente -->
            </div>
        </div>

        <!-- Simulaciones -->
        <div class="bg-white rounded-xl shadow-lg p-6">
            <h3 class="text-2xl font-bold mb-6"><i class="fas fa-flask text-orange-600"></i> Simulaciones de Escenarios</h3>
            <div class="grid md:grid-cols-2 gap-6">
                <div>
                    <h4 class="font-bold mb-4">📈 Proyección Temporal</h4>
                    <canvas id="timelineChart"></canvas>
                </div>
                <div>
                    <h4 class="font-bold mb-4">🎲 Distribución de Probabilidades</h4>
                    <canvas id="distributionChart"></canvas>
                </div>
            </div>
        </div>
    </div>

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

@push('scripts')
<script>
        let prediction = null;

        const token = localStorage.getItem('auth_token');
        if (!token) {
            window.location.href = '/login';
        }

        (async () => {
            await loadCampaignInfo();
            await loadPrediction();
        })();

        async function loadCampaignInfo() {
            try {
                const response = await fetch('/api/campaigns', {
                    headers: { 'Authorization': `Bearer ${token}` }
                });
                if (response.ok) {
                    const data = await response.json();
                    const currentCampaign = data.current_campaign;
                    if (currentCampaign) {
                        document.getElementById('campaignName').textContent = currentCampaign.name;
                    }
                }
            } catch (err) {
                console.error('Error loading campaign:', err);
            }
        }

        async function loadPrediction() {
            try {
                const response = await fetch('/api/predictive/current', {
                    headers: { 'Authorization': `Bearer ${token}` }
                });

                if (response.ok) {
                    prediction = await response.json();
                    renderPrediction();
                } else {
                    showToast('No hay suficientes datos para generar predicción', 'warning');
                }
            } catch (err) {
                console.error('Error loading prediction:', err);
                showToast('Error al cargar predicción', 'error');
            }
        }

        function renderPrediction() {
            if (!prediction) return;

            // Probabilidad principal
            document.getElementById('winProbability').textContent = Math.round(prediction.win_probability) + '%';
            document.getElementById('confidence').textContent = `(${prediction.confidence_level}%)`;
            document.getElementById('optimistic').textContent = Math.round(prediction.scenarios?.optimistic || 0) + '%';
            document.getElementById('base').textContent = Math.round(prediction.scenarios?.base || 0) + '%';
            document.getElementById('pessimistic').textContent = Math.round(prediction.scenarios?.pessimistic || 0) + '%';

            // Métricas
            document.getElementById('accuracy').textContent = Math.round(prediction.model_accuracy || 85) + '%';
            document.getElementById('dataPoints').textContent = prediction.data_points || 0;
            document.getElementById('lastUpdate').textContent = new Date(prediction.updated_at || Date.now()).toLocaleString('es-ES');
            document.getElementById('marginError').textContent = '±' + (prediction.margin_of_error || 3) + '%';

            // Gráfico principal
            const ctx = document.getElementById('predictionChart');
            if (ctx) {
                new Chart(ctx, {
                    type: 'doughnut',
                    data: {
                        labels: ['Probabilidad de Victoria', 'Otros Resultados'],
                        datasets: [{
                            data: [prediction.win_probability, 100 - prediction.win_probability],
                            backgroundColor: ['#f59e0b', '#e5e7eb']
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: false
                            }
                        }
                    }
                });
            }

            // Factores influyentes
            renderFactors();
            renderCharts();
        }

        function renderFactors() {
            const container = document.getElementById('factorsList');
            const factors = prediction.factors || [
                { name: 'Encuestas Recientes', impact: 35, trend: 'positive' },
                { name: 'Engagement en Redes', impact: 25, trend: 'positive' },
                { name: 'Sentimiento Público', impact: 20, trend: 'neutral' },
                { name: 'Cobertura Mediática', impact: 15, trend: 'positive' },
                { name: 'Eventos Recientes', impact: 5, trend: 'neutral' }
            ];

            container.innerHTML = factors.map(f => {
                const trendIcon = {
                    positive: '<i class="fas fa-arrow-up text-green-600"></i>',
                    neutral: '<i class="fas fa-minus text-yellow-600"></i>',
                    negative: '<i class="fas fa-arrow-down text-red-600"></i>'
                }[f.trend] || '';

                return `
                    <div class="flex items-center gap-4">
                        <div class="w-48 font-semibold">${f.name}</div>
                        <div class="flex-1 bg-gray-200 rounded-full h-4 relative overflow-hidden">
                            <div class="bg-yellow-500 h-full rounded-full" style="width: ${f.impact}%"></div>
                        </div>
                        <div class="w-16 text-right font-bold">${f.impact}%</div>
                        <div class="w-8">${trendIcon}</div>
                    </div>
                `;
            }).join('');
        }

        function renderCharts() {
            // Timeline
            const timelineCtx = document.getElementById('timelineChart');
            if (timelineCtx && prediction.timeline) {
                new Chart(timelineCtx, {
                    type: 'line',
                    data: {
                        labels: prediction.timeline.map(t => t.date),
                        datasets: [{
                            label: 'Probabilidad Proyectada',
                            data: prediction.timeline.map(t => t.probability),
                            borderColor: '#f59e0b',
                            backgroundColor: 'rgba(245, 158, 11, 0.1)',
                            fill: true
                        }]
                    }
                });
            }

            // Distribution
            const distributionCtx = document.getElementById('distributionChart');
            if (distributionCtx) {
                new Chart(distributionCtx, {
                    type: 'bar',
                    data: {
                        labels: ['0-20%', '21-40%', '41-60%', '61-80%', '81-100%'],
                        datasets: [{
                            label: 'Simulaciones',
                            data: [5, 15, 30, 35, 15],
                            backgroundColor: '#f59e0b'
                        }]
                    }
                });
            }
        }

        async function recalculate() {
            showToast('Recalculando predicción...', 'info');

            try {
                const response = await fetch('/api/predictive/recalculate', {
                    method: 'POST',
                    headers: { 'Authorization': `Bearer ${token}` }
                });

                if (response.ok) {
                    showToast('Predicción actualizada', 'success');
                    await loadPrediction();
                } else {
                    showToast('Error al recalcular', 'error');
                }
            } catch (err) {
                showToast('Error de red', 'error');
            }
        }

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

            const toast = document.createElement('div');
            toast.className = `${colors[type]} text-white shadow-xl rounded-xl px-4 py-3 flex items-center gap-3 transform transition-all duration-300 translate-x-full opacity-0`;
            toast.innerHTML = `
                <i class="fas ${icons[type]} text-xl"></i>
                <div class="text-sm">${message}</div>
            `;
            container.appendChild(toast);

            setTimeout(() => {
                toast.classList.remove('translate-x-full', 'opacity-0');
            }, 100);

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