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

{% block title %}Modifications en attente{% endblock %}
{% block breadcrumb %}{{ site.name }} <i class="fas fa-chevron-right"></i> Modifications en attente{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
    .dr-wrap { max-width: 1180px; margin: 0 auto; padding: 1.5rem 0 3rem; }
    .dr-back { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin: 0 0 .75rem; padding: .4rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--brand-primary); font-weight: 600; text-decoration: none; }
    .dr-back:hover, .dr-back:focus-visible { border-color: var(--brand-primary); background: var(--brand-soft); }
    /* Ouvert depuis l'assistant sur téléphone : le retour d'abord, le décompte de l'essai reste sur les autres écrans. */
    @media (max-width: 767.98px) { body:has(.dr-back) .billing-notice { display: none; } }
    .dr-head h1 { font-family: var(--font-heading); font-size: 1.9rem; margin: 0 0 .35rem; color: var(--ink); }
    .dr-head p { color: #4a4f5c; margin: 0 0 1.5rem; max-width: 720px; }
    .dr-grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
    .dr-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.25rem 1.35rem; }
    .dr-card h2 { font-family: var(--font-heading); font-size: 1.15rem; margin: 0 0 .9rem; }
    .dr-group { border-top: 1px solid var(--line); padding: .9rem 0; }
    .dr-group:first-of-type { border-top: 0; padding-top: 0; }
    .dr-group__top { display: flex; justify-content: space-between; gap: .75rem; align-items: start; }
    .dr-group__label { font-weight: 600; margin: 0; }
    .dr-group__meta { font-size: .8rem; color: #6b7080; margin: .15rem 0 .4rem; }
    .dr-group ul { margin: 0; padding-left: 1.1rem; font-size: .9rem; color: #3d4250; }
    .dr-undo { background: none; border: 1px solid var(--line-strong, #cfc6b8); color: var(--ink); border-radius: 999px; padding: .25rem .8rem; font-size: .82rem; white-space: nowrap; }
    .dr-undo:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
    .dr-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
    .dr-recette { margin-top: 1.1rem; padding: .9rem 1rem; border: 1px solid var(--line, #e7e0d4); border-radius: 12px; background: var(--brand-soft, #e3eaf4); }
    .dr-recette[data-state="critical"] { background: #fdeee8; border-color: var(--action, #b8461e); }
    .dr-recette__status { margin: 0 0 .4rem; font-weight: 600; }
    .dr-recette__list { margin: 0 0 .6rem; padding-left: 1.2rem; }
    .dr-recette__list:empty { display: none; }
    .dr-recette--live { margin: 0 0 1rem; }
    .dr-accept { display: flex; gap: .5rem; align-items: center; min-height: 44px; margin-bottom: .4rem; }
    .dr-actions form { margin: 0; }
    .dr-link { background: #fff; border: 1px solid var(--line-strong, #cfc6b8); color: var(--ink); border-radius: 999px; min-height: 44px; padding: .45rem 1.1rem; font-size: .92rem; }
    .dr-link:hover, .dr-link:focus-visible { border-color: #a3361a; color: #a3361a; }
    .dr-conflict { background: #fdf3e1; border: 1px solid #ecd3a4; border-left: 5px solid #c47f12; border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1rem; font-size: .9rem; }
    .dr-conflict ul { margin: .4rem 0 0; padding-left: 1.1rem; }
    .dr-frame { width: 100%; height: 72vh; min-height: 480px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
    .dr-empty { text-align: center; padding: 2.5rem 1rem; color: #4a4f5c; }
    .dr-empty i { font-size: 2rem; color: var(--brand-primary); margin-bottom: .75rem; }
    .dr-versions { margin-top: 2rem; }
    .dr-version { display: flex; gap: 1rem; justify-content: space-between; align-items: start; border-top: 1px solid var(--line); padding: .9rem 0; }
    .dr-version:first-of-type { border-top: 0; }
    .dr-badge { display: inline-block; font-size: .72rem; padding: .1rem .5rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand-secondary, #1b365e); margin-left: .35rem; vertical-align: middle; }
    .dr-badge--muted { background: #eee9e0; color: #5b6070; }
    .dr-share { display: flex; gap: .5rem; margin-top: .9rem; }
    .dr-share input { flex: 1; min-width: 0; font-size: .8rem; border: 1px solid var(--line); border-radius: 8px; padding: .35rem .6rem; background: var(--paper); }
    @media (max-width: 991px) { .dr-grid { grid-template-columns: minmax(0, 1fr); } .dr-frame { height: 60vh; } }
</style>
{% endblock %}

{% block body %}
<div class="dr-wrap">
    {% if fromAgent %}
        <a class="dr-back" href="{{ path('admin_agent', {siteId: site.id}) }}"><i class="fas fa-arrow-left" aria-hidden="true"></i> Retour à l'assistant</a>
    {% endif %}
    <div class="dr-head">
        <h1>Modifications en attente</h1>
        <p>Ce que l'assistant vous propose n'est pas encore en ligne. Regardez l'aperçu, annulez ce qui ne vous plaît pas, puis mettez le reste en ligne d'un clic. Chaque mise en ligne reste annulable.</p>
    </div>

    {% if images is not empty %}
    <div class="dr-card mb-3" role="status">
        <strong>Images en préparation à l'atelier</strong>
        <ul class="dr-group__meta mb-1" style="padding-left:1.1rem">
            {% for image in images %}<li>{{ image.label }} — {{ image.status }}{% if image.eta %} ({{ image.eta }}){% endif %}</li>{% endfor %}
        </ul>
        <p class="dr-group__meta mb-0">Commandées par l'assistant, elles entreront d'elles-mêmes dans les modifications en attente : rechargez la page dans quelques minutes.</p>
    </div>
    {% endif %}

    {% if draft and not draft.empty %}
    <div class="dr-grid">
        <section class="dr-card" aria-labelledby="dr-pending">
            <h2 id="dr-pending">{{ groups|length }} demande{{ groups|length > 1 ? 's' : '' }} en attente</h2>

            {% if conflicts is not empty %}
            <div class="dr-conflict" role="alert">
                <strong>Retouché à la main depuis la proposition :</strong>
                <ul>{% for c in conflicts %}<li>{{ c.label }}</li>{% endfor %}</ul>
                <div class="mt-2">Mettre en ligne écrasera ces retouches. Vous pouvez aussi annuler la demande concernée.</div>
            </div>
            {% endif %}

            {% for group in groups %}
            <div class="dr-group">
                <div class="dr-group__top">
                    <div>
                        <p class="dr-group__label">{{ group.label }}</p>
                        <p class="dr-group__meta">
                            {{ group.source == 'revert' ? 'Retour arrière' : (group.source == 'agent' ? 'Assistant' : 'Éditeur') }}
                            {% if group.createdAt %}· {{ group.createdAt|date('d/m à H:i', 'Europe/Paris') }}{% endif %}
                        </p>
                    </div>
                    <form method="post" action="{{ path('admin_site_draft_undo', {siteId: site.id, groupId: group.id}) }}"
                          {% if group.dependents is not empty %}data-izi-confirm="{{ group.dependents|length }} demande{{ group.dependents|length > 1 ? 's' : '' }} plus récente{{ group.dependents|length > 1 ? 's' : '' }} qui la complète{{ group.dependents|length > 1 ? 'nt' : '' }} seront annulées avec elle. Le site en ligne ne change pas." data-izi-confirm-title="Annuler cette demande ?" data-izi-confirm-action="Annuler les demandes" data-izi-confirm-cancel="Les garder"{% endif %}>
                        <input type="hidden" name="_token" value="{{ csrf_token('draft') }}">{% if fromAgent %}<input type="hidden" name="_retour" value="assistant">{% endif %}
                        <button type="submit" class="dr-undo">Annuler</button>
                    </form>
                </div>
                <ul>{% for item in group.items %}<li>{{ item }}</li>{% endfor %}</ul>
            </div>
            {% endfor %}

            {% if izi_feature('recette') %}
            {# Recette dans le navigateur (lot 4) : les pages touchées par une
               création, la feuille du site ou la direction artistique sont
               mesurées ici, sur téléphone, tablette et ordinateur. #}
            <div class="dr-recette" data-izi-recette-runner
                 data-list-url="{{ path('admin_render_checks', {siteId: site.id}) }}"
                 data-fix-url="{{ path('admin_agent', {siteId: site.id}) }}"
                 {% if not recette or recette.planned == 0 %}hidden{% endif %}
                 data-state="{{ recette and recette.critical > 0 ? 'critical' : 'ok' }}">
                <p class="dr-recette__status" data-izi-recette-status role="status" aria-live="polite">
                    {% if recette and recette.pending > 0 %}Vérification de la version à venir en cours…{% elseif recette and recette.critical > 0 %}La vérification a trouvé des défauts graves : à corriger avant la mise en ligne.{% elseif recette and recette.planned > 0 %}Vérifiée sur téléphone, tablette et ordinateur.{% endif %}
                </p>
                <ul class="dr-recette__list" data-izi-recette-findings>
                    {% for page in recette.pages|default([]) %}{% for f in page.findings %}<li>{{ f.severity == 'critical' ? 'Grave — ' : '' }}{{ page.page }} : {{ f.message }}</li>{% endfor %}{% endfor %}
                </ul>
                <a class="dr-undo" data-izi-recette-fix href="{{ path('admin_agent', {siteId: site.id}) }}" hidden>Demander à l'assistant de corriger</a>
            </div>
            {% endif %}

            <div class="dr-actions">
                <form method="post" action="{{ path('admin_site_draft_publish', {siteId: site.id}) }}">
                    <input type="hidden" name="_token" value="{{ csrf_token('draft') }}">{% if fromAgent %}<input type="hidden" name="_retour" value="assistant">{% endif %}
                    {% if conflicts is not empty %}<input type="hidden" name="force" value="1">{% endif %}
                    {% if recette and recette.critical > 0 %}
                        <label class="dr-accept"><input type="checkbox" name="accept_defects" value="1"> Mettre en ligne malgré les défauts graves relevés</label>
                    {% endif %}
                    <button type="submit" class="btn btn-gradient">{{ conflicts is not empty ? 'Mettre en ligne quand même' : 'Mettre en ligne' }}</button>
                </form>
                <form method="post" action="{{ path('admin_site_draft_discard', {siteId: site.id}) }}" data-izi-confirm="Toutes les modifications en attente seront perdues. Le site en ligne ne change pas." data-izi-confirm-title="Tout abandonner ?" data-izi-confirm-action="Abandonner les modifications" data-izi-confirm-cancel="Les garder">
                    <input type="hidden" name="_token" value="{{ csrf_token('draft') }}">{% if fromAgent %}<input type="hidden" name="_retour" value="assistant">{% endif %}
                    <button type="submit" class="dr-link">Tout abandonner</button>
                </form>
            </div>

            <div class="dr-share">
                <label class="visually-hidden" for="dr-share-url">Lien d'aperçu à partager</label>
                <input id="dr-share-url" type="text" readonly value="{{ url('draft_preview_token', {token: draft.previewToken}) }}">
                <button type="button" class="dr-undo" data-copy="#dr-share-url">Copier le lien</button>
            </div>
            <p class="dr-group__meta mt-1">Ce lien montre la version à venir à qui vous voulez, sans compte. Il cesse de fonctionner dès la mise en ligne.</p>
        </section>

        <section aria-label="Aperçu de la version à venir">
            <iframe class="dr-frame" src="{{ path('admin_draft_preview', {siteId: site.id}) }}" title="Aperçu de la version à venir"></iframe>
            <p class="dr-group__meta mt-2"><a href="{{ path('admin_draft_preview', {siteId: site.id}) }}" target="_blank" rel="noopener">Ouvrir l'aperçu dans un nouvel onglet</a></p>
        </section>
    </div>
    {% else %}
    <div class="dr-card dr-empty">
        <i class="fas fa-check-circle" aria-hidden="true"></i>
        <p class="mb-1"><strong>Rien en attente.</strong> Votre site en ligne est à jour.</p>
        {% if agent_available(site) %}
            <p class="mb-0"><a href="{{ path('admin_agent', {siteId: site.id}) }}">Demander une modification à l'Assistant IA</a></p>
        {% endif %}
    </div>
    {% endif %}

    <section class="dr-card dr-versions" aria-labelledby="dr-versions">
        <h2 id="dr-versions">Versions mises en ligne</h2>
        {% if izi_feature('recette') and liveRecette %}
        {# Dernière version publiée sans aperçu (recopie d'un super admin) : ses
           pages sont mesurées ici, en ligne, sur téléphone, tablette et ordinateur. #}
        <div class="dr-recette dr-recette--live" data-izi-recette-live
             data-list-url="{{ path('admin_render_checks', {siteId: site.id}) }}"
             data-fix-url="{{ path('admin_agent', {siteId: site.id}) }}"
             data-state="{{ liveRecette.pending > 0 ? 'running' : (liveRecette.critical > 0 ? 'critical' : 'ok') }}">
            <p class="dr-recette__status" data-izi-recette-status role="status" aria-live="polite">
                {% if liveRecette.pending > 0 %}Vérification de la version en ligne en cours…{% elseif liveRecette.critical > 0 %}La vérification a trouvé des défauts graves sur le site en ligne : à corriger.{% else %}Version en ligne vérifiée sur téléphone, tablette et ordinateur.{% endif %}
            </p>
            <ul class="dr-recette__list" data-izi-recette-findings>
                {% for page in liveRecette.pages %}{% for f in page.findings %}<li>{{ f.severity == 'critical' ? 'Grave — ' : '' }}{{ page.page }} : {{ f.message }}</li>{% endfor %}{% endfor %}
            </ul>
            <a class="dr-undo" data-izi-recette-fix href="{{ path('admin_agent', {siteId: site.id}) }}" hidden>Demander à l'assistant de corriger</a>
        </div>
        {% endif %}
        {% for entry in versions %}
            {% set v = entry.version %}
            <div class="dr-version">
                <div>
                    <p class="dr-group__label">
                        {{ v.publishedAt|date('d/m/Y à H:i', 'Europe/Paris') }}
                        {% if v.revertedAt %}<span class="dr-badge dr-badge--muted">annulée</span>{% endif %}
                    </p>
                    <p class="dr-group__meta">{% if v.publishedBy %}par {{ v.publishedBy.firstname ?? v.publishedBy.email }}{% endif %}</p>
                    <ul class="dr-group__meta" style="padding-left:1.1rem">
                        {% for g in entry.groups %}<li>{{ g.label }}</li>{% endfor %}
                    </ul>
                </div>
                {% if canManage and entry.revertible %}
                <form method="post" action="{{ path('admin_site_version_revert', {siteId: site.id, id: v.id}) }}" data-izi-confirm="Le retour à l'état d'avant cette version est préparé dans les modifications en attente : vous le vérifierez dans l'aperçu avant de le mettre en ligne." data-izi-confirm-title="Annuler cette version ?" data-izi-confirm-action="Préparer le retour" data-izi-confirm-cancel="Ne rien changer">
                    <input type="hidden" name="_token" value="{{ csrf_token('draft') }}">{% if fromAgent %}<input type="hidden" name="_retour" value="assistant">{% endif %}
                    <button type="submit" class="dr-undo">Annuler cette version</button>
                </form>
                {% endif %}
            </div>
        {% else %}
            <p class="dr-group__meta mb-0">Aucune version mise en ligne depuis l'assistant pour l'instant.</p>
        {% endfor %}
    </section>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
{% if izi_feature('recette') %}
<script src="{{ versioned_asset('assets/js/izi-recette.js') }}"></script>
<script src="{{ versioned_asset('assets/js/izi-recette-runner.js') }}"></script>
{% endif %}
<script>
    document.querySelectorAll('[data-copy]').forEach(function (button) {
        button.addEventListener('click', function () {
            var input = document.querySelector(button.dataset.copy);
            if (!input) { return; }
            input.select();
            (navigator.clipboard ? navigator.clipboard.writeText(input.value) : Promise.reject()).catch(function () { document.execCommand('copy'); });
            button.textContent = 'Lien copié';
        });
    });
</script>
{% endblock %}