@extends('layouts.goberdata')

@section('title', 'Propuestas Global')
@section('page_title', 'Propuestas 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-indigo-100">
                    <i class="fas fa-arrow-left"></i>
                </a>
                <h1 class="text-2xl font-semibold text-white">
                    <i class="fas fa-lightbulb mr-2"></i> Propuestas 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 Propuestas</p>
                                <p class="text-3xl font-bold text-indigo-600" id="totalProposals">0</p>
                            </div>
                            <div class="bg-indigo-100 p-3 rounded-full">
                                <i class="fas fa-lightbulb text-indigo-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">Aprobadas</p>
                                <p class="text-3xl font-bold text-green-600" id="approvedProposals">0</p>
                            </div>
                            <div class="bg-green-100 p-3 rounded-full">
                                <i class="fas fa-check-circle 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">Pendientes</p>
                                <p class="text-3xl font-bold text-yellow-600" id="pendingProposals">0</p>
                            </div>
                            <div class="bg-yellow-100 p-3 rounded-full">
                                <i class="fas fa-clock text-yellow-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">Rechazadas</p>
                                <p class="text-3xl font-bold text-red-600" id="rejectedProposals">0</p>
                            </div>
                            <div class="bg-red-100 p-3 rounded-full">
                                <i class="fas fa-times-circle text-red-600 text-xl"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Métricas adicionales -->
                <div class="grid grid-cols-1 md:grid-cols-2 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">Score Promedio</p>
                                <p class="text-2xl font-bold text-blue-600" id="avgScore">0</p>
                            </div>
                            <div class="bg-blue-100 p-3 rounded-full">
                                <i class="fas fa-star text-blue-600 text-lg"></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">Total Votos</p>
                                <p class="text-2xl font-bold text-purple-600" id="totalVotes">0</p>
                            </div>
                            <div class="bg-purple-100 p-3 rounded-full">
                                <i class="fas fa-vote-yea text-purple-600 text-lg"></i>
                            </div>
                        </div>
                    </div>
                </div>

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

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

                <!-- Métricas de Aprobación -->
                <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
                    <h3 class="text-xl font-bold text-gray-800 mb-6">Métricas de Aprobación</h3>
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                        <div class="text-center">
                            <div class="bg-green-100 p-4 rounded-lg">
                                <i class="fas fa-check text-green-600 text-2xl mb-2"></i>
                                <p class="text-2xl font-bold text-green-600" id="approvalRate">0%</p>
                                <p class="text-sm text-gray-600">Tasa Aprobación</p>
                            </div>
                        </div>
                        <div class="text-center">
                            <div class="bg-yellow-100 p-4 rounded-lg">
                                <i class="fas fa-hourglass-half text-yellow-600 text-2xl mb-2"></i>
                                <p class="text-2xl font-bold text-yellow-600" id="pendingRate">0%</p>
                                <p class="text-sm text-gray-600">Tasa Pendiente</p>
                            </div>
                        </div>
                        <div class="text-center">
                            <div class="bg-red-100 p-4 rounded-lg">
                                <i class="fas fa-times text-red-600 text-2xl mb-2"></i>
                                <p class="text-2xl font-bold text-red-600" id="rejectionRate">0%</p>
                                <p class="text-sm text-gray-600">Tasa Rechazo</p>
                            </div>
                        </div>
                        <div class="text-center">
                            <div class="bg-blue-100 p-4 rounded-lg">
                                <i class="fas fa-clock text-blue-600 text-2xl mb-2"></i>
                                <p class="text-2xl font-bold text-blue-600" id="avgProcessingTime">0d</p>
                                <p class="text-sm text-gray-600">Tiempo Promedio</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Propuestas por Campaña -->
                <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
                    <h3 class="text-xl font-bold text-gray-800 mb-6">Propuestas por Campaña</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">Campaña</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Aprobadas</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Score Promedio</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Votos</th>
                                </tr>
                            </thead>
                            <tbody id="proposalsByCampaignTable" class="bg-white divide-y divide-gray-200">
                                <!-- Datos se cargarán dinámicamente -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Propuestas Recientes -->
                <div class="bg-white rounded-xl shadow-lg p-6">
                    <h3 class="text-xl font-bold text-gray-800 mb-6">Propuestas Recientes</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">Categoría</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">Autor</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Estado</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Score</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fecha</th>
                                </tr>
                            </thead>
                            <tbody id="recentProposalsTable" class="bg-white divide-y divide-gray-200">
                                <!-- Datos se cargarán dinámicamente -->
                            </tbody>
                        </table>
                    </div>
            </div>
        </div>
        </main>
    </div>
@endsection

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

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

        async function loadProposalsData() {
            try {
                console.log('Loading Proposals data...');
                const response = await fetch('/api/test/proposals');
                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('Proposals data loaded from API:', data);

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

                    // Renderizar gráficos
                    renderCharts(data);

                    // Actualizar tablas
                    updateProposalsByCampaignTable(data.proposals_by_campaign);
                    updateRecentProposalsTable(data.recent_proposals);

                    // Actualizar métricas de aprobación
                    updateApprovalMetrics(data.approval_metrics);
                } else {
                    console.error('Error loading Proposals data:', result.message);
                    loadFallbackData();
                }
            } catch (error) {
                console.error('Error loading Proposals data:', error);
                console.error('Error details:', error.message);
                console.log('Loading fallback data...');
                loadFallbackData();
            }
        }

        function updateStats(stats) {
            const totalProposals = document.getElementById('totalProposals');
            const approvedProposals = document.getElementById('approvedProposals');
            const pendingProposals = document.getElementById('pendingProposals');
            const rejectedProposals = document.getElementById('rejectedProposals');
            const avgScore = document.getElementById('avgScore');
            const totalVotes = document.getElementById('totalVotes');

            if (totalProposals) totalProposals.textContent = stats.total_proposals.toLocaleString();
            if (approvedProposals) approvedProposals.textContent = stats.approved_proposals.toLocaleString();
            if (pendingProposals) pendingProposals.textContent = stats.pending_proposals.toLocaleString();
            if (rejectedProposals) rejectedProposals.textContent = stats.rejected_proposals.toLocaleString();
            if (avgScore) avgScore.textContent = stats.avg_score;
            if (totalVotes) totalVotes.textContent = stats.total_votes.toLocaleString();
        }

        function renderCharts(data) {
            // Gráfico de propuestas por categoría
            const categoryCtx = document.getElementById('proposalsByCategoryChart');
            if (categoryCtx && data.proposals_by_category) {
                if (proposalsByCategoryChart) {
                    proposalsByCategoryChart.destroy();
                }

                proposalsByCategoryChart = new Chart(categoryCtx, {
                    type: 'bar',
                    data: {
                        labels: data.proposals_by_category.map(item => item.category),
                        datasets: [{
                            label: 'Propuestas',
                            data: data.proposals_by_category.map(item => item.count),
                            backgroundColor: '#6366f1',
                            borderColor: '#4f46e5',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                display: false
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            }

            // Gráfico de propuestas por estado
            const statusCtx = document.getElementById('proposalsByStatusChart');
            if (statusCtx && data.chart_data.proposals_by_status) {
                if (proposalsByStatusChart) {
                    proposalsByStatusChart.destroy();
                }

                proposalsByStatusChart = new Chart(statusCtx, {
                    type: 'doughnut',
                    data: {
                        labels: data.chart_data.proposals_by_status.map(item => item.status),
                        datasets: [{
                            data: data.chart_data.proposals_by_status.map(item => item.count),
                            backgroundColor: ['#10b981', '#f59e0b', '#ef4444'],
                            borderWidth: 2,
                            borderColor: '#ffffff'
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'bottom'
                            }
                        }
                    }
                });
            }
        }

        function updateProposalsByCampaignTable(campaigns) {
            const tbody = document.getElementById('proposalsByCampaignTable');
            if (tbody && campaigns) {
                tbody.innerHTML = campaigns.map(campaign => `
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${campaign.campaign_name}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campaign.total_proposals}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campaign.approved_count}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campaign.avg_score}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campaign.total_votes.toLocaleString()}</td>
                    </tr>
                `).join('');
            }
        }

        function updateRecentProposalsTable(proposals) {
            const tbody = document.getElementById('recentProposalsTable');
            if (tbody && proposals) {
                tbody.innerHTML = proposals.map(proposal => `
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 text-sm text-gray-900">${proposal.title}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${proposal.category}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${proposal.campaign_name}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${proposal.author_name}</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${proposal.status === 'approved' ? 'bg-green-100 text-green-800' : proposal.status === 'pending' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800'}">
                                ${proposal.status === 'approved' ? 'Aprobada' : proposal.status === 'pending' ? 'Pendiente' : 'Rechazada'}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${proposal.score}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${proposal.created_at}</td>
                    </tr>
                `).join('');
            }
        }

        function updateApprovalMetrics(metrics) {
            const approvalRate = document.getElementById('approvalRate');
            const pendingRate = document.getElementById('pendingRate');
            const rejectionRate = document.getElementById('rejectionRate');
            const avgProcessingTime = document.getElementById('avgProcessingTime');

            if (approvalRate) approvalRate.textContent = metrics.approval_rate + '%';
            if (pendingRate) pendingRate.textContent = metrics.pending_rate + '%';
            if (rejectionRate) rejectionRate.textContent = metrics.rejection_rate + '%';
            if (avgProcessingTime) avgProcessingTime.textContent = metrics.avg_processing_time + 'd';
        }

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

            // 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 Propuestas. Por favor, intente nuevamente.';

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