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

{% block title %}Parrainage - Bubul{% endblock %}
{% block meta_description %}Parrainez vos amis sur Bubul : partagez votre code, gagnez des tokens.{% endblock %}

{% block body %}
<div class="max-w-[1300px] mx-auto">
    <div class="flex flex-col lg:flex-row gap-6 lg:gap-10">

        {% include '_molecules/settings-nav/settings-nav.html.twig' with { user: user, activePage: 'referral' } only %}

        <div class="flex-1 min-w-0">
            {% include '_molecules/page-header/page-header.html.twig' with {
                title: 'Parrainage',
                icon: 'gift',
                variant: 'default',
                class: 'pt-0'
            } only %}

            {% if commercialSuspended %}
                {# Son code ne rattache plus personne (ReferralResolver n'accepte que les
                   commerciaux actifs) : le lui montrer l'inviterait à diffuser un code mort. #}
                <div class="rounded-2xl border border-amber-200 bg-amber-50 p-5 mb-8">
                    <h2 class="text-sm font-semibold text-amber-900 mb-1">Votre profil commercial est suspendu</h2>
                    <p class="text-sm text-amber-800">
                        Vous ne pouvez plus recruter de filleuls : votre code de parrainage ne rattache
                        plus personne. Les commissions déjà acquises vous restent dues — contactez
                        l'administration pour toute question sur vos versements.
                    </p>
                </div>
            {% elseif isCommercial %}
                {# La fenêtre de douze mois court depuis le RECRUTEMENT, pas depuis la
                   souscription : la phrase d'origine promettait douze mois de commission à
                   partir du jour de l'abonnement, ce que la règle ne donne pas. #}
                <p class="text-sm text-gray-500 -mt-4 mb-6">
                    Partagez votre code : pendant les douze mois qui suivent le recrutement d'un filleul,
                    chacun de ses paiements vous rapporte une commission. Les versements sont mensuels,
                    par virement bancaire.
                </p>
            {% else %}
                <p class="text-sm text-gray-500 -mt-4 mb-6">
                    Partagez votre code : quand un filleul prend un abonnement premium, vous gagnez
                    {{ rewardTokens|number_format(0, ',', ' ') }} tokens.
                </p>
            {% endif %}

            {# ── Stats ── #}
            <section class="grid grid-cols-1 {{ commercialSuspended ? 'sm:grid-cols-2' : 'sm:grid-cols-3' }} gap-6 mb-10">
                {% include '_molecules/stat-card/stat-card.html.twig' with {
                    label: 'Mes filleuls', value: nbFilleuls, icon: 'users',
                    variant: commercial_colors.filleuls, size: 'sm', layout: 'horizontal'
                } only %}
                {% include '_molecules/stat-card/stat-card.html.twig' with {
                    label: 'Filleuls abonnés', value: nbPremium, icon: 'wallet',
                    variant: commercial_colors.filleuls, size: 'sm', layout: 'horizontal'
                } only %}
                {% if commercialSuspended %}
                    {# Rien : afficher un cumul de commissions ici contredirait le refus opposé
                       par /commercial/transactions et /commercial/paiements au même compte. #}
                {% elseif isCommercial %}
                    {# « Commission acquise » : le MÊME libellé et le MÊME nombre que sur le
                       tableau de bord et la page Transactions. Cette carte annonçait autrefois
                       « Commissions cumulées », un mot qui n'existait nulle part ailleurs, sur
                       un nombre qui ne correspondait à aucun des trois autres écrans. #}
                    {% include '_molecules/stat-card/stat-card.html.twig' with {
                        label: 'Commission acquise', value: commissionTotal|number_format(2, ',', ' ') ~ ' €', icon: 'bolt',
                        detail: 'Dont ' ~ (commissionDue|number_format(2, ',', ' ')) ~ ' € restant à recevoir',
                        variant: commercial_colors.commission, size: 'sm', layout: 'horizontal',
                        href: path('app_commercial_transactions')
                    } only %}
                {% else %}
                    {% include '_molecules/stat-card/stat-card.html.twig' with {
                        label: 'Tokens gagnés', value: tokensGagnes|number_format(0, '', ' '), icon: 'bolt',
                        variant: 'success', size: 'sm', layout: 'horizontal'
                    } only %}
                {% endif %}
            </section>

            {# ── Code + lien + QR ── (aucun code à diffuser pour un commercial suspendu) #}
            {% if code %}
            {% include '_molecules/section-divider/section-divider.html.twig' with {
                title: 'Mon <span class="italic text-primary">code</span>',
                subtitle: 'Partagez-le pour recruter de nouveaux filleuls',
                icon: 'gift', iconColor: 'primary'
            } %}

            <section class="bg-white rounded-2xl border border-gray-200 shadow-sm p-6 mt-6 mb-10 flex flex-col lg:flex-row gap-8">
                <div class="flex-1 min-w-0 flex flex-col gap-4">
                    <div>
                        <div class="text-[11px] font-semibold uppercase tracking-wider text-gray-400 mb-1">Mon code de parrainage</div>
                        <div class="flex items-center gap-3">
                            <div class="text-2xl font-bold font-mono text-gray-900 tracking-wide">{{ code }}</div>
                            <button type="button" data-copy="{{ code }}" class="flex items-center gap-1.5 text-sm font-medium text-primary hover:text-primary/80 transition-colors">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'copy', size: 'sm' } only %}
                                <span data-copy-label>Copier</span>
                            </button>
                        </div>
                    </div>
                    <div>
                        <div class="text-[11px] font-semibold uppercase tracking-wider text-gray-400 mb-1">Mon lien de parrainage</div>
                        <div class="flex items-center gap-2">
                            <input type="text" readonly value="{{ referralUrl }}"
                                   class="flex-1 min-w-0 text-sm border border-gray-200 rounded-lg px-3 py-2 bg-gray-50 text-gray-600">
                            <button type="button" data-copy="{{ referralUrl }}" class="flex items-center gap-1.5 text-sm font-medium text-primary hover:text-primary/80 whitespace-nowrap">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'copy', size: 'sm' } only %}
                                <span data-copy-label>Copier</span>
                            </button>
                        </div>
                    </div>
                </div>

                {# QR + téléchargement #}
                <div class="flex flex-col items-center gap-3 shrink-0">
                    <div class="bg-white p-3 rounded-xl border border-gray-200 shadow-sm">
                        <img src="{{ path('app_settings_referral_qr') }}" alt="QR code de mon lien de parrainage" width="180" height="180" class="w-44 h-44">
                    </div>
                    <a href="{{ path('app_settings_referral_qr', {download: 1}) }}" download="bubul-parrainage-{{ code }}.png"
                       class="inline-flex items-center gap-2 rounded-xl bg-primary text-white px-4 py-2 text-sm font-semibold hover:opacity-95 transition-opacity">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'download', size: 'sm', color: 'white' } only %}
                        Télécharger le PNG
                    </a>
                </div>
            </section>
            {% endif %}

            {% if isCommercial and not commercialSuspended %}
                {# ── Invitation par email (commercial uniquement) ── #}
                <section class="bg-white rounded-2xl border border-gray-200 shadow-sm p-6 mb-10">
                    <h2 class="text-sm font-semibold text-gray-900 mb-1">Inviter un filleul par email</h2>
                    {# Ne pas promettre un rattachement immédiat : aucun compte n'est créé
                       ici, et le filleul ne vous est rattaché que s'il s'inscrit lui-même
                       par le lien reçu. #}
                    <p class="text-sm text-gray-500 mb-4">Bubul lui envoie un lien vers l'inscription. Aucun compte n'est créé à sa place : il vous sera rattaché s'il s'inscrit par ce lien.</p>
                    <form method="post" action="{{ path('app_commercial_filleul_invite') }}" class="flex flex-col sm:flex-row gap-3">
                        <input type="hidden" name="_token" value="{{ csrf_token('commercial_invite') }}">
                        <input type="email" name="email" required placeholder="email@exemple.com"
                               class="flex-1 min-w-0 text-sm border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary">
                        <button type="submit"
                                class="inline-flex items-center justify-center gap-2 rounded-xl bg-primary text-white px-4 py-2 text-sm font-semibold hover:opacity-95 transition-opacity">
                            Inviter
                        </button>
                    </form>
                </section>
            {% endif %}

            {# ── Liste des filleuls ── #}
            {% include '_molecules/section-divider/section-divider.html.twig' with {
                title: 'Mes <span class="italic text-cohorts">filleuls</span>',
                subtitle: nbFilleuls ~ (nbFilleuls > 1 ? ' filleuls' : ' filleul'),
                icon: 'users', iconColor: commercial_colors.filleuls
            } %}

            <section class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden mt-6 mb-10">
                {% if filleuls is empty %}
                    <div class="p-10 text-center text-gray-400 text-sm">Aucun filleul pour l'instant. Partagez votre code ou votre QR pour commencer.</div>
                {% else %}
                    <table class="w-full text-sm">
                        <thead class="bg-gray-50 text-gray-500">
                            <tr>
                                <th class="px-6 py-3 text-left font-medium">Filleul</th>
                                <th class="px-6 py-3 text-left font-medium">Inscrit le</th>
                                <th class="px-6 py-3 text-left font-medium">Abonnement</th>
                                <th class="px-6 py-3 text-left font-medium">Récompense</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for f in filleuls %}
                                <tr class="border-t border-gray-100">
                                    <td class="px-6 py-3 text-gray-900">{{ f.firstName ? f.firstName ~ ' · ' : '' }}<span class="text-gray-500">{{ f.email }}</span></td>
                                    <td class="px-6 py-3 text-gray-500 tabular-nums">{{ f.joinedAt ?? '—' }}</td>
                                    <td class="px-6 py-3">
                                        {% include '_atoms/badge/badge.html.twig' with {
                                            label: f.isPremium ? 'Premium' : 'Gratuit',
                                            variant: f.isPremium ? 'success' : 'default', size: 'sm'
                                        } only %}
                                    </td>
                                    <td class="px-6 py-3">
                                        {% if f.rewarded %}
                                            <span class="text-emerald-600 font-medium">+{{ rewardTokens|number_format(0, '', ' ') }} tokens</span>
                                        {% else %}
                                            <span class="text-gray-400">—</span>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                {% endif %}
            </section>
        </div>
    </div>
</div>

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