@extends('layouts.goberdata')

@section('title', 'Popularity Stats')
@section('page_title', 'Popularity Stats')
@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')
<!-- Header -->
    <div class="gd-header text-white p-6 shadow-lg">
        <div class="container mx-auto max-w-7xl flex justify-between items-center">
            <div>
                <h1 class="text-3xl font-bold">📊 Popularity Stats</h1>
                <p class="text-sm opacity-90">Encuestas, métricas y análisis de popularidad</p>
            </div>
            <a href="javascript:void(0)" onclick="redirectHome()" class="bg-white text-pink-600 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100">
                ← Volver
            </a>
        </div>
    </div>

    <div class="container mx-auto max-w-7xl p-6">

        <!-- Resultado Principal -->
        <div class="gd-header text-white p-8 rounded-xl shadow-2xl mb-6">
            <div class="text-center">
                <p class="text-xl mb-2">TU INTENCIÓN DE VOTO ACTUAL</p>
                <p class="text-8xl font-bold mb-4">34.2%</p>
                <p class="text-2xl font-semibold">🥇 PRIMER LUGAR</p>
                <p class="text-sm opacity-90 mt-3">Basado en encuesta del 20 de febrero (muestra: 1,200 personas)</p>
            </div>
        </div>

        <!-- Comparativa -->
        <div class="bg-white p-6 rounded-lg shadow mb-6">
            <h3 class="text-xl font-bold text-gray-800 mb-4">📊 Intención de Voto - Comparativa</h3>
            <div style="height: 300px;">
                <canvas id="voteIntentionChart"></canvas>
            </div>
        </div>

        <!-- Evolución -->
        <div class="bg-white p-6 rounded-lg shadow mb-6">
            <h3 class="text-xl font-bold text-gray-800 mb-4">📈 Evolución de Popularidad (6 meses)</h3>
            <div style="height: 250px;">
                <canvas id="trendChart"></canvas>
            </div>
        </div>

        <!-- Score Compuesto -->
        <div class="grid grid-cols-3 gap-6 mb-6">
            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="text-lg font-bold text-gray-800 mb-4">💯 Score Compuesto</h3>
                <div class="text-center">
                    <p class="text-6xl font-bold text-green-600">72.5</p>
                    <p class="text-sm text-gray-600 mt-2">de 100</p>
                    <div class="w-full bg-gray-200 rounded-full h-3 mt-4">
                        <div class="bg-green-500 h-3 rounded-full" style="width: 72.5%"></div>
                    </div>
                </div>
            </div>

            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="text-lg font-bold text-gray-800 mb-4">🎯 Posición</h3>
                <div class="text-center">
                    <p class="text-6xl font-bold text-blue-600">1º</p>
                    <p class="text-sm text-gray-600 mt-2">de 5 candidatos</p>
                    <p class="text-xs text-green-600 font-semibold mt-2">+5.7 pts vs 2º lugar</p>
                </div>
            </div>

            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="text-lg font-bold text-gray-800 mb-4">📊 Tendencia</h3>
                <div class="text-center">
                    <p class="text-6xl font-bold text-green-600">↗️</p>
                    <p class="text-sm text-gray-600 mt-2">En ascenso</p>
                    <p class="text-xs text-green-600 font-semibold mt-2">+3.2% vs mes anterior</p>
                </div>
            </div>
        </div>

        <!-- Prioridades Ciudadanas -->
        <div class="bg-white p-6 rounded-lg shadow mb-6">
            <h3 class="text-xl font-bold text-gray-800 mb-4">🎯 Prioridades de los Ciudadanos</h3>
            <div class="space-y-3">
                <div>
                    <div class="flex justify-between mb-1">
                        <span class="font-semibold">Seguridad</span>
                        <span class="text-gray-600">85.3%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-3">
                        <div class="bg-red-500 h-3 rounded-full" style="width: 85.3%"></div>
                    </div>
                </div>
                <div>
                    <div class="flex justify-between mb-1">
                        <span class="font-semibold">Educación</span>
                        <span class="text-gray-600">78.2%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-3">
                        <div class="bg-blue-500 h-3 rounded-full" style="width: 78.2%"></div>
                    </div>
                </div>
                <div>
                    <div class="flex justify-between mb-1">
                        <span class="font-semibold">Empleo</span>
                        <span class="text-gray-600">72.5%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-3">
                        <div class="bg-green-500 h-3 rounded-full" style="width: 72.5%"></div>
                    </div>
                </div>
                <div>
                    <div class="flex justify-between mb-1">
                        <span class="font-semibold">Salud</span>
                        <span class="text-gray-600">68.9%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-3">
                        <div class="bg-purple-500 h-3 rounded-full" style="width: 68.9%"></div>
                    </div>
                </div>
                <div>
                    <div class="flex justify-between mb-1">
                        <span class="font-semibold">Infraestructura</span>
                        <span class="text-gray-600">55.4%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-3">
                        <div class="bg-orange-500 h-3 rounded-full" style="width: 55.4%"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- SWOT -->
        <div class="grid grid-cols-2 gap-6">
            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="text-lg font-bold text-green-600 mb-3">💪 Fortalezas</h3>
                <ul class="space-y-2 text-sm">
                    <li class="flex items-start">
                        <span class="text-green-500 mr-2">✓</span>
                        <span>Alta credibilidad en temas de educación</span>
                    </li>
                    <li class="flex items-start">
                        <span class="text-green-500 mr-2">✓</span>
                        <span>Propuestas concretas y viables</span>
                    </li>
                    <li class="flex items-start">
                        <span class="text-green-500 mr-2">✓</span>
                        <span>Experiencia en gestión pública</span>
                    </li>
                </ul>
            </div>

            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="text-lg font-bold text-orange-600 mb-3">⚠️ Áreas de Mejora</h3>
                <ul class="space-y-2 text-sm">
                    <li class="flex items-start">
                        <span class="text-orange-500 mr-2">!</span>
                        <span>Aumentar presencia en redes sociales</span>
                    </li>
                    <li class="flex items-start">
                        <span class="text-orange-500 mr-2">!</span>
                        <span>Fortalecer mensaje en seguridad</span>
                    </li>
                    <li class="flex items-start">
                        <span class="text-orange-500 mr-2">!</span>
                        <span>Mayor visibilidad en zona rural</span>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Info -->
        <div class="mt-6 bg-blue-50 border-l-4 border-blue-500 p-4">
            <p class="text-sm text-blue-800">
                <strong>💡 Nota DEMO</strong>: Datos de ejemplo basados en encuestas simuladas.
                Registra tus encuestas reales para ver análisis precisos.
            </p>
        </div>
    </div>
