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

{% block communication_title %}Campagnes · Communication{% endblock %}
{% block communication_header %}{% endblock %}

{% block communication_content %}
{% set statusLabels = {
    draft: 'Brouillon',
    active: 'Active',
    planned: 'Planifiée',
    completed: 'Terminée',
    archived: 'Archivée'
} %}
{% set objectiveLabels = {
    awareness: 'Notoriété',
    engagement: 'Engagement',
    traffic: 'Génération de trafic',
    lead_generation: 'Génération de prospects',
    conversion: 'Conversion',
    recruitment: 'Recrutement',
    employer_branding: 'Marque employeur',
    event: 'Événement',
    customer_success: 'Fidélisation client',
    education: 'Pédagogie',
    product_launch: 'Lancement de produit',
    community: 'Développement de communauté',
    other: 'Autre objectif'
} %}
{% 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'} %}

<div 
     data-controller="communication-campaign-index"
     data-communication-campaign-index-chart-value="{{ index.chart|json_encode|e('html_attr') }}">
    <header class="ccampaign-header capsule-heading">
        <div class="capsule-heading-main">
            <div class="capsule-heading-content">
                <h1 class="capsule-heading-title">Campagnes</h1>
                <p class="capsule-heading-subtitle">{{ 'now'|date('d/m/Y') }} — Pilotez toutes vos campagnes de communication.</p>
            </div>
        </div>
        <div class="ccampaign-header-actions">
            <label class="ccampaign-search">
                <iconify-icon icon="solar:magnifer-linear"></iconify-icon>
                <input type="search"
                       placeholder="Rechercher une campagne…"
                       aria-label="Rechercher une campagne"
                       data-communication-campaign-index-target="search"
                       data-action="input->communication-campaign-index#filter">
            </label>
            <div class="ccampaign-view-switch" aria-label="Mode d’affichage">
                <button class="is-active" type="button" data-view="grid" data-action="communication-campaign-index#changeView" aria-label="Affichage en grille">
                    <iconify-icon icon="solar:widget-4-linear"></iconify-icon>
                </button>
                <button type="button" data-view="list" data-action="communication-campaign-index#changeView" aria-label="Affichage en liste">
                    <iconify-icon icon="solar:list-linear"></iconify-icon>
                </button>
            </div>
            {% if is_granted('COMMUNICATION_CREATE') %}
                <a class="capsule-button capsule-button--primary" href="{{ path('communication_campaign_new') }}">
                    <iconify-icon icon="solar:add-circle-linear"></iconify-icon>Nouvelle campagne
                </a>
            {% endif %}
        </div>
    </header>

    <main class="ccampaign-content">
        <section class="ccampaign-kpis data-kpis-6" aria-label="Indicateurs des campagnes">
            <article class="is-purple data-kpi data-kpi--violet">
                <div><span>Total</span><strong>{{ index.counts.all }}</strong><small>Toutes les campagnes</small></div>
                <i class="data-kpi__icon"><iconify-icon icon="solar:flag-2-bold-duotone"></iconify-icon></i>
            </article>
            <article class="is-green data-kpi data-kpi--green">
                <div><span>Actives</span><strong>{{ index.counts.active }}</strong><small>En cours actuellement</small></div>
                <i class="data-kpi__icon"><iconify-icon icon="solar:play-circle-bold-duotone"></iconify-icon></i>
            </article>
            <article class="is-amber data-kpi data-kpi--orange">
                <div><span>Planifiées</span><strong>{{ index.counts.planned }}</strong><small>À venir prochainement</small></div>
                <i class="data-kpi__icon"><iconify-icon icon="solar:clock-circle-bold-duotone"></iconify-icon></i>
            </article>
            <article class="is-blue data-kpi data-kpi--indigo">
                <div><span>Publications</span><strong>{{ index.totals.posts }}</strong><small>{{ index.totals.publications }} diffusion{{ index.totals.publications > 1 ? 's' }}</small></div>
                <i class="data-kpi__icon"><iconify-icon icon="solar:plain-2-bold-duotone"></iconify-icon></i>
            </article>
            <article class="is-lilac data-kpi data-kpi--violet">
                <div>
                    <span>Portée totale</span>
                    <strong>{{ index.totals.reach ? index.totals.reach|number_format(0, ',', ' ') : '—' }}</strong>
                    <small>{{ index.totals.reach ? 'Données consolidées' : 'Non disponible' }}</small>
                </div>
                <i class="data-kpi__icon"><iconify-icon icon="solar:eye-bold-duotone"></iconify-icon></i>
            </article>
            <article class="is-pink data-kpi data-kpi--red">
                <div>
                    <span>Engagement moyen</span>
                    <strong>{{ index.totals.engagement is not null ? index.totals.engagement|number_format(1, ',', ' ') ~ '%' : '—' }}</strong>
                    <small>{{ index.totals.engagement is not null ? 'Toutes plateformes' : 'Non disponible' }}</small>
                </div>
                <i class="data-kpi__icon"><iconify-icon icon="solar:heart-bold-duotone"></iconify-icon></i>
            </article>
        </section>

        <section class="ccampaign-toolbar">
            <div class="ccampaign-tabs" role="tablist" aria-label="Filtrer les campagnes par statut">
                <button class="is-active" type="button" data-status="" data-action="communication-campaign-index#statusFilter">Toutes <span>{{ index.counts.all }}</span></button>
                <button type="button" data-status="active" data-action="communication-campaign-index#statusFilter">Actives <span>{{ index.counts.active }}</span></button>
                <button type="button" data-status="planned" data-action="communication-campaign-index#statusFilter">Planifiées <span>{{ index.counts.planned }}</span></button>
                <button type="button" data-status="completed" data-action="communication-campaign-index#statusFilter">Terminées <span>{{ index.counts.completed }}</span></button>
                <button type="button" data-status="archived" data-action="communication-campaign-index#statusFilter">Archivées <span>{{ index.counts.archived }}</span></button>
                {% if index.counts.draft %}
                    <button type="button" data-status="draft" data-action="communication-campaign-index#statusFilter">Brouillons <span>{{ index.counts.draft }}</span></button>
                {% endif %}
            </div>
            <label class="ccampaign-sort">
                <span>Trier par :</span>
                <select data-communication-campaign-index-target="sort" data-action="change->communication-campaign-index#sort">
                    <option value="newest">Plus récentes</option>
                    <option value="oldest">Plus anciennes</option>
                    <option value="name">Nom</option>
                    <option value="progress">Avancement</option>
                </select>
            </label>
        </section>

        <section class="ccampaign-grid" data-communication-campaign-index-target="grid">
            {% for row in index.rows %}
                {% set campaign = row.campaign %}
                {% set status = row.status %}
                <article class="ccampaign-card is-{{ status }}"
                         style="--campaign-card-accent: {{ campaign.color|default('#6253ec') }}"
                         data-communication-campaign-index-target="card"
                         data-status="{{ status }}"
                         data-search="{{ campaign.name }} {{ campaign.description }} {{ objectiveLabels[campaign.objective]|default(campaign.objective) }}"
                         data-name="{{ campaign.name }}"
                         data-date="{{ campaign.updatedAt|date('U') }}"
                         data-progress="{{ row.progress }}">
                    <div class="ccampaign-accent"></div>
                    <header>
                        <div>
                            <span class="ccampaign-status is-{{ status }}">
                                <iconify-icon icon="{{ status == 'active' ? 'solar:play-circle-bold' : (status == 'planned' ? 'solar:clock-circle-bold' : (status == 'completed' ? 'solar:check-circle-bold' : (status == 'archived' ? 'solar:archive-bold' : 'solar:pen-bold'))) }}"></iconify-icon>
                                {{ statusLabels[status] }}
                            </span>
                            <h2>{{ campaign.name }}</h2>
                            <p>{{ objectiveLabels[campaign.objective]|default('Autre objectif') }}{% if campaign.targetAudience %} · {{ campaign.targetAudience|slice(0, 55) }}{% endif %}</p>
                        </div>
                        <a class="ccampaign-more" href="{{ path('communication_campaign_edit', {idtoken:campaign.idtoken}) }}" aria-label="Modifier {{ campaign.name }}">
                            <iconify-icon icon="solar:menu-dots-bold"></iconify-icon>
                        </a>
                    </header>

                    <div class="ccampaign-dates">
                        <span>
                            <iconify-icon icon="solar:calendar-linear"></iconify-icon>
                            {% if campaign.startDate or campaign.endDate %}
                                {{ campaign.startDate ? campaign.startDate|date('d/m/Y') : 'Date libre' }}
                                —
                                {{ campaign.endDate ? campaign.endDate|date('d/m/Y') : 'Sans fin' }}
                            {% else %}
                                Dates à définir
                            {% endif %}
                        </span>
                        <div>
                            {% for platform in row.platforms|slice(0, 4) %}
                                <i class="is-{{ platform }}" title="{{ platformLabels[platform]|default('Multicanal') }}"><iconify-icon icon="{{ platformIcons[platform]|default(platformIcons.generic) }}"></iconify-icon></i>
                            {% else %}
                                <i class="is-generic" title="Multicanal"><iconify-icon icon="{{ platformIcons.generic }}"></iconify-icon></i>
                            {% endfor %}
                        </div>
                    </div>

                    <div class="ccampaign-progress">
                        <div><span>Avancement</span><strong>{{ row.published }} / {{ row.posts }} publication{{ row.posts > 1 ? 's' }}</strong></div>
                        <div class="ccampaign-progress-track"><i style="width: {{ row.progress }}%"></i></div>
                        <small>
                            {% if status == 'completed' %}
                                Campagne terminée
                            {% elseif status == 'archived' %}
                                Archivée{% if campaign.archivedAt %} le {{ campaign.archivedAt|date('d/m/Y') }}{% endif %}
                            {% elseif row.posts %}
                                {{ row.progress }} % terminé · {{ row.posts - row.published }} restante{{ row.posts - row.published > 1 ? 's' }}
                            {% else %}
                                Aucune publication rattachée
                            {% endif %}
                        </small>
                    </div>

                    <dl class="ccampaign-card-kpis">
                        <div><dt>Diffusions</dt><dd>{{ row.publications }}</dd></div>
                        <div><dt>Idées</dt><dd>{{ row.ideas }}</dd></div>
                        <div><dt>{{ row.reach ? 'Portée' : 'Publications' }}</dt><dd>{{ row.reach ? row.reach|number_format(0, ',', ' ') : row.posts }}</dd></div>
                    </dl>

                    <div class="ccampaign-performance">
                        <span><iconify-icon icon="solar:eye-linear"></iconify-icon>{{ row.views ? row.views|number_format(0, ',', ' ') ~ ' vues' : 'Vues indisponibles' }}</span>
                        <span><iconify-icon icon="solar:heart-linear"></iconify-icon>{{ row.engagement is not null ? row.engagement|number_format(1, ',', ' ') ~ ' %' : '—' }}</span>
                        <span><iconify-icon icon="solar:share-linear"></iconify-icon>{{ row.shares ? row.shares|number_format(0, ',', ' ') ~ ' partages' : '—' }}</span>
                    </div>

                    <footer>
                        <a class="ccampaign-open" href="{{ path('communication_campaign_edit', {idtoken:campaign.idtoken}) }}">
                            <iconify-icon icon="solar:pen-new-square-linear"></iconify-icon>Ouvrir
                        </a>
                        {% if is_granted('COMMUNICATION_CREATE') %}
                            <form method="post" action="{{ path('communication_campaign_duplicate', {idtoken:campaign.idtoken}) }}">
                                <input type="hidden" name="_token" value="{{ csrf_token('communication_campaign_duplicate_' ~ campaign.idtoken) }}">
                                <button class="ccampaign-duplicate" type="submit"><iconify-icon icon="solar:copy-linear"></iconify-icon>Dupliquer</button>
                            </form>
                        {% endif %}
                        {% if status != 'archived' and is_granted('COMMUNICATION_ARCHIVE', campaign) %}
                            <form method="post" action="{{ path('communication_archive', {type:'campaign',idtoken:campaign.idtoken}) }}" data-action="submit->communication-campaign-index#confirmArchive">
                                <input type="hidden" name="_token" value="{{ csrf_token('communication_archive_' ~ campaign.idtoken) }}">
                                <button class="ccampaign-archive" type="submit" aria-label="Archiver {{ campaign.name }}"><iconify-icon icon="solar:archive-linear"></iconify-icon></button>
                            </form>
                        {% endif %}
                    </footer>
                </article>
            {% endfor %}

            {% if is_granted('COMMUNICATION_CREATE') %}
                <a class="ccampaign-new-card" href="{{ path('communication_campaign_new') }}" data-communication-campaign-index-target="newCard">
                    <i><iconify-icon icon="solar:add-circle-linear"></iconify-icon></i>
                    <strong>Nouvelle campagne</strong>
                    <span>Créez une campagne avec ses objectifs, ses dates et ses publications.</span>
                    <b><iconify-icon icon="solar:add-circle-linear"></iconify-icon>Créer une campagne</b>
                </a>
            {% endif %}

            <div class="ccampaign-empty" hidden data-communication-campaign-index-target="empty">
                <iconify-icon icon="solar:flag-2-linear"></iconify-icon>
                <strong>Aucune campagne trouvée</strong>
                <span>Modifiez votre recherche ou sélectionnez un autre statut.</span>
            </div>
        </section>

        <section class="ccampaign-chart-panel">
            <header>
                <div><h2>Vue d’ensemble des performances</h2><p>Comparaison des résultats entre les campagnes</p></div>
                <div class="ccampaign-chart-tabs">
                    <button class="is-active" type="button" data-series="reach" data-action="communication-campaign-index#changeSeries">Portée</button>
                    <button type="button" data-series="engagement" data-action="communication-campaign-index#changeSeries">Engagement</button>
                    <button type="button" data-series="publications" data-action="communication-campaign-index#changeSeries">Publications</button>
                </div>
            </header>
            <div class="ccampaign-chart-wrap">
                <canvas data-communication-campaign-index-target="chart" aria-label="Graphique des performances des campagnes"></canvas>
                <div class="ccampaign-chart-empty" hidden data-communication-campaign-index-target="chartEmpty">
                    <iconify-icon icon="solar:chart-2-linear"></iconify-icon>
                    <strong>Aucune donnée de performance</strong>
                    <span>Le graphique apparaîtra après les premières publications.</span>
                </div>
            </div>
        </section>
    </main>
</div>
{% endblock %}