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

{% block title %}Mes transactions — Bubul{% endblock %}

{#
    Le sous-tableau des lignes d'un mois.

    Six colonnes, pas huit. Le CA brut et les frais Stripe sortent : c'est la
    BASE COMMISSIONNÉE — le net après frais Stripe — qui est réellement
    multipliée par le taux, et elle suffit à rendre le calcul vérifiable. Le
    détail complet reste dans l'export CSV.

    Le même tableau sert aux lignes réglées et aux lignes tardives : c'est la
    même information, seul son sort diffère.
#}
{% macro lignes(lines, plansBySlug, tardives = false) %}
    <div class="overflow-x-auto overflow-y-hidden">
        <table class="w-full min-w-[640px]">
            <thead class="bg-gray-50/80 border-y border-gray-100">
                <tr>
                    <th class="px-4 sm:px-6 py-2.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Date</th>
                    <th class="px-4 sm:px-6 py-2.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Filleul</th>
                    <th class="px-4 sm:px-6 py-2.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Offre</th>
                    {# Les opérateurs vivent dans l'en-tête, pas dans les cellules : une
                       contre-passation porte des montants négatifs, et « × -1,03 € » ne se
                       lit pas. Lue en travers, la ligne d'en-tête EST le calcul. #}
                    <th class="px-4 sm:px-6 py-2.5 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Base commissionnée</th>
                    <th class="px-4 sm:px-6 py-2.5 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">× Taux</th>
                    <th class="px-4 sm:px-6 py-2.5 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">= Commission</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
            {% for line in lines %}
                <tr class="hover:bg-gray-50/60 transition-colors duration-150 {{ tardives ? 'bg-warning/5' : '' }}" data-transaction-ligne>
                    <td class="px-4 sm:px-6 py-3 text-sm text-gray-700 tabular-nums whitespace-nowrap">{{ line.paidAt|date('d/m/Y') }}</td>
                    <td class="px-4 sm:px-6 py-3">
                        <span class="text-sm font-medium text-gray-900 truncate block">{{ line.user ? line.user.fullName : '—' }}</span>
                        <span class="text-xs text-gray-500 truncate block">{{ line.user ? line.user.email : '' }}</span>
                    </td>
                    <td class="px-4 sm:px-6 py-3">
                        {% set p = plansBySlug[line.planSlug] ?? null %}
                        {% include '_atoms/plan-badge/plan-badge.html.twig' with {
                            name: p ? p.name : line.planSlug,
                            gradient: p ? p.gradientCss : null,
                            isFree: p ? p.isFree() : (line.planSlug is null),
                            isAnnual: line.billingCycle == 'annual'
                        } only %}
                    </td>
                    <td class="px-4 sm:px-6 py-3 text-right text-sm font-medium text-gray-900 tabular-nums whitespace-nowrap">{{ line.amountNetAfterStripe|number_format(2, ',', ' ') }} €</td>
                    <td class="px-4 sm:px-6 py-3 text-right text-sm text-gray-700 tabular-nums whitespace-nowrap">{{ (line.appliedRate * 100)|number_format(2, ',', ' ') }} %</td>
                    <td class="px-4 sm:px-6 py-3 text-right whitespace-nowrap">
                        <span class="text-sm font-semibold tabular-nums {{ line.isReversal ? 'text-error' : 'text-gray-900' }}">{{ line.commissionAmount|number_format(2, ',', ' ') }} €</span>
                        {% if line.isReversal %}
                            <span class="block mt-1">
                                {% include '_atoms/badge/badge.html.twig' with { label: 'Contre-passation', variant: 'error', size: 'xs' } only %}
                            </span>
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
{% endmacro %}

{% 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: 'Mes transactions',
            subtitle: 'Votre relevé, mois par mois. Dépliez un mois pour voir ses paiements.',
            icon: 'wallet',
            backHref: path('app_commercial_dashboard'),
            backLabel: 'Retour au tableau de bord'
        } only %}

        <div class="shrink-0 self-start lg:self-auto">
            {# L'export suit le filtre : sans quoi le fichier téléchargé
               contredirait l'écran depuis lequel on l'a demandé. #}
            {% include '_atoms/button/button.html.twig' with {
                label: 'Exporter en CSV', variant: 'primary', size: 'md', icon: 'download',
                href: path('app_commercial_transactions_export', range.isActive()
                    ? { du: range.startInput(), au: range.endInput() }
                    : {})
            } only %}
        </div>
    </div>

    <div class="mt-6 mb-6">
        {% include '_molecules/month-range-filter/month-range-filter.html.twig' with {
            action: path('app_commercial_transactions'),
            months: moisDisponibles,
            start: range.startMonthInput(),
            end: range.endMonthInput()
        } only %}
    </div>

    {# ================================================================
       LE RELEVÉ — une ligne par mois, le détail au dépliage
       ================================================================ #}
    <section class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
        {% if periods is empty %}
            <div class="p-8">
                {% if range.isActive() %}
                    {% include '_molecules/empty-state/empty-state.html.twig' with {
                        title: 'Aucune transaction sur cette période',
                        description: 'Élargissez la période, ou affichez tout votre relevé.',
                        icon: 'wallet', variant: 'minimal',
                        actionText: 'Tout voir', actionHref: path('app_commercial_transactions')
                    } only %}
                {% else %}
                    {% include '_molecules/empty-state/empty-state.html.twig' with {
                        title: 'Aucune transaction pour l\'instant',
                        description: 'Dès qu\'un filleul souscrit une offre payante, son paiement apparaît ici et vous rapporte une commission. Partagez votre code depuis la page Parrainage.',
                        icon: 'wallet', variant: 'minimal',
                        actionText: 'Voir mon code de parrainage', actionHref: path('app_settings_referral')
                    } only %}
                {% endif %}
            </div>
        {% else %}
            <div class="overflow-x-auto overflow-y-hidden">
                <table class="w-full min-w-[640px]">
                    <thead class="bg-gray-50 border-b border-gray-100">
                        <tr>
                            <th class="px-4 sm:px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Mois</th>
                            <th class="px-4 sm:px-6 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Paiements</th>
                            <th class="px-4 sm:px-6 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Commission acquise</th>
                            <th class="px-4 sm:px-6 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Montant viré</th>
                            <th class="px-4 sm:px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Statut</th>
                            {# La colonne du chevron : sans libellé, elle n'annonce rien
                               d'autre que le fait que la ligne se déplie. #}
                            <th class="px-4 sm:px-6 py-3 w-px"><span class="sr-only">Détail</span></th>
                        </tr>
                    </thead>

                    {# Un <tbody> par mois : c'est le seul élément qui puisse porter le
                       contrôleur au-dessus de la ligne sommaire ET de sa ligne de détail.
                       Le détail est rendu VISIBLE et replié par le contrôleur à connect() :
                       sans JavaScript la page montre tout, ce qui est dégradé mais juste. #}
                    {% for period in periods %}
                        {% set estMoisCourant = period.period == moisCourant %}
                        <tbody data-transaction-mois
                               data-controller="shared--collapsible"
                               data-shared--collapsible-open-value="{{ estMoisCourant ? 'true' : 'false' }}"
                               class="border-b border-gray-100 last:border-b-0">

                            {# C'est la LIGNE ENTIÈRE qui déplie, pas le seul libellé du mois :
                               la cible de clic est ce que l'œil désigne. Le <tr> porte donc le
                               rôle, l'état et le clavier ; le chevron n'est plus qu'un
                               indicateur, posé tout à droite au bout de la ligne.
                               Même montage que templates/commercial/paiements.html.twig. #}
                            <tr data-shared--collapsible-target="trigger"
                                data-action="click->shared--collapsible#toggle keydown.enter->shared--collapsible#toggle keydown.space->shared--collapsible#toggle"
                                role="button"
                                tabindex="0"
                                aria-expanded="{{ estMoisCourant ? 'true' : 'false' }}"
                                class="cursor-pointer hover:bg-gray-50/60 focus-visible:bg-gray-50 focus-visible:outline-none transition-colors duration-150">
                                <td class="px-4 sm:px-6 py-3.5 whitespace-nowrap text-sm font-semibold text-gray-900">{{ period.label() }}</td>
                                <td class="px-4 sm:px-6 py-3.5 text-right text-sm text-gray-500 tabular-nums whitespace-nowrap">{{ period.lines|length }}</td>
                                <td class="px-4 sm:px-6 py-3.5 text-right whitespace-nowrap">
                                    <span class="text-sm font-semibold text-gray-900 tabular-nums">{{ period.commissionAmount|number_format(2, ',', ' ') }} €</span>
                                    {% if period.hasLateLines() %}
                                        <span class="block text-xs text-warning tabular-nums">+ {{ period.lateCommissionAmount|number_format(2, ',', ' ') }} € hors relevé</span>
                                    {% endif %}
                                </td>
                                <td class="px-4 sm:px-6 py-3.5 text-right text-sm tabular-nums whitespace-nowrap {{ period.status == 'paye' ? 'text-success font-semibold' : 'text-gray-500' }}">
                                    {{ period.status == 'paye' ? (period.amountPayable|number_format(2, ',', ' ')) ~ ' €' : '—' }}
                                </td>
                                <td class="px-4 sm:px-6 py-3.5">
                                    {% include '_atoms/badge/badge.html.twig' with {
                                        label: period.status == 'paye' ? 'Versé' : (period.status == 'en_cours' ? 'Mois en cours' : 'À verser'),
                                        variant: period.status == 'paye' ? 'success' : (period.status == 'en_cours' ? 'info' : 'warning'),
                                        size: 'sm'
                                    } only %}
                                </td>
                                <td class="px-4 sm:px-6 py-3.5 text-right w-px">
                                    <span data-shared--collapsible-target="icon" class="text-gray-400 inline-flex shrink-0">
                                        {% include '_atoms/icon/icon.html.twig' with { name: 'chevron-down', size: 'xs' } only %}
                                    </span>
                                </td>
                            </tr>

                            <tr data-mois-detail>
                                <td colspan="6" class="p-0">
                                    {# La cible est ce <div>, jamais le <tr> : shared--collapsible
                                       pose `display: block`, ce qui détruirait une ligne de tableau. #}
                                    <div data-shared--collapsible-target="content">

                                        {% if period.isPaid or period.carryOverIn < 0 or period.carryOverOut < 0 %}
                                            <div class="px-4 sm:px-6 py-2.5 bg-gray-50/60 flex flex-wrap items-center gap-x-5 gap-y-1 text-xs text-gray-500">
                                                {% if period.isPaid %}
                                                    <span class="inline-flex items-center gap-1.5">
                                                        {% include '_atoms/icon/icon.html.twig' with { name: 'check-circle', size: 'xs', color: 'success' } only %}
                                                        Viré le {{ period.paidAt ? period.paidAt|date('d/m/Y') : '—' }}{% if period.reference %} · référence <span class="font-mono text-gray-600">{{ period.reference }}</span>{% endif %}
                                                    </span>
                                                {% endif %}
                                                {% if period.carryOverIn < 0 %}
                                                    <span>Report du mois précédent : <span class="tabular-nums font-medium text-gray-600">{{ period.carryOverIn|number_format(2, ',', ' ') }} €</span></span>
                                                {% endif %}
                                                {% if period.carryOverOut < 0 %}
                                                    <span>Reste <span class="tabular-nums font-medium text-gray-600">{{ period.carryOverOut|number_format(2, ',', ' ') }} €</span> reporté au mois suivant</span>
                                                {% endif %}
                                            </div>
                                        {% endif %}

                                        {{ _self.lignes(period.lines, plansBySlug) }}

                                        {# ── Ce qui est arrivé APRÈS le virement de ce mois ──
                                           Un virement figé n'est JAMAIS recalculé : ces lignes ne sont
                                           ni comprises dans le versement, ni payables, ni reportées au
                                           mois suivant. Les taire est l'anomalie la plus coûteuse de
                                           cet écran — l'encart reste en clair. #}
                                        {% if period.hasLateLines() %}
                                            <div class="px-4 sm:px-6 py-4 border-t border-gray-100" data-lignes-tardives>
                                                {% include '_molecules/inline-alert/inline-alert.html.twig' with {
                                                    variant: 'warning',
                                                    icon: 'warning',
                                                    message: '<strong class="block text-sm mb-0.5">'
                                                           ~ period.lateLines|length ~ ' transaction' ~ (period.lateLines|length > 1 ? 's' : '')
                                                           ~ ' arrivée' ~ (period.lateLines|length > 1 ? 's' : '') ~ ' après le virement — '
                                                           ~ (period.lateCommissionAmount|number_format(2, ',', ' ')) ~ ' €</strong>'
                                                           ~ 'Le virement de ce mois est définitif : il n\'est jamais recalculé. Ces commissions
                                                              ne sont donc ni comprises dans ce versement, ni reportées au mois suivant.
                                                              Si ce montant vous semble vous revenir, signalez-le à l\'administration.'
                                                } only %}
                                            </div>
                                            {{ _self.lignes(period.lateLines, plansBySlug, true) }}
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    {% endfor %}
                </table>
            </div>
        {% endif %}
    </section>
</div>
{% endblock %}