document.addEventListener('DOMContentLoaded', function() {
    // Current active module
    let activeModule = 'generation';
    const modules = [
        { id: 'generation', name: 'Génération Rapide', icon: '⚡', color: 'from-blue-600 to-purple-600' },
        { id: 'pricing', name: 'Pricing SaaS', icon: '💰', color: 'from-green-600 to-emerald-600' },
        { id: 'landing', name: 'Landing Pro', icon: '🚀', color: 'from-orange-600 to-red-600' },
        { id: 'dashboard', name: 'Dashboard Pro', icon: '📊', color: 'from-cyan-600 to-blue-600' },
        { id: 'boutique', name: 'Boutique Pro', icon: '🛍️', color: 'from-pink-600 to-rose-600' },
        { id: 'video', name: 'Script Vidéo', icon: '🎬', color: 'from-purple-600 to-indigo-600' },
    ];

    // Initialize with default module
    loadModuleContent(activeModule);

    // Handle module switching
    document.addEventListener('click', function(e) {
        if (e.target.closest('[data-module]')) {
            const moduleId = e.target.closest('[data-module]').getAttribute('data-module');
            activeModule = moduleId;
            loadModuleContent(moduleId);
            updatePreviewPanel(moduleId);
        }
    });

    // Load module content
    function loadModuleContent(moduleId) {
        const panel = document.getElementById('generator-panel');
        const module = modules.find(m => m.id === moduleId);
        
        let content = '';
        switch(moduleId) {
            case 'generation':
                content = `
                    <div class="space-y-4 module-content p-6">
                        <div class="bg-gradient-to-r ${module.color} rounded-lg p-6 text-white">
                            <h2 class="text-2xl font-bold mb-2">${module.name}</h2>
                            <p class="text-blue-100">Générez vos interfaces en quelques secondes</p>
                        </div>
                        <div class="grid grid-cols-1 gap-4">
                            <input type="text" placeholder="Titre du projet" class="border rounded-lg p-3">
                            <textarea placeholder="Description" class="border rounded-lg p-3 h-24"></textarea>
                            <button class="bg-blue-600 text-white rounded-lg p-3 font-semibold hover:bg-blue-700">
                                Générer
                            </button>
                        </div>
                    </div>
                `;
                break;
            case 'pricing':
                content = `
                    <div class="space-y-4 module-content p-6">
                        <div class="bg-gradient-to-r ${module.color} rounded-lg p-6 text-white">
                            <h2 class="text-2xl font-bold mb-2">${module.name}</h2>
                            <p class="text-green-100">Créez des pages de tarification professionnelles</p>
                        </div>
                        <div class="grid grid-cols-1 gap-4">
                            <input type="text" placeholder="Nom du produit" class="border rounded-lg p-3">
                            <input type="number" placeholder="Prix mensuel" class="border rounded-lg p-3">
                            <textarea placeholder="Fonctionnalités (une par ligne)" class="border rounded-lg p-3 h-32"></textarea>
                            <button class="bg-green-600 text-white rounded-lg p-3 font-semibold hover:bg-green-700">
                                Créer la page
                            </button>
                        </div>
                    </div>
                `;
                break;
            // Other cases would follow the same pattern
            default:
                content = `<div class="p-6 text-center">Module non disponible</div>`;
        }
        
        panel.innerHTML = content;
    }

    // Update preview panel
    function updatePreviewPanel(moduleId) {
        const module = modules.find(m => m.id === moduleId);
        const event = new CustomEvent('module-changed', { 
            detail: { 
                moduleName: module.name,
                moduleIcon: module.icon
            }
        });
        document.dispatchEvent(event);
    }

    // Handle message sending
    document.querySelector('#message-input').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            sendMessage();
        }
    });

    document.querySelector('button').addEventListener('click', sendMessage);

    function sendMessage() {
        const input = document.querySelector('#message-input');
        const message = input.value.trim();
        if (message) {
            console.log('Message sent:', message);
            input.value = '';
        }
    }
});