@extends('layouts.goberdata')

@section('title', 'Debates Global')
@section('page_title', 'Debates 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')
<!-- 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-fuchsia-100">
                    <i class="fas fa-arrow-left"></i>
                </a>
                <h1 class="text-2xl font-semibold text-white">
                    <i class="fas fa-microphone mr-2"></i> Debates 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">
        <!-- Estadísticas principales -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-600 text-sm">Total Debates</p>
                        <p class="text-3xl font-bold text-fuchsia-600" id="totalDebates">0</p>
                    </div>
                    <div class="bg-fuchsia-100 p-3 rounded-full">
                        <i class="fas fa-microphone text-fuchsia-600 text-xl"></i>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-600 text-sm">Preguntas</p>
                        <p class="text-3xl font-bold text-blue-600" id="totalQuestions">0</p>
                    </div>
                    <div class="bg-blue-100 p-3 rounded-full">
                        <i class="fas fa-question-circle text-blue-600 text-xl"></i>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-600 text-sm">Respuestas</p>
                        <p class="text-3xl font-bold text-green-600" id="totalResponses">0</p>
                    </div>
                    <div class="bg-green-100 p-3 rounded-full">
                        <i class="fas fa-comments text-green-600 text-xl"></i>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl shadow-lg p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-600 text-sm">Participantes</p>
                        <p class="text-3xl font-bold text-purple-600" id="uniqueParticipants">0</p>
                    </div>
                    <div class="bg-purple-100 p-3 rounded-full">
                        <i class="fas fa-users text-purple-600 text-xl"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Gráficos -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
            <!-- Debates por Estado -->
            <div class="bg-white rounded-xl shadow-lg p-6">
                <h3 class="text-xl font-bold text-gray-800 mb-4">Debates por Estado</h3>
                <div style="height: 300px;">
                    <canvas id="debatesByStatusChart"></canvas>
                </div>
            </div>

            <!-- Respuestas por Categoría -->
            <div class="bg-white rounded-xl shadow-lg p-6">
                <h3 class="text-xl font-bold text-gray-800 mb-4">Respuestas por Categoría</h3>
                <div style="height: 300px;">
                    <canvas id="responsesByCategoryChart"></canvas>
                </div>
            </div>
        </div>

        <!-- Análisis de Sentimientos -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
            <h3 class="text-xl font-bold text-gray-800 mb-4">Análisis de Sentimientos</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="text-center">
                    <div class="bg-green-100 p-4 rounded-lg">
                        <i class="fas fa-smile text-green-600 text-2xl mb-2"></i>
                        <p class="text-2xl font-bold text-green-600" id="positiveCount">0</p>
                        <p class="text-sm text-gray-600">Positivo</p>
                        <p class="text-xs text-gray-500" id="positivePercentage">0%</p>
                    </div>
                </div>
                <div class="text-center">
                    <div class="bg-yellow-100 p-4 rounded-lg">
                        <i class="fas fa-meh text-yellow-600 text-2xl mb-2"></i>
                        <p class="text-2xl font-bold text-yellow-600" id="neutralCount">0</p>
                        <p class="text-sm text-gray-600">Neutral</p>
                        <p class="text-xs text-gray-500" id="neutralPercentage">0%</p>
                    </div>
                </div>
                <div class="text-center">
                    <div class="bg-red-100 p-4 rounded-lg">
                        <i class="fas fa-frown text-red-600 text-2xl mb-2"></i>
                        <p class="text-2xl font-bold text-red-600" id="negativeCount">0</p>
                        <p class="text-sm text-gray-600">Negativo</p>
                        <p class="text-xs text-gray-500" id="negativePercentage">0%</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Próximos Debates -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
            <h3 class="text-xl font-bold text-gray-800 mb-4">Próximos Debates</h3>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Título</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Campaña</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fecha</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ubicación</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Moderador</th>
                        </tr>
                    </thead>
                    <tbody id="upcomingDebatesTable" class="bg-white divide-y divide-gray-200">
                        <!-- Datos se cargarán dinámicamente -->
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Participantes Más Activos -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
            <h3 class="text-xl font-bold text-gray-800 mb-4">Participantes Más Activos</h3>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Participante</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Campaña</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Respuestas</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tiempo Promedio</th>
                        </tr>
                    </thead>
                    <tbody id="activeParticipantsTable" class="bg-white divide-y divide-gray-200">
                        <!-- Datos se cargarán dinámicamente -->
                    </tbody>
                </table>
        </div>
    </div>

        <!-- Preguntas Más Frecuentes -->
        <div class="bg-white rounded-xl shadow-lg p-6">
            <h3 class="text-xl font-bold text-gray-800 mb-4">Preguntas Más Frecuentes</h3>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pregunta</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Categoría</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Frecuencia</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Estado</th>
                        </tr>
                    </thead>
                    <tbody id="frequentQuestionsTable" class="bg-white divide-y divide-gray-200">
                        <!-- Datos se cargarán dinámicamente -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    
            </div>
        </main>
