{% extends 'admin/base.html.twig' %}

{% block title %}Création automatique de site{% endblock %}

{% block breadcrumb %}Super Administration <i class="fas fa-chevron-right"></i> Création automatique de site{% endblock %}

{% block body %}
<div class="container-fluid px-4">
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="h3 mb-2">
                <i class="fas fa-magic me-2 text-primary"></i>
                Création automatique de site
            </h1>
            <p class="text-muted">
                Entrez le nom d'une entreprise et sa localisation. Claude recherchera les informations
                sur internet et créera un site web complet automatiquement.
            </p>
        </div>
    </div>

    {% if not claudeAvailable %}
    <div class="row mb-4">
        <div class="col-lg-8">
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-triangle me-2"></i>
                <strong>Claude Code n'est pas disponible.</strong>
                <p class="mb-0 mt-2">
                    Vérifiez que Claude Code est installé sur ce serveur et accessible dans le PATH.
                    <br>La commande <code>claude --version</code> doit fonctionner dans le terminal.
                </p>
            </div>
        </div>
    </div>
    {% endif %}

    {# Formulaire de création #}
    <div class="row" id="formSection">
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="fas fa-building me-2"></i>Informations de l'entreprise</h5>
                </div>
                <div class="card-body">
                    <form id="createSiteForm">
                        <div class="mb-4">
                            <label for="businessName" class="form-label fw-bold">
                                Nom de l'entreprise <span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control form-control-lg" id="businessName"
                                   name="businessName" required
                                   placeholder="Ex: Food Truck Galgon, Boulangerie Le Pain Doré, Plomberie Martin..."
                                   {% if not claudeAvailable %}disabled{% endif %}>
                            <div class="form-text">
                                Nom de la société, du commerce ou de l'activité.
                            </div>
                        </div>

                        <div class="mb-4">
                            <label for="location" class="form-label fw-bold">Localisation</label>
                            <input type="text" class="form-control" id="location"
                                   name="location"
                                   placeholder="Ex: Galgon, Gironde / Paris 11ème / Lyon, Rhône..."
                                   {% if not claudeAvailable %}disabled{% endif %}>
                            <div class="form-text">
                                Ville, département ou région. Aide Claude à trouver les bonnes informations.
                            </div>
                        </div>

                        <div class="mb-4">
                            <label for="notes" class="form-label fw-bold">Notes additionnelles</label>
                            <textarea class="form-control" id="notes" name="notes" rows="3"
                                      placeholder="Ex: Spécialisé en burgers artisanaux, ouvert le week-end, livraison possible..."
                                      {% if not claudeAvailable %}disabled{% endif %}></textarea>
                            <div class="form-text">
                                Informations complémentaires pour personnaliser le site.
                            </div>
                        </div>

                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg"
                                    id="submitBtn"
                                    {% if not claudeAvailable %}disabled{% endif %}>
                                <i class="fas fa-magic me-2"></i>
                                Créer le site automatiquement
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {# Panneau d'information #}
        <div class="col-lg-4">
            <div class="card bg-light border-0">
                <div class="card-body">
                    <h6 class="card-title"><i class="fas fa-info-circle me-2 text-primary"></i>Comment ça marche ?</h6>
                    <ol class="small text-muted ps-3">
                        <li class="mb-2">Claude recherche l'entreprise sur internet (site web, Google Maps, réseaux sociaux, avis...)</li>
                        <li class="mb-2">Il extrait toutes les informations disponibles (description, services, adresse, téléphone, horaires...)</li>
                        <li class="mb-2">Il génère un site web complet avec 3 à 5 pages professionnelles</li>
                        <li class="mb-2">Le site est créé automatiquement dans Izibrick, prêt à être personnalisé</li>
                    </ol>
                    <hr>
                    <p class="small text-muted mb-1"><i class="fas fa-clock me-1"></i> Durée estimée : 1 à 3 minutes</p>
                    <p class="small text-muted mb-0"><i class="fas fa-euro-sign me-1"></i> Coût : 0€ (inclus dans Claude Max)</p>
                </div>
            </div>
        </div>
    </div>

    {# Progression #}
    <div class="row d-none" id="loadingSection">
        <div class="col-lg-8 mx-auto">
            <div class="card shadow-sm">
                <div class="card-body text-center py-4">
                    <div class="mb-3">
                        <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
                            <span class="visually-hidden">Chargement...</span>
                        </div>
                    </div>
                    <h4 class="mb-2" id="loadingTitle">Création en cours...</h4>
                    <p class="text-muted mb-3" id="loadingMessage">Démarrage...</p>

                    {# Barre de progression #}
                    <div class="progress mb-3" style="height: 8px;">
                        <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary"
                             id="progressBar" role="progressbar" style="width: 0%"></div>
                    </div>

                    {# Étapes #}
                    <div class="text-start mx-auto" style="max-width: 450px;">
                        <div class="d-flex align-items-center mb-2" id="step1">
                            <i class="fas fa-circle text-muted me-2" style="font-size: 0.5rem;" id="step1Icon"></i>
                            <span class="small">Vérification & préparation du prompt</span>
                        </div>
                        <div class="d-flex align-items-center mb-2 text-muted" id="step2">
                            <i class="fas fa-circle text-muted me-2" style="font-size: 0.5rem;" id="step2Icon"></i>
                            <span class="small">Claude Code : recherche web & génération</span>
                        </div>
                        <div class="d-flex align-items-center mb-2 text-muted" id="step3">
                            <i class="fas fa-circle text-muted me-2" style="font-size: 0.5rem;" id="step3Icon"></i>
                            <span class="small">Analyse et validation du JSON</span>
                        </div>
                        <div class="d-flex align-items-center mb-2 text-muted" id="step4">
                            <i class="fas fa-circle text-muted me-2" style="font-size: 0.5rem;" id="step4Icon"></i>
                            <span class="small">Création dans Izibrick</span>
                        </div>
                    </div>

                    {# Alerte connexion perdue #}
                    <div class="d-none mt-3" id="heartbeatWarning">
                        <div class="alert alert-warning small py-2 mb-0 text-start">
                            <i class="fas fa-exclamation-triangle me-1"></i>
                            <strong>Aucun événement depuis <span id="heartbeatDelay">30</span>s.</strong>
                            Le processus tourne peut-être toujours en arrière-plan.
                            <span class="d-none" id="logFileInfo">
                                <br>Fichier de log : <code id="logFilePath"></code>
                            </span>
                        </div>
                    </div>

                    <p class="text-muted small mt-3 mb-0">
                        <i class="fas fa-info-circle me-1"></i>
                        Ne fermez pas cette page. La génération peut prendre 1 à 3 minutes.
                    </p>
                </div>
            </div>
        </div>
    </div>

    {# Console de logs #}
    <div class="row d-none mt-3" id="logSection">
        <div class="col-lg-8 mx-auto">
            <div class="card shadow-sm">
                <div class="card-header d-flex justify-content-between align-items-center py-2"
                     style="background: #1a1a2e; border-bottom: 1px solid #333;">
                    <span style="color: #aaa; font-size: 0.8rem;">
                        <i class="fas fa-terminal me-2"></i>Journal de création
                    </span>
                    <span class="badge bg-secondary" id="logElapsed" style="font-size: 0.7rem;">0:00</span>
                </div>
                <div id="logConsole"
                     style="max-height: 300px; overflow-y: auto; font-family: 'Courier New', Consolas, monospace;
                            font-size: 0.75rem; line-height: 1.5; background: #0d1117; color: #c9d1d9;
                            padding: 10px 12px; border-bottom-left-radius: 0.375rem; border-bottom-right-radius: 0.375rem;">
                </div>
            </div>
        </div>
    </div>

    {# Résultat succès #}
    <div class="row d-none mt-3" id="successSection">
        <div class="col-lg-8 mx-auto">
            <div class="card shadow-sm border-success">
                <div class="card-body text-center py-5">
                    <div class="mb-3">
                        <i class="fas fa-check-circle text-success" style="font-size: 4rem;"></i>
                    </div>
                    <h3 class="text-success mb-3">Site créé avec succès !</h3>
                    <p class="text-muted mb-1">
                        Le site <strong id="resultSiteName"></strong> a été créé avec
                        <strong id="resultPagesCount"></strong> pages.
                    </p>
                    <div class="mt-4">
                        <a href="#" class="btn btn-success btn-lg me-2" id="resultSiteUrl" target="_blank">
                            <i class="fas fa-external-link-alt me-2"></i>Voir le site
                        </a>
                        <a href="#" class="btn btn-outline-primary btn-lg" id="resultDashboardUrl">
                            <i class="fas fa-tachometer-alt me-2"></i>Dashboard du site
                        </a>
                    </div>
                    <div class="mt-3">
                        <button class="btn btn-outline-secondary" id="createAnotherBtn">
                            <i class="fas fa-plus me-1"></i>Créer un autre site
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# Bilan des images à générer #}
    <div class="row d-none mt-3" id="imagePromptsSection">
        <div class="col-lg-8 mx-auto">
            <div class="card shadow-sm border-info">
                <div class="card-header bg-info text-white d-flex justify-content-between align-items-center">
                    <span>
                        <i class="fas fa-images me-2"></i>
                        Images à générer (<span id="imagePromptsCount">0</span>)
                    </span>
                    <button class="btn btn-sm btn-outline-light" id="copyAllPromptsBtn" title="Copier tous les prompts">
                        <i class="fas fa-copy me-1"></i>Tout copier
                    </button>
                </div>
                <div class="card-body p-0" id="imagePromptsList" style="max-height: 500px; overflow-y: auto;">
                    {# Rempli dynamiquement par JS #}
                </div>
                <div class="card-footer bg-light">
                    <p class="small text-muted mb-0">
                        <i class="fas fa-info-circle me-1"></i>
                        Utilisez ces prompts avec un générateur d'images IA (DALL-E, Midjourney, Stable Diffusion...)
                        puis uploadez les images dans le gestionnaire de médias du site.
                        En attendant, des images placeholder sont affichées.
                    </p>
                </div>
            </div>
        </div>
    </div>

    {# Résultat erreur #}
    <div class="row d-none mt-3" id="errorSection">
        <div class="col-lg-8 mx-auto">
            <div class="card shadow-sm border-danger">
                <div class="card-body text-center py-4">
                    <div class="mb-3">
                        <i class="fas fa-exclamation-triangle text-danger" style="font-size: 3rem;"></i>
                    </div>
                    <h4 class="text-danger mb-3">Erreur lors de la création</h4>
                    <p class="text-muted mb-3" id="errorMessage"></p>
                    <div class="d-none mb-3" id="errorLogFileInfo">
                        <p class="small text-muted">
                            Fichier de log complet :<br>
                            <code id="errorLogFilePath"></code>
                        </p>
                    </div>
                    <button class="btn btn-primary" id="retryBtn">
                        <i class="fas fa-redo me-2"></i>Réessayer
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('createSiteForm');
    const formSection = document.getElementById('formSection');
    const loadingSection = document.getElementById('loadingSection');
    const logSection = document.getElementById('logSection');
    const successSection = document.getElementById('successSection');
    const errorSection = document.getElementById('errorSection');
    const progressBar = document.getElementById('progressBar');
    const logConsole = document.getElementById('logConsole');
    const logElapsed = document.getElementById('logElapsed');

    let startTime = null;
    let elapsedTimer = null;
    let lastEventTime = null;
    let heartbeatTimer = null;
    let logFilePath = null;

    // ─── Gestion des sections ───
    function showMainSection(section) {
        [formSection, loadingSection, successSection, errorSection].forEach(s => s.classList.add('d-none'));
        section.classList.remove('d-none');
    }

    // ─── Timer ───
    function startTimer() {
        startTime = Date.now();
        lastEventTime = Date.now();
        elapsedTimer = setInterval(() => {
            const elapsed = Math.floor((Date.now() - startTime) / 1000);
            const min = Math.floor(elapsed / 60);
            const sec = String(elapsed % 60).padStart(2, '0');
            logElapsed.textContent = min + ':' + sec;
        }, 1000);

        // Heartbeat : détecter si le flux s'arrête
        heartbeatTimer = setInterval(() => {
            const sinceLastEvent = Math.floor((Date.now() - lastEventTime) / 1000);
            if (sinceLastEvent >= 30) {
                document.getElementById('heartbeatWarning').classList.remove('d-none');
                document.getElementById('heartbeatDelay').textContent = sinceLastEvent;
                if (logFilePath) {
                    document.getElementById('logFileInfo').classList.remove('d-none');
                    document.getElementById('logFilePath').textContent = logFilePath;
                }
            }
        }, 5000);
    }

    function stopTimer() {
        if (elapsedTimer) { clearInterval(elapsedTimer); elapsedTimer = null; }
        if (heartbeatTimer) { clearInterval(heartbeatTimer); heartbeatTimer = null; }
    }

    // ─── Steps ───
    function activateStep(stepNum) {
        for (let i = 1; i <= 4; i++) {
            const stepEl = document.getElementById('step' + i);
            const iconEl = document.getElementById('step' + i + 'Icon');

            if (i < stepNum) {
                stepEl.classList.remove('text-muted');
                stepEl.classList.add('text-success');
                iconEl.className = 'fas fa-check-circle text-success me-2';
                iconEl.style.fontSize = '';
            } else if (i === stepNum) {
                stepEl.classList.remove('text-muted');
                stepEl.classList.add('text-primary');
                iconEl.className = 'fas fa-spinner fa-spin text-primary me-2';
                iconEl.style.fontSize = '';
            } else {
                stepEl.classList.remove('text-success', 'text-primary');
                stepEl.classList.add('text-muted');
                iconEl.className = 'fas fa-circle text-muted me-2';
                iconEl.style.fontSize = '0.5rem';
            }
        }
    }

    // ─── Log console ───
    const levelColors = {
        'info':    '#58a6ff',
        'success': '#3fb950',
        'warning': '#d29922',
        'error':   '#f85149',
        'verbose': '#8b949e',
        'debug':   '#6e7681',
    };
    const levelIcons = {
        'info':    'i',
        'success': '\u2713',
        'warning': '!',
        'error':   '\u2717',
        'verbose': '\u00bb',
        'debug':   '\u00b7',
    };

    function addLogEntry(message, level) {
        level = level || 'info';
        const elapsed = startTime ? Math.floor((Date.now() - startTime) / 1000) : 0;
        const min = Math.floor(elapsed / 60);
        const sec = String(elapsed % 60).padStart(2, '0');

        const color = levelColors[level] || levelColors.info;
        const icon = levelIcons[level] || levelIcons.info;

        const entry = document.createElement('div');
        entry.style.marginBottom = '1px';
        entry.innerHTML =
            '<span style="color:#484f58;">[' + min + ':' + sec + ']</span> ' +
            '<span style="color:' + color + ';">' + icon + '</span> ' +
            '<span style="color:' + color + ';">' + escapeHtml(message) + '</span>';

        logConsole.appendChild(entry);
        logConsole.scrollTop = logConsole.scrollHeight;
    }

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    function clearLogs() {
        logConsole.innerHTML = '';
    }

    // ─── Gestion des événements SSE ───
    function handleEvent(data) {
        lastEventTime = Date.now();
        // Cacher le warning heartbeat si on reçoit un événement
        document.getElementById('heartbeatWarning').classList.add('d-none');

        switch (data.type) {
            case 'init':
                if (data.logFile) {
                    logFilePath = data.logFile;
                }
                break;

            case 'step':
                if (data.progress) {
                    progressBar.style.width = data.progress + '%';
                }
                if (data.message) {
                    document.getElementById('loadingMessage').textContent = data.message;
                }
                if (data.step) {
                    activateStep(data.step);
                }
                break;

            case 'log':
                addLogEntry(data.message || '', data.level || 'info');
                break;

            case 'success':
                stopTimer();
                progressBar.style.width = '100%';
                progressBar.classList.remove('progress-bar-animated');

                for (let i = 1; i <= 4; i++) {
                    const stepEl = document.getElementById('step' + i);
                    const iconEl = document.getElementById('step' + i + 'Icon');
                    stepEl.classList.remove('text-muted', 'text-primary');
                    stepEl.classList.add('text-success');
                    iconEl.className = 'fas fa-check-circle text-success me-2';
                    iconEl.style.fontSize = '';
                }

                document.getElementById('resultSiteName').textContent = data.siteName;
                document.getElementById('resultPagesCount').textContent = data.pagesCount;
                document.getElementById('resultSiteUrl').href = data.siteUrl;
                document.getElementById('resultDashboardUrl').href = data.dashboardUrl;

                // Afficher les prompts d'image
                if (data.imagePrompts && data.imagePrompts.length > 0) {
                    renderImagePrompts(data.imagePrompts);
                }

                addLogEntry('--- CREATION TERMINEE ---', 'success');

                setTimeout(function() {
                    showMainSection(successSection);
                    logSection.classList.remove('d-none');
                    if (data.imagePrompts && data.imagePrompts.length > 0) {
                        var ipSection = document.getElementById('imagePromptsSection');
                        ipSection.classList.remove('d-none');
                        // Scroller vers le panneau images après un court délai
                        setTimeout(function() {
                            ipSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
                        }, 300);
                    }
                }, 800);
                break;

            case 'error':
                stopTimer();
                progressBar.classList.remove('progress-bar-animated');
                progressBar.classList.add('bg-danger');

                document.getElementById('errorMessage').textContent = data.message || 'Erreur inconnue';
                if (logFilePath) {
                    document.getElementById('errorLogFileInfo').classList.remove('d-none');
                    document.getElementById('errorLogFilePath').textContent = logFilePath;
                }

                addLogEntry('--- ERREUR ---', 'error');
                addLogEntry(data.message || 'Erreur inconnue', 'error');

                showMainSection(errorSection);
                logSection.classList.remove('d-none');
                break;
        }
    }

    // ─── Soumission du formulaire ───
    form.addEventListener('submit', async function(e) {
        e.preventDefault();

        const businessName = document.getElementById('businessName').value.trim();
        if (!businessName) {
            alert('Veuillez entrer le nom de l\'entreprise.');
            return;
        }

        // Afficher le loading et les logs
        showMainSection(loadingSection);
        logSection.classList.remove('d-none');
        clearLogs();
        logFilePath = null;
        progressBar.style.width = '2%';
        progressBar.classList.remove('bg-danger');
        progressBar.classList.add('progress-bar-animated');
        document.getElementById('heartbeatWarning').classList.add('d-none');
        activateStep(1);
        startTimer();

        addLogEntry('Envoi de la requete au serveur...', 'info');

        const formData = new FormData();
        formData.append('businessName', businessName);
        formData.append('location', document.getElementById('location').value.trim());
        formData.append('notes', document.getElementById('notes').value.trim());

        let completed = false;

        try {
            const response = await fetch('{{ path("super_admin_create_site_generate") }}', {
                method: 'POST',
                body: formData
            });

            // Erreur HTTP (validation)
            if (!response.ok) {
                let errorMsg = 'Erreur serveur (HTTP ' + response.status + ')';
                try {
                    const jsonError = await response.json();
                    errorMsg = jsonError.error || errorMsg;
                } catch (e) {}
                handleEvent({ type: 'error', message: errorMsg });
                return;
            }

            // Vérifier si c'est du SSE ou du JSON classique
            const contentType = response.headers.get('content-type') || '';
            if (!contentType.includes('text/event-stream')) {
                const data = await response.json();
                if (data.success) {
                    handleEvent({ type: 'success', ...data });
                } else {
                    handleEvent({ type: 'error', message: data.error });
                }
                return;
            }

            // ─── Lire le flux SSE ───
            addLogEntry('Connexion SSE etablie', 'success');

            const reader = response.body.getReader();
            const decoder = new TextDecoder();
            let buffer = '';

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

                if (done) {
                    if (buffer.trim()) {
                        processSSEBuffer(buffer);
                    }
                    break;
                }

                buffer += decoder.decode(value, { stream: true });

                // Traiter les événements complets
                const parts = buffer.split('\n\n');
                buffer = parts.pop();

                for (const part of parts) {
                    processSSEBuffer(part);
                }
            }

            // Stream terminé
            if (!completed) {
                addLogEntry('Flux SSE termine sans resultat final.', 'warning');
                if (logFilePath) {
                    addLogEntry('Consultez le log: ' + logFilePath, 'info');
                }
                setTimeout(function() {
                    if (!completed) {
                        handleEvent({
                            type: 'error',
                            message: 'Le flux SSE s\'est terminé sans résultat. Consultez le fichier de log pour plus de détails.'
                        });
                    }
                }, 500);
            }

        } catch (error) {
            stopTimer();
            addLogEntry('Erreur reseau: ' + error.message, 'error');
            if (logFilePath) {
                addLogEntry('Fichier de log: ' + logFilePath, 'info');
            }
            handleEvent({
                type: 'error',
                message: 'Erreur de communication: ' + error.message + (logFilePath ? ' | Log: ' + logFilePath : '')
            });
        }

        function processSSEBuffer(text) {
            const lines = text.split('\n');
            for (const line of lines) {
                const trimmed = line.trim();
                if (trimmed.startsWith(':') || trimmed === '') continue;

                if (trimmed.startsWith('data: ')) {
                    const jsonStr = trimmed.substring(6);
                    try {
                        const data = JSON.parse(jsonStr);
                        handleEvent(data);
                        if (data.type === 'success' || data.type === 'error') {
                            completed = true;
                        }
                    } catch (e) {
                        addLogEntry('Parse SSE error: ' + jsonStr.substring(0, 100), 'warning');
                    }
                }
            }
        }
    });

    // ─── Boutons ───
    document.getElementById('retryBtn').addEventListener('click', function() {
        stopTimer();
        logSection.classList.add('d-none');
        document.getElementById('imagePromptsSection').classList.add('d-none');
        showMainSection(formSection);
    });

    document.getElementById('createAnotherBtn').addEventListener('click', function() {
        stopTimer();
        logSection.classList.add('d-none');
        document.getElementById('imagePromptsSection').classList.add('d-none');
        document.getElementById('businessName').value = '';
        document.getElementById('location').value = '';
        document.getElementById('notes').value = '';
        showMainSection(formSection);
    });

    // ─── Bilan images ───
    let allImagePrompts = [];

    function renderImagePrompts(prompts) {
        allImagePrompts = prompts;
        const container = document.getElementById('imagePromptsList');
        container.innerHTML = '';
        document.getElementById('imagePromptsCount').textContent = prompts.length;

        prompts.forEach(function(img, idx) {
            const item = document.createElement('div');
            item.className = 'border-bottom p-3';
            item.innerHTML =
                '<div class="d-flex justify-content-between align-items-start mb-2">' +
                    '<div>' +
                        '<span class="badge bg-primary me-2">' + (idx + 1) + '</span>' +
                        '<strong>' + escapeHtml(img.location || 'Image ' + (idx + 1)) + '</strong>' +
                        '<span class="badge bg-secondary ms-2">' + escapeHtml(img.dimensions || '?') + '</span>' +
                    '</div>' +
                    '<button class="btn btn-sm btn-outline-primary copy-prompt-btn" data-idx="' + idx + '" title="Copier ce prompt">' +
                        '<i class="fas fa-copy"></i>' +
                    '</button>' +
                '</div>' +
                '<p class="mb-0 small text-muted" style="white-space: pre-wrap;">' + escapeHtml(img.prompt || '') + '</p>';
            container.appendChild(item);
        });

        // Boutons copier individuels
        container.querySelectorAll('.copy-prompt-btn').forEach(function(btn) {
            btn.addEventListener('click', function() {
                const idx = parseInt(this.getAttribute('data-idx'));
                const prompt = allImagePrompts[idx];
                const text = prompt.prompt || '';
                navigator.clipboard.writeText(text).then(function() {
                    btn.innerHTML = '<i class="fas fa-check"></i>';
                    setTimeout(function() { btn.innerHTML = '<i class="fas fa-copy"></i>'; }, 1500);
                });
            });
        });
    }

    // Copier tous les prompts
    document.getElementById('copyAllPromptsBtn').addEventListener('click', function() {
        if (allImagePrompts.length === 0) return;

        const text = allImagePrompts.map(function(img, idx) {
            return '--- Image ' + (idx + 1) + ' : ' + (img.location || '') + ' (' + (img.dimensions || '?') + ') ---\n' + (img.prompt || '');
        }).join('\n\n');

        const btn = this;
        navigator.clipboard.writeText(text).then(function() {
            btn.innerHTML = '<i class="fas fa-check me-1"></i>Copié !';
            setTimeout(function() { btn.innerHTML = '<i class="fas fa-copy me-1"></i>Tout copier'; }, 2000);
        });
    });
});
</script>
{% endblock %}