@extends('layouts.goberdata')

@section('title', 'IA Content Global')
@section('page_title', 'IA Content 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-violet-100">
                    <i class="fas fa-arrow-left"></i>
                </a>
                <h1 class="text-2xl font-semibold text-white">
                    <i class="fas fa-robot mr-2"></i> IA Content 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 Contenido</p>
                        <p class="text-3xl font-bold text-violet-600" id="totalContent">0</p>
                    </div>
                    <div class="bg-violet-100 p-3 rounded-full">
                        <i class="fas fa-file-alt text-violet-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">Plantillas</p>
                        <p class="text-3xl font-bold text-blue-600" id="totalTemplates">0</p>
                    </div>
                    <div class="bg-blue-100 p-3 rounded-full">
                        <i class="fas fa-layer-group 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">Generaciones</p>
                        <p class="text-3xl font-bold text-green-600" id="totalGenerations">0</p>
                    </div>
                    <div class="bg-green-100 p-3 rounded-full">
                        <i class="fas fa-magic 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">Calidad Promedio</p>
                        <p class="text-3xl font-bold text-purple-600" id="avgQuality">0%</p>
                    </div>
                    <div class="bg-purple-100 p-3 rounded-full">
                        <i class="fas fa-star text-purple-600 text-xl"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Métricas adicionales -->
        <div class="grid grid-cols-1 md:grid-cols-3 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">Contenido Aprobado</p>
                        <p class="text-2xl font-bold text-emerald-600" id="approvedContent">0</p>
                    </div>
                    <div class="bg-emerald-100 p-3 rounded-full">
                        <i class="fas fa-check-circle text-emerald-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">Contenido Publicado</p>
                        <p class="text-2xl font-bold text-indigo-600" id="publishedContent">0</p>
                    </div>
                    <div class="bg-indigo-100 p-3 rounded-full">
                        <i class="fas fa-globe text-indigo-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">Tokens Utilizados</p>
                        <p class="text-2xl font-bold text-orange-600" id="totalTokens">0</p>
                    </div>
                    <div class="bg-orange-100 p-3 rounded-full">
                        <i class="fas fa-coins text-orange-600 text-lg"></i>
                    </div>
                </div>
            </div>
        </div>

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

            <!-- Análisis de Calidad -->
            <div class="bg-white rounded-xl shadow-lg p-6">
                <h3 class="text-xl font-bold text-gray-800 mb-4">Distribución de Calidad</h3>
                <div style="height: 300px;">
                    <canvas id="qualityAnalysisChart"></canvas>
                </div>
            </div>
        </div>

        <!-- Métricas de Rendimiento -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
            <h3 class="text-xl font-bold text-gray-800 mb-4">Métricas de Rendimiento</h3>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                <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="avgGenerationTime">0s</p>
                        <p class="text-sm text-gray-600">Tiempo Promedio</p>
                    </div>
                </div>
                <div class="text-center">
                    <div class="bg-green-100 p-4 rounded-lg">
                        <i class="fas fa-tokens text-green-600 text-2xl mb-2"></i>
                        <p class="text-2xl font-bold text-green-600" id="avgTokensPerGeneration">0</p>
                        <p class="text-sm text-gray-600">Tokens por Generación</p>
                    </div>
                </div>
                <div class="text-center">
                    <div class="bg-purple-100 p-4 rounded-lg">
                        <i class="fas fa-thumbs-up text-purple-600 text-2xl mb-2"></i>
                        <p class="text-2xl font-bold text-purple-600" id="approvalRate">0%</p>
                        <p class="text-sm text-gray-600">Tasa de Aprobación</p>
                    </div>
                </div>
                <div class="text-center">
                    <div class="bg-yellow-100 p-4 rounded-lg">
                        <i class="fas fa-chart-line text-yellow-600 text-2xl mb-2"></i>
                        <p class="text-2xl font-bold text-yellow-600" id="successRate">0%</p>
                        <p class="text-sm text-gray-600">Tasa de Éxito</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Plantillas Más Usadas -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
            <h3 class="text-xl font-bold text-gray-800 mb-4">Plantillas Más Usadas</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">Plantilla</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tipo</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">Usos</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Éxito</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="templatesTable" class="bg-white divide-y divide-gray-200">
                        <!-- Datos se cargarán dinámicamente -->
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Generaciones Recientes -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
            <h3 class="text-xl font-bold text-gray-800 mb-4">Generaciones 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">Contenido</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">Modelo IA</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tiempo</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tokens</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Feedback</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="recentGenerationsTable" class="bg-white divide-y divide-gray-200">
                        <!-- Datos se cargarán dinámicamente -->
                    </tbody>
                </table>
        </div>
    </div>

        <!-- Contenido por Campaña -->
        <div class="bg-white rounded-xl shadow-lg p-6">
            <h3 class="text-xl font-bold text-gray-800 mb-4">Contenido 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">Aprobado</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Publicado</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Calidad Promedio</th>
                        </tr>
                    </thead>
                    <tbody id="campaignsTable" 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 contentByTypeChart = null;
        let qualityAnalysisChart = null;

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

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

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

                    // Renderizar gráficos
                    renderCharts(data);

                    // Actualizar tablas
                    updateTemplatesTable(data.most_used_templates);
                    updateRecentGenerationsTable(data.recent_generations);
                    updateCampaignsTable(data.content_by_campaign);

                    // Actualizar métricas de rendimiento
                    updatePerformanceMetrics(data.performance_metrics);
                } else {
                    console.error('Error loading AI Content data:', result.message);
                    loadFallbackData();
                }
            } catch (error) {
                console.error('Error loading AI Content data:', error);
                console.error('Error details:', error.message);
                console.log('Loading fallback data...');
                loadFallbackData();
            }
        }

        function updateStats(stats) {
            const totalContent = document.getElementById('totalContent');
            const totalTemplates = document.getElementById('totalTemplates');
            const totalGenerations = document.getElementById('totalGenerations');
            const avgQuality = document.getElementById('avgQuality');
            const approvedContent = document.getElementById('approvedContent');
            const publishedContent = document.getElementById('publishedContent');
            const totalTokens = document.getElementById('totalTokens');

            if (totalContent) totalContent.textContent = stats.total_content.toLocaleString();
            if (totalTemplates) totalTemplates.textContent = stats.total_templates.toLocaleString();
            if (totalGenerations) totalGenerations.textContent = stats.total_generations.toLocaleString();
            if (avgQuality) avgQuality.textContent = Math.round(stats.avg_quality_score * 100) + '%';
            if (approvedContent) approvedContent.textContent = stats.approved_content.toLocaleString();
            if (publishedContent) publishedContent.textContent = stats.published_content.toLocaleString();
            if (totalTokens) totalTokens.textContent = stats.total_tokens_used.toLocaleString();
        }

        function renderCharts(data) {
            // Gráfico de contenido por tipo
            const typeCtx = document.getElementById('contentByTypeChart');
            if (typeCtx && data.content_by_type) {
                if (contentByTypeChart) {
                    contentByTypeChart.destroy();
                }

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

            // Gráfico de análisis de calidad
            const qualityCtx = document.getElementById('qualityAnalysisChart');
            if (qualityCtx && data.quality_analysis) {
                if (qualityAnalysisChart) {
                    qualityAnalysisChart.destroy();
                }

                qualityAnalysisChart = new Chart(qualityCtx, {
                    type: 'doughnut',
                    data: {
                        labels: data.quality_analysis.map(item => item.label),
                        datasets: [{
                            data: data.quality_analysis.map(item => item.count),
                            backgroundColor: ['#EF4444', '#F59E0B', '#10B981', '#3B82F6', '#8B5CF6'],
                            borderWidth: 2,
                            borderColor: '#ffffff'
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'bottom'
                            }
                        }
                    }
                });
            }
        }

        function updateTemplatesTable(templates) {
            const tbody = document.getElementById('templatesTable');
            if (tbody && templates) {
                tbody.innerHTML = templates.map(template => `
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${template.name}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${template.content_type}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${template.category || 'N/A'}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${template.usage_count}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${Math.round(template.success_rate * 100)}%</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${template.is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
                                ${template.is_active ? 'Activa' : 'Inactiva'}
                            </span>
                        </td>
                    </tr>
                `).join('');
            }
        }

        function updateRecentGenerationsTable(generations) {
            const tbody = document.getElementById('recentGenerationsTable');
            if (tbody && generations) {
                tbody.innerHTML = generations.map(generation => `
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 text-sm text-gray-900">${generation.content_title}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${generation.campaign_name}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${generation.ai_model}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${generation.processing_time}s</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${generation.tokens_consumed}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${generation.user_feedback || 'N/A'}</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${generation.is_approved ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'}">
                                ${generation.is_approved ? 'Aprobado' : 'Pendiente'}
                            </span>
                        </td>
                    </tr>
                `).join('');
            }
        }

        function updateCampaignsTable(campaigns) {
            const tbody = document.getElementById('campaignsTable');
            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_content}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campaign.approved_content}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${campaign.published_content}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${Math.round(campaign.avg_quality * 100)}%</td>
                    </tr>
                `).join('');
            }
        }

        function updatePerformanceMetrics(metrics) {
            const avgGenerationTime = document.getElementById('avgGenerationTime');
            const avgTokensPerGeneration = document.getElementById('avgTokensPerGeneration');
            const approvalRate = document.getElementById('approvalRate');
            const successRate = document.getElementById('successRate');

            if (avgGenerationTime) avgGenerationTime.textContent = Math.round(metrics.avg_generation_time_seconds) + 's';
            if (avgTokensPerGeneration) avgTokensPerGeneration.textContent = Math.round(metrics.avg_tokens_per_generation);
            if (approvalRate) approvalRate.textContent = metrics.approval_rate_percentage + '%';
            if (successRate) successRate.textContent = '85%'; // Valor calculado basado en feedback
        }

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

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

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