@extends('layouts.goberdata')

@section('title', 'Encuestas de Popularidad')
@section('page_title', 'Encuestas de Popularidad')
@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">📊 Encuestas de Popularidad</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="openCreatePollModal()" class="bg-white text-purple-600 px-4 py-2 rounded-lg font-semibold hover:bg-gray-100">
                    <i class="fas fa-plus"></i> Nueva Encuesta
                </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-fluid px-3 py-3">

        <!-- Resumen de Última Encuesta -->
        <div id="latestPollSection" class="hidden gd-header text-white rounded-xl shadow-lg p-8 mb-8">
            <div class="grid md:grid-cols-3 gap-6">
                <div class="md:col-span-2">
                    <h2 class="text-3xl font-bold mb-4">📈 Última Encuesta</h2>
                    <p id="latestPollName" class="text-xl mb-2"></p>
                    <p id="latestPollDate" class="text-sm opacity-90"></p>
                    <div class="mt-4">
                        <p class="text-sm mb-2">TU CANDIDATO</p>
                        <div class="flex items-center gap-3">
                            <div class="text-6xl font-bold" id="latestYourScore">0%</div>
                            <div id="latestTrend" class="text-3xl"></div>
                        </div>
                    </div>
                </div>
                <div class="flex items-center justify-center">
                    <canvas id="latestPollChart" width="200" height="200"></canvas>
                </div>
            </div>
        </div>

        <!-- Tabs -->
        <div class="bg-white rounded-xl shadow-lg mb-6">
            <div class="flex border-b">
                <button onclick="switchTab('polls')" id="tabPolls" class="tab-btn flex-1 px-6 py-4 font-semibold text-purple-600 border-b-2 border-purple-600">
                    <i class="fas fa-poll"></i> Encuestas
                </button>
                <button onclick="switchTab('trends')" id="tabTrends" class="tab-btn flex-1 px-6 py-4 font-semibold text-gray-500 hover:text-purple-600">
                    <i class="fas fa-chart-line"></i> Tendencias
                </button>
                <button onclick="switchTab('comparison')" id="tabComparison" class="tab-btn flex-1 px-6 py-4 font-semibold text-gray-500 hover:text-purple-600">
                    <i class="fas fa-balance-scale"></i> Comparación
                </button>
            </div>

            <!-- Tab: Encuestas -->
            <div id="contentPolls" class="p-6">
                <div id="pollsList" class="space-y-4">
                    <!-- Se llenará dinámicamente -->
                </div>

                <div id="pollsEmpty" class="hidden text-center py-16">
                    <div class="text-6xl mb-4">📊</div>
                    <h3 class="text-2xl font-bold text-gray-700 mb-2">No hay encuestas registradas</h3>
                    <p class="text-gray-500 mb-6">Crea tu primera encuesta para monitorear la popularidad</p>
                    <button onclick="openCreatePollModal()" class="bg-purple-600 text-white px-8 py-3 rounded-lg font-bold hover:bg-purple-700">
                        <i class="fas fa-plus"></i> Crear Primera Encuesta
                    </button>
                </div>
            </div>

            <!-- Tab: Tendencias -->
            <div id="contentTrends" class="hidden p-6">
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="bg-white border rounded-lg p-4">
                        <h3 class="font-bold mb-4">Evolución Temporal</h3>
                        <canvas id="trendsChart"></canvas>
                    </div>
                    <div class="bg-white border rounded-lg p-4">
                        <h3 class="font-bold mb-4">Margen de Victoria</h3>
                        <canvas id="marginChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- Tab: Comparación -->
            <div id="contentComparison" class="hidden p-6">
                <div class="bg-white border rounded-lg p-4">
                    <h3 class="font-bold mb-4">Comparación entre Candidatos</h3>
                    <canvas id="comparisonChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal: Crear/Editar Encuesta -->
    <div id="pollModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-xl shadow-2xl max-w-4xl w-full max-h-[90vh] overflow-auto">
            <div class="px-6 py-4 border-b flex items-center justify-between bg-purple-50">
                <h3 id="modalTitle" class="text-2xl font-bold text-purple-800">
                    <i class="fas fa-poll"></i> Nueva Encuesta
                </h3>
                <button onclick="closeModal()" class="text-gray-500 hover:text-gray-700">
                    <i class="fas fa-times text-2xl"></i>
                </button>
            </div>

            <form id="pollForm" class="p-6">
                <!-- Información General -->
                <div class="mb-6">
                    <h4 class="text-lg font-bold mb-4 text-gray-800">📋 Información General</h4>
                    <div class="grid md:grid-cols-2 gap-4">
                        <div class="md:col-span-2">
                            <label class="block text-gray-700 font-semibold mb-2">Nombre de la Encuesta *</label>
                            <input type="text" id="pollName" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Ej: Encuesta Nacional Octubre 2025">
                        </div>
                        <div>
                            <label class="block text-gray-700 font-semibold mb-2">Fecha de la Encuesta *</label>
                            <input type="date" id="pollDate" required class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
                        </div>
                        <div>
                            <label class="block text-gray-700 font-semibold mb-2">Tamaño de Muestra</label>
                            <input type="number" id="sampleSize" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="1000">
                        </div>
                        <div>
                            <label class="block text-gray-700 font-semibold mb-2">Margen de Error (%)</label>
                            <input type="number" step="0.1" id="marginError" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="3.5">
                        </div>
                        <div>
                            <label class="block text-gray-700 font-semibold mb-2">Nivel de Confianza (%)</label>
                            <input type="number" step="0.1" id="confidenceLevel" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="95">
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-gray-700 font-semibold mb-2">Empresa Encuestadora</label>
                            <input type="text" id="pollOrganization" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Ej: Gallup Colombia">
                        </div>
                    </div>
                </div>

                <!-- Resultados por Candidato -->
                <div class="mb-6">
                    <h4 class="text-lg font-bold mb-4 text-gray-800">🎯 Resultados</h4>
                    <div id="candidateResultsContainer" class="space-y-3">
                        <!-- Se llenará dinámicamente con competidores -->
                    </div>
                </div>

                <div class="flex gap-3 mt-6">
                    <button type="button" onclick="closeModal()" class="flex-1 px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition">
                        Cancelar
                    </button>
                    <button type="submit" class="flex-1 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition font-bold">
                        <i class="fas fa-save"></i> Guardar Encuesta
                    </button>
                </div>
            </form>
        </div>
    </div>

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

