@extends('layouts.goberdata')

@section('title', 'GOTV')
@section('page_title', 'GOTV')
@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">🗳️ GOTV - Día de Elección</h1>
                <p class="text-lg font-semibold" id="currentTime"></p>
            </div>
            <a href="javascript:void(0)" onclick="redirectHome()" class="bg-white text-red-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">

        <!-- Proyección en Vivo -->
        <div class="gd-header text-white p-8 rounded-xl shadow-2xl mb-6">
            <div class="text-center">
                <p class="text-xl mb-2">PROYECCIÓN ACTUAL</p>
                <p class="text-7xl font-bold mb-4">54.0%</p>
                <p class="text-2xl font-semibold bg-white bg-opacity-20 inline-block px-6 py-2 rounded-lg">
                    🏆 VICTORIA PROYECTADA
                </p>
                <p class="text-sm opacity-75 mt-4">Basado en 45/150 mesas reportadas (30%)</p>
            </div>
        </div>

        <!-- KPIs Principales -->
        <div class="grid grid-cols-6 gap-4 mb-6">
            <div class="bg-white p-4 rounded-lg shadow text-center">
                <p class="text-xs text-gray-600">Mesas</p>
                <p class="text-3xl font-bold text-blue-600">150</p>
                <p class="text-xs text-gray-500">totales</p>
            </div>
            <div class="bg-white p-4 rounded-lg shadow text-center">
                <p class="text-xs text-gray-600">Reportadas</p>
                <p class="text-3xl font-bold text-green-600">45</p>
                <p class="text-xs text-green-600">30%</p>
            </div>
            <div class="bg-white p-4 rounded-lg shadow text-center">
                <p class="text-xs text-gray-600">Afluencia</p>
                <p class="text-3xl font-bold text-purple-600">58%</p>
                <p class="text-xs text-gray-500">general</p>
            </div>
            <div class="bg-white p-4 rounded-lg shadow text-center">
                <p class="text-xs text-gray-600">Nuestra</p>
                <p class="text-3xl font-bold text-green-600">73%</p>
                <p class="text-xs text-green-600">+15%</p>
            </div>
            <div class="bg-white p-4 rounded-lg shadow text-center">
                <p class="text-xs text-gray-600">Movilizados</p>
                <p class="text-3xl font-bold text-orange-600">180</p>
                <p class="text-xs text-gray-500">/480</p>
            </div>
            <div class="bg-white p-4 rounded-lg shadow text-center">
                <p class="text-xs text-gray-600">Incidentes</p>
                <p class="text-3xl font-bold text-red-600">3</p>
                <p class="text-xs text-gray-500">activos</p>
            </div>
        </div>

        <!-- Mesas Críticas -->
        <div class="grid grid-cols-2 gap-6 mb-6">
            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="text-xl font-bold text-red-600 mb-4">⚠️ Mesas que Requieren Acción</h3>
                <div class="space-y-3">
                    <div class="border-l-4 border-red-500 pl-4 bg-red-50 p-3 rounded">
                        <div class="flex justify-between">
                            <div>
                                <p class="font-bold">Mesa E001M023</p>
                                <p class="text-sm text-gray-600">Colegio Central</p>
                                <p class="text-sm mt-1">Afluencia: <span class="font-bold text-red-600">32%</span> (esperado: 55%)</p>
                            </div>
                            <button class="bg-red-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-red-700">
                                Enviar Brigada
                            </button>
                        </div>
                    </div>
                    <div class="border-l-4 border-yellow-500 pl-4 bg-yellow-50 p-3 rounded">
                        <div class="flex justify-between">
                            <div>
                                <p class="font-bold">Mesa E002M045</p>
                                <p class="text-sm text-gray-600">Escuela Norte</p>
                                <p class="text-sm mt-1">Afluencia: <span class="font-bold text-yellow-600">48%</span></p>
                            </div>
                            <button class="bg-yellow-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-yellow-700">
                                Monitorear
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bg-white p-6 rounded-lg shadow">
                <h3 class="text-xl font-bold text-green-600 mb-4">✅ Mesas con Buen Desempeño</h3>
                <div class="space-y-2">
                    <div class="flex justify-between items-center p-2 bg-green-50 rounded">
                        <span class="font-semibold">Mesa E001M001</span>
                        <span class="text-green-600 font-bold">82% afluencia</span>
                    </div>
                    <div class="flex justify-between items-center p-2 bg-green-50 rounded">
                        <span class="font-semibold">Mesa E001M015</span>
                        <span class="text-green-600 font-bold">78% afluencia</span>
                    </div>
                    <div class="flex justify-between items-center p-2 bg-green-50 rounded">
                        <span class="font-semibold">Mesa E003M008</span>
                        <span class="text-green-600 font-bold">75% afluencia</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Actividad en Tiempo Real -->
        <div class="bg-white p-6 rounded-lg shadow">
            <h3 class="text-xl font-bold text-gray-800 mb-4">⚡ Actividad en Tiempo Real</h3>
            <div class="space-y-2" id="activityFeed">
                <div class="flex items-center space-x-3 p-3 bg-green-50 rounded">
                    <span class="text-xl">✅</span>
                    <div class="flex-1">
                        <p class="text-sm font-semibold">Voto confirmado - Mesa E001M001</p>
                        <p class="text-xs text-gray-600">Brigada Norte reportó</p>
                    </div>
                    <span class="text-xs text-gray-500">14:32</span>
                </div>
                <div class="flex items-center space-x-3 p-3 bg-blue-50 rounded">
                    <span class="text-xl">🚗</span>
                    <div class="flex-1">
                        <p class="text-sm font-semibold">Transporte proporcionado - 5 personas</p>
                        <p class="text-xs text-gray-600">Brigada Sur</p>
                    </div>
                    <span class="text-xs text-gray-500">14:30</span>
                </div>
                <div class="flex items-center space-x-3 p-3 bg-yellow-50 rounded">
                    <span class="text-xl">📞</span>
                    <div class="flex-1">
                        <p class="text-sm font-semibold">Llamada de seguimiento - Mesa E002M023</p>
                        <p class="text-xs text-gray-600">Voluntario: Carlos</p>
                    </div>
                    <span class="text-xs text-gray-500">14:28</span>
                </div>
            </div>
        </div>

        <!-- Info -->
        <div class="mt-6 bg-blue-900 text-white p-4 rounded-lg">
            <p class="text-sm">
                <strong>💡 Vista DEMO</strong>: Simulación de día de elección.
                En producción se actualiza automáticamente cada 30 segundos con datos reales de testigos.
            </p>
        </div>
    </div>
