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

{% block title %}Atelier d'images{% endblock %}

{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('assets/css/media-picker.css') }}">
<style>
    .atelier-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); padding: 1.5rem; height: 100%; }
    .atelier-card h2 { font-size: 1.05rem; }
    .atelier-state { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); padding: .75rem 1rem; }
    .atelier-state .badge { font-weight: 500; }
    .atelier-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; }
    .atelier-preset { position: relative; }
    .atelier-preset input { position: absolute; opacity: 0; inset: 0; }
    .atelier-preset label { display: block; border: 2px solid #e2e8f0; border-radius: 10px; padding: .5rem .6rem; cursor: pointer; text-align: center; font-size: .85rem; transition: border-color .15s, background .15s; }
    .atelier-preset label small { display: block; color: #64748b; font-size: .72rem; }
    .atelier-preset input:checked + label { border-color: #667eea; background: #f5f3ff; }
    .atelier-preset input:focus-visible + label { outline: 2px solid #667eea; outline-offset: 2px; }
    .atelier-preset-shape { display: block; margin: 0 auto .35rem; background: #cbd5e1; border-radius: 3px; }
    .atelier-source { display: flex; gap: 1rem; align-items: center; border: 2px dashed #cbd5e1; border-radius: 10px; padding: .75rem; }
    .atelier-source img { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; background: #f1f5f9; }
    .atelier-source-empty { color: #64748b; font-size: .9rem; }
    .atelier-list { display: flex; flex-direction: column; gap: .75rem; }
    .atelier-job { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: .9rem 1rem; border-left: 4px solid #cbd5e1; }
    .atelier-job-pending { border-left-color: #94a3b8; }
    .atelier-job-running { border-left-color: #667eea; }
    .atelier-job-failed { border-left-color: #ef4444; }
    .atelier-job-thumb { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 8px; background: #f1f5f9; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 1.5rem; overflow: hidden; }
    .atelier-job-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .atelier-job-body { flex: 1 1 auto; min-width: 0; }
    .atelier-job-prompt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .atelier-job-actions { flex: 0 0 auto; }
    .atelier-status { font-weight: 500; }
    .atelier-status-pending { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
    .atelier-status-unsent { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
    .atelier-status-running { background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; }
    .atelier-status-failed { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
    .atelier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
    .atelier-done { margin: 0; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); overflow: hidden; }
    .atelier-done-thumb { display: block; position: relative; aspect-ratio: 4 / 3; background: #f1f5f9; }
    .atelier-done-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .atelier-done-badge { position: absolute; top: .5rem; left: .5rem; background: rgba(15,23,42,.75); color: #fff; font-size: .7rem; padding: .15rem .45rem; border-radius: 999px; }
    .atelier-done figcaption { padding: .75rem; }
    .atelier-empty { text-align: center; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 2.5rem 1.5rem; }
    .atelier-empty-icon { font-size: 2.5rem; color: #c7d2fe; margin-bottom: .75rem; }
    #atelier-feedback { transition: opacity .3s; }
</style>
{% endblock %}

{% block body %}
{% for type, flashes in app.flashes(['success', 'danger']) %}
    {% for message in flashes %}
        <div class="alert alert-{{ type }} d-flex align-items-center mb-3" role="alert">
            <i class="fas fa-{{ type == 'success' ? 'check-circle' : 'exclamation-triangle' }} me-2"></i>
            {{ message }}
        </div>
    {% endfor %}
{% endfor %}

<div class="d-flex justify-content-between align-items-start flex-wrap gap-3 mb-3">
    <div>
        <h1 class="h3 fw-bold mb-1">
            <i class="fas fa-wand-magic-sparkles me-2" style="color: #667eea;"></i>Atelier d'images
        </h1>
        <p class="text-muted mb-0">
            Décrivez une image, ou retouchez-en une : elle est dessinée par un poste dédié et rangée dans votre médiathèque
            (dossier « ai-generated »). Les images arrivent en différé — cette page se met à jour toute seule.
        </p>
    </div>
    {% if canEdit and site.imagePrompts is not empty %}
    <form method="post" action="{{ path('admin_atelier_queue', {siteId: site.id}) }}">
        <input type="hidden" name="_token" value="{{ csrf_token('atelier-queue-' ~ site.id) }}">
        <button type="submit" class="btn btn-outline-primary" title="Demander toutes les images prévues par le générateur de site qui ne le sont pas encore">
            <i class="fas fa-paper-plane me-1"></i> Demander les images du site
        </button>
    </form>
    {% endif %}
</div>

{# L'état : l'Imagier (joignable ?), le poste GPU (allumé ?), la file. Tenu à jour par le script. #}
<div class="atelier-state mb-4" id="atelier-state" role="status">
    <span class="badge {{ imagier.reachable ? 'bg-success-subtle text-success border border-success-subtle' : 'bg-danger-subtle text-danger border border-danger-subtle' }}" id="atelier-imagier">
        <i class="fas fa-server me-1"></i>{{ imagier.reachable ? 'Imagier joignable' : 'Imagier injoignable' }}
    </span>
    <span class="badge {{ imagier.worker.online ? 'bg-success-subtle text-success border border-success-subtle' : 'bg-secondary-subtle text-secondary border border-secondary-subtle' }}" id="atelier-worker">
        <i class="fas fa-microchip me-1"></i>{{ imagier.worker.label }}
    </span>
    <span class="text-muted small" id="atelier-queue">{{ imagier.queueLabel ? 'File du poste : ' ~ imagier.queueLabel : 'File du poste : vide' }}</span>
    <span class="text-muted small ms-auto d-none d-md-inline" id="atelier-hint">
        {% if not imagier.worker.online %}Poste éteint ? Vos demandes attendent et seront dessinées à l'allumage.{% endif %}
    </span>
</div>

<div id="atelier-feedback" class="alert d-none" role="alert"></div>

{% if canEdit %}
<div class="row g-4 mb-4">
    <div class="col-lg-6">
        <div class="atelier-card">
            <h2 class="fw-bold mb-3"><i class="fas fa-sparkles me-2 text-primary"></i>Générer une image</h2>
            <form id="atelier-generate-form" novalidate>
                <div class="mb-3">
                    <label for="gen-prompt" class="form-label fw-semibold">Décrivez l'image</label>
                    <textarea id="gen-prompt" class="form-control" rows="4" required maxlength="4000"
                              placeholder="A cozy artisan bakery storefront at sunrise, warm light, fresh bread in the window, photorealistic"></textarea>
                    <div class="form-text">Soyez concret : sujet, lieu, lumière, style. L'anglais donne les meilleurs résultats.</div>
                </div>
                <div class="mb-3">
                    <span class="form-label fw-semibold d-block">Format</span>
                    <div class="atelier-presets" role="radiogroup">
                        {% for key, preset in presets %}
                        <div class="atelier-preset">
                            <input type="radio" name="preset" id="preset-{{ key }}" value="{{ key }}" data-width="{{ preset.width }}" data-height="{{ preset.height }}" {{ key == 'banner' ? 'checked' : '' }}>
                            <label for="preset-{{ key }}">
                                <span class="atelier-preset-shape" style="width: {{ (28 * preset.width / max(preset.width, preset.height))|round }}px; height: {{ (28 * preset.height / max(preset.width, preset.height))|round }}px;"></span>
                                {{ preset.label }}
                                <small>{{ preset.width }} × {{ preset.height }} · {{ preset.hint }}</small>
                            </label>
                        </div>
                        {% endfor %}
                        <div class="atelier-preset">
                            <input type="radio" name="preset" id="preset-custom" value="custom">
                            <label for="preset-custom">
                                <span class="atelier-preset-shape" style="width: 22px; height: 22px; border: 2px dashed #94a3b8; background: transparent;"></span>
                                Personnalisé
                                <small>vos dimensions</small>
                            </label>
                        </div>
                    </div>
                    <div class="d-flex gap-2 align-items-end mt-2 d-none" id="gen-custom">
                        <div>
                            <label for="gen-width" class="form-label small mb-1">Largeur</label>
                            <input id="gen-width" type="number" class="form-control form-control-sm" value="1024" min="256" max="2560" step="16">
                        </div>
                        <div>
                            <label for="gen-height" class="form-label small mb-1">Hauteur</label>
                            <input id="gen-height" type="number" class="form-control form-control-sm" value="1024" min="256" max="2560" step="16">
                        </div>
                        <div class="form-text mb-2">pixels, de 256 à 2560</div>
                    </div>
                </div>
                <div class="row g-2 align-items-end mb-3">
                    <div class="col-sm-5">
                        <label for="gen-folder" class="form-label small mb-1">Dossier de la médiathèque</label>
                        <input id="gen-folder" type="text" class="form-control form-control-sm" value="ai-generated" pattern="[A-Za-z0-9_\-/]*">
                    </div>
                    <div class="col-sm-3">
                        <label for="gen-variants" class="form-label small mb-1">Variantes</label>
                        <select id="gen-variants" class="form-select form-select-sm">
                            <option value="1" selected>1 image</option>
                            <option value="2">2 images</option>
                            <option value="3">3 images</option>
                            <option value="4">4 images</option>
                        </select>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-check mb-1">
                            <input class="form-check-input" type="checkbox" id="gen-priority">
                            <label class="form-check-label small" for="gen-priority" title="Passe devant la file du poste — pour ce qui ne peut pas attendre">Prioritaire</label>
                        </div>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary" id="gen-submit">
                    <i class="fas fa-paper-plane me-1"></i> Envoyer à l'atelier
                </button>
            </form>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="atelier-card">
            <h2 class="fw-bold mb-3"><i class="fas fa-wand-magic me-2 text-primary"></i>Retoucher une image</h2>
            <form id="atelier-retouch-form" novalidate>
                <div class="mb-3">
                    <span class="form-label fw-semibold d-block">Image de départ</span>
                    <div class="atelier-source" id="retouch-source">
                        <img src="" alt="" id="retouch-preview" class="d-none">
                        <div class="flex-grow-1">
                            <div class="atelier-source-empty" id="retouch-source-empty">Aucune image choisie.</div>
                            <div class="small text-truncate d-none" id="retouch-source-name"></div>
                            <button type="button" class="btn btn-sm btn-outline-primary mt-2" id="retouch-choose">
                                <i class="fas fa-folder-open me-1"></i> Choisir dans la médiathèque
                            </button>
                        </div>
                    </div>
                    <input type="hidden" id="retouch-source-url" value="">
                </div>
                <div class="mb-3">
                    <label for="retouch-prompt" class="form-label fw-semibold">Que faut-il changer ?</label>
                    <textarea id="retouch-prompt" class="form-control" rows="3" required maxlength="4000"
                              placeholder="Replace the sky with a clear blue sky, keep everything else unchanged"></textarea>
                    <div class="form-text">Une consigne, pas une nouvelle scène : l'image est conservée, seule la consigne s'applique. L'anglais donne les meilleurs résultats.</div>
                </div>
                <div class="d-flex flex-wrap gap-3 mb-3">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="retouch-replace" checked>
                        <label class="form-check-label small" for="retouch-replace" title="Là où vos pages affichent cette image, la version retouchée prendra sa place à la livraison">Remplacer dans les pages qui l'utilisent</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="retouch-priority">
                        <label class="form-check-label small" for="retouch-priority">Prioritaire</label>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary" id="retouch-submit">
                    <i class="fas fa-paper-plane me-1"></i> Envoyer la retouche
                </button>
            </form>
        </div>
    </div>
</div>
{% endif %}

<div id="atelier-jobs"
     data-list-url="{{ path('admin_atelier_list', {siteId: site.id}) }}"
     data-signature="{{ signature }}"
     data-open="{{ counts.pending + counts.running }}">
    {% include 'admin/atelier/_jobs.html.twig' %}
</div>
{% endblock %}

{% block javascripts %}
<script src="{{ asset('assets/js/media-picker.js') }}"></script>
<script>
(function () {
    const siteId = {{ site.id }};
    const canEdit = {{ canEdit ? 'true' : 'false' }};
    const jobsBox = document.getElementById('atelier-jobs');
    const feedback = document.getElementById('atelier-feedback');
    let signature = jobsBox.dataset.signature;
    let watcher = null;
    let feedbackTimer = null;

    function say(message, type) {
        clearTimeout(feedbackTimer);
        feedback.className = 'alert alert-' + (type || 'success') + ' d-flex align-items-center';
        feedback.innerHTML = '<i class="fas ' + (type === 'danger' ? 'fa-exclamation-triangle' : 'fa-check-circle') + ' me-2"></i><span></span>';
        feedback.querySelector('span').textContent = message;
        feedback.style.opacity = '1';
        feedbackTimer = setTimeout(() => { feedback.style.opacity = '0'; setTimeout(() => feedback.classList.add('d-none'), 300); }, type === 'danger' ? 8000 : 5000);
    }

    function renderState(imagier) {
        if (!imagier) return;
        const im = document.getElementById('atelier-imagier');
        im.className = 'badge ' + (imagier.reachable ? 'bg-success-subtle text-success border border-success-subtle' : 'bg-danger-subtle text-danger border border-danger-subtle');
        im.innerHTML = '<i class="fas fa-server me-1"></i>' + (imagier.reachable ? 'Imagier joignable' : 'Imagier injoignable');
        const worker = document.getElementById('atelier-worker');
        worker.className = 'badge ' + (imagier.worker && imagier.worker.online ? 'bg-success-subtle text-success border border-success-subtle' : 'bg-secondary-subtle text-secondary border border-secondary-subtle');
        worker.innerHTML = '<i class="fas fa-microchip me-1"></i>';
        worker.appendChild(document.createTextNode(imagier.worker ? imagier.worker.label : 'Poste GPU : état inconnu'));
        document.getElementById('atelier-queue').textContent = imagier.queueLabel ? 'File du poste : ' + imagier.queueLabel : 'File du poste : vide';
        document.getElementById('atelier-hint').textContent = imagier.worker && imagier.worker.online ? '' : 'Poste éteint ? Vos demandes attendent et seront dessinées à l\'allumage.';
    }

    async function reloadList() {
        try {
            const response = await fetch(jobsBox.dataset.listUrl, { credentials: 'same-origin' });
            if (!response.ok) return;
            jobsBox.innerHTML = await response.text();
        } catch (e) { /* réseau en carafe : prochain tour */ }
    }

    function startWatch() {
        if (watcher) watcher.stop();
        watcher = IzbAtelier.watch(siteId, {
            onUpdate(data) {
                renderState(data.imagier);
                if (data.signature !== signature) {
                    signature = data.signature;
                    reloadList();
                }
            }
        });
    }

    // --- Générer ---------------------------------------------------------
    const generateForm = document.getElementById('atelier-generate-form');
    if (generateForm) {
        const custom = document.getElementById('gen-custom');
        generateForm.querySelectorAll('input[name="preset"]').forEach(input => {
            input.addEventListener('change', () => custom.classList.toggle('d-none', input.value !== 'custom' || !input.checked));
        });

        generateForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            const preset = generateForm.querySelector('input[name="preset"]:checked');
            const isCustom = !preset || preset.value === 'custom';
            const payload = {
                kind: 'generate',
                prompt: document.getElementById('gen-prompt').value.trim(),
                width: parseInt(isCustom ? document.getElementById('gen-width').value : preset.dataset.width, 10) || 1024,
                height: parseInt(isCustom ? document.getElementById('gen-height').value : preset.dataset.height, 10) || 1024,
                folder: document.getElementById('gen-folder').value.trim() || 'ai-generated',
                variants: parseInt(document.getElementById('gen-variants').value, 10) || 1,
                priority: document.getElementById('gen-priority').checked
            };
            if (!payload.prompt) { say('Décrivez l\'image à générer.', 'danger'); document.getElementById('gen-prompt').focus(); return; }

            const button = document.getElementById('gen-submit');
            button.disabled = true;
            try {
                const result = await IzbAtelier.createJob(siteId, payload);
                say(result.message, result.jobs.some(j => j.status === 'failed') ? 'danger' : 'success');
                document.getElementById('gen-prompt').value = '';
                await reloadList();
                startWatch();
            } catch (err) {
                say(err.message, 'danger');
            } finally {
                button.disabled = false;
            }
        });
    }

    // --- Retoucher -------------------------------------------------------
    const retouchForm = document.getElementById('atelier-retouch-form');
    let mediaPicker = null;

    function setRetouchSource(url) {
        document.getElementById('retouch-source-url').value = url || '';
        const preview = document.getElementById('retouch-preview');
        const empty = document.getElementById('retouch-source-empty');
        const name = document.getElementById('retouch-source-name');
        if (url) {
            preview.src = url;
            preview.classList.remove('d-none');
            empty.classList.add('d-none');
            name.textContent = url.split('/').pop();
            name.classList.remove('d-none');
        } else {
            preview.classList.add('d-none');
            empty.classList.remove('d-none');
            name.classList.add('d-none');
        }
    }

    if (retouchForm) {
        document.getElementById('retouch-choose').addEventListener('click', () => {
            if (!mediaPicker) mediaPicker = new MediaPicker(siteId);
            mediaPicker.open(url => setRetouchSource(url));
        });

        retouchForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            const payload = {
                kind: 'edit',
                prompt: document.getElementById('retouch-prompt').value.trim(),
                sourceUrl: document.getElementById('retouch-source-url').value,
                replaceSource: document.getElementById('retouch-replace').checked,
                priority: document.getElementById('retouch-priority').checked
            };
            if (!payload.sourceUrl) { say('Choisissez d\'abord l\'image à retoucher.', 'danger'); return; }
            if (!payload.prompt) { say('Dites ce qu\'il faut changer sur l\'image.', 'danger'); document.getElementById('retouch-prompt').focus(); return; }

            const button = document.getElementById('retouch-submit');
            button.disabled = true;
            try {
                const result = await IzbAtelier.createJob(siteId, payload);
                say(result.message, result.jobs.some(j => j.status === 'failed') ? 'danger' : 'success');
                document.getElementById('retouch-prompt').value = '';
                await reloadList();
                startWatch();
            } catch (err) {
                say(err.message, 'danger');
            } finally {
                button.disabled = false;
            }
        });
    }

    // --- Actions de la liste (délégation : la liste est rechargée) -------
    jobsBox.addEventListener('click', async (e) => {
        const button = e.target.closest('button');
        if (!button) return;

        if (button.classList.contains('js-cancel') && canEdit) {
            button.disabled = true;
            try {
                const result = await IzbAtelier.cancel(siteId, button.dataset.id);
                say(result.message, 'success');
            } catch (err) {
                say(err.message, 'danger');
            }
            await reloadList();
            startWatch();
        } else if (button.classList.contains('js-retry') && canEdit) {
            button.disabled = true;
            try {
                const result = await IzbAtelier.retry(siteId, button.dataset.id);
                say(result.message, result.job && result.job.status === 'failed' ? 'danger' : 'success');
            } catch (err) {
                say(err.message, 'danger');
            }
            await reloadList();
            startWatch();
        } else if (button.classList.contains('js-fix') && retouchForm) {
            setRetouchSource(button.dataset.url);
            retouchForm.scrollIntoView({ behavior: 'smooth', block: 'center' });
            setTimeout(() => document.getElementById('retouch-prompt').focus(), 400);
        } else if (button.classList.contains('js-copy')) {
            try {
                await navigator.clipboard.writeText(new URL(button.dataset.url, window.location.origin).href);
                say('Adresse de l\'image copiée.', 'success');
            } catch (err) {
                say('Impossible de copier : ' + button.dataset.url, 'danger');
            }
        }
    });

    if (parseInt(jobsBox.dataset.open, 10) > 0) {
        startWatch();
    }
})();
</script>
{% endblock %}