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

{% block title %}Espace commercial — Bubul{% endblock %}

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

    {# ================================================================
       EN-TÊTE — titre, actions, code de parrainage
       ================================================================ #}
    <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
        {% include '_molecules/page-header/page-header.html.twig' with {
            title: 'Espace commercial',
            subtitle: 'Filleuls, chiffre d\'affaires et commission — ' ~ periodLabelLong ~ '.',
            icon: 'chart',
            backHref: path('app_dashboard'),
            backLabel: 'Retour au dashboard'
        } only %}

        <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 shrink-0 self-start">
            {# Renfort en tokens : l'état vient du serveur (tokenRequestSentToday),
               jamais d'un état masqué côté client — la demande elle-même est bridée
               à une par jour dans TokenRequestController. #}
            {% if tokenRequestSentToday %}
                <span class="inline-flex items-center gap-1.5 px-3 py-2 rounded-xl text-sm font-medium text-gray-500 bg-gray-100">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'token', size: 'xs' } only %}
                    Demande effectuée
                </span>
            {% else %}
                <form method="post" action="{{ path('app_commercial_token_request') }}">
                    <input type="hidden" name="_token" value="{{ csrf_token('commercial_token_request') }}">
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Demander des tokens', variant: 'soft-primary',
                        size: 'md', icon: 'token', type: 'submit'
                    } only %}
                </form>
            {% endif %}

            {# Le code reste ici, mais réduit à sa donnée : le code lui-même,
               cliquable pour être copié. Le lien d'invitation, le QR et son
               téléchargement vivent sur /settings/parrainage — les dupliquer ici
               obligeait à maintenir deux endroits pour la même chose. #}
            <div data-code-parrainage
                 class="bg-white border border-gray-200 rounded-2xl px-4 py-3 shadow-sm">
                <div class="text-[11px] font-semibold uppercase tracking-wider text-gray-400 mb-1">Code de parrainage</div>
                <div class="flex items-center gap-3">
                    <button type="button" data-copy="{{ commercial.referralCode }}"
                            aria-label="Copier le code {{ commercial.referralCode }}"
                            class="group inline-flex items-center gap-2 font-mono text-lg font-bold tracking-[0.12em] text-gray-900 hover:text-primary transition-colors">
                        {{ commercial.referralCode }}
                        {% include '_atoms/icon/icon.html.twig' with { name: 'copy', size: 'xs' } only %}
                        <span data-copy-label class="sr-only">Copier</span>
                    </button>
                    <a href="{{ path('app_settings_referral') }}"
                       class="text-xs font-medium text-primary hover:text-primary/80 whitespace-nowrap">Lien et QR →</a>
                </div>
            </div>
        </div>
    </div>

    {# ================================================================
       QUATRE INDICATEURS — poids égal
       Les montants viennent du MÊME résumé que Transactions et Parrainage :
       mêmes mots, mêmes nombres, partout. Aucune somme n'est faite ici.
       ================================================================ #}
    <section data-kpi-dashboard data-resume-commissions
             class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 mt-8 mb-8">
        {% include '_molecules/stat-card/stat-card.html.twig' with {
            label: 'Filleuls', value: nbFilleuls, icon: 'users',
            detail: nbFilleulsAbonnes > 0
                ? ('dont ' ~ nbFilleulsAbonnes ~ (nbFilleulsAbonnes > 1 ? ' abonnés' : ' abonné'))
                : 'aucun abonné pour l\'instant',
            variant: commercial_colors.filleuls, size: 'sm', layout: 'horizontal',
            href: path('app_commercial_transactions')
        } only %}

        {# Le taux et l'assiette se lisent ICI, là où ils s'appliquent. Le bandeau
           bleu de sept lignes qui les portait au-dessus de la page a disparu. #}
        {% include '_molecules/stat-card/stat-card.html.twig' with {
            label: 'Ce mois-ci', value: (summary.acquiredThisMonth|number_format(2, ',', ' ')) ~ ' €',
            icon: 'chart', variant: commercial_colors.commission, size: 'sm', layout: 'horizontal',
            detail: 'CA net ' ~ (caDuMois|number_format(2, ',', ' ')) ~ ' € · taux '
                    ~ ((tauxCourant * 100)|number_format(2, ',', ' ')) ~ ' %',
            href: path('app_commercial_transactions')
        } only %}

        {% include '_molecules/stat-card/stat-card.html.twig' with {
            label: 'Reste à recevoir', value: (summary.dueNow|number_format(2, ',', ' ')) ~ ' €',
            icon: 'wallet', variant: commercial_colors.encours, size: 'sm', layout: 'horizontal',
            detail: summary.carryOverIn < 0
                ? ((summary.carryOverIn|number_format(2, ',', ' ')) ~ ' € reportés des mois précédents')
                : (summary.duePeriodCount > 0
                    ? (summary.duePeriodCount ~ ' mois clos en attente')
                    : 'aucun mois clos en attente'),
            href: path('app_commercial_transactions')
        } only %}

        {% include '_molecules/stat-card/stat-card.html.twig' with {
            label: 'Déjà versé', value: (summary.alreadyPaid|number_format(2, ',', ' ')) ~ ' €',
            icon: 'check-circle', variant: commercial_colors.verse, size: 'sm', layout: 'horizontal',
            detail: 'total des virements reçus',
            href: path('app_commercial_paiements')
        } only %}
    </section>

    {# ================================================================
       DEUX GRAPHIQUES
       Commissions et chiffre d'affaires ne font qu'un graphique à deux
       courbes : c'est la même histoire, lue à deux échelles.
       Les douze points sont rendus une fois ; le sélecteur les découpe
       côté client, sans requête.
       ================================================================ #}
    <div class="grid grid-cols-1 lg:grid-cols-[1fr_320px] gap-6 mb-8">
        {% include '_organisms/trend-chart-panel/trend-chart-panel.html.twig' with {
            title: 'Commissions & chiffre d\'affaires',
            subtitle: 'Commission acquise (trait plein) et CA net généré (pointillés)',
            labels: series.labels,
            primary: series.commissions,
            secondary: series.revenue,
            primaryLabel: 'Commission acquise',
            secondaryLabel: 'CA net généré',
            suffix: ' €',
            icon: 'chart', iconColor: 'primary', height: 'md',
            emptyText: 'Aucune commission sur la période'
        } only %}

        {# Mêmes couleurs que le doughnut de l'écran admin : c'est le même graphique,
           lu sur ses propres filleuls plutôt que sur tout le programme. #}
        {% include '_organisms/donut-panel/donut-panel.html.twig' with {
            title: 'Filleuls par offre',
            subtitle: nbFilleuls ~ (nbFilleuls > 1 ? ' filleuls recrutés' : ' filleul recruté'),
            labels: series.planLabels,
            data: series.planCounts,
            icon: 'users-group', iconColor: commercial_colors.filleuls,
            tokens: commercial_plan_tokens,
            emptyIcon: 'users', emptyText: 'Aucun filleul pour l\'instant'
        } only %}
    </div>

    {# ================================================================
       DEUX TABLEAUX CÔTE À CÔTE
       ================================================================ #}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">

        {# ── Vos derniers mois ── #}
        <section data-tableau-mois class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
            <div class="px-5 py-4 border-b border-gray-100 flex items-center justify-between gap-4">
                <h2 class="text-sm font-semibold text-gray-900">Vos derniers mois</h2>
                <a href="{{ path('app_commercial_transactions') }}"
                   class="text-sm font-medium text-primary hover:text-primary/80 whitespace-nowrap">Voir le détail →</a>
            </div>

            {# Lu depuis le RELEVÉ (CommissionStatement), jamais depuis les
               CommercialPayout bruts : un relevé resté « pending » n'est le constat
               d'aucun virement. #}
            {% if lastPeriods is empty %}
                <div class="p-8 text-center text-gray-400 text-sm">
                    Aucune transaction pour l'instant. Dès qu'un filleul souscrit une offre payante,
                    son paiement vous rapporte une commission et apparaît ici.
                </div>
            {% else %}
                <div class="overflow-x-auto overflow-y-hidden">
                    <table class="w-full min-w-[380px]">
                        <thead class="bg-gray-50 border-b border-gray-100">
                            <tr>
                                <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Mois</th>
                                <th class="px-5 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Commission acquise</th>
                                <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Statut</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            {% for p in lastPeriods %}
                                <tr class="hover:bg-gray-50/60 transition-colors duration-150">
                                    <td class="px-5 py-3 text-sm font-medium text-gray-900 whitespace-nowrap">{{ p.label() }}</td>
                                    <td class="px-5 py-3 text-right whitespace-nowrap">
                                        <span class="text-sm text-gray-700 tabular-nums">{{ p.commissionAmount|number_format(2, ',', ' ') }} €</span>
                                        {% if p.hasLateLines() %}
                                            <span class="block text-xs text-warning tabular-nums">+ {{ p.lateCommissionAmount|number_format(2, ',', ' ') }} € hors relevé</span>
                                        {% endif %}
                                    </td>
                                    <td class="px-5 py-3">
                                        {% include '_atoms/badge/badge.html.twig' with {
                                            label: p.status == 'paye' ? 'Versé' : (p.status == 'en_cours' ? 'Mois en cours' : 'À verser'),
                                            variant: p.status == 'paye' ? 'success' : (p.status == 'en_cours' ? 'info' : 'warning'),
                                            size: 'sm'
                                        } only %}
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}
        </section>

        {# ── Vos filleuls ──
           Une seule liste : les filleuls, abonnés ou non, ET les invitations
           restées sans suite. Ces deux dernières populations étaient en pied de
           page de Transactions, où personne ne les cherchait. #}
        <section data-tableau-filleuls class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
            <div class="px-5 py-4 border-b border-gray-100 flex items-center justify-between gap-4">
                {# Le compteur suit les LIGNES listées, invitations comprises, et le
                   titre le dit. Le KPI « Filleuls » du haut ne compte que les
                   comptes réels : deux nombres différents sous deux noms différents,
                   plutôt que le même mot portant deux valeurs. #}
                <h2 class="text-sm font-semibold text-gray-900">
                    Vos filleuls et invitations
                    <span class="text-xs font-normal text-gray-400 ml-1">({{ filleuls|length }})</span>
                </h2>
                <a href="{{ path('app_settings_referral') }}"
                   class="text-sm font-medium text-primary hover:text-primary/80 whitespace-nowrap">Inviter →</a>
            </div>

            {% if filleuls is empty %}
                <div class="p-8 text-center text-gray-400 text-sm">
                    Aucun filleul pour l'instant.
                    <a href="{{ path('app_settings_referral') }}" class="text-primary font-medium hover:underline">Partagez votre code</a> pour commencer.
                </div>
            {% else %}
                <div class="overflow-x-auto overflow-y-hidden">
                    <table class="w-full min-w-[420px]">
                        <thead class="bg-gray-50 border-b border-gray-100">
                            <tr>
                                <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Filleul</th>
                                <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Offre</th>
                                <th class="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">État</th>
                                <th class="px-5 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Depuis</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            {% for f in filleuls %}
                                <tr class="hover:bg-gray-50/60 transition-colors duration-150"
                                    {% if f.type == 'invitation' %}data-invitation-en-attente{% endif %}>
                                    <td class="px-5 py-3">
                                        <span class="text-sm font-medium text-gray-900 truncate block">{{ f.nom }}</span>
                                        {% if f.type == 'filleul' %}
                                            <span class="text-xs text-gray-500 truncate block">{{ f.email }}</span>
                                        {% endif %}
                                    </td>
                                    <td class="px-5 py-3">
                                        {% if f.type == 'invitation' %}
                                            <span class="text-sm text-gray-300">—</span>
                                        {% else %}
                                            {% include '_atoms/plan-badge/plan-badge.html.twig' with {
                                                name: f.planName,
                                                gradient: f.planGradient,
                                                isFree: f.planIsFree,
                                                isAnnual: f.planIsAnnual
                                            } only %}
                                        {% endif %}
                                    </td>
                                    <td class="px-5 py-3">
                                        {% if f.etat == 'abonne' %}
                                            {% include '_atoms/badge/badge.html.twig' with {
                                                label: 'Abonné', variant: 'success', size: 'sm'
                                            } only %}
                                        {% elseif f.etat == 'sans_paiement' %}
                                            {% include '_atoms/badge/badge.html.twig' with {
                                                label: 'Sans paiement', variant: 'neutral', size: 'sm'
                                            } only %}
                                        {% else %}
                                            <div class="flex items-center gap-2">
                                                {% include '_atoms/badge/badge.html.twig' with {
                                                    label: 'Invitation en attente', variant: 'warning', size: 'sm'
                                                } only %}
                                                <form method="POST" action="{{ path('app_commercial_invitation_resend', { id: f.invitationId }) }}" class="inline">
                                                    <input type="hidden" name="_token" value="{{ csrf_token('commercial_resend') }}">
                                                    {% include '_atoms/button/button.html.twig' with {
                                                        label: 'Relancer', variant: 'soft-primary', size: 'xs',
                                                        icon: 'refresh', type: 'submit',
                                                        attr: { 'aria-label': "Renvoyer l'invitation à " ~ f.email }
                                                    } only %}
                                                </form>
                                            </div>
                                        {% endif %}
                                    </td>
                                    <td class="px-5 py-3 text-right text-sm text-gray-500 tabular-nums whitespace-nowrap">{{ f.depuis ?? '—' }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}
        </section>
    </div>

    {% include 'admin/commercial/_copy-script.html.twig' %}
</div>
{% endblock %}