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

{% block title %}Annonces - Admin{% endblock %}

{% set statusBadges = {
    'published': { label: 'En ligne',    variant: 'success', dot: true  },
    'scheduled': { label: 'Programmée',  variant: 'info',    dot: true  },
    'expired':   { label: 'Expirée',     variant: 'neutral', dot: false },
    'hidden':    { label: 'Masquée',     variant: 'neutral', dot: false }
} %}

{% block body %}
<div class="max-w-[1200px] mx-auto">

    {# Header #}
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6 mb-8">
        {% include '_molecules/page-header/page-header.html.twig' with {
            title: 'Annonces',
            subtitle: 'La modale de nouveauté affichée aux utilisateurs. Une seule annonce est en ligne à la fois.',
            icon: 'bell',
            backHref: path('app_dashboard'),
            backLabel: 'Retour au dashboard'
        } only %}

        {% include '_atoms/button/button.html.twig' with {
            label: 'Nouvelle annonce',
            variant: 'primary',
            size: 'lg',
            icon: 'plus',
            href: path('admin_announcement_new')
        } only %}
    </div>

    {# Compteur #}
    <div class="flex items-center gap-3 mb-6">
        <span class="inline-flex items-center justify-center min-w-[32px] h-8 px-3 bg-primary text-white rounded-full text-sm font-bold">
            {{ announcements|length }}
        </span>
        <span class="text-gray-500">annonce{{ announcements|length > 1 ? 's' : '' }} enregistrée{{ announcements|length > 1 ? 's' : '' }}</span>
    </div>

    {# Tableau #}
    <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
        <table class="w-full">
            <thead class="bg-gray-50 border-b border-gray-200">
                <tr>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Annonce</th>
                    <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Fenêtre</th>
                    <th class="px-5 py-3 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider">Statut</th>
                    <th class="px-5 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Lectures</th>
                    <th class="px-5 py-3 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                {% for announcement in announcements %}
                    {% set status = announcement.status %}
                    {% set seen = viewCounts[announcement.id] ?? 0 %}
                    <tr class="hover:bg-gray-50 transition-colors">

                        {# Annonce #}
                        <td class="px-5 py-4">
                            <div class="flex items-center gap-3">
                                {% if announcement.imagePath %}
                                    <img src="{{ announcement.imagePath }}" alt=""
                                         class="w-12 h-12 rounded-lg object-cover border border-gray-100 flex-shrink-0">
                                {% else %}
                                    <div class="w-12 h-12 rounded-lg bg-gray-50 border border-gray-100 flex items-center justify-center flex-shrink-0">
                                        {% include '_atoms/icon/icon.html.twig' with { name: 'palette-2', size: 'sm', color: 'gray' } only %}
                                    </div>
                                {% endif %}
                                <div class="min-w-0">
                                    <div class="flex items-center gap-2">
                                        {% if announcement.badge %}
                                            {% include '_atoms/badge/badge.html.twig' with {
                                                label: announcement.badge, variant: 'primary', size: 'xs'
                                            } only %}
                                        {% endif %}
                                        <p class="font-semibold text-gray-900 truncate">{{ announcement.title }}</p>
                                    </div>
                                    <p class="text-xs text-gray-400 mt-0.5 max-w-md truncate">{{ announcement.body }}</p>
                                </div>
                            </div>
                        </td>

                        {# Fenêtre #}
                        <td class="px-5 py-4 whitespace-nowrap">
                            <p class="text-sm text-gray-700">{{ announcement.startsAt|date('d/m/Y') }}</p>
                            <p class="text-xs text-gray-400">au {{ announcement.endsAt|date('d/m/Y') }}</p>
                        </td>

                        {# Statut #}
                        <td class="px-5 py-4 text-center">
                            {% include '_atoms/badge/badge.html.twig' with {
                                label: statusBadges[status].label,
                                variant: statusBadges[status].variant,
                                dot: statusBadges[status].dot,
                                size: 'sm'
                            } only %}
                        </td>

                        {# Lectures #}
                        <td class="px-5 py-4 text-right whitespace-nowrap">
                            {% if seen > 0 %}
                                <span class="font-mono text-sm text-gray-700">{{ seen }}</span>
                                <span class="text-xs text-gray-400">/ {{ userCount }}</span>
                                <p class="text-xs text-gray-400">{{ userCount > 0 ? (seen / userCount * 100)|round : 0 }} %</p>
                            {% else %}
                                <span class="text-gray-300">—</span>
                            {% endif %}
                        </td>

                        {# Actions #}
                        <td class="px-5 py-4">
                            <div class="flex items-center justify-center gap-2">

                                {# Publier / masquer #}
                                <form method="POST" action="{{ path('admin_announcement_toggle', {id: announcement.id}) }}"
                                      data-turbo="false">
                                    <input type="hidden" name="_token" value="{{ csrf_token('toggle-announcement-' ~ announcement.id) }}">
                                    {% include '_atoms/button/button.html.twig' with {
                                        label: announcement.published ? 'Masquer' : 'Publier',
                                        variant: announcement.published ? 'ghost' : 'primary',
                                        size: 'sm',
                                        icon: announcement.published ? 'close' : 'eye',
                                        type: 'submit'
                                    } only %}
                                </form>

                                {% include '_atoms/button/button.html.twig' with {
                                    variant: 'ghost',
                                    size: 'sm',
                                    icon: 'edit',
                                    href: path('admin_announcement_edit', {id: announcement.id}),
                                    attr: { title: 'Modifier' }
                                } only %}

                                {# |e('js') et non l'échappement HTML implicite : le titre atterrit dans
                                   du JavaScript porté par un attribut, et le navigateur décode les
                                   entités HTML *avant* de livrer le code au moteur JS — un &#039; y
                                   redeviendrait une apostrophe fermante. #}
                                <form method="POST" action="{{ path('admin_announcement_delete', {id: announcement.id}) }}"
                                      onsubmit="return confirm('Supprimer l\'annonce « {{ announcement.title|e('js') }} » ? Les lectures enregistrées seront perdues.')"
                                      data-turbo="false">
                                    <input type="hidden" name="_token" value="{{ csrf_token('delete-announcement-' ~ announcement.id) }}">
                                    {% include '_atoms/button/button.html.twig' with {
                                        variant: 'ghost',
                                        size: 'sm',
                                        icon: 'trash',
                                        type: 'submit',
                                        attr: { title: 'Supprimer', class: 'text-error hover:text-error' }
                                    } only %}
                                </form>
                            </div>
                        </td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="5" class="px-4 py-12 text-center">
                            {% include '_molecules/empty-state/empty-state.html.twig' with {
                                title: 'Aucune annonce',
                                description: 'Créez une annonce pour présenter une nouveauté aux utilisateurs à leur prochaine connexion.',
                                icon: 'bell',
                                variant: 'minimal',
                                actions: [{
                                    label: 'Créer une annonce',
                                    href: path('admin_announcement_new'),
                                    variant: 'primary',
                                    icon: 'plus'
                                }]
                            } only %}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
        </div>
    </div>

</div>
{% endblock %}