@endsection

@push('scripts')
<script>
        // Update time
        function updateTime() {
            document.getElementById('currentTime').textContent = new Date().toLocaleString('es-CO', {
                weekday: 'long',
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });
        }
        updateTime();
        setInterval(updateTime, 1000);

        // Funnel Chart
        const funnelCtx = document.getElementById('funnelChart').getContext('2d');
        new Chart(funnelCtx, {
            type: 'bar',
            data: {
                labels: ['Enviados', 'Entregados', 'Abiertos', 'Clicks'],
                datasets: [{
                    data: [1250, 1180, 590, 125],
                    backgroundColor: ['#3b82f6', '#22c55e', '#f59e0b', '#ef4444'],
                }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: { legend: { display: false } }
            }
        });

        // Opens Chart
        const opensCtx = document.getElementById('opensChart').getContext('2d');
        new Chart(opensCtx, {
            type: 'line',
            data: {
                labels: Array.from({length: 30}, (_, i) => `Día ${i + 1}`),
                datasets: [{
                    label: 'Emails Abiertos',
                    data: [12,18,15,22,28,25,30,27,32,35,38,42,45,40,38,42,48,52,50,55,58,60,62,58,55,60,65,68,70,72],
                    borderColor: '#8b5cf6',
                    backgroundColor: 'rgba(139, 92, 246, 0.1)',
                    fill: true,
                    tension: 0.4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: { y: { beginAtZero: true } }
            }
        });

        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';
            }
        }
    </script>
@endpush