script.js

class MainApplication {
    constructor() {
        this.projects = [];
        this.currentProject = null;
        this.init();
    }

    init() {
        this.loadProjects();
        this.setupEventListeners();
        this.setupDragAndDrop();
        this.updateUI();
        this.setupRealTimeUpdates();
    }

    loadProjects() {
        try {
            const saved = localStorage.getItem('projects');
            this.projects = saved ? JSON.parse(saved) : [];
        } catch (error) {
            console.error('Erreur chargement projets:', error);
            this.projects = [];
        }
    }

    saveProjects() {
        localStorage.setItem('projects', JSON.stringify(this.projects));
        localStorage.setItem('hasUnsavedChanges', 'true');
    }

    setupEventListeners() {
        // Nouveau projet
        document.getElementById('new-project')?.addEventListener('click', () => {
            this.showNewProjectModal();
        });

        // Création de projet
        document.getElementById('create-project')?.addEventListener('click', () => {
            this.createProject();
        });

        document.getElementById('cancel-project')?.addEventListener('click', () => {
            this.hideNewProjectModal();
        });

        // Gestion du chat
        document.getElementById('send-btn')?.addEventListener('click', () => {
            this.sendChatMessage();
        });

        document.getElementById('chat-input')?.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                this.sendChatMessage();
            }
        });

        // Export/Import
        document.getElementById('export-data')?.addEventListener('click', () => {
            this.exportData();
        });

        document.getElementById('import-data')?.addEventListener('click', () => {
            this.importData();
        });

        // Paramètres
        document.getElementById('settings')?.addEventListener('click', () => {
            this.showSettings();
        });

        // Gestion des paramètres de protection
        const protectionSettings = ['auto-backup', 'prevent-reset', 'encrypt-data', 'cloud-backup'];
        protectionSettings.forEach(setting => {
            document.getElementById(setting)?.addEventListener('change', (e) => {
                this.saveSetting(setting, e.target.checked);
            });
        });
    }

    showNewProjectModal() {
        const modal = document.getElementById('new-project-modal');
        modal.classList.remove('hidden');
        document.getElementById('project-name').focus();
    }

    hideNewProjectModal() {
        const modal = document.getElementById('new-project-modal');
        modal.classList.add('hidden');
        document.getElementById('project-name').value = '';
    }

    createProject() {
        const name = document.getElementById('project-name').value.trim();
        const type = document.getElementById('project-type').value;
        
        if (!name) {
            this.showNotification('Veuillez entrer un nom pour le projet', 'error');
            return;
        }

        const project = {
            id: Date.now().toString(),
            name: name,
            type: type,
            createdAt: new Date().toISOString(),
            updatedAt: new Date().toISOString(),
            files: [],
            protected: true
        };

        this.projects.push(project);
        this.saveProjects();
        this.updateProjectsList();
        this.hideNewProjectModal();
        
        this.showNotification(`Projet "${name}" créé avec succès!`, 'success');
        
        // Ajouter un message dans le chat
        this.addAIMessage(`Nouveau projet créé: <strong>${name}</strong>. Je vais vous aider à le développer.`);
    }

    updateProjectsList() {
        const listElement = document.getElementById('projects-list');
        if (!listElement) return;

        listElement.innerHTML = '';
        
        this.projects.forEach(project => {
            const projectElement = document.createElement('div');
            projectElement.className = 'project-item';
            projectElement.innerHTML = `
                <div class="project-name">${project.name}</div>
                <div class="project-meta">
                    <span class="project-type">${project.type}</span>
                    <span class="project-date">${new Date(project.createdAt).toLocaleDateString()}</span>
                </div>
                <div class="project-actions">
                    <button class="project-action-btn" onclick="mainApp.openProject('${project.id}')">
                        <i class="fas fa-folder-open"></i>
                    </button>
                    <button class="project-action-btn" onclick="mainApp.deleteProject('${project.id}')">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            `;
            listElement.appendChild(projectElement);
        });

        // Ajouter des styles pour les actions
        const style = document.createElement('style');
        style.textContent = `
            .project-meta {
                display: flex;
                justify-content: space-between;
                margin-top: 5px;
                font-size: 12px;
            }
            .project-actions {
                display: flex;
                gap: 5px;
                margin-top: 10px;
            }
            .project-action-btn {
                background: rgba(255, 255, 255, 0.1);
                border: none;
                width: 30px;
                height: 30px;
                border-radius: 5px;
                color: white;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .project-action-btn:hover {
                background: var(--accent-color);
            }
        `;
        
        if (!document.querySelector('#project-actions-style')) {
            style.id = 'project-actions-style';
            document.head.appendChild(style);
        }
    }

    openProject(projectId) {
        const project = this.projects.find(p => p.id === projectId);
        if (project) {
            this.currentProject = project;
            this.addAIMessage(`Ouverture du projet: <strong>${project.name}</strong>. Prêt à travailler!`);
            this.showNotification(`Projet "${project.name}" ouvert`, 'info');
        }
    }

    deleteProject(projectId) {
        if (confirm('Êtes-vous sûr de vouloir supprimer ce projet? Cette action ne peut pas être annulée.')) {
            this.projects = this.projects.filter(p => p.id !== projectId);
            this.saveProjects();
            this.updateProjectsList();
            this.showNotification('Projet supprimé', 'info');
        }
    }

    sendChatMessage() {
        const input = document.getElementById('chat-input');
        const message = input.value.trim();
        
        if (!message) return;

        // Ajouter le message de l'utilisateur
        this.addUserMessage(message);
        input.value = '';

        // Simuler une réponse de l'IA
        setTimeout(() => {
            this.generateAIResponse(message);
        }, 1000);
    }

    addUserMessage(message) {
        const chatMessages = document.getElementById('chat-messages');
        const messageDiv = document.createElement('div');
        messageDiv.className = 'message user-message';
        messageDiv.innerHTML = `
            <div class="message-content">${message}</div>
            <div class="message-time">${new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</div>
        `;
        chatMessages.appendChild(messageDiv);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    addAIMessage(message) {
        const chatMessages = document.getElementById('chat-messages');
        const messageDiv = document.createElement('div');
        messageDiv.className = 'message ai-message';
        messageDiv.innerHTML = `
            <div class="message-content">${message}</div>
            <div class="message-time">${new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</div>
        `;
        chatMessages.appendChild(messageDiv);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    generateAIResponse(userMessage) {
        const responses = {
            'bonjour': 'Bonjour! Comment puis-je vous aider avec votre entreprise aujourd\'hui?',
            'aide': 'Je peux vous aider à: créer des projets, générer des images/vidéos, protéger vos données, et bien plus encore. Dites-moi ce dont vous avez besoin!',
            'merci': 'Avec plaisir! N\'hésitez pas si vous avez d\'autres questions.',
            'sauve