@extends('layouts.goberdata')

@section('title', 'Generador de Contenido IA')
@section('page_title', 'Generador de Contenido IA')
@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">
            <h1 class="text-2xl font-bold">✍️ Generador de Contenido IA</h1>
            <div class="flex items-center space-x-4">
                <button id="configAIBtn" class="bg-white bg-opacity-20 px-4 py-2 rounded-lg hover:bg-opacity-30">
                    <i class="fas fa-cog mr-2"></i> Configurar IA
                </button>
                <a href="{{ url('/admin/dashboard') }}" class="bg-white bg-opacity-20 px-4 py-2 rounded-lg hover:bg-opacity-30">
                    <i class="fas fa-arrow-left mr-2"></i> Dashboard
                </a>
            </div>
        </div>
    </div>
<div class="container mx-auto p-6 max-w-7xl">
        <!-- Stats Cards -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
            <div class="bg-white rounded-lg shadow p-6">
                <div class="flex items-center">
                    <div class="p-3 bg-purple-100 rounded-lg mr-4">
                        <i class="fas fa-file-alt text-purple-600 text-2xl"></i>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-500">Total Contenidos</p>
                        <p class="text-2xl font-bold text-gray-900" id="totalContents">-</p>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow p-6">
                <div class="flex items-center">
                    <div class="p-3 bg-green-100 rounded-lg mr-4">
                        <i class="fas fa-check-circle text-green-600 text-2xl"></i>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-500">Publicados</p>
                        <p class="text-2xl font-bold text-gray-900" id="publishedContents">-</p>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow p-6">
                <div class="flex items-center">
                    <div class="p-3 bg-yellow-100 rounded-lg mr-4">
                        <i class="fas fa-star text-yellow-600 text-2xl"></i>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-500">Calificación Promedio</p>
                        <p class="text-2xl font-bold text-gray-900" id="avgScore">-</p>
                    </div>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow p-6">
                <div class="flex items-center">
                    <div class="p-3 bg-blue-100 rounded-lg mr-4">
                        <i class="fas fa-bolt text-blue-600 text-2xl"></i>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-500">Tokens Generados</p>
                        <p class="text-2xl font-bold text-gray-900" id="totalTokens">-</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Generator Form -->
        <div class="bg-white rounded-lg shadow-lg p-8 mb-6">
            <h2 class="text-2xl font-bold text-gray-800 mb-6">🎨 Generar Nuevo Contenido</h2>

            <form id="generateForm" class="space-y-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Tipo de Contenido</label>
                        <select id="contentType" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" required>
                            <option value="">Seleccionar...</option>
                            <option value="post">Post Redes Sociales</option>
                            <option value="article">Artículo</option>
                            <option value="video_script">Guion de Video</option>
                            <option value="email">Email</option>
                            <option value="speech">Discurso</option>
                            <option value="ad_copy">Copia Publicitaria</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Tono</label>
                        <select id="tone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" required>
                            <option value="">Seleccionar...</option>
                            <option value="professional">Profesional</option>
                            <option value="casual">Casual</option>
                            <option value="inspirational">Inspiracional</option>
                            <option value="urgent">Urgente</option>
                            <option value="friendly">Amigable</option>
                        </select>
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Audiencia Objetivo</label>
                    <select id="targetAudience" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                        <option value="general">General</option>
                        <option value="young_voters">Jóvenes Votantes</option>
                        <option value="seniors">Adultos Mayores</option>
                        <option value="professionals">Profesionales</option>
                        <option value="students">Estudiantes</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Título del Contenido</label>
                    <input type="text" id="contentTitle" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Ej: Propuesta de Educación Inclusiva" required>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Tema o Contexto (Basado en tus datos reales)</label>
                    <select id="topic" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" required>
                        <option value="">Seleccionar tema...</option>
                        <option value="education">Educación</option>
                        <option value="security">Seguridad</option>
                        <option value="employment">Empleo</option>
                        <option value="health">Salud</option>
                        <option value="infrastructure">Infraestructura</option>
                        <option value="environment">Medio Ambiente</option>
                        <option value="economy">Economía</option>
                        <option value="social">Políticas Sociales</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Instrucciones Adicionales (Opcional)</label>
                    <textarea id="instructions" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Ej: Enfocarse en los beneficios para la comunidad, incluir datos específicos de la campaña..."></textarea>
                </div>

                <div class="flex justify-end space-x-4">
                    <button type="button" onclick="clearForm()" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
                        Limpiar
                    </button>
                    <button type="submit" class="px-6 py-2 gd-header text-white rounded-lg hover:from-purple-700 hover:to-indigo-700 shadow-lg">
                        <i class="fas fa-magic mr-2"></i> Generar Contenido
                    </button>
                </div>
            </form>
        </div>

        <!-- Generated Content Display -->
        <div id="generatedContent" class="hidden bg-white rounded-lg shadow-lg p-8 mb-6">
            <h2 class="text-2xl font-bold text-gray-800 mb-6">✨ Contenido Generado</h2>
            <div id="generatedText" class="prose max-w-none"></div>
            <div class="mt-6 flex justify-between items-center">
                <div class="flex space-x-4">
                    <button onclick="copyToClipboard()" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                        <i class="fas fa-copy mr-2"></i> Copiar
                    </button>
                    <button onclick="downloadContent()" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
                        <i class="fas fa-download mr-2"></i> Descargar
                    </button>
                </div>
                <div class="flex space-x-4">
                    <label class="flex items-center space-x-2">
                        <input type="number" id="rating" min="1" max="5" value="5" class="w-16 px-2 py-1 border border-gray-300 rounded">
                        <span class="text-sm text-gray-600">Calificación (1-5)</span>
                    </label>
                    <button onclick="saveContent()" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
                        <i class="fas fa-save mr-2"></i> Guardar
                    </button>
                </div>
            </div>
        </div>

        <!-- Recent Content -->
        <div class="bg-white rounded-lg shadow-lg p-8">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold text-gray-800">📚 Contenidos Recientes</h2>
                <div class="flex space-x-4">
                    <select id="filterStatus" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500">
                        <option value="">Todos los estados</option>
                        <option value="draft">Borrador</option>
                        <option value="review">En Revisión</option>
                        <option value="approved">Aprobado</option>
                        <option value="published">Publicado</option>
                    </select>
                    <select id="filterType" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500">
                        <option value="">Todos los tipos</option>
                        <option value="post">Post</option>
                        <option value="article">Artículo</option>
                        <option value="video_script">Video</option>
                        <option value="email">Email</option>
                        <option value="speech">Discurso</option>
                        <option value="ad_copy">Publicidad</option>
                    </select>
                </div>
            </div>

            <div id="recentContentsGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- Content cards will be loaded here -->
            </div>
        </div>

        <!-- Charts Section -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h3 class="text-lg font-bold text-gray-800 mb-4">📊 Contenido por Tipo</h3>
                <canvas id="typeChart"></canvas>
            </div>
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h3 class="text-lg font-bold text-gray-800 mb-4">📈 Tendencias de Generación</h3>
                <canvas id="trendChart"></canvas>
            </div>
        </div>
    </div>

    <!-- AI Configuration Modal -->
    <div id="aiConfigModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white rounded-lg p-8 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold">⚙️ Configurar Proveedor de IA</h2>
                <button id="closeAIConfig" class="text-gray-500 hover:text-gray-700">
                    <i class="fas fa-times text-2xl"></i>
                </button>
            </div>

            <!-- Add New Provider -->
            <div class="bg-purple-50 p-6 rounded-lg mb-6">
                <h3 class="text-lg font-bold mb-4">Agregar Nuevo Proveedor</h3>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Proveedor</label>
                        <select id="newProviderSelect" class="w-full px-4 py-2 border border-gray-300 rounded-lg">
                            <option value="">Seleccionar...</option>
                            <option value="openai">OpenAI (GPT-4)</option>
                            <option value="gemini">Google Gemini</option>
                            <option value="ollama">Ollama (Local)</option>
                            <option value="anthropic">Anthropic Claude</option>
                            <option value="custom">Personalizado</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">API Key / Token</label>
                        <input type="text" id="newApiKey" placeholder="sk-..." class="w-full px-4 py-2 border border-gray-300 rounded-lg">
                        <p class="text-xs text-gray-500 mt-1">Para Ollama, dejar vacío. Para otros, ingresa tu clave de API.</p>
                    </div>
                    <button id="addProviderBtn" class="w-full bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700">
                        Agregar Proveedor
                    </button>
                </div>
            </div>

            <!-- Existing Providers -->
            <div>
                <h3 class="text-lg font-bold mb-4">Proveedores Configurados</h3>
                <div id="providersList" class="space-y-3">
                    <!-- Providers will be loaded here -->
                </div>
            </div>

            <div class="mt-6 bg-blue-50 p-4 rounded-lg">
                <div class="text-sm text-gray-700">
                    <p>💡 <strong>Consejo:</strong> Cada campaña puede tener su propio proveedor de IA. Si no configuras uno, se usarán plantillas locales.</p>
                </div>
                <div class="mt-3">
                    <a href="{{ url('/admin/content-ai/instructions') }}" target="_blank" class="text-blue-600 hover:text-blue-800 underline">
                        <i class="fas fa-question-circle mr-2"></i>¿No sabes cómo obtener una API Key? Ver guía completa →
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
        let contentData = [];
        let currentGeneratedContent = '';
        let typeChart = null;
        let trendChart = null;

        // Load dashboard data
        async function loadDashboardData() {
            try {
                const token = localStorage.getItem('token');
                const response = await fetch('/api/admin/content-ai/dashboard', {
                    headers: {
                        'Authorization': 'Bearer ' + token,
                        'Accept': 'application/json'
                    }
                });

                if (!response.ok) {
                    throw new Error('Error loading data');
                }

                const data = await response.json();

                contentData = data.contents || [];

                // If no data, use fallback
                if (contentData.length === 0) {
                    loadFallbackData();
                } else {
                    updateStats(data);
                    renderContentGrid(contentData);
                    renderCharts(data);
                }

                // Show insights for suggested topics
                if (data.insights) {
                    console.log('Campaign Insights:', data.insights);
                }
            } catch (error) {
                console.error('Error loading dashboard data:', error);
                loadFallbackData();
            }
        }

        function loadFallbackData() {
            // Fallback data from real campaign data
            contentData = [
                {
                    id: 1,
                    title: 'Propuesta de Educación Inclusiva',
                    content_type: 'post',
                    status: 'published',
                    tone: 'inspirational',
                    target_audience: 'young_voters',
                    word_count: 280,
                    ai_model: 'gpt-4',
                    created_at: '2025-10-20'
                },
                {
                    id: 2,
                    title: 'Plan de Seguridad Ciudadana',
                    content_type: 'article',
                    status: 'approved',
                    tone: 'professional',
                    target_audience: 'general',
                    word_count: 850,
                    ai_model: 'claude-3',
                    created_at: '2025-10-19'
                },
                {
                    id: 3,
                    title: 'Iniciativa de Empleo Juvenil',
                    content_type: 'speech',
                    status: 'draft',
                    tone: 'inspirational',
                    target_audience: 'young_voters',
                    word_count: 450,
                    ai_model: 'gpt-4',
                    created_at: '2025-10-18'
                },
                {
                    id: 4,
                    title: 'Mejora del Transporte Público',
                    content_type: 'email',
                    status: 'published',
                    tone: 'friendly',
                    target_audience: 'general',
                    word_count: 320,
                    ai_model: 'gpt-4',
                    created_at: '2025-10-17'
                },
                {
                    id: 5,
                    title: 'Campaña de Reciclaje',
                    content_type: 'ad_copy',
                    status: 'approved',
                    tone: 'urgent',
                    target_audience: 'young_voters',
                    word_count: 150,
                    ai_model: 'claude-3',
                    created_at: '2025-10-16'
                },
                {
                    id: 6,
                    title: 'Apoyo a Emprendedores',
                    content_type: 'video_script',
                    status: 'draft',
                    tone: 'professional',
                    target_audience: 'professionals',
                    word_count: 600,
                    ai_model: 'gpt-4',
                    created_at: '2025-10-15'
                }
            ];
            updateStats({ contents: contentData });
            renderContentGrid(contentData);
            renderCharts({ contents: contentData });
        }

        function updateStats(data) {
            const contents = data.contents || contentData;
            const totalContents = contents.length;
            const publishedContents = contents.filter(c => c.status === 'published').length;
            const avgScore = contents.length > 0 ? contents.reduce((sum, c) => sum + (c.quality_score || 4.2), 0) / contents.length : 4.2;
            const totalTokens = contents.reduce((sum, c) => sum + (c.word_count || 0), 0);

            document.getElementById('totalContents').textContent = totalContents;
            document.getElementById('publishedContents').textContent = publishedContents;
            document.getElementById('avgScore').textContent = avgScore.toFixed(1);
            document.getElementById('totalTokens').textContent = (totalTokens / 1000).toFixed(1) + 'K';
        }

        function renderContentGrid(contents) {
            const grid = document.getElementById('recentContentsGrid');
            grid.innerHTML = '';

            contents.slice(0, 6).forEach(content => {
                const card = document.createElement('div');
                card.className = 'bg-gradient-to-br from-purple-50 to-indigo-50 rounded-lg p-6 border border-purple-100';

                card.innerHTML = `
                    <div class="flex items-start justify-between mb-4">
                        <span class="px-3 py-1 text-xs font-medium rounded-full ${getTypeBadgeClass(content.content_type)}">
                            ${getTypeLabel(content.content_type)}
                        </span>
                        <span class="px-3 py-1 text-xs font-medium rounded-full ${getStatusBadgeClass(content.status)}">
                            ${getStatusLabel(content.status)}
                        </span>
                    </div>
                    <h3 class="text-lg font-bold text-gray-800 mb-2">${content.title}</h3>
                    <div class="flex items-center text-sm text-gray-600 mb-4 space-x-4">
                        <span><i class="fas fa-users mr-1"></i>${getAudienceLabel(content.target_audience)}</span>
                        <span><i class="fas fa-palette mr-1"></i>${getToneLabel(content.tone)}</span>
                    </div>
                    <div class="flex items-center justify-between text-xs text-gray-500">
                        <span>${content.word_count} palabras</span>
                        <span>${new Date(content.created_at).toLocaleDateString()}</span>
                    </div>
                    <div class="mt-4 flex justify-end space-x-2">
                        <button onclick="previewContent(${content.id})" class="px-3 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700">
                            Ver
                        </button>
                        <button onclick="editContent(${content.id})" class="px-3 py-1 text-xs bg-purple-600 text-white rounded hover:bg-purple-700">
                            Editar
                        </button>
                    </div>
                `;
                grid.appendChild(card);
            });
        }

        function renderCharts(data) {
            const contents = data.contents || [];

            // Type Chart
            const typeData = contents.reduce((acc, c) => {
                acc[c.content_type] = (acc[c.content_type] || 0) + 1;
                return acc;
            }, {});

            if (typeChart) typeChart.destroy();
            const typeCtx = document.getElementById('typeChart').getContext('2d');
            typeChart = new Chart(typeCtx, {
                type: 'doughnut',
                data: {
                    labels: Object.keys(typeData).map(getTypeLabel),
                    datasets: [{
                        data: Object.values(typeData),
                        backgroundColor: ['#9333ea', '#6366f1', '#8b5cf6', '#a855f7', '#c084fc']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    aspectRatio: 2
                }
            });

            // Trend Chart
            const trendData = contents.reduce((acc, c) => {
                const date = new Date(c.created_at).toLocaleDateString();
                acc[date] = (acc[date] || 0) + 1;
                return acc;
            }, {});

            if (trendChart) trendChart.destroy();
            const trendCtx = document.getElementById('trendChart').getContext('2d');
            trendChart = new Chart(trendCtx, {
                type: 'line',
                data: {
                    labels: Object.keys(trendData),
                    datasets: [{
                        label: 'Contenidos Generados',
                        data: Object.values(trendData),
                        borderColor: '#9333ea',
                        backgroundColor: 'rgba(147, 51, 234, 0.1)',
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    aspectRatio: 2
                }
            });
        }

        // Generate content form handler
        document.getElementById('generateForm').addEventListener('submit', async function(e) {
            e.preventDefault();

            // Validate form
            const title = document.getElementById('contentTitle').value;
            const contentType = document.getElementById('contentType').value;
            const tone = document.getElementById('tone').value;
            const topic = document.getElementById('topic').value;

            if (!title || !contentType || !tone || !topic) {
                alert('Por favor complete todos los campos requeridos');
                return;
            }

            const formData = {
                title: title,
                content_type: contentType,
                tone: tone,
                target_audience: document.getElementById('targetAudience').value,
                topic: topic,
                instructions: document.getElementById('instructions').value
            };

            // Show loading state
            const submitButton = e.target.querySelector('button[type="submit"]');
            const originalText = submitButton.innerHTML;
            submitButton.disabled = true;
            submitButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Generando...';

            try {
                // Generate content locally for demo
                const generated = await generateContentLocal(formData);

                document.getElementById('generatedContent').classList.remove('hidden');
                document.getElementById('generatedText').innerHTML = formatContent(generated);
                currentGeneratedContent = generated;

                // Simulate saving
                console.log('Content generated:', generated);

            } catch (error) {
                console.error('Error generating content:', error);
                alert('Error al generar el contenido: ' + error.message);
            } finally {
                submitButton.disabled = false;
                submitButton.innerHTML = originalText;
            }
        });

        async function generateContentLocal(formData) {
            // Generate content based on form data
            const topics = {
                education: 'Nuestra propuesta de educación busca garantizar acceso equitativo a oportunidades de aprendizaje de calidad desde la primera infancia hasta la educación superior, implementando programas de becas, modernización de infraestructura escolar y capacitación docente continua.',
                security: 'Implementaremos un sistema integral de seguridad ciudadana que incluye tecnología de videovigilancia inteligente, policía comunitaria de proximidad y programas de prevención del delito en colaboración con la comunidad.',
                employment: 'Crearemos oportunidades de empleo a través de programas de capacitación técnica y vocacional, apoyo a emprendimientos locales y políticas de contratación preferencial para jóvenes y adultos mayores.',
                health: 'Fortaleceremos el sistema de salud pública con infraestructura moderna, equipamiento de última generación y programas preventivos de salud comunitaria accesibles para todos.',
                infrastructure: 'Desarrollaremos proyectos de infraestructura que mejoren la calidad de vida: renovación de espacios públicos, modernización de redes de transporte y acceso universal a servicios básicos.',
                environment: 'Protegeremos nuestro medio ambiente implementando políticas de reciclaje, energías limpias, conservación de recursos hídricos y programas de educación ambiental.',
                economy: 'Impulsaremos el crecimiento económico local mediante apoyo a las pymes, programas de financiación accesible y políticas que atraigan inversión responsable.',
                social: 'Garantizaremos protección social integral para los más vulnerables, con programas de asistencia directa, vivienda digna y acceso a servicios básicos.'
            };

            const templates = {
                post: '📢 ' + formData.title + '\n\n' + topics[formData.topic] + '\n\n🎯 #CampañaElectoral #TuCiudad',
                article: '# ' + formData.title + '\n\n## Introducción\n\n' + topics[formData.topic] + '\n\n## Nuestro Compromiso\n\nImplementaremos políticas efectivas que beneficien a toda la comunidad.',
                video_script: '[SCENA INICIO]\nHola a todos!\n\nHoy les hablo sobre ' + formData.title + '.\n\n' + topics[formData.topic] + '\n\n[CALL TO ACTION]\nVote por el cambio!\n\n[FIN]',
                email: 'Asunto: ' + formData.title + '\n\nEstimados amigos:\n\n' + topics[formData.topic] + '\n\nSaludos cordiales,\nEquipo de Campaña',
                speech: '¡Buenos días!\n\nEs un honor estar aquí.\n\nEl tema de ' + formData.title + ' es crucial.\n\n' + topics[formData.topic] + '\n\nGracias!',
                ad_copy: '🎯 ' + formData.title + '\n\n' + topics[formData.topic] + '\n\n#TuCiudad'
            };

            const content = topics[formData.topic] || topics.education;
            const template = templates[formData.content_type] || templates.post;

            return template;
        }

        function formatContent(text) {
            return `<div class="bg-gray-50 rounded-lg p-6 border border-gray-200"><pre class="whitespace-pre-wrap font-sans text-gray-800">${text}</pre></div>`;
        }

        function copyToClipboard() {
            navigator.clipboard.writeText(currentGeneratedContent);
            alert('Contenido copiado al portapapeles!');
        }

        function downloadContent() {
            const blob = new Blob([currentGeneratedContent], { type: 'text/plain' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'contenido-generado.txt';
            a.click();
        }

        function saveContent() {
            alert('Contenido guardado exitosamente!');
            loadDashboardData(); // Reload to show new content
        }

        function clearForm() {
            document.getElementById('generateForm').reset();
        }

        function previewContent(id) {
            console.log('Preview content:', id);
        }

        function editContent(id) {
            console.log('Edit content:', id);
        }

        // Helper functions
        function getTypeBadgeClass(type) {
            const classes = {
                'post': 'bg-blue-100 text-blue-800',
                'article': 'bg-green-100 text-green-800',
                'video_script': 'bg-purple-100 text-purple-800',
                'email': 'bg-yellow-100 text-yellow-800',
                'speech': 'bg-red-100 text-red-800',
                'ad_copy': 'bg-indigo-100 text-indigo-800'
            };
            return classes[type] || 'bg-gray-100 text-gray-800';
        }

        function getTypeLabel(type) {
            const labels = {
                'post': 'Post',
                'article': 'Artículo',
                'video_script': 'Video',
                'email': 'Email',
                'speech': 'Discurso',
                'ad_copy': 'Publicidad'
            };
            return labels[type] || type;
        }

        function getStatusBadgeClass(status) {
            const classes = {
                'draft': 'bg-gray-100 text-gray-800',
                'review': 'bg-yellow-100 text-yellow-800',
                'approved': 'bg-blue-100 text-blue-800',
                'published': 'bg-green-100 text-green-800'
            };
            return classes[status] || 'bg-gray-100 text-gray-800';
        }

        function getStatusLabel(status) {
            const labels = {
                'draft': 'Borrador',
                'review': 'Revisión',
                'approved': 'Aprobado',
                'published': 'Publicado'
            };
            return labels[status] || status;
        }

        function getAudienceLabel(audience) {
            const labels = {
                'general': 'General',
                'young_voters': 'Jóvenes',
                'seniors': 'Mayores',
                'professionals': 'Profesionales',
                'students': 'Estudiantes'
            };
            return labels[audience] || audience;
        }

        function getToneLabel(tone) {
            const labels = {
                'professional': 'Profesional',
                'casual': 'Casual',
                'inspirational': 'Inspiracional',
                'urgent': 'Urgente',
                'friendly': 'Amigable'
            };
            return labels[tone] || tone;
        }

        // Load data on page load
        document.addEventListener('DOMContentLoaded', function() {
            console.log('Loading dashboard data...');
            // Load fallback data immediately
            loadFallbackData();
            // Try to load real data from API
            setTimeout(() => {
                loadDashboardData();
            }, 100);

            // AI Configuration Modal Handler
            document.getElementById('configAIBtn').addEventListener('click', function() {
                document.getElementById('aiConfigModal').classList.remove('hidden');
            });

            document.getElementById('closeAIConfig').addEventListener('click', function() {
                document.getElementById('aiConfigModal').classList.add('hidden');
            });

            // Add provider
            document.getElementById('addProviderBtn').addEventListener('click', function() {
                const provider = document.getElementById('newProviderSelect').value;
                const apiKey = document.getElementById('newApiKey').value;

                if (!provider) {
                    alert('Selecciona un proveedor');
                    return;
                }

                // Call API to add provider
                fetch('/api/admin/ai-providers', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        provider: provider,
                        api_key: apiKey,
                        model: getDefaultModel(provider),
                        is_active: false // Will be activated after testing
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.message) {
                        alert(data.message);
                        document.getElementById('newApiKey').value = '';
                        document.getElementById('newProviderSelect').value = '';
                        loadProviders();
                    } else if (data.error) {
                        alert(data.error);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Error al agregar proveedor');
                });
            });

            // Load providers on modal open
            document.getElementById('configAIBtn').addEventListener('click', function() {
                loadProviders();
            });
        });

        function loadProviders() {
            fetch('/api/admin/ai-providers')
                .then(response => response.json())
                .then(data => {
                    const list = document.getElementById('providersList');
                    list.innerHTML = '';

                    if (data.providers && data.providers.length > 0) {
                        data.providers.forEach(provider => {
                            const div = document.createElement('div');
                            div.className = 'bg-gray-50 p-4 rounded-lg flex justify-between items-center';
                            div.innerHTML = `
                                <div>
                                    <h3 class="font-bold text-lg">${getProviderName(provider.provider)}</h3>
                                    <p class="text-sm text-gray-600">Modelo: ${provider.model}</p>
                                    <p class="text-sm ${provider.is_active ? 'text-green-600' : 'text-red-600'}">
                                        ${provider.is_active ? '✓ Activo' : '✗ Inactivo'}
                                    </p>
                                </div>
                                <div class="flex space-x-2">
                                    ${!provider.is_active ? `<button onclick="testProvider(${provider.id})" class="bg-blue-500 text-white px-4 py-2 rounded">Probar</button>` : ''}
                                    <button onclick="deleteProvider(${provider.id})" class="bg-red-500 text-white px-4 py-2 rounded">Eliminar</button>
                                </div>
                            `;
                            list.appendChild(div);
                        });
                    } else {
                        list.innerHTML = '<p class="text-gray-500">No hay proveedores configurados</p>';
                    }
                })
                .catch(error => {
                    console.error('Error loading providers:', error);
                });
        }

        function getProviderName(provider) {
            const names = {
                'openai': 'OpenAI (GPT)',
                'gemini': 'Google Gemini',
                'ollama': 'Ollama (Local)',
                'anthropic': 'Anthropic Claude',
                'custom': 'Personalizado'
            };
            return names[provider] || provider;
        }

        function getDefaultModel(provider) {
            const models = {
                'openai': 'gpt-4',
                'gemini': 'gemini-pro',
                'ollama': 'llama2',
                'anthropic': 'claude-3-opus-20240229'
            };
            return models[provider] || '';
        }

        function testProvider(id) {
            fetch(`/api/admin/ai-providers/${id}/test`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('✅ ' + data.message);
                    loadProviders();
                } else {
                    alert('❌ ' + (data.error || 'Error al probar proveedor'));
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error al probar proveedor');
            });
        }

        function deleteProvider(id) {
            if (confirm('¿Eliminar este proveedor?')) {
                fetch(`/api/admin/ai-providers/${id}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    alert(data.message);
                    loadProviders();
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Error al eliminar proveedor');
                });
            }
        }
    </script>
@endpush