<!--
═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
🎨 GÉNÉRATEUR DE DIAPOSITIVES IA - INTERFACE PRINCIPALE
═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════

📄 DESCRIPTION :
Cette page constitue l'interface principale d'une application web sophistiquée permettant de générer automatiquement
des présentations PowerPoint à partir d'images et de descriptions textuelles. L'application utilise l'intelligence
artificielle pour analyser les images, créer un plan de présentation et générer des diapositives HTML interactives
qui peuvent ensuite être exportées au format PowerPoint (.pptx).

🏗️ ARCHITECTURE DE L'INTERFACE :
┌─────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│                                     INTERFACE DIVISÉE EN DEUX PANNEAUX                                            │
├─────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│                                                                                                                     │
│  📋 PANNEAU GAUCHE (620px)                    │  🖼️ PANNEAU DROIT (flexible)                                     │
│  ├─ Header avec titre et badge "Bêta"        │  ├─ Header avec titre "Aperçu" et bouton export                  │
│  ├─ Zone de chat interactive                 │  ├─ Conteneur de prévisualisation des slides                     │
│  │  ├─ Messages utilisateur et IA            │  │  ├─ Slides affichées en cartes                                │
│  │  ├─ Analyse d'image en temps réel         │  │  ├─ Chaque slide avec onglets Aperçu/Code/Éditer             │
│  │  ├─ Plan de présentation généré           │  │  └─ Iframes pour affichage du contenu HTML                   │
│  │  └─ Suivi de progression par étapes       │  └─ État vide avec instructions                                  │
│  └─ Zone de saisie moderne avec :            │                                                                   │
│     ├─ Textarea avec placeholder             │                                                                   │
│     ├─ Bouton d'ajout d'image                │                                                                   │
│     ├─ Zone des fichiers attachés            │                                                                   │
│     └─ Bouton de génération                  │                                                                   │
│                                               │                                                                   │
└─────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘

🔧 FONCTIONNALITÉS PRINCIPALES :

1. 📤 UPLOAD ET ANALYSE D'IMAGES :
   - Support des formats image standards (JPEG, PNG, GIF, etc.)
   - Validation de taille (max 5MB)
   - Analyse automatique par IA des éléments visuels, couleurs, style et ambiance
   - Affichage des résultats d'analyse avec palette de couleurs interactive

2. 🤖 GÉNÉRATION INTELLIGENTE :
   - Utilisation de l'API Gemini 2.5 Pro par défaut
   - Flux de génération en 3 étapes avec retour temps réel :
     * Étape 1/3 : Analyse de l'image (extraction d'informations visuelles)
     * Étape 2/3 : Planification de la structure (création du plan détaillé)
     * Étape 3/3 : Génération du contenu (création des slides HTML)
   - Suivi de progression avec indicateurs visuels et "thinking" en temps réel

3. 💬 INTERFACE CONVERSATIONNELLE :
   - Chat interactif avec messages stylisés
   - Affichage des avatars utilisateur et IA
   - Support des images dans les messages
   - Popup d'agrandissement des images
   - Messages de processus avec accordéons dépliables

4. 🎨 PRÉVISUALISATION AVANCÉE :
   - Affichage en temps réel des slides générées
   - Système d'onglets par slide : Aperçu / Code / Éditer
   - Rendu HTML dans des iframes sécurisées (1280x720)
   - Code source avec coloration syntaxique
   - Système d'édition avancé avec popup full-screen

5. 📊 EXPORT POWERPOINT :
   - Génération de fichiers .pptx natifs
   - Capture pixel-perfect des slides via html2canvas
   - Préservation de la qualité et du formatage
   - Barre de progression pour l'export
   - Notifications de succès/erreur

🔗 DÉPENDANCES EXTERNES :
- html2canvas v1.4.1 : Capture d'écran des éléments HTML pour l'export
- PptxGenJS v3.12.0 : Génération de fichiers PowerPoint
- styles.css : Styles principaux de l'interface
- slide-editor.css : Styles spécifiques à l'éditeur de slides
- slide-editor.js : Logique d'édition avancée des slides

⚡ FLUX DE FONCTIONNEMENT :
1. L'utilisateur télécharge une image et saisit une description
2. Validation côté client (format, taille)
3. Envoi via SSE (Server-Sent Events) vers l'API backend
4. Traitement par IA avec retour temps réel des étapes
5. Affichage progressif des résultats (analyse, plan, slides)
6. Prévisualisation interactive avec possibilité d'édition
7. Export final vers PowerPoint avec progression visuelle

🎛️ SYSTÈME DE MISE À L'ÉCHELLE :
L'interface utilise un système de scaling automatique pour s'adapter à toutes les résolutions d'écran :
- Résolution de référence : 1920x1080
- Calcul dynamique du facteur d'échelle selon la taille de la fenêtre
- Maintien des proportions et de l'utilisabilité
- Gestion des événements de redimensionnement et rotation

🔐 SÉCURITÉ ET PERFORMANCE :
- Iframes avec sandbox pour l'isolation du contenu généré
- Validation stricte des uploads d'images
- Gestion d'erreurs avec messages utilisateur
- Optimisation des performances avec débouncing
- Prévention des attaques XSS sur le contenu généré

📱 RESPONSIVE ET ACCESSIBILITÉ :
- Design adaptatif avec breakpoints optimisés
- Support des interactions tactiles et clavier
- Raccourcis clavier (Ctrl+Z, Escape, etc.)
- Indicateurs visuels et feedback utilisateur
- Messages d'erreur informatifs et actions guidées