@push('scripts')
<script>
        let currentTab = 'polls';
        let polls = [];
        let competitors = [];
        let editingPollId = null;

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

        (async () => {
            await loadCampaignInfo();
            await loadCompetitors();
            await loadPolls();
        })();

        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 loadCompetitors() {
            try {
                const response = await fetch('/api/social-monitoring/competitors', {
                    headers: { 'Authorization': `Bearer ${token}` }
                });

                if (response.ok) {
                    const data = await response.json();
                    competitors = data.data || [];
                }
            } catch (err) {
                console.error('Error loading competitors:', err);
            }
        }

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

                if (response.ok) {
                    const data = await response.json();
                    polls = data.data || [];
                    renderPolls();
                    renderLatestPoll();
                    renderTrends();
                    renderComparison();
                }
            } catch (err) {
                console.error('Error loading polls:', err);
            }
        }

        function renderPolls() {
            const container = document.getElementById('pollsList');
            const empty = document.getElementById('pollsEmpty');

            if (polls.length === 0) {
                container.classList.add('hidden');
                empty.classList.remove('hidden');
                return;
            }

            container.classList.remove('hidden');
            empty.classList.add('hidden');

            container.innerHTML = polls.map(poll => {
                const results = poll.results || [];
                const topResult = results.sort((a, b) => b.percentage - a.percentage)[0];

                return `
                    <div class="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition">
                        <div class="flex justify-between items-start mb-4">
                            <div>
                                <h3 class="text-xl font-bold text-gray-800">${poll.poll_name}</h3>
                                <p class="text-sm text-gray-500">
                                    ${new Date(poll.poll_date).toLocaleDateString('es-ES')}
                                    ${poll.organization ? `• ${poll.organization}` : ''}
                                    ${poll.sample_size ? `• n=${poll.sample_size}` : ''}
                                </p>
                            </div>
                            <div class="flex gap-2">
                                <button onclick="editPoll(${poll.id})" class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 text-sm">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button onclick="deletePoll(${poll.id})" class="px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600 text-sm">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>

                        <div class="space-y-2">
                            ${results.map(r => `
                                <div class="flex items-center gap-3">
                                    <div class="w-32 text-sm font-semibold truncate">${r.competitor?.name || 'N/A'}</div>
                                    <div class="flex-1 bg-gray-200 rounded-full h-6 relative overflow-hidden">
                                        <div class="bg-purple-600 h-full rounded-full transition-all duration-500" style="width: ${r.percentage}%"></div>
                                        <span class="absolute inset-0 flex items-center justify-center text-xs font-bold text-gray-700">
                                            ${r.percentage}%
                                        </span>
                                    </div>
                                </div>
                            `).join('')}
                        </div>
                    </div>
                `;
            }).join('');
        }

        function renderLatestPoll() {
            if (polls.length === 0) {
                document.getElementById('latestPollSection').classList.add('hidden');
                return;
            }

            const latest = polls[0];
            document.getElementById('latestPollSection').classList.remove('hidden');
            document.getElementById('latestPollName').textContent = latest.poll_name;
            document.getElementById('latestPollDate').textContent = new Date(latest.poll_date).toLocaleDateString('es-ES');

            const results = latest.results || [];
            const yourResult = results[0];
            if (yourResult) {
                document.getElementById('latestYourScore').textContent = yourResult.percentage + '%';
            }

            // Chart
            const ctx = document.getElementById('latestPollChart');
            if (ctx) {
                new Chart(ctx, {
                    type: 'doughnut',
                    data: {
                        labels: results.map(r => r.competitor?.name || 'N/A'),
                        datasets: [{
                            data: results.map(r => r.percentage),
                            backgroundColor: ['#9333ea', '#ec4899', '#f59e0b', '#3b82f6', '#10b981']
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false
                    }
                });
            }
        }

        function renderTrends() {
            // Implementar gráfico de tendencias
        }

        function renderComparison() {
            // Implementar gráfico de comparación
        }

        function openCreatePollModal() {
            editingPollId = null;
            document.getElementById('modalTitle').innerHTML = '<i class="fas fa-poll"></i> Nueva Encuesta';
            document.getElementById('pollForm').reset();
            document.getElementById('pollDate').valueAsDate = new Date();
            populateCandidateInputs();
            document.getElementById('pollModal').classList.remove('hidden');
        }

        function populateCandidateInputs() {
            const container = document.getElementById('candidateResultsContainer');
            container.innerHTML = competitors.map(c => `
                <div class="flex items-center gap-3 bg-gray-50 p-3 rounded-lg">
                    <div class="w-1/3">
                        <label class="font-semibold text-sm">${c.name}</label>
                    </div>
                    <div class="flex-1">
                        <input
                            type="number"
                            step="0.1"
                            min="0"
                            max="100"
                            data-competitor-id="${c.id}"
                            data-competitor-name="${c.name}"
                            class="candidate-percentage w-full px-3 py-2 border rounded focus:ring-2 focus:ring-purple-500"
                            placeholder="% Votación"
                        >
                    </div>
                </div>
            `).join('');
        }

        function closeModal() {
            document.getElementById('pollModal').classList.add('hidden');
        }

        document.getElementById('pollForm').addEventListener('submit', async (e) => {
            e.preventDefault();

            const results = [];
            document.querySelectorAll('.candidate-percentage').forEach(input => {
                if (input.value) {
                    results.push({
                        political_competitor_id: input.dataset.competitorId,
                        competitor_name: input.dataset.competitorName,
                        percentage: parseFloat(input.value)
                    });
                }
            });

            const data = {
                poll_name: document.getElementById('pollName').value,
                poll_date: document.getElementById('pollDate').value,
                sample_size: document.getElementById('sampleSize').value ? parseInt(document.getElementById('sampleSize').value) : null,
                margin_of_error: document.getElementById('marginError').value ? parseFloat(document.getElementById('marginError').value) : null,
                confidence_level: document.getElementById('confidenceLevel').value ? parseFloat(document.getElementById('confidenceLevel').value) : null,
                organization: document.getElementById('pollOrganization').value,
                results: results
            };

            try {
                const url = editingPollId
                    ? `/api/polls/${editingPollId}`
                    : '/api/polls';

                const response = await fetch(url, {
                    method: editingPollId ? 'PUT' : 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${token}`
                    },
                    body: JSON.stringify(data)
                });

                if (response.ok) {
                    showToast(editingPollId ? 'Encuesta actualizada' : 'Encuesta creada', 'success');
                    closeModal();
                    await loadPolls();
                } else {
                    const error = await response.json();
                    showToast(error.message || 'Error al guardar', 'error');
                }
            } catch (err) {
                showToast('Error de red', 'error');
            }
        });

        async function deletePoll(id) {
            if (!confirm('¿Eliminar esta encuesta?')) return;

            try {
                const response = await fetch(`/api/polls/${id}`, {
                    method: 'DELETE',
                    headers: { 'Authorization': `Bearer ${token}` }
                });

                if (response.ok) {
                    showToast('Encuesta eliminada', 'success');
                    await loadPolls();
                }
            } catch (err) {
                showToast('Error al eliminar', 'error');
            }
        }

        function switchTab(tab) {
            currentTab = tab;

            document.querySelectorAll('.tab-btn').forEach(btn => {
                btn.className = 'tab-btn flex-1 px-6 py-4 font-semibold text-gray-500 hover:text-purple-600';
            });
            document.getElementById(`tab${tab.charAt(0).toUpperCase() + tab.slice(1)}`).className = 'tab-btn flex-1 px-6 py-4 font-semibold text-purple-600 border-b-2 border-purple-600';

            document.getElementById('contentPolls').classList.add('hidden');
            document.getElementById('contentTrends').classList.add('hidden');
            document.getElementById('contentComparison').classList.add('hidden');
            document.getElementById(`content${tab.charAt(0).toUpperCase() + tab.slice(1)}`).classList.remove('hidden');
        }

        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