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

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

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

    {# ================================================================
       EN-TÊTE
       ================================================================ #}
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
        {% include '_molecules/page-header/page-header.html.twig' with {
            title: 'Commerciaux',
            subtitle: 'Vue d\'ensemble du programme d\'apport d\'affaires.',
            icon: 'wallet',
            backHref: path('app_dashboard'),
            backLabel: 'Retour au dashboard'
        } only %}

        <div class="flex items-center gap-3 shrink-0">
            {% include '_atoms/button/button.html.twig' with {
                label: 'Exporter l\'encours', variant: 'primary', size: 'lg',
                icon: 'download', href: path('admin_commercial_export')
            } only %}
            {% include '_atoms/button/button.html.twig' with {
                label: 'Créer un commercial', variant: 'primary', size: 'lg',
                icon: 'user-plus', href: path('admin_user_new', {role: 'commercial'})
            } only %}
        </div>
    </div>

    {# ================================================================
       QUATRE INDICATEURS — le portefeuille entier
       ================================================================ #}
    <section data-admin-kpi class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 mt-8 mb-8">
        {# Le provisoire du mois en cours vit dans le DÉTAIL de cette carte, jamais dans sa
           valeur : c'est elle qu'on recopie dans l'interface bancaire. #}
        <div data-total-a-virer>
            {% include '_molecules/stat-card/stat-card.html.twig' with {
                label: 'Total à virer', value: (totalAVirer|number_format(2, ',', ' ')) ~ ' €',
                detail: (nbCommerciauxDus > 0
                    ? (nbCommerciauxDus ~ (nbCommerciauxDus > 1 ? ' commerciaux concernés' : ' commercial concerné'))
                    : 'rien à virer aujourd\'hui')
                    ~ (totalEnCours > 0
                        ? ' · ' ~ (totalEnCours|number_format(2, ',', ' ')) ~ ' € en cours'
                        : ''),
                icon: 'wallet', variant: commercial_colors.encours, size: 'sm', layout: 'horizontal'
            } only %}
        </div>

        {% include '_molecules/stat-card/stat-card.html.twig' with {
            label: 'Acquis ce mois', value: (series.acquiredThisMonth|number_format(2, ',', ' ')) ~ ' €',
            detail: 'CA net ' ~ (series.revenueThisMonth|number_format(2, ',', ' ')) ~ ' €',
            icon: 'chart', variant: commercial_colors.commission, size: 'sm', layout: 'horizontal'
        } only %}

        {% include '_molecules/stat-card/stat-card.html.twig' with {
            label: 'Commerciaux', value: stats.total,
            detail: stats.active ~ ' actifs · ' ~ stats.suspended ~ ' suspendus',
            icon: 'users', variant: commercial_colors.commerciaux, size: 'sm', layout: 'horizontal'
        } only %}

        {% include '_molecules/stat-card/stat-card.html.twig' with {
            label: 'Filleuls', value: series.nbFilleuls,
            detail: series.nbFilleulsAbonnes > 0
                ? ('dont ' ~ series.nbFilleulsAbonnes ~ (series.nbFilleulsAbonnes > 1 ? ' abonnés' : ' abonné'))
                : 'aucun abonné pour l\'instant',
            icon: 'users', variant: commercial_colors.filleuls, size: 'sm', layout: 'horizontal'
        } only %}
    </section>

    {# ================================================================
       LES GRAPHIQUES
       Même ordre que le tableau de bord commercial — indicateurs, graphiques,
       puis tableau : les deux écrans se lisent de la même façon.
       ================================================================ #}
    <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: 'Tous commerciaux confondus',
            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 %}

        {# Le même doughnut que le tableau de bord d'un commercial, posé sur le programme
           entier : de quelles offres sont les filleuls recrutés. Il répartissait l'encours
           par commercial — une redite du tableau juste en dessous, qui le dit déjà mieux,
           nommé, chiffré et trié. #}
        {% include '_organisms/donut-panel/donut-panel.html.twig' with {
            title: 'Filleuls par offre',
            subtitle: series.nbFilleuls ~ (series.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',
            attr: { 'data-filleuls-par-offre': '' }
        } only %}
    </div>

    {# ================================================================
       LE TABLEAU — l'outil de travail
       Trié par encours dû décroissant côté contrôleur.
       ================================================================ #}
    <section class="bg-white rounded-2xl border border-gray-200 shadow-sm mb-8">
        <div class="px-4 sm:px-6 py-4 border-b border-gray-100 flex items-center justify-between gap-4">
            <h2 class="text-lg font-semibold text-gray-900 font-[Poppins]">
                Commerciaux
                <span class="text-sm font-normal text-gray-400 ml-2">({{ pagination.totalItems }})</span>
            </h2>
            <span class="text-xs text-gray-400 whitespace-nowrap">Trié par encours dû</span>
        </div>

        {% if rows|length > 0 %}
            <div class="overflow-x-auto overflow-y-hidden rounded-b-2xl">
                <table class="w-full min-w-[1120px]">
                    <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">Commercial</th>
                            <th class="px-4 sm:px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Code parrainage</th>
                            <th class="px-4 sm:px-6 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Taux</th>
                            <th class="px-4 sm:px-6 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Filleuls</th>
                            <th class="px-4 sm:px-6 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Encours dû</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>
                            <th class="px-4 sm:px-6 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider whitespace-nowrap">Action</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        {% for row in rows %}
                            {% set commercial = row.commercial %}
                            <tr class="hover:bg-gray-50/50 transition-colors duration-150 cursor-pointer {{ not commercial.isActive ? 'opacity-60' : '' }}"
                                data-commercial-ligne="{{ commercial.id }}"
                                onclick="window.location='{{ path('admin_commercial_show', {id: commercial.id}) }}'">
                                <td class="px-4 sm:px-6 py-3 sm:py-4">
                                    <div class="flex items-center gap-3">
                                        {% include '_atoms/avatar/avatar.html.twig' with {
                                            name: commercial.user.fullName, size: 'sm'
                                        } only %}
                                        <div class="min-w-0">
                                            <span class="text-sm font-medium text-gray-900 truncate block">{{ commercial.user.fullName }}</span>
                                            <span class="text-xs text-gray-500 truncate block">{{ commercial.user.email }}</span>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-4 sm:px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm font-mono text-gray-700">{{ commercial.referralCode }}</span>
                                        <button type="button" data-copy="{{ commercial.referralCode }}"
                                                class="text-gray-400 hover:text-primary transition-colors" title="Copier le code">
                                            {% include '_atoms/icon/icon.html.twig' with { name: 'copy', size: 'sm' } only %}
                                        </button>
                                    </div>
                                </td>
                                <td class="px-4 sm:px-6 py-4 text-right whitespace-nowrap">
                                    <span class="text-sm font-medium text-gray-900 tabular-nums">{{ (commercial.commissionRate * 100)|number_format(2, ',', ' ') }} %</span>
                                </td>
                                <td class="px-4 sm:px-6 py-4 text-right whitespace-nowrap">
                                    <span class="text-sm text-gray-700 tabular-nums">{{ row.nbFilleuls }}</span>
                                </td>
                                {# L'ENCOURS COMPLET, pas le montant d'un seul mois : la colonne
                                   s'arrêtait autrefois à la première période due en partant de la
                                   plus récente, et l'admin virait ce montant sans avoir vu le total. #}
                                <td class="px-4 sm:px-6 py-3 text-right whitespace-nowrap" data-encours-cellule>
                                    {% if not row.due.isEmpty() %}
                                        <span class="block text-sm font-semibold text-gray-900 tabular-nums">{{ row.due.total|number_format(2, ',', ' ') }} €</span>
                                        <span class="block text-xs text-gray-400">{{ row.due.count() }} mois — depuis {{ row.due.oldest().label() }}</span>
                                    {% elseif not row.due.hasCurrent() %}
                                        <span class="text-sm text-gray-300">—</span>
                                    {% endif %}

                                    {# Le mois en cours, en gris et sans montant gras : il ne se vire
                                       pas encore. Il s'affichait nulle part, et l'administrateur
                                       attendait le 1er du mois suivant pour savoir ce qui venait. #}
                                    {% if row.due.hasCurrent() %}
                                        <span class="block text-xs text-gray-400 tabular-nums" data-encours-en-cours>
                                            + {{ row.due.currentTotal()|number_format(2, ',', ' ') }} € en cours
                                        </span>
                                    {% endif %}
                                </td>
                                <td class="px-4 sm:px-6 py-4">
                                    {% include '_atoms/badge/badge.html.twig' with {
                                        preset: commercial.isActive ? 'user-active' : 'user-inactive', size: 'sm'
                                    } only %}
                                </td>
                                <td class="px-4 sm:px-6 py-3 text-right" onclick="event.stopPropagation();">
                                    {% if not row.due.isEmpty() %}
                                        {% set aRegler = row.due.oldest() %}
                                        {# On propose le mois le PLUS ANCIEN : sans quoi un mois oublié
                                           le reste indéfiniment pendant qu'on solde les récents. #}
                                        <form method="post" action="{{ path('admin_payout_mark_paid', {id: row.commercial.id, period: aRegler.period}) }}"
                                              class="inline-flex items-center gap-2 justify-end"
                                              onsubmit="return confirm('Enregistrer le versement de {{ aRegler.amountPayable|number_format(2, ',', ' ') }} € à {{ commercial.user.fullName|e('js') }} pour {{ aRegler.label()|e('js') }} ?');">
                                            <input type="hidden" name="_token" value="{{ csrf_token('mark_paid_' ~ row.commercial.id ~ '_' ~ aRegler.period) }}">
                                            <input type="text" name="reference" placeholder="Référence" required aria-label="Référence du virement"
                                                   class="w-32 px-2 py-1.5 text-xs border border-gray-200 rounded-lg">
                                            {% include '_atoms/button/button.html.twig' with {
                                                label: 'Payer ' ~ aRegler.label(), variant: 'success', size: 'sm', icon: 'check', type: 'submit'
                                            } only %}
                                        </form>
                                        {% if row.due.count() > 1 %}
                                            <span class="block text-xs text-gray-400 mt-1">et {{ row.due.count() - 1 }} autre{{ row.due.count() > 2 ? 's' : '' }} mois — voir la fiche</span>
                                        {% endif %}
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            {% if pagination.total > 1 %}
                <div class="px-4 sm:px-6 py-4 border-t border-gray-100 flex justify-center">
                    {% include '_molecules/pagination/pagination.html.twig' with {
                        currentPage: pagination.current, totalPages: pagination.total,
                        baseUrl: path('admin_commercial_list'), pageParam: pagination.param, size: 'sm'
                    } only %}
                </div>
            {% endif %}
        {% else %}
            <div class="p-8">
                {% include '_molecules/empty-state/empty-state.html.twig' with {
                    title: 'Aucun commercial',
                    description: 'Aucun profil commercial n\'a encore été créé.',
                    icon: 'users', variant: 'minimal'
                } only %}
            </div>
        {% endif %}
    </section>

</div>

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