@endsection

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

        document.addEventListener('DOMContentLoaded', function() {
            loadDebatesData();
        });

        async function loadDebatesData() {
            try {
                console.log('Loading debates data...');
                const response = await fetch('/api/test/debates');
                console.log('API Response status:', response.status);

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const result = await response.json();
                console.log('API Response data:', result);

                if (result.success && result.data) {
                    const data = result.data;
                    console.log('Debates data loaded from API:', data);

                    // Actualizar estadísticas
                    updateStats(data.stats);

                    // Renderizar gráficos
                    renderCharts(data);

                    // Actualizar tablas
                    updateUpcomingDebates(data.upcoming_debates);
                    updateActiveParticipants(data.most_active_participants);
                    updateFrequentQuestions(data.most_frequent_questions);

                    // Actualizar análisis de sentimientos
                    updateSentimentAnalysis(data.sentiment_analysis);
                } else {
                    console.error('Error loading debates data:', result.message);
                    loadFallbackData();
                }
            } catch (error) {
                console.error('Error loading debates data:', error);
                console.error('Error details:', error.message);
                console.log('Loading fallback data...');
                loadFallbackData();
            }
        }

        function updateStats(stats) {
            const totalDebates = document.getElementById('totalDebates');
            const totalQuestions = document.getElementById('totalQuestions');
            const totalResponses = document.getElementById('totalResponses');
            const uniqueParticipants = document.getElementById('uniqueParticipants');

            if (totalDebates) totalDebates.textContent = stats.total_debates.toLocaleString();
            if (totalQuestions) totalQuestions.textContent = stats.total_questions.toLocaleString();
            if (totalResponses) totalResponses.textContent = stats.total_responses.toLocaleString();
            if (uniqueParticipants) uniqueParticipants.textContent = stats.unique_participants.toLocaleString();
        }

        function renderCharts(data) {
            // Gráfico de debates por estado
            const statusCtx = document.getElementById('debatesByStatusChart');
            if (statusCtx && data.debates_by_status) {
                if (debatesByStatusChart) {
                    debatesByStatusChart.destroy();
                }

                debatesByStatusChart = new Chart(statusCtx, {
                    type: 'doughnut',
                    data: {
                        labels: data.debates_by_status.map(item => item.status),
                        datasets: [{
                            data: data.debates_by_status.map(item => item.count),
                            backgroundColor: ['#10B981', '#F59E0B', '#EF4444', '#6B7280'],
                            borderWidth: 2,
                            borderColor: '#ffffff'
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'bottom'
                            }
                        }
                    }
                });
            }

            // Gráfico de respuestas por categoría
            const categoryCtx = document.getElementById('responsesByCategoryChart');
            if (categoryCtx && data.chart_data.responses_by_category) {
                if (responsesByCategoryChart) {
                    responsesByCategoryChart.destroy();
                }

                responsesByCategoryChart = new Chart(categoryCtx, {
                    type: 'bar',
                    data: {
                        labels: data.chart_data.responses_by_category.map(item => item.category),
                        datasets: [{
                            label: 'Respuestas',
                            data: data.chart_data.responses_by_category.map(item => item.count),
                            backgroundColor: '#8B5CF6',
                            borderColor: '#7C3AED',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: false
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            }
        }

        function updateUpcomingDebates(upcomingDebates) {
            const tbody = document.getElementById('upcomingDebatesTable');
            if (tbody && upcomingDebates) {
                tbody.innerHTML = upcomingDebates.map(debate => `
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${debate.title}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${debate.campaign_name}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${debate.debate_date}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${debate.location}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${debate.moderator}</td>
                    </tr>
                `).join('');
            }
        }

        function updateActiveParticipants(participants) {
            const tbody = document.getElementById('activeParticipantsTable');
            if (tbody && participants) {
                tbody.innerHTML = participants.map(participant => `
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${participant.participant_name}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${participant.campaign_name}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${participant.total_responses}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${Math.round(participant.avg_response_time)}s</td>
                    </tr>
                `).join('');
            }
        }

        function updateFrequentQuestions(questions) {
            const tbody = document.getElementById('frequentQuestionsTable');
            if (tbody && questions) {
                tbody.innerHTML = questions.map(question => `
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 text-sm text-gray-900">${question.question}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${question.category}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${question.frequency}</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${question.active_count > 0 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
                                ${question.active_count > 0 ? 'Activa' : 'Inactiva'}
                            </span>
                        </td>
                    </tr>
                `).join('');
            }
        }

        function updateSentimentAnalysis(sentimentData) {
            sentimentData.forEach(sentiment => {
                const countElement = document.getElementById(sentiment.sentiment + 'Count');
                const percentageElement = document.getElementById(sentiment.sentiment + 'Percentage');

                if (countElement) countElement.textContent = sentiment.count;
                if (percentageElement) percentageElement.textContent = sentiment.percentage + '%';
            });
        }

        function loadFallbackData() {
            // Mostrar mensaje de error en lugar de datos simulados
            console.error('No se pudieron cargar los datos de Debates');

            // Mostrar mensaje de error en la interfaz
            const errorMessage = document.createElement('div');
            errorMessage.className = 'bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4';
            errorMessage.innerHTML = '<strong>Error:</strong> No se pudieron cargar los datos de Debates. Por favor, intente nuevamente.';

            const mainContent = document.querySelector('main');
            if (mainContent) {
                mainContent.insertBefore(errorMessage, mainContent.firstChild);
            }
        }
    </script>
@endpush