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

{% block title %}{{ user.fullName }} - {{ isAdmin|default(true) ? 'Admin' : 'Utilisateurs' }}{% endblock %}

{% block body %}

{# Couleurs outils : pilotées par les globals tool_colors et tool_color_hex (source : Tool entity) #}

{# ================================================================
   BREADCRUMB
   ================================================================ #}
<div class="max-w-[1400px] mx-auto mb-6">
    {% include '_molecules/breadcrumb/breadcrumb.html.twig' with {
        homeHref: path('app_dashboard'),
        items: [
            { label: 'Utilisateurs', href: path('admin_user_list') },
            { label: user.fullName }
        ]
    } only %}
</div>

<div class="max-w-[1400px] mx-auto">

    {# ================================================================
       HEADER UTILISATEUR
       ================================================================ #}
    <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden mb-20">
        <div class="flex flex-col lg:flex-row lg:items-stretch">

            {# GAUCHE — Carte abonnement (admin uniquement) #}
            {% if isAdmin %}
                {% set sub = user.subscription %}
                {% set plan = sub ? sub.plan : null %}
                {% if plan and not plan.isFree() and sub.isActive() %}
                    {% set gradient = plan.gradientCss ?? 'linear-gradient(135deg, #0d1b3e 0%, #0C81E4 100%)' %}
                {% elseif user.isB2B() %}
                    {% set gradient = plan_gradients['system-b2b']|replace({'background: ': ''}) %}
                {% else %}
                    {% set gradient = plan_gradients['freemium']|replace({'background: ': ''}) %}
                {% endif %}

                <div class="relative overflow-hidden lg:rounded-l-2xl lg:rounded-r-none rounded-t-2xl text-white flex-shrink-0 lg:w-64"
                     style="background: {{ gradient }}">
                    <div class="absolute inset-0 opacity-[0.10]"
                         style="background-image: radial-gradient(circle, #ffffff 1px, transparent 1px); background-size: 22px 22px;"></div>
                    <div class="relative px-7 py-8 flex flex-col justify-center h-full">
                        <p class="text-xs font-semibold uppercase tracking-[0.18em] text-white/60 mb-3">Abonnement</p>
                        {% if plan and not plan.isFree() and sub.isActive() %}
                            <p class="text-4xl font-bold font-[Poppins] leading-none">{{ plan.name }}</p>
                            <p class="text-sm text-white/60 mt-3">
                                {{ sub.isAnnual() ? 'Annuel' : 'Mensuel' }}
                                · {{ sub.isAnnual() ? plan.priceAnnual|number_format(2, '.', '') : plan.priceMonthly|number_format(2, '.', '') }}€/mois
                            </p>
                        {% elseif user.isB2B() %}
                            <p class="text-4xl font-bold font-[Poppins] leading-none">Entreprise</p>
                            <p class="text-sm text-white/60 mt-3">{{ user.company ? user.company.name : 'B2B' }}</p>
                        {% else %}
                            <p class="text-4xl font-bold font-[Poppins] leading-none">Freemium</p>
                            <p class="text-sm text-white/60 mt-3">Plan gratuit</p>
                        {% endif %}
                    </div>
                </div>
            {% endif %}

            {# DROITE — Infos utilisateur + boutons #}
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6 flex-1 p-8 min-w-0">
                <div class="flex items-center gap-4 min-w-0">
                    {% include '_atoms/avatar/avatar.html.twig' with {
                        name: user.fullName,
                        size: 'xl',
                        class: not user.isActive ? 'opacity-50' : ''
                    } only %}

                    <div class="min-w-0">
                        <div class="flex items-center gap-3 flex-wrap">
                            <h1 class="text-2xl font-bold text-gray-900 font-[Poppins]">{{ user.fullName }}</h1>
                            {% include '_atoms/badge/badge.html.twig' with {
                                preset: user.isActive ? 'user-active' : 'user-inactive',
                                size: 'sm'
                            } only %}
                            {% if user.isBetaTester or 'ROLE_BETA_TESTER' in user.roles %}
                                {% include '_atoms/badge/badge.html.twig' with {
                                    label: 'Beta testeur',
                                    variant: 'warning',
                                    icon: 'star',
                                    size: 'sm'
                                } only %}
                            {% endif %}
                            {% if user.isEmailVerified %}
                                {% include '_atoms/badge/badge.html.twig' with {
                                    label: 'Email vérifié',
                                    variant: 'success',
                                    icon: 'check-circle',
                                    size: 'sm'
                                } only %}
                            {% else %}
                                {% include '_atoms/badge/badge.html.twig' with {
                                    label: 'Email non vérifié',
                                    variant: 'warning',
                                    icon: 'alert',
                                    size: 'sm'
                                } only %}
                            {% endif %}
                        </div>

                        <div class="flex items-center gap-4 mt-2 text-sm text-gray-500 flex-wrap">
                            <span class="inline-flex items-center gap-1.5">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'mail', size: 'sm' } only %}
                                <a href="mailto:{{ user.email }}" class="hover:text-primary transition-colors">{{ user.email }}</a>
                            </span>
                            {% if user.company %}
                                <a href="{{ path('admin_company_show', {uuid: user.company.uuid}) }}"
                                   class="inline-flex items-center gap-1.5 hover:text-primary transition-colors">
                                    {% include '_atoms/icon/icon.html.twig' with { name: 'buildings', size: 'sm' } only %}
                                    {{ user.company.name }}
                                </a>
                            {% endif %}
                            <span class="inline-flex items-center gap-1.5">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'calendar', size: 'sm' } only %}
                                Membre depuis {{ user.createdAt|date('d/m/Y') }}
                            </span>
                        </div>
                    </div>
                </div>

                <div class="flex items-center gap-3 flex-shrink-0">
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Retour',
                        variant: 'ghost',
                        size: 'lg',
                        icon: 'arrow-left',
                        href: path('admin_user_list')
                    } only %}

                    {% set canEdit = isAdmin or not ('ROLE_ADMIN' in user.roles) %}
                    {% if canEdit %}
                        {% include '_atoms/button/button.html.twig' with {
                            label: 'Modifier',
                            variant: 'primary',
                            size: 'lg',
                            icon: 'edit',
                            href: path('admin_user_edit', {uuid: user.uuid})
                        } only %}
                    {% endif %}
                </div>
            </div>

        </div>
    </div>

    {# ================================================================
       STATISTIQUES TOKENS
       ================================================================ #}
    {% if userToken %}
        {% set percentAvailable = userToken.tokenUsable > 0 ? ((userToken.tokensRemaining / userToken.tokenUsable) * 100)|round(1) : 0 %}
        {% set percentUsed = userToken.tokenUsable > 0 ? ((userToken.tokenUsed / userToken.tokenUsable) * 100)|round(1) : 0 %}
        {% set co2 = userToken.energyConsumptionWh * 0.0004 %}

        <section class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 mb-20">
            {% include '_molecules/stat-card/stat-card.html.twig' with {
                label: 'Tokens restants',
                value: userToken.tokensRemaining|number_format(0, ',', ' '),
                icon: 'token',
                variant: 'primary',
                size: 'lg',
                layout: 'vertical',
                editModalId: isAdmin ? 'modal-edit-remaining-tokens' : null
            } only %}

            {% include '_molecules/stat-card/stat-card.html.twig' with {
                label: 'Tokens consommés',
                value: userToken.tokenUsed|number_format(0, ',', ' '),
                icon: 'chart',
                variant: 'warning',
                size: 'lg',
                layout: 'vertical'
            } only %}

            {% include '_molecules/stat-card/stat-card.html.twig' with {
                label: 'Tokens mensuels',
                value: userMonthlyAllocation|number_format(0, ',', ' '),
                detail: userContracts|length ~ ' contrat' ~ (userContracts|length > 1 ? 's' : '') ~ ' actif' ~ (userContracts|length > 1 ? 's' : ''),
                icon: 'token',
                variant: 'success',
                size: 'lg',
                layout: 'vertical'
            } only %}

            {% include '_molecules/stat-card/stat-card.html.twig' with {
                label: 'Énergie consommée',
                value: userToken.energyConsumptionWh|number_format(1, ',', ' ') ~ ' Wh',
                detail: '≈ ' ~ co2|number_format(2, ',', ' ') ~ ' kg CO2',
                icon: 'bolt',
                variant: 'warning',
                size: 'lg',
                layout: 'vertical'
            } only %}
        </section>
    {% endif %}

    {# ================================================================
       SECTION: INFORMATIONS DU COMPTE (Grille 2 colonnes)
       ================================================================ #}
    <section class="mb-20">
        {% include '_molecules/section-divider/section-divider.html.twig' with {
            title: 'Informations du compte',
            icon: 'user',
            iconColor: 'primary'
        } only %}

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
            {# Colonne 1: Profil #}
            {% embed '_molecules/card/card.html.twig' with {
                title: 'Profil',
                icon: 'user',
                iconColor: 'primary'
            } %}
                {% block body %}
                    <div class="space-y-0 -mx-6 -my-6">
                        <div class="px-6 py-4 border-b border-gray-100">
                            {% include '_molecules/data-row/data-row.html.twig' with {
                                label: 'Prénom',
                                value: user.firstName,
                                size: 'lg'
                            } only %}
                        </div>
                        <div class="px-6 py-4 border-b border-gray-100">
                            {% include '_molecules/data-row/data-row.html.twig' with {
                                label: 'Nom',
                                value: user.lastName,
                                size: 'lg'
                            } only %}
                        </div>
                        <div class="px-6 py-4 border-b border-gray-100">
                            {% include '_molecules/data-row/data-row.html.twig' with {
                                label: 'Email',
                                value: user.email,
                                size: 'lg'
                            } only %}
                        </div>
                        <div class="px-6 py-4 border-b border-gray-100">
                            {% include '_molecules/data-row/data-row.html.twig' with {
                                label: 'Entreprise',
                                action: user.company ? { label: user.company.name, href: path('admin_company_show', {uuid: user.company.uuid}) } : null,
                                value: not user.company ? 'Aucune' : null,
                                valueColor: not user.company ? 'muted' : null,
                                size: 'lg'
                            } only %}
                        </div>
                        <div class="px-6 py-4 border-b border-gray-100">
                            {% set roleConfig = 'ROLE_ADMIN' in user.roles
                                ? { label: 'Administrateur', color: 'error' }
                                : ('ROLE_COMPANY_MANAGER' in user.roles
                                    ? { label: 'Gestionnaire', color: 'info' }
                                    : ('ROLE_COMMERCIAL' in user.roles
                                        ? { label: 'Commercial', color: 'success' }
                                        : { label: 'Utilisateur', color: 'primary' })) %}
                            {% include '_molecules/data-row/data-row.html.twig' with {
                                label: 'Rôle',
                                tag: roleConfig,
                                size: 'lg'
                            } only %}
                        </div>
                        <div class="px-6 py-4">
                            {% include '_molecules/data-row/data-row.html.twig' with {
                                label: 'Inscription',
                                value: user.createdAt|date('d/m/Y à H:i'),
                                size: 'lg'
                            } only %}

                            {# Source d'acquisition (« Comment nous avez-vous connu ? ») #}
                            {% set srcChoices = constant('App\\Config\\ReferralSourceConfig::CHOICES') %}
                            {% set srcLabel = user.referralSource ? (srcChoices[user.referralSource]|default(user.referralSource)) : null %}
                            {% if srcLabel and user.referralSourceDetail %}{% set srcLabel = srcLabel ~ ' — ' ~ user.referralSourceDetail %}{% endif %}
                            {% include '_molecules/data-row/data-row.html.twig' with {
                                label: 'Comment connu',
                                value: srcLabel ?? '—',
                                valueColor: srcLabel ? null : 'muted',
                                size: 'lg'
                            } only %}

                            {% if user.recruitedBy %}
                                {% include '_molecules/data-row/data-row.html.twig' with {
                                    label: 'Parrainé par',
                                    action: { label: user.recruitedBy.referralCode ~ (user.recruitedBy.user ? ' · ' ~ user.recruitedBy.user.fullName : ''), href: path('admin_commercial_show', {id: user.recruitedBy.id}) },
                                    size: 'lg'
                                } only %}
                            {% endif %}
                        </div>
                    </div>
                {% endblock %}
            {% endembed %}

            {# Colonne 2: Sécurité & Historique #}
            {% embed '_molecules/card/card.html.twig' with {
                title: 'Sécurité & Historique',
                icon: 'shield',
                iconColor: 'info'
            } %}
                {% block body %}
                    <div class="space-y-0 -mx-6 -my-6">
                        <div class="px-6 py-4 border-b border-gray-100">
                            {% include '_molecules/data-row/data-row.html.twig' with {
                                label: 'Authentification',
                                tag: user.googleId
                                    ? { label: 'Google SSO', color: 'info' }
                                    : { label: 'Email / Mot de passe', color: 'primary' },
                                size: 'lg'
                            } only %}
                        </div>
                        <div class="px-6 py-4 border-b border-gray-100">
                            {% include '_molecules/data-row/data-row.html.twig' with {
                                label: 'Email vérifié',
                                tag: user.isEmailVerified
                                    ? { label: 'Vérifié', color: 'success' }
                                    : { label: 'Non vérifié', color: 'warning' },
                                value: user.emailVerifiedAt ? user.emailVerifiedAt|date('d/m/Y à H:i') : null,
                                size: 'lg'
                            } only %}
                        </div>
                        <div class="px-6 py-4 border-b border-gray-100">
                            {% include '_molecules/data-row/data-row.html.twig' with {
                                label: 'CGU acceptées',
                                value: user.cgaAcceptedAt ? user.cgaAcceptedAt|date('d/m/Y à H:i') : 'Non acceptées',
                                valueColor: not user.cgaAcceptedAt ? 'muted' : null,
                                size: 'lg'
                            } only %}
                        </div>
                        <div class="px-6 py-4 border-b border-gray-100">
                            {% include '_molecules/data-row/data-row.html.twig' with {
                                label: 'Beta testeur',
                                tag: user.isBetaTester
                                    ? { label: 'Oui', color: 'warning' }
                                    : { label: 'Non', color: 'neutral' },
                                size: 'lg'
                            } only %}
                        </div>
                        <div class="px-6 py-4">
                            {% include '_molecules/data-row/data-row.html.twig' with {
                                label: 'Dernière mise à jour',
                                value: user.updatedAt ? user.updatedAt|date('d/m/Y à H:i') : 'Jamais',
                                valueColor: not user.updatedAt ? 'muted' : null,
                                size: 'lg'
                            } only %}
                        </div>
                    </div>
                {% endblock %}
            {% endembed %}
        </div>
    </section>

    {# ================================================================
       SECTION: UTILISATION PAR OUTILS
       ================================================================ #}
    {% if tokensByTool is defined and tokensByTool|length > 0 %}
        <section class="mb-16">
            {% include '_molecules/section-divider/section-divider.html.twig' with {
                title: 'Utilisation par outils',
                icon: 'chart',
                iconColor: 'warning'
            } only %}

            <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
                <div class="p-8 grid grid-cols-1 lg:grid-cols-2 gap-8">
                    {# Graphique Donut #}
                    {% set chartData = [] %}
                    {% for toolData in tokensByTool %}
                        {% set chartData = chartData|merge([toolData]) %}
                    {% endfor %}
                    <div class="relative flex items-center justify-center" style="height: 280px;">
                        <canvas
                            data-controller="admin--tool-usage-chart"
                            data-admin--tool-usage-chart-data-value="{{ chartData|json_encode }}"
                            data-admin--tool-usage-chart-colors-value="{{ tool_color_hex|json_encode|e('html_attr') }}"
                            style="display: block; max-height: 100%; max-width: 100%;">
                        </canvas>
                    </div>

                    {# Détails par outil - couleurs cohérentes avec le dashboard #}
                    <div class="flex flex-col gap-3 overflow-y-auto scrollbar-thin pr-1" style="height: 280px;">
                        {% for toolData in tokensByTool %}
                            {% set tToken = tool_colors[toolData.code] ?? 'primary' %}
                            {% set tHex = tool_color_hex[toolData.code] ?? '12, 129, 228' %}
                            {% set tHexFull = (tool_color_details[toolData.code] ?? {}).primary ?? null %}
                            {% set tHexSecondary = (tool_color_details[toolData.code] ?? {}).secondary ?? null %}

                            <div class="flex items-center gap-4 p-3 rounded-xl transition-all duration-200 hover:shadow-sm"
                                 style="background: rgba({{ tHex }}, 0.08); border: 1px solid rgba({{ tHex }}, 0.2);">
                                {# Icône de l'outil #}
                                <div class="w-10 h-10 flex items-center justify-center flex-shrink-0">
                                    {% include '_atoms/icon/icon.html.twig' with {
                                        name: 'bubul-' ~ toolData.code,
                                        size: 'xl',
                                        color: tToken,
                                        colorPrimary: tHexFull,
                                        colorSecondary: tHexSecondary
                                    } only %}
                                </div>

                                {# Nom + Tokens #}
                                <div class="flex-1 min-w-0">
                                    <span class="block text-sm font-bold text-gray-700">{{ toolData.name }}</span>
                                    <span class="block text-lg font-bold text-gray-900">{{ toolData.tokens|number_format(0, ',', ' ') }} tokens</span>
                                </div>

                                {# Énergie #}
                                <div class="text-right">
                                    <span class="text-sm text-gray-500">{{ toolData.energy|number_format(2, ',', ' ') }} Wh</span>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </section>
    {% endif %}

    {# ================================================================
       SECTION: EMPREINTE ÉCOLOGIQUE
       ================================================================ #}
    <section class="mb-20">
        {% include '_molecules/section-divider/section-divider.html.twig' with {
            title: 'Empreinte <span class="italic text-success">écologique</span>',
            subtitle: 'Consommation globale',
            icon: 'earth',
            iconColor: 'success'
        } only %}

        {% include '_organisms/eco-footprint/eco-footprint.html.twig' with {
            totalWh: ecoData.totalWh,
            period: ecoData.period,
            weeklyData: ecoData.weeklyData,
            weekDelta: ecoData.weekDelta
        } only %}
    </section>

    {# ================================================================
       SECTION: ACTIVITÉS & CONTRATS
       ================================================================ #}
    <section class="mb-20">
        {% include '_molecules/section-divider/section-divider.html.twig' with {
            title: 'Activités & Contrats',
            icon: 'calendar',
            iconColor: 'info'
        } only %}

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
            {# Activités récentes #}
            {% include '_organisms/activity-list/activity-list.html.twig' with {
                activities: recentActivities|default([]),
                title: 'Activités récentes',
                emptyTitle: 'Aucune activité récente',
                emptyDesc: 'Les activités de cet utilisateur apparaîtront ici.'
            } only %}

            {# Contrats actifs #}
            {% include '_organisms/contract-list/contract-list.html.twig' with {
                contracts: userContracts|default([]),
                title: 'Contrats actifs',
                emptyTitle: 'Aucun contrat',
                emptyDesc: "Cet utilisateur n'a pas de contrat associé."
            } only %}
        </div>
    </section>

    {# ================================================================
       SECTION: GESTION DU COMPTE
       ================================================================ #}
    {% if user != app.user %}
        <section class="mb-20">
            {% include '_molecules/section-divider/section-divider.html.twig' with {
                title: 'Gestion du compte',
                icon: 'settings',
                iconColor: 'error'
            } only %}

            <div class="flex flex-col gap-6">
                {# Vérification email — renvoi d'invitation #}
                {% if not user.isEmailVerified %}
                    {% include '_molecules/status-zone/status-zone.html.twig' with {
                        title: 'Vérification email',
                        description: "L'utilisateur n'a pas encore vérifié son adresse email et activé son compte. Vous pouvez lui renvoyer l'email d'invitation.",
                        icon: 'mail',
                        variant: 'warning',
                        buttonLabel: 'Renvoyer l\'invitation',
                        buttonIcon: 'send',
                        modalId: 'modal-resend-verification'
                    } only %}
                {% endif %}

                {# Réinitialisation du mot de passe #}
                {% include '_molecules/status-zone/status-zone.html.twig' with {
                    title: 'Mot de passe',
                    description: "Générer un nouveau mot de passe aléatoire et l'envoyer par email à l'utilisateur.",
                    icon: 'key',
                    variant: 'neutral',
                    buttonLabel: 'Réinitialiser',
                    buttonIcon: 'refresh',
                    modalId: 'modal-reset-password'
                } only %}

                {# Statut du compte #}
                {% include '_molecules/status-zone/status-zone.html.twig' with {
                    title: 'Statut du compte',
                    description: user.isActive
                        ? "Ce compte est actuellement <strong>activé</strong>. L'utilisateur peut accéder à la plateforme."
                        : "Ce compte est actuellement <strong>désactivé</strong>. L'utilisateur ne peut pas se connecter.",
                    icon: 'power',
                    variant: user.isActive ? 'success' : 'warning',
                    buttonLabel: user.isActive ? 'Désactiver' : 'Activer',
                    buttonIcon: 'power',
                    buttonVariant: user.isActive ? 'warning' : 'success',
                    modalId: 'modal-toggle-status'
                } only %}

                {# Suppression du compte — admin uniquement #}
                {% if isAdmin %}
                    {% include '_molecules/status-zone/status-zone.html.twig' with {
                        title: 'Suppression du compte',
                        description: "Supprimer définitivement ce compte. <strong>Cette action est irréversible.</strong>",
                        icon: 'trash',
                        variant: 'error',
                        buttonLabel: 'Supprimer',
                        buttonIcon: 'trash',
                        buttonVariant: 'error',
                        modalId: 'modal-delete-user'
                    } only %}
                {% endif %}
            </div>
        </section>
    {% endif %}

</div>

{# ================================================================
   MODAL: RÉINITIALISER MOT DE PASSE
   ================================================================ #}
{% if user != app.user %}
    {% embed '_molecules/modal/modal.html.twig' with {
        id: 'modal-reset-password',
        title: 'Réinitialiser le mot de passe',
        subtitle: user.fullName,
        variant: 'primary',
        size: 'md'
    } %}
        {% block body %}
            <p class="text-gray-600 mb-4">
                Un nouveau mot de passe aléatoire sera généré et envoyé par email à <strong>{{ user.email }}</strong>.
            </p>
            <p class="text-sm text-gray-500">
                L'ancien mot de passe ne sera plus valide.
            </p>
        {% endblock %}
        {% block footer %}
            <form action="{{ path('admin_user_reset_password', { uuid: user.uuid }) }}" method="POST" class="flex items-center justify-between w-full gap-3">
                <input type="hidden" name="_token" value="{{ csrf_token('reset-password-' ~ user.uuid) }}">
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Annuler',
                    variant: 'ghost',
                    size: 'lg',
                    type: 'button',
                    attr: { onclick: "closeModal('modal-reset-password')" }
                } only %}
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Réinitialiser',
                    variant: 'primary',
                    size: 'lg',
                    icon: 'refresh',
                    type: 'submit'
                } only %}
            </form>
        {% endblock %}
    {% endembed %}

    {# MODAL: RENVOYER EMAIL DE VÉRIFICATION #}
    {% if not user.isEmailVerified %}
        {% embed '_molecules/modal/modal.html.twig' with {
            id: 'modal-resend-verification',
            title: 'Renvoyer l\'invitation',
            subtitle: user.fullName,
            variant: 'primary',
            size: 'md'
        } %}
            {% block body %}
                <p class="text-gray-600 mb-4">
                    Un nouvel email d'invitation sera envoyé à <strong>{{ user.email }}</strong> avec un lien valable 24 heures pour activer son compte.
                </p>
            {% endblock %}
            {% block footer %}
                <form action="{{ path('admin_user_resend_verification', { uuid: user.uuid }) }}" method="POST" class="flex items-center justify-between w-full gap-3">
                    <input type="hidden" name="_token" value="{{ csrf_token('resend-verification-' ~ user.uuid) }}">
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Annuler',
                        variant: 'ghost',
                        size: 'lg',
                        type: 'button',
                        attr: { onclick: "closeModal('modal-resend-verification')" }
                    } only %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Renvoyer',
                        variant: 'primary',
                        size: 'lg',
                        icon: 'send',
                        type: 'submit'
                    } only %}
                </form>
            {% endblock %}
        {% endembed %}
    {% endif %}

    {# MODAL: TOGGLE STATUT #}
    {% embed '_molecules/modal/modal.html.twig' with {
        id: 'modal-toggle-status',
        title: user.isActive ? 'Désactiver le compte' : 'Activer le compte',
        subtitle: user.fullName,
        variant: user.isActive ? 'warning' : 'success',
        size: 'md'
    } %}
        {% block body %}
            <p class="text-gray-600 mb-4">
                {% if user.isActive %}
                    L'utilisateur <strong>{{ user.fullName }}</strong> ne pourra plus se connecter à la plateforme.
                {% else %}
                    L'utilisateur <strong>{{ user.fullName }}</strong> pourra à nouveau se connecter à la plateforme.
                {% endif %}
            </p>
            <p class="text-sm text-gray-500">
                Cette action prendra effet immédiatement.
            </p>
        {% endblock %}
        {% block footer %}
            <form action="{{ path('admin_user_toggle', { uuid: user.uuid }) }}" method="POST" class="flex items-center justify-between w-full gap-3">
                <input type="hidden" name="_token" value="{{ csrf_token('toggle-user-' ~ user.uuid) }}">
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Annuler',
                    variant: 'ghost',
                    size: 'lg',
                    type: 'button',
                    attr: { onclick: "closeModal('modal-toggle-status')" }
                } only %}
                {% include '_atoms/button/button.html.twig' with {
                    label: user.isActive ? 'Désactiver' : 'Activer',
                    variant: user.isActive ? 'warning' : 'success',
                    size: 'lg',
                    icon: 'power',
                    type: 'submit'
                } only %}
            </form>
        {% endblock %}
    {% endembed %}

    {# MODAL: SUPPRESSION DU COMPTE — admin uniquement #}
    {% if isAdmin %}
        {% include 'admin/users/_modal_delete.html.twig' with {
            user: user,
            modal_id: 'modal-delete-user'
        } only %}
    {% endif %}
{% endif %}

{# ================================================================
   MODAL: ÉDITER LES TOKENS RESTANTS
   ================================================================ #}
{% if isAdmin and userToken %}
    {% embed '_molecules/modal/modal.html.twig' with {
        id: 'modal-edit-remaining-tokens',
        title: 'Tokens restants',
        subtitle: user.fullName,
        variant: 'primary',
        size: 'md'
    } %}
        {% block body %}
            <p class="text-gray-600 mb-4">
                Solde actuel : <strong>{{ userToken.tokensRemaining|number_format(0, ',', ' ') }} tokens</strong>
                <span class="text-sm text-gray-400 ml-1">({{ userToken.tokenUsed|number_format(0, ',', ' ') }} consommés)</span>
            </p>
            <label class="block text-sm font-semibold text-gray-700 mb-2" for="remaining-tokens-input">
                Nouveau solde (tokens restants)
            </label>
            <input
                id="remaining-tokens-input"
                type="number"
                name="tokens"
                form="form-set-remaining-tokens"
                min="0"
                value="{{ userToken.tokensRemaining }}"
                class="w-full h-10 px-4 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
                placeholder="ex: 50000"
            >
        {% endblock %}
        {% block footer %}
            <form id="form-set-remaining-tokens"
                  action="{{ path('admin_user_set_remaining_tokens', { uuid: user.uuid }) }}"
                  method="POST"
                  class="flex items-center justify-between w-full gap-3">
                <input type="hidden" name="_token" value="{{ csrf_token('set-remaining-tokens-' ~ user.uuid) }}">
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Annuler',
                    variant: 'ghost',
                    size: 'lg',
                    type: 'button',
                    attr: { onclick: "closeModal('modal-edit-remaining-tokens')" }
                } only %}
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Enregistrer',
                    variant: 'primary',
                    size: 'lg',
                    icon: 'check',
                    type: 'submit'
                } only %}
            </form>
        {% endblock %}
    {% endembed %}
{% endif %}

{# Historique des actions admin (admin uniquement) #}
{% if isAdmin %}
    <div class="max-w-[1400px] mx-auto px-4 sm:px-6 pb-8">
        {% include '_organisms/activity-log/activity-log-section.html.twig' with { logs: logs ?? [] } only %}
    </div>
{% endif %}

{% endblock %}