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

{% block communication_title %}Comptes de réseaux sociaux{% endblock %}
{% block communication_header %}{% endblock %}

{% block communication_content %}
{% set platforms = {
    linkedin: {label:'LinkedIn', icon:'mdi:linkedin', class:'linkedin'},
    instagram: {label:'Instagram', icon:'mdi:instagram', class:'instagram'},
    facebook: {label:'Facebook', icon:'mdi:facebook', class:'facebook'},
    twitter: {label:'X (Twitter)', icon:'ri:twitter-x-fill', class:'twitter'},
    threads: {label:'Threads', icon:'simple-icons:threads', class:'threads'},
    tiktok: {label:'TikTok', icon:'ic:baseline-tiktok', class:'tiktok'},
    youtube: {label:'YouTube', icon:'mdi:youtube', class:'youtube'},
    pinterest: {label:'Pinterest', icon:'mdi:pinterest', class:'pinterest'},
    generic: {label:'Autre réseau', icon:'solar:global-broken', class:'generic'}
} %}

<div data-controller="communication-social-account">
    <header class="csocial-topbar capsule-heading">
        <div class="capsule-heading-main">
            <div class="capsule-heading-content">
                <h1 class="capsule-heading-title">Comptes de réseaux sociaux</h1>
                <p class="capsule-heading-subtitle">Centralisez les comptes utilisés pour vos publications.</p>
            </div>
        </div>
        <div class="csocial-topbar-actions">
            <label class="csocial-search">
                <iconify-icon icon="solar:magnifer-linear"></iconify-icon>
                <span class="visually-hidden">Rechercher un compte</span>
                <input type="search" placeholder="Rechercher…" autocomplete="off"
                       data-communication-social-account-target="search"
                       data-action="input->communication-social-account#filter">
            </label>
            <a class="capsule-button capsule-button--primary" href="{{ path('communication_social_account_new') }}">
                <iconify-icon icon="solar:add-circle-linear"></iconify-icon>
                Ajouter un compte
            </a>
        </div>
    </header>

    <main class="csocial-body">
        <section class="csocial-stats data-kpis" aria-label="Résumé des comptes">
            <article class="data-kpi data-kpi--green">
                <i class="is-green data-kpi__icon"><iconify-icon icon="solar:link-circle-bold-duotone"></iconify-icon></i>
                <div><span>Comptes référencés</span><strong>{{ stats.total }}</strong></div>
            </article>
            <article class="data-kpi data-kpi--indigo">
                <i class="is-blue data-kpi__icon"><iconify-icon icon="solar:global-bold-duotone"></iconify-icon></i>
                <div><span>Réseaux représentés</span><strong>{{ stats.platforms }}</strong></div>
            </article>
            <article class="data-kpi data-kpi--violet">
                <i class="is-purple data-kpi__icon"><iconify-icon icon="solar:calendar-add-bold-duotone"></iconify-icon></i>
                <div><span>Ajouts ce mois-ci</span><strong>{{ stats.addedThisMonth }}</strong></div>
            </article>
            <article class="data-kpi data-kpi--gray">
                <i class="is-slate data-kpi__icon"><iconify-icon icon="solar:shield-check-bold-duotone"></iconify-icon></i>
                <div><span>Gestion manuelle</span><strong>100 %</strong></div>
            </article>
        </section>

        <div class="csocial-results">
            <span><strong data-communication-social-account-target="count">{{ items|length }}</strong> compte{{ items|length != 1 ? 's' }}</span>
            {% if items %}<small>Triés du plus récent au plus ancien</small>{% endif %}
        </div>

        <section class="csocial-grid" aria-label="Liste des comptes de réseaux sociaux">
            {% for item in items %}
                {% set platform = platforms[item.platform]|default(platforms.generic) %}
                {% set accountUrl = item.externalAccountUrn|default('') %}
                {% set safeUrl = accountUrl starts with 'https://' or accountUrl starts with 'http://' ? accountUrl : null %}
                <article class="csocial-card"
                         data-communication-social-account-target="card"
                         data-search="{{ (item.displayName ~ ' ' ~ platform.label ~ ' ' ~ accountUrl)|lower|e('html_attr') }}">
                    <header>
                        <i class="csocial-platform is-{{ platform.class }}">
                            <iconify-icon icon="{{ platform.icon }}"></iconify-icon>
                        </i>
                        <div>
                            <span class="csocial-card-title">
                                <h2>{{ item.displayName }}</h2>
                                <em><b></b>Référencé</em>
                            </span>
                            <p>{{ platform.label }}</p>
                        </div>
                        {% if safeUrl %}
                            <a class="csocial-icon-button" href="{{ safeUrl }}" target="_blank" rel="noopener noreferrer" title="Ouvrir le compte">
                                <iconify-icon icon="solar:square-arrow-right-up-linear"></iconify-icon>
                            </a>
                        {% endif %}
                    </header>

                    <div class="csocial-card-body">
                        <span class="csocial-label">Adresse du compte</span>
                        {% if safeUrl %}
                            <a class="csocial-url" href="{{ safeUrl }}" target="_blank" rel="noopener noreferrer">
                                <iconify-icon icon="solar:link-linear"></iconify-icon>
                                <span>{{ safeUrl }}</span>
                            </a>
                        {% else %}
                            <span class="csocial-url">
                                <iconify-icon icon="solar:link-broken-minimalistic-linear"></iconify-icon>
                                <span>Adresse publique non renseignée</span>
                            </span>
                        {% endif %}

                        <div class="csocial-meta">
                            <span>
                                <iconify-icon icon="solar:calendar-linear"></iconify-icon>
                                Ajouté le {{ item.createdAt|date('d/m/Y') }}
                            </span>
                            {% if item.connectedBy %}
                                <span>
                                    <iconify-icon icon="solar:user-linear"></iconify-icon>
                                    Par {{ item.connectedBy }}
                                </span>
                            {% endif %}
                        </div>
                    </div>

                    <footer>
                        {% if safeUrl %}
                            <a href="{{ safeUrl }}" target="_blank" rel="noopener noreferrer">
                                <iconify-icon icon="solar:eye-linear"></iconify-icon>Voir le profil
                            </a>
                        {% else %}<span></span>{% endif %}
                        <form method="post" action="{{ path('communication_social_account_remove', {idtoken:item.idtoken}) }}"
                              data-action="submit->communication-social-account#confirmRemove">
                            <input type="hidden" name="_token" value="{{ csrf_token('communication_social_account_remove_' ~ item.idtoken) }}">
                            <button type="submit"><iconify-icon icon="solar:trash-bin-trash-linear"></iconify-icon>Retirer</button>
                        </form>
                    </footer>
                </article>
            {% endfor %}
        </section>

        <div class="csocial-empty" data-communication-social-account-target="empty" {% if items %}hidden{% endif %}>
            <i><iconify-icon icon="solar:link-circle-broken"></iconify-icon></i>
            <strong>{% if items %}Aucun compte ne correspond à votre recherche{% else %}Aucun compte référencé{% endif %}</strong>
            <p>{% if items %}Essayez avec un autre nom, réseau ou URL.{% else %}Ajoutez le premier compte de réseau social utilisé par votre équipe.{% endif %}</p>
            {% if not items %}
                <a class="csocial-primary-button" href="{{ path('communication_social_account_new') }}">
                    <iconify-icon icon="solar:add-circle-linear"></iconify-icon>Ajouter un compte
                </a>
            {% endif %}
        </div>

        <aside class="csocial-info-banner">
            <i><iconify-icon icon="solar:shield-check-bold-duotone"></iconify-icon></i>
            <div>
                <strong>Vos accès restent sous votre contrôle</strong>
                <p>Capsule enregistre uniquement le nom et l’adresse publique du compte. Aucun mot de passe ni jeton d’accès n’est demandé.</p>
            </div>
            <span><iconify-icon icon="solar:lock-keyhole-minimalistic-linear"></iconify-icon>Aucun identifiant stocké</span>
        </aside>
    </main>
</div>
{% endblock %}