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

{% block title %}Journal — {{ commercial.user.fullName }} — Admin{% endblock %}

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

    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
        {% include '_molecules/page-header/page-header.html.twig' with {
            title: 'Journal du commercial',
            subtitle: commercial.user.fullName ~ ' — ' ~ pagination.totalItems
                      ~ (pagination.totalItems > 1 ? ' actions enregistrées' : ' action enregistrée'),
            icon: 'clock',
            backHref: path('admin_commercial_show', {id: commercial.id}),
            backLabel: 'Retour à la fiche'
        } only %}

        {# Le filtre est un GET simple, sans JavaScript : la page filtrée a sa propre
           URL, elle se partage et se recharge. #}
        <form method="get" action="{{ path('admin_commercial_journal', {id: commercial.id}) }}"
              data-filtre-journal
              class="flex items-center gap-2 shrink-0 self-start">
            <label for="filtre-action" class="text-[11px] font-semibold uppercase tracking-wider text-gray-400">Action</label>
            <select id="filtre-action" name="action" onchange="this.form.submit()"
                    class="h-10 rounded-xl border border-gray-200 bg-white px-3 text-sm text-gray-700
                           focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/15">
                <option value="">Toutes les actions</option>
                {% for code, label in actions %}
                    <option value="{{ code }}" {{ code == actionCourante ? 'selected' : '' }}>{{ label }}</option>
                {% endfor %}
            </select>
            {% if actionCourante != '' %}
                <a href="{{ path('admin_commercial_journal', {id: commercial.id}) }}"
                   class="inline-flex items-center gap-1.5 text-xs font-medium text-primary hover:text-primary/80 whitespace-nowrap">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'close', size: 'xs' } only %}
                    Tout voir
                </a>
            {% endif %}
        </form>
    </div>

    <section class="bg-white rounded-2xl border border-gray-200 shadow-sm mt-8 mb-8 overflow-hidden"
             data-journal-commercial>
        {% if logs|length > 0 %}
            <div class="divide-y divide-gray-100">
                {% for log in logs %}
                    {% set ctx = log.context ?? {} %}
                    <div class="px-4 sm:px-6 py-3.5" data-journal-ligne>
                        <div class="flex items-start gap-4">
                            <div class="shrink-0 pt-0.5">
                                {% include '_atoms/badge/badge.html.twig' with {
                                    label: activity_label(log.action),
                                    variant: activity_variant(log.action),
                                    size: 'sm'
                                } only %}
                            </div>

                            <div class="flex-1 min-w-0">
                                <span class="text-sm font-medium text-gray-900">{{ log.actorLabel }}</span>
                                {% if log.notes %}
                                    <span class="text-sm text-gray-500"> — {{ log.notes }}</span>
                                {% endif %}

                                {# Le contexte est déjà écrit en français à l'écriture
                                   (CommercialActivityLogger) : rien à traduire ici. #}
                                {% if ctx.modifications is defined or ctx.details is defined %}
                                    <div class="mt-1 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-gray-500">
                                        {% for modif in ctx.modifications ?? [] %}
                                            <span class="inline-flex items-center gap-1.5">
                                                <span class="text-gray-400">{{ modif.champ }}</span>
                                                <span class="line-through text-gray-400">{{ modif.avant }}</span>
                                                <span class="text-gray-300">→</span>
                                                <span class="font-medium text-gray-700">{{ modif.apres }}</span>
                                            </span>
                                        {% endfor %}
                                        {% for libelle, valeur in ctx.details ?? {} %}
                                            <span class="inline-flex items-center gap-1.5">
                                                <span class="text-gray-400">{{ libelle }}</span>
                                                <span class="font-medium text-gray-700">{{ valeur }}</span>
                                            </span>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>

                            <span class="shrink-0 text-xs text-gray-400 whitespace-nowrap tabular-nums">
                                {{ log.createdAt|date('d/m/Y H:i') }}
                            </span>
                        </div>
                    </div>
                {% endfor %}
            </div>

            {% if pagination.total > 1 %}
                <div class="px-4 sm:px-6 py-4 border-t border-gray-100 flex justify-center">
                    {# Le filtre doit survivre au changement de page : sans lui dans
                       l'URL, la page 2 repartirait sur toutes les actions. #}
                    {% include '_molecules/pagination/pagination.html.twig' with {
                        currentPage: pagination.current,
                        totalPages: pagination.total,
                        baseUrl: path('admin_commercial_journal', actionCourante != ''
                            ? {id: commercial.id, action: actionCourante}
                            : {id: commercial.id}),
                        size: 'sm'
                    } only %}
                </div>
            {% endif %}
        {% else %}
            <div class="p-8">
                {% include '_molecules/empty-state/empty-state.html.twig' with {
                    title: actionCourante != '' ? 'Aucune action de ce type' : 'Journal vide',
                    description: actionCourante != ''
                        ? 'Ce commercial n\'a aucune action « ' ~ actions[actionCourante] ~ ' » enregistrée.'
                        : 'Rien n\'a encore été enregistré pour ce commercial.',
                    icon: 'clock',
                    variant: 'minimal'
                } only %}
            </div>
        {% endif %}
    </section>
</div>
{% endblock %}