═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
-->

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Générateur de Diapositives IA</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/gitbrent/pptxgenjs@3.12.0/dist/pptxgen.bundle.js"></script>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="slide-editor.css">
</head>
<body>
    <div class="app-wrapper">
        <div class="app-container">
        <div class="left-panel">
            <div class="app-header">
                <div class="page-header-item">
                    <div class="page-header-content">
                        <div class="page-header-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M2 3h20"></path>
                                <path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"></path>
                                <path d="m7 21 5-5 5 5"></path>
                            </svg>
                </div>
                        <span class="page-header-label">Slides</span>
                    </div>
                    <span class="page-header-badge">Bêta</span>
                </div>
            </div>

            <!-- Sélecteur de modèle caché avec valeur par défaut -->
            <select id="model-select" style="display: none;">
                <option value="google/gemini-2.5-pro-preview-06-05" selected>Google: Gemini 2.5 Pro Preview 06-05</option>
            </select>

            <div class="chat-container">
                <div class="chat-messages" id="chat-messages">
                </div>

                <div class="input-container">
                    <div class="modern-input-wrapper">
                        <div class="rainbow-gradient-bg"></div>
                        <div class="modern-input-container">
                            <div class="input-content-wrapper">
                                <div class="textarea-wrapper">
                        <textarea 
                            id="prompt-input" 
                                        class="modern-textarea" 
                            placeholder="Décrivez la présentation que vous souhaitez créer..."
                            onkeydown="handleTextareaKeydown(event)"
                        ></textarea>
                                    <div class="input-actions">
                                        <input type="file" id="image-input" accept="image/*" style="display: none;" onchange="handleImageSelect(event)">
                                        <button class="action-button" onclick="document.getElementById('image-input').click()" title="Ajouter une image">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                <path d="M13.234 20.252 21 12.3"></path>
                                                <path d="m16 6-8.414 8.586a2 2 0 0 0 0 2.828 2 2 0 0 0 2.828 0l8.414-8.586a4 4 0 0 0 0-5.656 4 4 0 0 0-5.656 0l-8.415 8.585a6 6 0 1 0 8.486 8.486"></path>
                            </svg>
                                        </button>
                                        <button id="generate-btn" class="action-button send-button" onclick="generateSlides()" disabled>
                                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                <path d="m5 12 7-7 7 7"></path>
                                                <path d="M12 19V5"></path>
                                            </svg>
                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="attached-files-zone" id="attached-files-zone">
                                <div class="attached-files-list" id="attached-files-list">
                                    <div class="files-placeholder" id="files-placeholder">
                                        <svg class="files-placeholder-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M13.234 20.252 21 12.3"></path>
                                            <path d="m16 6-8.414 8.586a2 2 0 0 0 0 2.828 2 2 0 0 0 2.828 0l8.414-8.586a4 4 0 0 0 0-5.656 4 4 0 0 0-5.656 0l-8.415 8.585a6 6 0 1 0 8.486 8.486"></path>
                                        </svg>
                                        <span>Image à joindre</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="right-panel">
            <div class="preview-header">
                <div class="preview-title">
                    <h1>Aperçu des diapositives</h1>
                </div>
                <div class="export-btn-wrapper disabled" id="export-btn-wrapper">
                    <button id="export-pptx-btn" onclick="exportToPPTX()" disabled>
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                            <polyline points="14,2 14,8 20,8"></polyline>
                            <path d="M12 18v-6"></path>
                            <path d="m9 15 3 3 3-3"></path>
                        </svg>
                                                 <span>Exporter en PowerPoint</span>
                </button>
                </div>
            </div>

            <div class="slides-preview-container" id="slides-container">
                <div class="empty-state">
                    <div class="empty-state-text">Prêt à créer vos diapositives ?</div>
                    <div class="empty-state-subtext">Téléchargez une image et décrivez votre présentation pour commencer</div>
                </div>
            </div>
        </div>
    </div>
    </div>

    <script>
        // Fonction de mise à l'échelle qui utilise tout l'espace disponible
        function adjustScale() {
            const wrapper = document.querySelector('.app-wrapper');
            
            // Résolution de référence
            const baseWidth = 1920;
            const baseHeight = 1080;
            
            // Taille de la fenêtre actuelle
            const screenWidth = window.innerWidth;
            const screenHeight = window.innerHeight;
            
            // Calcul du facteur d'échelle pour remplir l'écran
            const scaleX = screenWidth / baseWidth;
            const scaleY = screenHeight / baseHeight;
            
            // Utiliser le plus grand facteur pour remplir complètement l'écran
            const scale = Math.max(scaleX, scaleY);
            
            // Application de la transformation depuis le coin supérieur gauche
            wrapper.style.transform = `scale(${scale})`;
            
            // Ajuster la taille du wrapper pour éviter les barres de défilement
            wrapper.style.width = (screenWidth / scale) + 'px';
            wrapper.style.height = (screenHeight / scale) + 'px';
        }

        // Débounce pour optimiser les performances
        let resizeTimeout;
        function handleResize() {
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout(adjustScale, 50);
        }

        // Appliquer la mise à l'échelle
        window.addEventListener('load', adjustScale);
        window.addEventListener('resize', handleResize);
        window.addEventListener('orientationchange', adjustScale);
        
        // Appel initial
        adjustScale();
    </script>

    <script>
        let selectedImage = null;
        let selectedImageFile = null;
        let presentationData = null;
        let allModels = [];
        let activeProcessMessages = {};
        let thinkingIntervals = {};
        let generatedContents = [];
        let currentContentIndex = 0;
        let slideHTMLBackups = {};

        // Charger les crédits au démarrage
        loadCredits();
        loadModels();
        
        // Ajouter un listener pour activer/désactiver le bouton
        document.addEventListener('DOMContentLoaded', function() {
            const promptInput = document.getElementById('prompt-input');
            promptInput.addEventListener('input', checkEnableGenerateButton);
            
            // Message d'accueil par défaut
            addWelcomeMessage();
        });

        function addWelcomeMessage() {
            const welcomeText = `Bonjour ! 👋 Ajoutez une image et décrivez votre présentation pour commencer.`;
            
            addChatMessage('ai', welcomeText);
        }

        async function loadCredits() {
            try {
                const response = await fetch('/api/credits');
                const data = await response.json();

                if (data.success) {
                    const credits = data.data.data || data.data;
                    const remaining = credits.limit_remaining || (credits.limit - credits.usage) || 0;
                    document.getElementById('credits-display').textContent = `$${remaining.toFixed(4)}`;
                }
            } catch (error) {
                console.error('Erreur chargement crédits:', error);
                document.getElementById('credits-display').textContent = '$0.00';
            }
        }

        async function loadModels() {
            try {
                const response = await fetch('/api/models');
                const data = await response.json();
                if (data.success) {
                    allModels = data.models;
                    
                    allModels.sort((a, b) => a.name.localeCompare(b.name));
                    
                    const modelSelect = document.getElementById('model-select');
                    const currentSelection = modelSelect.value; // Préserver la sélection actuelle
                    modelSelect.innerHTML = '';
                    
                    // Ajouter d'abord l'option par défaut avec le bon nom
                    const defaultOption = document.createElement('option');
                    defaultOption.value = 'google/gemini-2.5-pro-preview-06-05';
                    defaultOption.textContent = 'Google: Gemini 2.5 Pro Preview 06-05';
                    defaultOption.selected = true;
                    modelSelect.appendChild(defaultOption);
                    
                    // Ajouter les autres modèles (en évitant les doublons)
                    allModels.forEach(model => {
                        if (model.id !== 'google/gemini-2.5-pro-preview-06-05') {
                        const option = document.createElement('option');
                        option.value = model.id;
                        option.textContent = model.name;
                        modelSelect.appendChild(option);
                        }
                    });
                    
                    // Restaurer la sélection par défaut
                    modelSelect.value = currentSelection || 'google/gemini-2.5-pro-preview-06-05';
                    
                    console.log('✅ Modèles chargés, sélection par défaut:', modelSelect.value, '- Texte affiché:', modelSelect.selectedOptions[0]?.textContent);
                }
            } catch (error) {
                console.error('Erreur chargement modèles:', error);
                // En cas d'erreur, s'assurer que l'option par défaut reste
                const modelSelect = document.getElementById('model-select');
                if (modelSelect.options.length === 0 || !modelSelect.value) {
                    const defaultOption = document.createElement('option');
                    defaultOption.value = 'google/gemini-2.5-pro-preview-06-05';
                    defaultOption.textContent = 'Google: Gemini 2.5 Pro Preview 06-05';
                    defaultOption.selected = true;
                    modelSelect.appendChild(defaultOption);
                }
            }
        }

        function handleImageSelect(event) {
            const file = event.target.files[0];
            if (!file) return;

            if (!file.type.startsWith('image/')) {
                alert('Veuillez sélectionner une image valide');
                return;
            }

            if (file.size > 5 * 1024 * 1024) {
                alert('L\'image ne doit pas dépasser 5MB');
                return;
            }

            // Supprimer toute pièce jointe existante pour n'en avoir qu'une seule
            removeAttachedImage();

            const reader = new FileReader();
            reader.onload = function(e) {
                selectedImage = e.target.result;
                selectedImageFile = file;
                
                // Afficher la zone des fichiers attachés
                const attachedList = document.getElementById('attached-files-list');
                const placeholder = document.getElementById('files-placeholder');
                
                // Masquer le placeholder
                if (placeholder) {
                    placeholder.style.display = 'none';
                }
                
                // Créer le badge pour l'image
                const badge = document.createElement('span');
                badge.className = 'attached-file-badge';
                badge.innerHTML = `
                    <svg class="attached-file-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                        <circle cx="8.5" cy="8.5" r="1.5"></circle>
                        <polyline points="21 15 16 10 5 21"></polyline>
                    </svg>
                    <span class="attached-file-name" title="${file.name}">${file.name}</span>
                    <button class="remove-file-btn" onclick="removeAttachedImage()">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M18 6 6 18"></path>
                            <path d="m6 6 12 12"></path>
                        </svg>
                    </button>
                `;
                
                // Ajouter le badge après le placeholder caché
                attachedList.appendChild(badge);
                
                // Activer le bouton d'envoi
                checkEnableGenerateButton();
            };
            reader.readAsDataURL(file);
        }
        
        function removeAttachedImage() {
            selectedImage = null;
            selectedImageFile = null;
            document.getElementById('image-input').value = '';
            
            // Supprimer le badge et réafficher le placeholder
            const attachedList = document.getElementById('attached-files-list');
            const placeholder = document.getElementById('files-placeholder');
            const badges = attachedList.querySelectorAll('.attached-file-badge');
            
            badges.forEach(badge => badge.remove());
            
            if (placeholder) {
                placeholder.style.display = 'flex';
            }
            
            checkEnableGenerateButton();
        }
        
        function checkEnableGenerateButton() {
            const generateBtn = document.getElementById('generate-btn');
            const promptInput = document.getElementById('prompt-input');
            
            if (selectedImage && promptInput.value.trim()) {
                generateBtn.disabled = false;
            } else {
                generateBtn.disabled = true;
            }
        }

        function addChatMessage(type, text) {
            const messagesContainer = document.getElementById('chat-messages');
            const messageDiv = document.createElement('div');
            const isUser = type === 'user';
            messageDiv.className = `chat-message ${isUser ? 'user-message' : 'ai-message'}`;
            
            const escapedText = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
            
            if (isUser) {
            messageDiv.innerHTML = `
                    <div class="message-container">
                        <div class="message-content-wrapper">
                            <div class="message-header">
                                <span class="message-avatar user-avatar-bg">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                        <circle cx="12" cy="7" r="4"></circle>
                                    </svg>
                                </span>
                                <div class="message-author">Utilisateur</div>
                </div>
                <div class="message-content">
                                <div class="message-text">${escapedText}</div>
                            </div>
                        </div>
                </div>
            `;
            } else {
                const avatarIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"></path><rect width="16" height="12" x="4" y="8" rx="2"></rect><path d="M2 14h2"></path><path d="M20 14h2"></path><path d="M15 13v2"></path><path d="M9 13v2"></path></svg>`;
                
                messageDiv.innerHTML = `
                    <div class="message-container">
                        <span class="message-avatar ai-avatar">
                            ${avatarIcon}
                        </span>
                        <div class="message-content-wrapper">
                            <div class="message-header">
                                <div class="message-author">Assistant Slides IA</div>
                            </div>
                            <div class="message-content">
                                <div class="message-text">${escapedText}</div>
                            </div>
                        </div>
                    </div>
                `;
            }
            
            messagesContainer.appendChild(messageDiv);
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }

        function addUserMessageWithImage(imageBase64, text) {
            const messagesContainer = document.getElementById('chat-messages');
            const messageDiv = document.createElement('div');
            messageDiv.className = 'chat-message user-message';
            
            let content = `
                <div class="message-container">
                    <div class="message-content-wrapper">
                        <div class="message-header">
                            <span class="message-avatar user-avatar-bg">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                    <circle cx="12" cy="7" r="4"></circle>
                                </svg>
                            </span>
                            <div class="message-author">Utilisateur</div>
                        </div>
                <div class="message-content">
            `;
            
            // Ajouter l'image si elle existe
            if (imageBase64) {
                content += `
                    <div class="message-image">
                        <img src="${imageBase64}" alt="Image téléchargée" class="chat-uploaded-image" onclick="openImagePopup('${imageBase64}')">
                    </div>
                `;
            }
            
            // Ajouter le texte si il existe
            if (text && text.trim()) {
                const escapedText = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
                content += `<div class="message-text">${escapedText}</div>`;
            }
            
            content += `
                        </div>
                    </div>
                </div>
            `;
            
            messageDiv.innerHTML = content;
            
            messagesContainer.appendChild(messageDiv);
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }

        function openImagePopup(imageBase64) {
            let popup = document.getElementById('image-popup');
            if (!popup) {
                popup = document.createElement('div');
                popup.id = 'image-popup';
                popup.className = 'image-popup-overlay';
                popup.innerHTML = `
                    <div class="image-popup-content">
                        <button class="image-popup-close" onclick="closeImagePopup()">×</button>
                        <img class="image-popup-image" id="popup-image" src="" alt="Image agrandie">
                    </div>
                `;
                document.body.appendChild(popup);
                
                popup.addEventListener('click', function(e) {
                    if (e.target === popup) {
                        closeImagePopup();
                    }
                });
                
                document.addEventListener('keydown', function(e) {
                    if (e.key === 'Escape' && popup.classList.contains('active')) {
                        closeImagePopup();
                    }
                });
            }
            
            document.getElementById('popup-image').src = imageBase64;
            popup.classList.add('active');
            document.body.style.overflow = 'hidden';
        }

        function closeImagePopup() {
            const popup = document.getElementById('image-popup');
            if (popup) {
                popup.classList.remove('active');
                document.body.style.overflow = '';
            }
        }

        function handleTextareaKeydown(event) {
            if (event.key === 'Enter' && !event.shiftKey) {
                event.preventDefault();
                generateSlides();
            }
        }

        function switchSlideView(slideNumber, view) {
            const tabs = document.querySelectorAll(`[onclick*="switchSlideView(${slideNumber}"]`);
            tabs.forEach(tab => tab.classList.remove('active'));
            event.target.classList.add('active');
            
            const previewView = document.getElementById(`slide-preview-${slideNumber}`);
            const codeView = document.getElementById(`slide-code-${slideNumber}`);
            
            [previewView, codeView].forEach(v => v?.classList.remove('active'));
            
            if (view === 'preview') {
                previewView.classList.add('active');
            } else if (view === 'code') {
                codeView.classList.add('active');
            }
        }

        // Fonction pour nettoyer le HTML des balises markdown générées par le LLM
        function cleanSlideHtml(html) {
            if (!html || typeof html !== 'string') {
                return html;
            }
            
            // Supprimer les balises markdown communes
            return html
                // Supprimer ```html au début
                .replace(/^```html\s*/i, '')
                // Supprimer ``` à la fin
                .replace(/\s*```\s*$/i, '')
                // Supprimer les balises markdown génériques
                .replace(/^```\s*/i, '')
                // Supprimer les espaces en début et fin
                .trim();
        }

        function highlightHtml(html) {
            return html
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#39;')
                .replace(/(&lt;\/?)([\w-]+)/g, '$1<span class="token tag">$2</span>')
                .replace(/([\w-]+)(=)/g, '<span class="token attr-name">$1</span>$2')
                .replace(/=(&quot;[^&]*&quot;|&#39;[^&]*&#39;)/g, '=<span class="token attr-value">$1</span>');
        }

        function displaySingleSlide(slideData) {
            const container = document.getElementById('slides-container');
            
            const emptyState = container.querySelector('.empty-state');
            if (emptyState && slideData.slideNumber === 1) {
                emptyState.remove();
            }
            
            // Nettoyer le HTML des balises markdown
            const cleanedHtml = cleanSlideHtml(slideData.html);
            
            const slideCard = document.createElement('div');
            slideCard.className = 'slide-card';
            slideCard.style.opacity = '0';
            slideCard.style.transform = 'translateY(20px)';
            slideCard.style.transition = 'all 0.5s ease';
            
            const iframeId = `slide-iframe-${slideData.slideNumber}`;
            
            slideCard.innerHTML = `
                <div class="slide-header">
                    <div class="slide-number">${slideData.slideNumber}</div>
                    <div class="slide-title">${slideData.content.title || `Diapositive ${slideData.slideNumber}`}</div>
                    <div class="slide-tabs">
                        <button class="slide-tab active" onclick="switchSlideView(${slideData.slideNumber}, 'preview')">
                            Aperçu
                        </button>
                        <button class="slide-tab" onclick="switchSlideView(${slideData.slideNumber}, 'code')">
                            Code
                        </button>
                        <button class="slide-tab edit-popup-btn" onclick="openSlideEditor(${slideData.slideNumber})">
                            Éditer
                        </button>
                                </div>
                                </div>
                <div class="slide-content">
                    <div id="slide-preview-${slideData.slideNumber}" class="slide-view active">
                        <div class="slide-iframe-wrapper">
                            <iframe id="${iframeId}" class="slide-iframe" sandbox="allow-same-origin allow-scripts"></iframe>
                            </div>
                        </div>
                    <div id="slide-code-${slideData.slideNumber}" class="slide-view">
                        <pre class="slide-code-display"><code class="language-html">${highlightHtml(cleanedHtml)}</code></pre>
                            </div>
                        </div>
                    `;
            
            container.appendChild(slideCard);
            
            const iframe = document.getElementById(iframeId);
            if (iframe) {
                const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
                iframeDoc.open();
                iframeDoc.write(cleanedHtml);
                iframeDoc.close();
            }
            
            setTimeout(() => {
                slideCard.style.opacity = '1';
                slideCard.style.transform = 'translateY(0)';
            }, 100);
            
            setTimeout(() => {
                slideCard.scrollIntoView({ 
                    behavior: 'smooth', 
                    block: 'nearest' 
                });
            }, 200);
            
            console.log(`✅ Slide ${slideData.slideNumber} affichée`);
            

        }

        // FONCTIONS POUR LES MESSAGES DE PROCESSUS ET ÉTAPES DE GÉNÉRATION
        function createProcessMessage(phase, message, icon) {
            const messagesContainer = document.getElementById('chat-messages');
            const processDiv = document.createElement('div');
            processDiv.className = 'process-message ai-message';
            processDiv.id = `process-${phase}`;
            
            const avatarIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"></path><rect width="16" height="12" x="4" y="8" rx="2"></rect><path d="M2 14h2"></path><path d="M20 14h2"></path><path d="M15 13v2"></path><path d="M9 13v2"></path></svg>`;
            
            processDiv.innerHTML = `
                <div class="message-container">
                    <span class="message-avatar ai-avatar">
                        ${avatarIcon}
                    </span>
                    <div class="message-content-wrapper">
                        <div class="message-header">
                            <div class="message-author">Assistant Slides IA</div>
                        </div>
                        <div class="message-content">
                <div class="process-header">
                    <div class="process-icon">${icon || '⚙️'}</div>
                    <div class="process-title">${message}</div>
                    <div class="process-status">
                        <span class="thinking-loader"></span>
                        <span>En cours...</span>
                    </div>
                </div>
                <div class="thinking-box" style="display: none;">
                    <div class="thinking-header" onclick="toggleThinkingBox(this)">
                        <div class="thinking-label">
                            <span>🧠</span>
                            <span>Raisonnement</span>
                        </div>
                        <span class="thinking-toggle">▼</span>
                    </div>
                    <div class="thinking-content-wrapper">
                        <div class="thinking-content">
                            <span class="thinking-text"></span>
                            <span class="thinking-cursor"></span>
                        </div>
                    </div>
                </div>
                <div class="inline-progress" style="display: none;">
                    <div class="inline-progress-bar">
                        <div class="inline-progress-fill" style="width: 0%"></div>
                    </div>
                    <div class="inline-progress-text"></div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            messagesContainer.appendChild(processDiv);
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
            
            activeProcessMessages[phase] = processDiv;
            return processDiv;
        }

        function toggleThinkingBox(header) {
            const thinkingBox = header.closest('.thinking-box');
            const contentWrapper = thinkingBox.querySelector('.thinking-content-wrapper');
            const toggle = header.querySelector('.thinking-toggle');
            
            if (contentWrapper.classList.contains('expanded')) {
                contentWrapper.classList.remove('expanded');
                toggle.classList.remove('expanded');
            } else {
                contentWrapper.classList.add('expanded');
                toggle.classList.add('expanded');
            }
        }

        function updateProcessThinking(phase, thinking, isComplete = false) {
            const processDiv = activeProcessMessages[phase];
            if (!processDiv) return;

            const thinkingBox = processDiv.querySelector('.thinking-box');
            const thinkingText = processDiv.querySelector('.thinking-text');
            const thinkingCursor = processDiv.querySelector('.thinking-cursor');
            
            thinkingBox.style.display = 'block';
            thinkingText.textContent = thinking;
            
            if (isComplete) {
                thinkingCursor.style.display = 'none';
            } else {
                thinkingCursor.style.display = 'inline-block';
            }

            const contentWrapper = processDiv.querySelector('.thinking-content-wrapper');
            if (contentWrapper && contentWrapper.classList.contains('expanded')) {
                const thinkingContent = processDiv.querySelector('.thinking-content');
                if (thinkingContent.scrollHeight > contentWrapper.clientHeight) {
                    contentWrapper.scrollTop = contentWrapper.scrollHeight;
                }
            }

            const messagesContainer = document.getElementById('chat-messages');
            const isNearBottom = messagesContainer.scrollHeight - messagesContainer.scrollTop - messagesContainer.clientHeight < 100;
            if (isNearBottom) {
                messagesContainer.scrollTop = messagesContainer.scrollHeight;
            }
        }

        function updateProcessMessage(phase, thinking, progress, subProgress) {
            const processDiv = activeProcessMessages[phase];
            if (!processDiv) return;

            if (progress !== undefined) {
                const progressDiv = processDiv.querySelector('.inline-progress');
                const progressFill = processDiv.querySelector('.inline-progress-fill');
                const progressText = processDiv.querySelector('.inline-progress-text');
                
                progressDiv.style.display = 'block';
                progressFill.style.width = `${progress}%`;
                
                if (subProgress) {
                    progressText.textContent = `${subProgress.slideTitle} (${subProgress.currentSlide}/${subProgress.totalSlides})`;
                }
            }
        }

        function completeProcessMessage(phase) {
            const processDiv = activeProcessMessages[phase];
            if (!processDiv) return;

            const statusDiv = processDiv.querySelector('.process-status');
            statusDiv.innerHTML = `
                <span style="color: #10b981;">✓</span>
                <span style="color: #10b981;">Terminé</span>
            `;
            
            const thinkingCursor = processDiv.querySelector('.thinking-cursor');
            if (thinkingCursor) {
                thinkingCursor.style.display = 'none';
            }
        }

        async function generateSlides() {
            const prompt = document.getElementById('prompt-input').value.trim();
            
            if (!selectedImage) {
                addChatMessage('ai', '⚠️ Veuillez d\'abord télécharger une image.');
                return;
            }
            
            if (!prompt) {
                addChatMessage('ai', '⚠️ Veuillez décrire la présentation que vous souhaitez créer.');
                return;
            }

            // Sauvegarder les valeurs avant nettoyage
            const imageToSend = selectedImage;
            const promptToSend = prompt;

            // Ajouter l'image et le texte dans une seule bulle utilisateur
            addUserMessageWithImage(imageToSend, promptToSend);

            // Nettoyer immédiatement la zone de saisie et les pièces jointes
            document.getElementById('prompt-input').value = '';
            
            // Nettoyer les fichiers attachés et réafficher le placeholder
            const placeholder = document.getElementById('files-placeholder');
            if (placeholder) {
                placeholder.style.display = 'flex';
            }
            removeAttachedImage();

            const generateBtn = document.getElementById('generate-btn');
            generateBtn.disabled = true;
            generateBtn.classList.add('loading');
            
            // Réinitialiser
            const slidesContainer = document.getElementById('slides-container');
            slidesContainer.innerHTML = '';
            activeProcessMessages = {};
            thinkingIntervals = {};
            
            // Désactiver le bouton d'export pendant la génération
            const exportBtn = document.getElementById('export-pptx-btn');
            const exportWrapper = document.getElementById('export-btn-wrapper');
            if (exportBtn) {
                exportBtn.disabled = true;
            }
            if (exportWrapper) {
                exportWrapper.classList.add('disabled');
            }
            
            // Afficher l'état vide pendant la génération
            slidesContainer.innerHTML = `
                <div class="empty-state">
                    <div class="empty-state-icon">⚙️</div>
                    <div class="empty-state-text">Génération en cours...</div>
                    <div class="empty-state-subtext">Vos diapositives apparaîtront une par une</div>
                </div>
            `;

            // Message de démarrage
            addChatMessage('ai', 'Je commence la génération de votre présentation...');

            try {
                const selectedModel = document.getElementById('model-select').value;
                
                // Validation de l'image
                if (!imageToSend) {
                    throw new Error('Aucune image sélectionnée');
                }
                
                // Vérifier la taille de l'image base64
                const imageSizeKB = Math.round((imageToSend.length * 3) / 4 / 1024);
                console.log(`📊 Taille de l'image: ${imageSizeKB} KB`);
                
                if (imageSizeKB > 4096) { // Limite à 4MB en base64
                    throw new Error(`Image trop volumineuse (${imageSizeKB} KB). Veuillez utiliser une image plus petite.`);
                }
                
                console.log('🚀 [FRONTEND] Envoi de la requête avec:', {
                    hasImage: !!imageToSend,
                    promptLength: promptToSend.length,
                    selectedModel: selectedModel,
                    imageSizeKB: imageSizeKB
                });
                
                const response = await fetch('/api/generate-slides', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        image: imageToSend,
                        prompt: promptToSend,
                        model: selectedModel
                    })
                });

                if (!response.ok) {
                    let errorMessage = `HTTP ${response.status}`;
                    try {
                        const errorData = await response.text();
                        console.error('❌ Réponse serveur:', errorData);
                        if (errorData) {
                            errorMessage += ` - ${errorData}`;
                        }
                    } catch (e) {
                        console.error('❌ Impossible de lire la réponse d\'erreur');
                    }
                    throw new Error(errorMessage);
                }

                const reader = response.body.getReader();
                const decoder = new TextDecoder();
                let slidesGenerated = false;
                let currentPhase = '';
                let phaseThinking = {};

                while (true) {
                    const { done, value } = await reader.read();
                    if (done) break;

                    const chunk = decoder.decode(value, { stream: true });
                    const lines = chunk.split('\n');
                    
                    for (const line of lines) {
                        if (line.startsWith('data: ')) {
                            const dataStr = line.slice(6);
                            if (dataStr === '[DONE]') continue;
                            
                            try {
                                const data = JSON.parse(dataStr);
                                console.log('📦 Message SSE reçu:', data);
                                
                                // Gérer les erreurs
                                if (data.error) {
                                    throw new Error(data.message || 'Erreur lors de la génération');
                                }
                                
                                // Créer ou mettre à jour le message de processus
                                if (data.phase && data.phase !== currentPhase && data.phase !== 'complete' && data.phase !== 'export') {
                                    // Compléter la phase précédente
                                    if (currentPhase) {
                                        completeProcessMessage(currentPhase);
                                    }
                                    
                                    if (data.phase !== 'export') {
                                        currentPhase = data.phase;
                                    }
                                    const phaseIcons = {
                                        'analysis': '🔍',
                                        'planning': '📋',
                                        'content': '✍️',
                                        'design': '🎨',
                                        'export': '📊'
                                    };
                                    const phaseNames = {
                                        'analysis': 'Étape 1/3 : Analyse de l\'image',
                                        'planning': 'Étape 2/3 : Planification de la structure',
                                        'content': 'Étape 3/3 : Génération du contenu',
                                        'design': 'Étape 3/3 : Création des visuels'
                                    };
                                    
                                    createProcessMessage(
                                        data.phase,
                                        phaseNames[data.phase] || data.phase,
                                        phaseIcons[data.phase]
                                    );
                                }
                                
                                // Mettre à jour le thinking
                                if (data.thinking && currentPhase && data.phase !== 'export') {
                                    updateProcessThinking(currentPhase, data.thinking, false);
                                }
                                
                                // Calculer la progression locale pour cette phase
                                if (data.subProgress && currentPhase && data.phase !== 'export') {
                                    let phaseProgress = (data.subProgress.currentSlide / data.subProgress.totalSlides) * 100;
                                    updateProcessMessage(
                                        currentPhase,
                                        data.thinking,
                                        phaseProgress,
                                        data.subProgress
                                    );
                                    
                                    // Afficher le contenu progressivement
                                    if (data.phase === 'content' && data.slideCompleted && data.slideData) {
                                        if (!window.tempGeneratedContents) {
                                            window.tempGeneratedContents = [];
                                            // Initialiser le conteneur dès la première slide
                                            initializeContentGeneration(data.subProgress.totalSlides);
                                        }
                                        window.tempGeneratedContents.push(data.slideData);
                                        
                                        // Ajouter la slide immédiatement
                                        addContentSlideProgressively(data.slideData, data.subProgress.currentSlide - 1, data.subProgress.totalSlides);
                                    }
                                }
                                
                                // Afficher l'analyse de l'image dans le chat
                                if (data.analysisComplete && data.analysis) {
                                    console.log('🔍 Analyse reçue:', data.analysis);
                                    displayAnalysisInChat(data.analysis);
                                }
                                
                                // Afficher le plan généré dans le chat
                                if (data.planGenerated && data.plan) {
                                    console.log('📋 Plan généré reçu:', data.plan);
                                    displayPlanInChat(data.plan);
                                }
                                
                                // Afficher chaque slide dès qu'elle est prête
                                if (data.slideHTMLReady && data.slideHTML) {
                                    console.log('🎨 Slide HTML prête:', data.slideHTML);
                                    displaySingleSlide(data.slideHTML);
                                }
                                
                                // Gérer la complétion
                                if (data.phase === 'complete' && data.result) {
                                    // Compléter la dernière phase
                                    if (currentPhase) {
                                        completeProcessMessage(currentPhase);
                                    }
                                    
                                    // Nettoyer les variables temporaires
                                    window.tempGeneratedContents = null;
                                    
                                    // Génération terminée
                                    presentationData = data.result;
                                    // Sauvegarder globalement pour l'édition
                                    window.presentationData = presentationData;
                                    slidesGenerated = true;
                                    
                                    // Activer le bouton d'export
                                    const exportBtn = document.getElementById('export-pptx-btn');
                                    const exportWrapper = document.getElementById('export-btn-wrapper');
                                    if (exportBtn) {
                                        exportBtn.disabled = false;
                                    }
                                    if (exportWrapper) {
                                        exportWrapper.classList.remove('disabled');
                                    }
                                    
                                    addChatMessage('ai', `✅ Présentation générée avec succès ! ${data.result.htmlSlides.length} diapositives créées.`);
                                }
                                
                                // Gérer le téléchargement
                                if (data.downloadId) {
                                    console.log('📁 Export PowerPoint disponible');
                                    
                                    // Sauvegarder l'ID de téléchargement
                                    if (presentationData) {
                                        presentationData.downloadId = data.downloadId;
                                        presentationData.filename = data.filename;
                                        window.presentationData = presentationData;
                                    }
                                }
                                
                                // Afficher un avertissement si le PPTX n'a pas pu être généré  
                                if (data.warning) {
                                    addChatMessage('ai', `⚠️ ${data.warning}`);
                                }
                                
                            } catch (e) {
                                console.error('Erreur parsing SSE:', e, dataStr);
                            }
                        }
                    }
                }

                if (!slidesGenerated) {
                    throw new Error('La génération n\'a pas abouti');
                }

            } catch (error) {
                console.error('Erreur génération:', error);
                addChatMessage('ai', `❌ Erreur : ${error.message}`);
            } finally {
                generateBtn.classList.remove('loading');
                loadCredits();
            }
        }

        // Toast notifications
        function showToast(message, type = 'info', duration = 3000) {
            const existingToast = document.querySelector('.toast-notification');
            if (existingToast) {
                existingToast.remove();
            }
            
            const toast = document.createElement('div');
            toast.className = `toast-notification toast-${type}`;
            toast.innerHTML = `
                <div class="toast-content">
                    <span class="toast-icon">${type === 'success' ? '✅' : type === 'error' ? '❌' : 'ℹ️'}</span>
                    <span class="toast-message">${message}</span>
                </div>
            `;
            
            if (!document.querySelector('#toast-styles')) {
                const style = document.createElement('style');
                style.id = 'toast-styles';
                style.textContent = `
                    .toast-notification {
                        position: fixed;
                        bottom: 20px;
                        left: 50%;
                        transform: translateX(-50%);
                        background: rgba(26, 26, 36, 0.95);
                        color: white;
                        padding: 16px 24px;
                        border-radius: 12px;
                        box-shadow: 0 8px 32px rgba(0,0,0,0.4);
                        border: 1px solid rgba(255,255,255,0.1);
                        backdrop-filter: blur(10px);
                        z-index: 10000;
                        animation: slideUp 0.3s ease-out;
                    }
                    
                    @keyframes slideUp {
                        from {
                            transform: translateX(-50%) translateY(100px);
                            opacity: 0;
                        }
                        to {
                            transform: translateX(-50%) translateY(0);
                            opacity: 1;
                        }
                    }
                    
                    .toast-content {
                        display: flex;
                        align-items: center;
                        gap: 12px;
                    }
                    
                    .toast-icon {
                        font-size: 1.2rem;
                    }
                    
                    .toast-message {
                        font-size: 0.95rem;
                        font-weight: 500;
                    }
                    
                    .toast-success {
                        border-color: rgba(34, 197, 94, 0.3);
                    }
                    
                    .toast-error {
                        border-color: rgba(239, 68, 68, 0.3);
                    }
                `;
                document.head.appendChild(style);
            }
            
            document.body.appendChild(toast);
            
                setTimeout(() => {
                toast.style.animation = 'slideDown 0.3s ease-in';
                setTimeout(() => toast.remove(), 300);
            }, duration);
        }

        // Export functions avec animation de progression
        async function exportToPPTX() {
            try {
                // Notification de début
                showToast('Export démarré...', 'info', 4000);
                
                // 1. Vérifier les bibliothèques
                if (typeof html2canvas === 'undefined') {
                    alert('Erreur : html2canvas non chargé');
                    return;
                }
                
                if (typeof PptxGenJS === 'undefined') {
                    alert('Erreur : PptxGenJS non chargé');
                    return;
                }
                
                if (!window.presentationData?.htmlSlides?.length) {
                    alert('Aucune slide à exporter');
                    return;
                }

                // 2. Créer la présentation
                showExportProgress('Export...', 0);
                const pptx = new PptxGenJS();
                pptx.defineLayout({ name: 'LAYOUT_16x9', width: 10, height: 5.625 });

                // 3. CAPTURE PIXEL PERFECT AVEC CLONAGE
                const totalSlides = window.presentationData.htmlSlides.length;
                
                for (let i = 0; i < totalSlides; i++) {
                    const slideData = window.presentationData.htmlSlides[i];
                    const progress = Math.round(((i + 1) / totalSlides) * 100);
                    showExportProgress(`Export slide ${i + 1}/${totalSlides}...`, progress);
                    
                    try {
                        // NOUVELLE MÉTHODE : CLONAGE + HTML2CANVAS
                        const imageDataUrl = await captureSlidePixelPerfect(slideData.slideNumber);
                        
                        // Ajouter au PPTX
                        const slide = pptx.addSlide();
                        slide.addImage({
                            data: imageDataUrl,
                            x: 0,
                            y: 0,
                            w: '100%',
                            h: '100%',
                            rounding: false
                        });
                        
                        console.log(`Slide ${slideData.slideNumber} capturée`);
                        
                    } catch (error) {
                        console.error(`❌ Erreur slide ${slideData.slideNumber}:`, error);
                        
                        // Slide d'erreur avec plus d'infos
                        const slide = pptx.addSlide();
                        slide.addText(`Erreur Capture Slide ${slideData.slideNumber}`, {
                            x: '10%',
                            y: '40%',
                            w: '80%',
                            fontSize: 24,
                            align: 'center',
                            color: 'FF0000'
                        });
                        slide.addText(`${error.message}`, {
                            x: '10%',
                            y: '50%',
                            w: '80%',
                            fontSize: 16,
                            align: 'center',
                            color: '666666'
                        });
                    }
                }

                // 4. Sauvegarder
                showExportProgress('Génération PPTX...', 95);
                const fileName = `presentation_${Date.now()}.pptx`;
                await pptx.writeFile({ fileName });
                
                showExportProgress('Export réussi !', 100);
                showToast('Présentation exportée !', 'success', 5000);
                setTimeout(hideExportProgress, 2000);
                
            } catch (error) {
                console.error('Erreur export:', error);
                alert('Erreur: ' + error.message);
                hideExportProgress();
            }
        }

        // Fonctions pour afficher/cacher la progression
        function showExportProgress(message, progress) {
            let progressDiv = document.getElementById('export-progress');
            if (!progressDiv) {
                progressDiv = document.createElement('div');
                progressDiv.id = 'export-progress';
                progressDiv.style.cssText = `
                    position: fixed;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background: rgba(26, 26, 36, 0.95);
                    color: white;
                    padding: 30px 40px;
                    border-radius: 12px;
                    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
                    z-index: 10000;
                    text-align: center;
                    min-width: 300px;
                `;
                document.body.appendChild(progressDiv);
            }
            
            progressDiv.innerHTML = `
                <div style="font-size: 1.2rem; margin-bottom: 15px;">${message}</div>
                <div style="background: rgba(255,255,255,0.1); height: 8px; border-radius: 4px; overflow: hidden;">
                    <div style="background: linear-gradient(90deg, #22c55e, #16a34a); height: 100%; width: ${progress}%; transition: width 0.3s;"></div>
                </div>
                <div style="margin-top: 10px; font-size: 0.9rem; opacity: 0.8;">${progress}%</div>
            `;
        }
        
        function hideExportProgress() {
            const progressDiv = document.getElementById('export-progress');
            if (progressDiv) {
                progressDiv.remove();
            }
        }

        async function captureSlidePixelPerfect(slideNumber) {
            return new Promise(async (resolve, reject) => {
                try {
                    const iframe = document.getElementById(`slide-iframe-${slideNumber}`);
                    if (!iframe) {
                        throw new Error(`Iframe slide-${slideNumber} introuvable`);
                    }
                    
                    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
                    if (!iframeDoc || !iframeDoc.body) {
                        throw new Error('Document iframe inaccessible');
                    }
                    
                    const canvas = await html2canvas(iframeDoc.body, {
                        width: 1280,
                        height: 720,
                        backgroundColor: '#ffffff',
                        scale: 2,
                        useCORS: true,
                        allowTaint: true,
                        logging: false,
                        imageTimeout: 0,
                        removeContainer: true,
                        foreignObjectRendering: true
                    });
                    
                    const imageDataUrl = canvas.toDataURL('image/png', 1.0);
                    resolve(imageDataUrl);
                    
                } catch (error) {
                    reject(error);
                }
            });
        }

        // FONCTIONS D'AFFICHAGE AVANCÉES DANS LE CHAT
        function convertToValidColor(color, index) {
            // Couleurs de fallback attrayantes
            const fallbackColors = [
                '#6b7280', '#22c55e', '#f59e0b', '#ef4444',
                '#6b7280', '#06b6d4', '#ef4444', '#84cc16'
            ];
            
            console.log(`🎨 Conversion couleur ${index + 1}: "${color}"`);
            
            if (!color || color.trim() === '') {
                console.log(`⚠️ Couleur vide, utilisation fallback`);
                return fallbackColors[index % fallbackColors.length];
            }
            
            let cleanColor = color.toString().toLowerCase().trim();
            
            if (cleanColor.includes(',') || cleanColor.includes('/') || cleanColor.includes('et')) {
                cleanColor = cleanColor.split(/[,\/]|et/)[0].trim();
                console.log(`🔧 Couleur multiple détectée, extraction: "${cleanColor}"`);
            }
            
            const hexMatch = cleanColor.match(/#([0-9a-f]{6}|[0-9a-f]{3})/i);
            if (hexMatch) {
                console.log(`✅ Code hex trouvé: ${hexMatch[0]}`);
                return hexMatch[0];
            }
            
            if (cleanColor.startsWith('#') || cleanColor.startsWith('rgb') || cleanColor.startsWith('hsl')) {
                console.log(`✅ Format CSS valide: ${cleanColor}`);
                return cleanColor;
            }
            
            const colorMap = {
                'noir': '#000000', 'blanc': '#ffffff', 'rouge': '#ef4444',
                'vert': '#22c55e', 'bleu': '#3b82f6', 'jaune': '#f59e0b',
                'orange': '#f97316', 'violet': '#6b7280', 'rose': '#ef4444',
                'gris': '#6b7280', 'black': '#000000', 'white': '#ffffff',
                'red': '#ef4444', 'green': '#22c55e', 'blue': '#3b82f6',
                'yellow': '#f59e0b', 'purple': '#6b7280', 'pink': '#ef4444',
                'gray': '#6b7280', 'grey': '#6b7280', 'argent': '#c0c0c0',
                'silver': '#c0c0c0', 'doré': '#ffd700', 'gold': '#ffd700',
                'marron': '#8b4513', 'brown': '#8b4513', 'beige': '#f5f5dc',
                'cyan': '#06b6d4', 'turquoise': '#40e0d0', 'bordeaux': '#800020',
                'marine': '#000080', 'navy': '#000080'
            };
            
            for (const [name, hex] of Object.entries(colorMap)) {
                if (cleanColor.includes(name)) {
                    console.log(`✅ Couleur nommée trouvée: ${name} -> ${hex}`);
                    return hex;
                }
            }
            
            if (/^[0-9a-f]{6}$/i.test(cleanColor)) {
                const hex = '#' + cleanColor;
                console.log(`✅ Hex sans # détecté: ${hex}`);
                return hex;
            }
            
            if (/^[0-9a-f]{3}$/i.test(cleanColor)) {
                const hex = '#' + cleanColor;
                console.log(`✅ Hex court sans # détecté: ${hex}`);
                return hex;
            }
            
            console.log(`❌ Aucune correspondance, utilisation fallback`);
            return fallbackColors[index % fallbackColors.length];
        }

        function displayAnalysisInChat(analysis) {
            const messagesContainer = document.getElementById('chat-messages');
            const analysisDiv = document.createElement('div');
            analysisDiv.className = 'analysis-message ai-message';
            
            const avatarIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"></path><rect width="16" height="12" x="4" y="8" rx="2"></rect><path d="M2 14h2"></path><path d="M20 14h2"></path><path d="M15 13v2"></path><path d="M9 13v2"></path></svg>`;
            
            let analysisHTML = `
                <div class="message-container">
                    <span class="message-avatar ai-avatar">
                        ${avatarIcon}
                    </span>
                    <div class="message-content-wrapper">
                        <div class="message-header">
                    <div class="message-author">Analyse de l'image</div>
                        </div>
                        <div class="message-content">
                    <div class="analysis-container">
                        <div class="analysis-narrative">
                            <div class="analysis-icon"></div>
                            <p class="analysis-text">${analysis.detailed_analysis}</p>
                        </div>
            `;
            
            if (analysis.visual_elements) {
                analysisHTML += `
                    <div class="analysis-details">
                        <div class="analysis-detail-item">
                            <h4>🔍 Éléments visuels</h4>
                            <div class="detail-grid">
                                <div class="detail-item">
                                    <span class="detail-label">Style:</span>
                                    <span class="detail-value">${analysis.visual_elements.style}</span>
                                </div>
                                <div class="detail-item">
                                    <span class="detail-label">Ambiance:</span>
                                    <span class="detail-value">${analysis.visual_elements.mood}</span>
                                </div>
                            </div>
                        </div>
                `;
                
                if (analysis.visual_elements.colors && analysis.visual_elements.colors.length > 0) {
                    const processedColors = [];
                    const seenColors = new Set();
                    
                    analysis.visual_elements.colors.forEach((color, index) => {
                        const colorValue = convertToValidColor(color, index);
                        if (!seenColors.has(colorValue)) {
                            seenColors.add(colorValue);
                            processedColors.push({
                                original: color,
                                value: colorValue
                            });
                        }
                    });
                    
                    analysisHTML += `
                        <div class="analysis-detail-item">
                            <h4>🎨 Palette de couleurs</h4>
                            <div class="color-palette">
                                ${processedColors.map((colorObj, index) => {
                                    return `<div class="color-swatch" style="background-color: ${colorObj.value};" title="${colorObj.original}" data-color="${colorObj.value}" data-original="${colorObj.original}"></div>`;
                                }).join('')}
                            </div>
                        </div>
                    `;
                }
                
                analysisHTML += `</div>`;
            }
            
            if (analysis.presentation_strategy) {
                analysisHTML += `
                    <div class="analysis-strategy">
                        <h4>📊 Stratégie de présentation</h4>
                        <div class="strategy-item">
                            <span class="strategy-label">Thème suggéré:</span>
                            <span class="strategy-value">${analysis.presentation_strategy.suggested_theme}</span>
                        </div>
                        <div class="strategy-item">
                            <span class="strategy-label">Direction artistique:</span>
                            <span class="strategy-value">${analysis.presentation_strategy.design_direction}</span>
                        </div>
                    </div>
                `;
            }
            
            analysisHTML += `
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            analysisDiv.innerHTML = analysisHTML;
            messagesContainer.appendChild(analysisDiv);
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }

        function displayPlanInChat(plan) {
            const messagesContainer = document.getElementById('chat-messages');
            const planDiv = document.createElement('div');
            planDiv.className = 'plan-message ai-message';
            
            const avatarIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"></path><rect width="16" height="12" x="4" y="8" rx="2"></rect><path d="M2 14h2"></path><path d="M20 14h2"></path><path d="M15 13v2"></path><path d="M9 13v2"></path></svg>`;
            
            let planHTML = `
                <div class="message-container">
                    <span class="message-avatar ai-avatar">
                        ${avatarIcon}
                    </span>
                    <div class="message-content-wrapper">
                        <div class="message-header">
                    <div class="message-author">Plan de présentation</div>
                        </div>
                        <div class="message-content">
                    <div class="plan-container">
                        <div class="plan-header">
                            <h3 class="plan-title">${plan.title}</h3>
                            ${plan.subtitle ? `<p class="plan-subtitle">${plan.subtitle}</p>` : ''}
                            <div class="plan-info">
                                <span class="plan-pages">${plan.numberOfSlides} / ${plan.numberOfSlides} pages</span>
                            </div>
                        </div>
                        <div class="plan-slides">
            `;
            
            plan.slides.forEach((slide, index) => {
                planHTML += `
                    <div class="plan-slide" style="animation-delay: ${index * 0.1}s">
                        <div class="slide-number">${slide.slideNumber}</div>
                        <div class="slide-info">
                            <h4 class="slide-title">${slide.title}</h4>
                            <p class="slide-description">${slide.description || slide.purpose || 'Description du slide'}</p>
                        </div>
                    </div>
                `;
            });
            
            planHTML += `
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            planDiv.innerHTML = planHTML;
            messagesContainer.appendChild(planDiv);
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }

        // FONCTIONS POUR LA GÉNÉRATION DE CONTENU PROGRESSIVE
        function initializeContentGeneration(totalSlides) {
            generatedContents = [];
            currentContentIndex = 0;
            
            const messagesContainer = document.getElementById('chat-messages');
            const contentDiv = document.createElement('div');
            contentDiv.className = 'chat-message content-generation-message';
            contentDiv.id = 'content-generation-display';
            
            contentDiv.innerHTML = `
                <div class="message-avatar ai-avatar">✍️</div>
                <div class="message-content">
                    <div class="message-author">Contenu généré</div>
                    <div class="content-generation-container">
                        <div class="content-nav-header">
                            <div class="content-nav-title">
                                <span>📝</span>
                                <span>Contenu détaillé des slides</span>
                            </div>
                            <div class="content-nav-controls">
                                <div class="content-nav-indicator" id="content-indicator">
                                    Slide 0 / ${totalSlides}
                                </div>
                            </div>
                        </div>
                        <div class="content-slides-wrapper">
                            <div class="content-slides-container" id="content-slides-container">
                                <!-- Les slides seront ajoutées progressivement -->
                            </div>
                        </div>
                    </div>
                </div>
            `;
            
            messagesContainer.appendChild(contentDiv);
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }

        function addContentSlideProgressively(slideData, slideIndex, totalSlides) {
            generatedContents[slideIndex] = slideData;
            
            const slideHTML = createContentSlideHTML(slideData, slideIndex);
            
            const container = document.getElementById('content-slides-container');
            if (container) {
                const tempDiv = document.createElement('div');
                tempDiv.innerHTML = slideHTML;
                const slideElement = tempDiv.firstElementChild;
                
                slideElement.style.opacity = '0';
                slideElement.style.transform = 'translateY(20px)';
                slideElement.style.transition = 'all 0.5s ease';
                
                container.appendChild(slideElement);
                
            setTimeout(() => {
                    slideElement.style.opacity = '1';
                    slideElement.style.transform = 'translateY(0)';
                }, 100);
            }
            
            const indicator = document.getElementById('content-indicator');
            if (indicator) {
                indicator.textContent = `Slide ${slideIndex + 1} / ${totalSlides}`;
            }
            
            console.log(`✅ Contenu slide ${slideIndex + 1} ajouté progressivement`);
        }

        function createContentSlideHTML(content, index) {
            return `
                <div class="content-slide-item" data-slide-index="${index}">
                    <div class="content-slide-header">
                        <div class="content-slide-number">${content.slideNumber || index + 1}</div>
                        <div class="content-slide-title">${content.title || 'Slide ' + (index + 1)}</div>
                    </div>
                    <div class="content-slide-body">
                        ${content.thinking ? `
                            <div class="content-field">
                                <div class="content-field-label">🧠 Stratégie</div>
                                <div class="content-field-value" style="font-style: italic; background: rgba(156, 163, 175, 0.1); padding: 12px; border-radius: 6px; border-left: 3px solid #9ca3af;">
                                    ${content.thinking}
                                </div>
                            </div>
                        ` : ''}
                        
                        ${content.subtitle ? `
                            <div class="content-field">
                                <div class="content-field-label">📝 Sous-titre</div>
                                <div class="content-field-value">${content.subtitle}</div>
                            </div>
                        ` : ''}
                        
                        ${content.content ? `
                            <div class="content-field">
                                <div class="content-field-label">📄 Contenu principal</div>
                                <div class="content-field-value">${content.content}</div>
                            </div>
                        ` : ''}
                        
                        ${content.bulletPoints && content.bulletPoints.length > 0 ? `
                            <div class="content-field">
                                <div class="content-field-label">🔸 Points clés</div>
                                <ul class="content-bullet-list">
                                    ${content.bulletPoints.map(point => `
                                        <li class="content-bullet-item">
                                            <span class="content-bullet-icon">•</span>
                                            <span>${point}</span>
                                        </li>
                                    `).join('')}
                                </ul>
                            </div>
                        ` : ''}
                    </div>
                </div>
            `;
        }


    </script>
    
    <!-- 🎨 ÉDITEUR DE SLIDES EXTERNE -->
    <script src="slide-editor.js"></script>
    
    <script>
        // 🔄 S'assurer que l'éditeur est disponible
        console.log('📝 Vérification de l\'éditeur de slides...');
        if (typeof openSlideEditor === 'function') {
            console.log('✅ Éditeur de slides chargé avec succès');
        } else {
            console.error('❌ Éditeur de slides non disponible');
        }
          </script>
  </body>
</html>