@endsection

@push('scripts')
<script>
        function redirectHome() {
            try {
                const user = JSON.parse(localStorage.getItem('user') || '{}');
                const roles = user.roles || (user.role ? [user.role] : []);
                if (roles.includes('admin') || roles.includes('candidate')) {
                    window.location.href = '/admin/dashboard';
                } else if (roles.includes('coordinator')) {
                    window.location.href = '/dashboard';
                } else {
                    window.location.href = '/volunteer/dashboard';
                }
            } catch (_) {
                window.location.href = '/login';
            }
        }
        // Vote Intention Chart
        const voteCtx = document.getElementById('voteIntentionChart').getContext('2d');
        new Chart(voteCtx, {
            type: 'bar',
            data: {
                labels: ['Tú', 'Competidor A', 'Competidor B', 'Competidor C', 'Indecisos'],
                datasets: [{
                    data: [34.2, 28.5, 22.1, 8.7, 6.5],
                    backgroundColor: ['#22c55e', '#f59e0b', '#f59e0b', '#ef4444', '#9ca3af'],
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: (context) => context.parsed.y + '%'
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 40,
                        ticks: {
                            callback: (value) => value + '%'
                        }
                    }
                }
            }
        });

        // Trend Chart con tamaño controlado
        const trendCtx = document.getElementById('trendChart').getContext('2d');
        new Chart(trendCtx, {
            type: 'line',
            data: {
                labels: ['Sep', 'Oct', 'Nov', 'Dic', 'Ene', 'Feb'],
                datasets: [
                    {
                        label: 'Tú',
                        data: [22.5, 25.8, 28.3, 30.1, 32.4, 34.2],
                        borderColor: '#22c55e',
                        backgroundColor: 'rgba(34, 197, 94, 0.1)',
                        fill: true,
                        tension: 0.4
                    },
                    {
                        label: 'Competidor A',
                        data: [28.2, 27.8, 28.5, 28.9, 28.2, 28.5],
                        borderColor: '#f59e0b',
                        backgroundColor: 'rgba(245, 158, 11, 0.1)',
                        fill: true,
                        tension: 0.4
                    },
                    {
                        label: 'Competidor B',
                        data: [25.1, 24.3, 23.8, 23.2, 22.5, 22.1],
                        borderColor: '#ef4444',
                        backgroundColor: 'rgba(239, 68, 68, 0.1)',
                        fill: true,
                        tension: 0.4
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 40,
                        ticks: {
                            callback: (value) => value + '%'
                        }
                    }
                }
            }
        });
    </script>
@endpush