{% extends 'account/base_account.html.twig' %}

{% block title %}Mon Actu — {{ beneficiaire.prenom }} {{ beneficiaire.nom }}{% endblock %}

{% block content %}
<div class="page-header">
    <div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;">
        <div>
            <h1 class="page-title">📣 Mon Actu</h1>
            <p class="page-subtitle">{{ beneficiaire.prenom }} {{ beneficiaire.nom }} · {{ beneficiaire.commande.packType|upper }}</p>
        </div>
        <a href="{{ path('app_actu_new', {beneficiaireId: beneficiaire.id}) }}" class="btn-primary">
            + Nouveau post
        </a>
    </div>
</div>

{# ── STATS ── #}
<div style="display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px;">
    <div class="card" style="padding:18px 20px;">
        <div style="font-size:28px; font-weight:700; color:#1d1d1f;">{{ actus|filter(a => a.statut == 'publie')|length }}</div>
        <div style="font-size:11px; font-family:monospace; text-transform:uppercase; letter-spacing:.12em; color:#86868b; margin-top:4px;">Posts publiés</div>
    </div>
    <div class="card" style="padding:18px 20px;">
        <div style="font-size:28px; font-weight:700; color:#1d1d1f;">{{ stats.vues }}</div>
        <div style="font-size:11px; font-family:monospace; text-transform:uppercase; letter-spacing:.12em; color:#86868b; margin-top:4px;">Vues totales</div>
    </div>
    <div class="card" style="padding:18px 20px;">
        <div style="font-size:28px; font-weight:700; color:#1d1d1f;">{{ stats.clics }}</div>
        <div style="font-size:11px; font-family:monospace; text-transform:uppercase; letter-spacing:.12em; color:#86868b; margin-top:4px;">Clics CTA</div>
    </div>
    <div class="card" style="padding:18px 20px;">
        <div style="font-size:28px; font-weight:700; color:#1d1d1f;">{{ brouillons }}</div>
        <div style="font-size:11px; font-family:monospace; text-transform:uppercase; letter-spacing:.12em; color:#86868b; margin-top:4px;">Brouillons</div>
    </div>
</div>

{# ── LISTE ── #}
<div class="card">
    {% if actus is empty %}
        <div style="text-align:center; padding:60px 20px;">
            <div style="font-size:48px; margin-bottom:16px;">📣</div>
            <h2 style="font-size:20px; color:#1d1d1f; margin-bottom:8px;">Aucun post encore</h2>
            <p style="color:#86868b; font-size:14px; margin-bottom:20px;">Publiez votre première actualité sur votre carte numérique.</p>
            <a href="{{ path('app_actu_new', {beneficiaireId: beneficiaire.id}) }}" class="btn-primary">Créer mon premier post →</a>
        </div>
    {% else %}
        <div class="table-container">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Post</th>
                        <th>Catégorie</th>
                        <th>Stats</th>
                        <th>Statut</th>
                        <th>Date</th>
                        <th class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                {% for actu in actus %}
                    <tr>
                        {# Post #}
                        <td style="max-width:280px;">
                            <div style="display:flex; align-items:center; gap:12px;">
                                {% if actu.imageFilename %}
                                    <img src="{{ actu.imageUrl }}" alt="" style="width:44px;height:44px;border-radius:8px;object-fit:cover;flex-shrink:0;">
                                {% else %}
                                    <div style="width:44px;height:44px;border-radius:8px;background:#f5f5f7;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;">📝</div>
                                {% endif %}
                                <div style="min-width:0;">
                                    <div style="font-weight:600;font-size:14px;color:#1d1d1f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                                        {% if actu.epingle %}📌 {% endif %}{{ actu.titre }}
                                    </div>
                                    <div style="font-size:12px;color:#86868b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                                        {{ actu.contenu|slice(0,60) }}{% if actu.contenu|length > 60 %}…{% endif %}
                                    </div>
                                </div>
                            </div>
                        </td>

                        {# Catégorie #}
                        <td>
                            <span style="font-size:12px; color:#3a3a3c;">{{ actu.categorieLabel }}</span>
                        </td>

                        {# Stats #}
                        <td>
                            <div style="font-family:monospace;font-size:12px;color:#86868b;">
                                {% if actu.isPublie() %}
                                    👁 {{ actu.vues }} · 🖱 {{ actu.clics }}
                                {% else %}
                                    <span style="color:#c7c7cc;">—</span>
                                {% endif %}
                            </div>
                        </td>

                        {# Statut #}
                        <td>
                            {% if actu.isPublie() %}
                                <span style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:#d3f9d8;color:#2b8a3e;border-radius:6px;font-size:12px;font-weight:600;">✅ Publié</span>
                            {% else %}
                                <span style="display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:#f0f0f5;color:#86868b;border-radius:6px;font-size:12px;font-weight:600;">📝 Brouillon</span>
                            {% endif %}
                        </td>

                        {# Date #}
                        <td style="white-space:nowrap;font-size:13px;color:#86868b;">
                            {{ actu.isPublie() ? actu.publishedAt|date('d/m/Y') : actu.createdAt|date('d/m/Y') }}
                        </td>

                        {# Actions #}
                        <td class="text-center">
                            <div style="display:flex;gap:6px;justify-content:center;">
                                {# Publier un brouillon #}
                                {% if not actu.isPublie() %}
                                    <form method="post" action="{{ path('app_actu_publish', {id: actu.id}) }}" style="display:inline;">
                                        <button type="submit" style="display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:8px;background:#34c759;color:white;cursor:pointer;font-size:14px;" title="Publier">▶️</button>
                                    </form>
                                {% else %}
                                    <form method="post" action="{{ path('app_actu_unpublish', {id: actu.id}) }}" style="display:inline;">
                                        <button type="submit" style="display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:8px;background:#ff9500;color:white;cursor:pointer;font-size:14px;" title="Dépublier">⏸</button>
                                    </form>
                                {% endif %}

                                {# Éditer #}
                                <a href="{{ path('app_actu_edit', {id: actu.id}) }}" style="display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:#007aff;color:white;text-decoration:none;font-size:14px;" title="Éditer">✏️</a>

                                {# Supprimer #}
                                <form method="post" action="{{ path('app_actu_delete', {id: actu.id}) }}" style="display:inline;" onsubmit="return confirm('Supprimer ce post définitivement ?');">
                                    <button type="submit" style="display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:8px;background:#ff3b30;color:white;cursor:pointer;font-size:14px;" title="Supprimer">🗑️</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        <div style="padding:12px 16px;color:#86868b;font-size:13px;border-top:1px solid #f0f0f5;">
            <strong>{{ actus|length }}</strong> post{{ actus|length > 1 ? 's' : '' }} au total
        </div>
    {% endif %}
</div>
{% endblock %}