{% extends '@Communication/communication/layout.html.twig' %}

{% block communication_title %}Centre de validation · Communication{% endblock %}
{% block communication_header %}{% endblock %}

{% block communication_content %}
{% set statusLabels = {
    requested: 'En attente',
    approved: 'Approuvée',
    changes_requested: 'Modifications demandées',
    rejected: 'Rejetée'
} %}
{% set platformLabels = {
    generic: 'Multicanal',
    linkedin: 'LinkedIn',
    instagram: 'Instagram',
    twitter: 'X / Twitter',
    facebook: 'Facebook'
} %}
{% set platformIcons = {
    generic: 'solar:global-broken',
    linkedin: 'mdi:linkedin',
    instagram: 'mdi:instagram',
    twitter: 'ri:twitter-x-fill',
    facebook: 'mdi:facebook'
} %}
{% set eventLabels = {
    post_submitted: 'Publication envoyée pour validation',
    post_approved: 'Publication approuvée',
    changes_requested: 'Modifications demandées',
    post_rejected: 'Publication rejetée',
    approval_comment_added: 'Commentaire ajouté'
} %}

<div
     data-controller="communication-approval"
     data-communication-approval-page-size-value="5">
    <header class="capproval-header capsule-heading">
        <div class="capsule-heading-main">
            <div class="capsule-heading-content">
                <div>
                    <h1 class="capsule-heading-title">Centre de validation</h1>
                    <span>{{ center.counts.requested }} en attente</span>
                </div>
                <p class="capsule-heading-subtitle">{{ 'now'|date('d/m/Y') }} — Examinez et validez les contenus soumis.</p>
            </div>
        </div>
        <div class="capproval-header-actions">
            <label class="capproval-search">
                <iconify-icon icon="solar:magnifer-linear"></iconify-icon>
                <input type="search"
                       placeholder="Rechercher une publication…"
                       aria-label="Rechercher une publication"
                       data-communication-approval-target="search"
                       data-action="input->communication-approval#filter">
            </label>
            <button class="capproval-filter-toggle"
                    type="button"
                    data-action="communication-approval#toggleFilters"
                    aria-controls="approval-filters"
                    aria-expanded="false">
                <iconify-icon icon="solar:tuning-2-linear"></iconify-icon>
                Filtres
            </button>
        </div>
    </header>

    <div class="capproval-layout">
        <main class="capproval-main">
            <section class="capproval-kpis data-kpis" aria-label="Indicateurs de validation">
                <article class="is-amber data-kpi data-kpi--orange">
                    <i class="data-kpi__icon"><iconify-icon icon="solar:hourglass-bold-duotone"></iconify-icon></i>
                    <div><span>En attente de validation</span><strong>{{ center.counts.requested }}</strong></div>
                </article>
                <article class="is-green data-kpi data-kpi--green">
                    <i class="data-kpi__icon"><iconify-icon icon="solar:check-circle-bold-duotone"></iconify-icon></i>
                    <div><span>Approuvées ce mois-ci</span><strong>{{ center.approvedThisMonth }}</strong></div>
                </article>
                <article class="is-purple data-kpi data-kpi--violet">
                    <i class="data-kpi__icon"><iconify-icon icon="solar:restart-bold-duotone"></iconify-icon></i>
                    <div><span>Modifications demandées</span><strong>{{ center.counts.changes_requested }}</strong></div>
                </article>
                <article class="is-red data-kpi data-kpi--red">
                    <i class="data-kpi__icon"><iconify-icon icon="solar:forbidden-circle-bold-duotone"></iconify-icon></i>
                    <div><span>Rejetées</span><strong>{{ center.counts.rejected }}</strong></div>
                </article>
            </section>

            <section id="approval-filters" class="capproval-filter-bar">
                <div class="capproval-tabs" role="tablist" aria-label="Filtrer par statut">
                    <button type="button" class="is-active" data-status="" data-action="communication-approval#statusFilter">Toutes</button>
                    <button type="button" data-status="requested" data-action="communication-approval#statusFilter">
                        En attente <span>{{ center.counts.requested }}</span>
                    </button>
                    <button type="button" data-status="approved" data-action="communication-approval#statusFilter">Approuvées</button>
                    <button type="button" data-status="changes_requested" data-action="communication-approval#statusFilter">À modifier</button>
                    <button type="button" data-status="rejected" data-action="communication-approval#statusFilter">Rejetées</button>
                </div>
                <label class="capproval-platform-filter">
                    <span class="visually-hidden">Filtrer par plateforme</span>
                    <select data-communication-approval-target="platform" data-action="change->communication-approval#filter">
                        <option value="">Toutes les plateformes</option>
                        <option value="linkedin">LinkedIn</option>
                        <option value="instagram">Instagram</option>
                        <option value="twitter">X / Twitter</option>
                        <option value="facebook">Facebook</option>
                        <option value="generic">Multicanal</option>
                    </select>
                </label>
            </section>

            <section class="capproval-table-card communication-panel communication-table">
                <div class="capproval-table-scroll">
                    <table class="capproval-table">
                        <thead>
                            <tr>
                                <th class="is-check"><input type="checkbox" aria-label="Tout sélectionner" data-communication-approval-target="selectAll" data-action="change->communication-approval#toggleAll"></th>
                                <th>Publication</th>
                                <th>Auteur</th>
                                <th>Campagne</th>
                                <th>Soumise le</th>
                                <th>Valideur</th>
                                <th>Statut</th>
                                <th>Commentaires</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for row in center.rows %}
                            {% set approval = row.approval %}
                            {% set post = row.post %}
                            {% set author = row.author %}
                            {% set reviewer = row.reviewer %}
                            {% set status = approval.status in statusLabels|keys ? approval.status : 'requested' %}
                            {% set isInitiallySelected = selectedToken ? post.idtoken == selectedToken : loop.first %}
                            <tr class="{{ isInitiallySelected ? 'is-selected' }}"
                                data-communication-approval-target="row"
                                data-panel="{{ approval.idtoken }}"
                                data-status="{{ status }}"
                                data-platform="{{ row.platform }}"
                                data-search="{{ post.internalTitle }} {{ author ? author : '' }} {{ row.campaign ? row.campaign.name : '' }} {{ platformLabels[row.platform]|default('Multicanal') }}"
                                data-action="click->communication-approval#selectRow">
                                <td class="is-check">
                                    <input type="checkbox"
                                           value="{{ approval.idtoken }}"
                                           aria-label="Sélectionner {{ post.internalTitle }}"
                                           data-communication-approval-target="checkbox"
                                           data-action="click->communication-approval#stop change->communication-approval#selectionChanged">
                                </td>
                                <td>
                                    <div class="capproval-publication">
                                        <i class="is-{{ row.platform }}"><iconify-icon icon="{{ platformIcons[row.platform]|default(platformIcons.generic) }}"></iconify-icon></i>
                                        <span>
                                            <a href="{{ path('communication_post_show', {idtoken: post.idtoken}) }}">{{ post.internalTitle }}</a>
                                            <small>{{ platformLabels[row.platform]|default('Multicanal') }} · {{ row.variant ? row.variant.name : 'Publication' }}</small>
                                        </span>
                                    </div>
                                </td>
                                <td>
                                    {% if author %}
                                        <span class="capproval-person">
                                            <i><img src="{{ user_avatar_url(author) }}" alt=""></i>
                                            <span>{{ author }}</span>
                                        </span>
                                    {% else %}
                                        <em>Non renseigné</em>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if row.campaign %}
                                        <span class="capproval-campaign"><iconify-icon icon="solar:flag-2-bold-duotone"></iconify-icon>{{ row.campaign.name }}</span>
                                    {% else %}
                                        <em>Sans campagne</em>
                                    {% endif %}
                                </td>
                                <td>
                                    <time datetime="{{ approval.requestedAt|date('c') }}">
                                        {{ approval.requestedAt|date('d/m/Y') }}<br>
                                        <strong>{{ approval.requestedAt|date('H:i') }}</strong>
                                    </time>
                                </td>
                                <td>
                                    {% if reviewer %}
                                        <span class="capproval-person">
                                            <i class="is-reviewer"><img src="{{ user_avatar_url(reviewer) }}" alt=""></i>
                                            <span>{{ reviewer }}</span>
                                        </span>
                                    {% else %}
                                        <em>À attribuer</em>
                                    {% endif %}
                                </td>
                                <td><span class="capproval-status is-{{ status }}"><i></i>{{ statusLabels[status] }}</span></td>
                                <td>
                                    <span class="capproval-comment-count">
                                        <iconify-icon icon="solar:chat-round-line-linear"></iconify-icon>
                                        {{ row.comments|length }}
                                    </span>
                                </td>
                                <td>
                                    <button class="link" type="button" data-action="communication-approval#selectRow">
                                        <i class="ti ti-{{ status == 'requested' ? 'edit' : 'eye' }} fs-5"></i>
                                    </button>
                                </td>
                            </tr>
                        {% else %}
                            <tr class="capproval-empty-row">
                                <td colspan="9">
                                    <iconify-icon icon="solar:inbox-line-linear"></iconify-icon>
                                    <strong>Aucune demande de validation</strong>
                                    <span>Les publications soumises apparaîtront ici.</span>
                                </td>
                            </tr>
                        {% endfor %}
                            <tr class="capproval-empty-row" hidden data-communication-approval-target="filteredEmpty">
                                <td colspan="9">
                                    <iconify-icon icon="solar:magnifer-linear"></iconify-icon>
                                    <strong>Aucun résultat</strong>
                                    <span>Modifiez votre recherche ou vos filtres.</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                {% if center.rows %}
                    <footer class="capproval-pagination">
                        <span data-communication-approval-target="range">Affichage des demandes</span>
                        <div>
                            <button type="button" data-communication-approval-target="previous" data-action="communication-approval#previousPage">Précédent</button>
                            <span data-communication-approval-target="pages"></span>
                            <button type="button" data-communication-approval-target="next" data-action="communication-approval#nextPage">Suivant</button>
                        </div>
                    </footer>
                {% endif %}
            </section>
        </main>

        <aside class="capproval-panel {{ center.rows ? '' : 'is-empty' }}" data-communication-approval-target="panelArea">
            {% for row in center.rows %}
                {% set approval = row.approval %}
                {% set post = row.post %}
                {% set author = row.author %}
                {% set reviewer = row.reviewer %}
                {% set status = approval.status in statusLabels|keys ? approval.status : 'requested' %}
                {% set isInitiallySelected = selectedToken ? post.idtoken == selectedToken : loop.first %}
                {% set previewContent = row.variant ? row.variant.content : (post.masterContent ?: post.brief ?: 'Aucun aperçu de contenu disponible.') %}
                <section class="capproval-detail"
                         data-communication-approval-target="detail"
                         data-panel="{{ approval.idtoken }}"
                         {{ isInitiallySelected ? '' : 'hidden' }}>
                    <div class="capproval-panel-head">
                        <h2>Discussion</h2>
                        <button type="button" aria-label="Fermer le panneau" data-action="communication-approval#closePanel">
                            <iconify-icon icon="solar:close-circle-linear"></iconify-icon>
                        </button>
                    </div>

                    <div class="capproval-preview">
                        <div class="capproval-preview-title">
                            <i class="is-{{ row.platform }}"><iconify-icon icon="{{ platformIcons[row.platform]|default(platformIcons.generic) }}"></iconify-icon></i>
                            <div>
                                <strong>{{ post.internalTitle }}</strong>
                                <span>par {{ author ?: 'Auteur non renseigné' }} · {{ platformLabels[row.platform]|default('Multicanal') }}</span>
                                <small class="capproval-status is-{{ status }}"><i></i>{{ statusLabels[status] }}</small>
                            </div>
                        </div>
                        <p>{{ previewContent|length > 220 ? previewContent|slice(0, 220) ~ '…' : previewContent }}</p>
                        <a href="{{ path('communication_post_show', {idtoken: post.idtoken}) }}">Lire la publication complète</a>
                    </div>

                    {% if status == 'requested' %}
                        <div class="capproval-decisions">
                            <form method="post" action="{{ path('communication_approval_approve', {idtoken: post.idtoken}) }}">
                                <input type="hidden" name="_token" value="{{ csrf_token('communication_approval_approve_' ~ post.idtoken) }}">
                                <button class="is-approve" type="submit"><iconify-icon icon="solar:check-circle-linear"></iconify-icon>Approuver</button>
                            </form>
                            <button class="is-changes" type="button" data-mode="changes" data-action="communication-approval#openDecision">
                                <iconify-icon icon="solar:restart-linear"></iconify-icon>À modifier
                            </button>
                            <button class="is-reject" type="button" data-mode="reject" data-action="communication-approval#openDecision">
                                <iconify-icon icon="solar:close-circle-linear"></iconify-icon>Rejeter
                            </button>
                        </div>
                        <div class="capproval-decision-box" hidden data-communication-approval-target="decision">
                            <form method="post" data-kind="changes" action="{{ path('communication_approval_changes', {idtoken: post.idtoken}) }}">
                                <input type="hidden" name="_token" value="{{ csrf_token('communication_approval_changes_' ~ post.idtoken) }}">
                                <label>Modifications demandées
                                    <textarea name="rejection[reason]" required maxlength="10000" placeholder="Expliquez précisément les modifications attendues…"></textarea>
                                </label>
                                <div><button type="button" data-action="communication-approval#closeDecision">Annuler</button><button type="submit">Envoyer la demande</button></div>
                            </form>
                            <form method="post" data-kind="reject" action="{{ path('communication_approval_reject', {idtoken: post.idtoken}) }}">
                                <input type="hidden" name="_token" value="{{ csrf_token('communication_approval_reject_' ~ post.idtoken) }}">
                                <label>Motif du rejet
                                    <textarea name="rejection[reason]" required maxlength="10000" placeholder="Indiquez le motif du rejet…"></textarea>
                                </label>
                                <div><button type="button" data-action="communication-approval#closeDecision">Annuler</button><button class="is-danger" type="submit">Confirmer le rejet</button></div>
                            </form>
                        </div>
                    {% endif %}

                    <div class="capproval-panel-tabs" role="tablist">
                        <button class="is-active" type="button" data-tab="comments" data-action="communication-approval#panelTab">
                            <iconify-icon icon="solar:chat-round-line-linear"></iconify-icon>Commentaires <span>{{ row.comments|length }}</span>
                        </button>
                        <button type="button" data-tab="history" data-action="communication-approval#panelTab">
                            <iconify-icon icon="solar:history-linear"></iconify-icon>Historique
                        </button>
                        <button type="button" data-tab="details" data-action="communication-approval#panelTab">
                            <iconify-icon icon="solar:document-text-linear"></iconify-icon>Détails
                        </button>
                    </div>

                    <div class="capproval-panel-body">
                        <div class="capproval-tab-content" data-tab-content="comments">
                            <div class="capproval-thread">
                                {% for comment in row.comments %}
                                    {% set mine = app.user and comment.user and app.user.id == comment.user.id %}
                                    <article class="{{ mine ? 'is-mine' : '' }}">
                                        <div class="capproval-avatar">{% if comment.user %}<img src="{{ user_avatar_url(comment.user) }}" alt="">{% else %}<i class="ti ti-settings"></i>{% endif %}</div>
                                        <div>
                                            <header>
                                                <strong>{{ comment.user ?: 'Système' }}</strong>
                                                <time datetime="{{ comment.createdAt|date('c') }}">{{ comment.createdAt|date('d/m à H:i') }}</time>
                                            </header>
                                            <p>{{ comment.message|nl2br }}</p>
                                        </div>
                                    </article>
                                {% else %}
                                    <div class="capproval-no-comments">
                                        <iconify-icon icon="solar:chat-round-dots-linear"></iconify-icon>
                                        <strong>Aucun commentaire</strong>
                                        <span>Démarrez la discussion avec l’auteur.</span>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                        <div class="capproval-tab-content" data-tab-content="history" hidden>
                            <div class="capproval-history">
                                {% for comment in row.comments %}
                                    <article>
                                        <i><iconify-icon icon="solar:history-linear"></iconify-icon></i>
                                        <div>
                                            <strong>{{ eventLabels[comment.eventType]|default('Activité enregistrée') }}</strong>
                                            <span>{{ comment.user ?: 'Système' }} · {{ comment.createdAt|date('d/m/Y à H:i') }}</span>
                                        </div>
                                    </article>
                                {% else %}
                                    <p>Aucune activité commentée pour cette publication.</p>
                                {% endfor %}
                                <article>
                                    <i><iconify-icon icon="solar:inbox-in-linear"></iconify-icon></i>
                                    <div><strong>Demande créée</strong><span>{{ approval.requestedAt|date('d/m/Y à H:i') }}</span></div>
                                </article>
                            </div>
                        </div>
                        <div class="capproval-tab-content" data-tab-content="details" hidden>
                            <dl class="capproval-metadata">
                                <div><dt>Plateforme</dt><dd>{{ platformLabels[row.platform]|default('Multicanal') }}</dd></div>
                                <div><dt>Format</dt><dd>{{ row.variant ? row.variant.name : 'Publication' }}</dd></div>
                                <div><dt>Auteur</dt><dd>{{ author ?: 'Non renseigné' }}</dd></div>
                                <div><dt>Valideur</dt><dd>{{ reviewer ?: 'À attribuer' }}</dd></div>
                                <div><dt>Campagne</dt><dd>{{ row.campaign ? row.campaign.name : 'Sans campagne' }}</dd></div>
                                <div><dt>Version</dt><dd>{{ approval.contentVersion }}</dd></div>
                            </dl>
                        </div>
                    </div>

                    <form class="capproval-comment-form" method="post" action="{{ path('communication_approval_comment', {idtoken: post.idtoken}) }}">
                        <input type="hidden" name="_token" value="{{ csrf_token('communication_approval_comment_' ~ post.idtoken) }}">
                        <div class="capproval-avatar"><img src="{{ user_avatar_url(app.user) }}" alt=""></div>
                        <label>
                            <span class="visually-hidden">Ajouter un commentaire</span>
                            <textarea name="comment" required maxlength="10000" placeholder="Ajouter un commentaire ou un retour…"></textarea>
                            <button type="submit"><iconify-icon icon="solar:plain-2-bold"></iconify-icon>Envoyer</button>
                        </label>
                    </form>
                </section>
            {% else %}
                <div class="capproval-panel-empty">
                    <iconify-icon icon="solar:checklist-minimalistic-linear"></iconify-icon>
                    <strong>Aucune discussion à afficher</strong>
                    <span>Sélectionnez une demande de validation.</span>
                </div>
            {% endfor %}
        </aside>
    </div>

    <div class="capproval-mobile-overlay" hidden data-communication-approval-target="overlay" data-action="click->communication-approval#closePanel"></div>
</div>
{% endblock %}