{# @tailwind-safelist
   bg-primary/10 bg-cohorts/10 bg-warning/10 bg-error/10 bg-success/10 bg-info/10 bg-pink/10
#}
{% extends 'base.html.twig' %}

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

{% block body %}
<div class="max-w-4xl mx-auto">

    {# ================================================================
       HEADER
       ================================================================ #}
    <div class="mb-8">
        {% include '_molecules/breadcrumb/breadcrumb.html.twig' with {
            items: [
                { label: 'Dashboard', href: path('app_dashboard') },
                { label: 'Utilisateurs', href: path('admin_user_list') },
                { label: user.fullName, href: path('admin_user_show', {uuid: user.uuid}) },
                { label: 'Modifier' }
            ]
        } only %}
    </div>

    <div class="flex items-start gap-4 mb-8">
        <div class="w-12 h-12 rounded-xl bg-warning/10 flex items-center justify-center shrink-0">
            {% include '_atoms/icon/icon.html.twig' with { name: 'edit', size: 'lg', color: 'warning' } only %}
        </div>
        <div>
            <h1 class="text-2xl font-bold text-gray-900 font-[Poppins]">Modifier l'utilisateur</h1>
            <p class="text-gray-500 mt-1">{{ user.fullName }} ({{ user.email }})</p>
        </div>
    </div>

    {# ================================================================
       FORMULAIRE
       ================================================================ #}
    {{ form_start(form, {'attr': {'class': 'space-y-8'}}) }}

        {# --------------------------------------------------------
           INFORMATIONS PERSONNELLES
           -------------------------------------------------------- #}
        <section class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100">
                <h2 class="text-lg font-semibold text-gray-900 font-[Poppins] flex items-center gap-2">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'user', size: 'sm', color: 'primary' } only %}
                    Informations personnelles
                </h2>
            </div>
            <div class="p-6 space-y-4">
                {# Email #}
                <div class="space-y-1.5">
                    {{ form_label(form.email, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                    {{ form_widget(form.email, {'attr': {
                        'class': 'w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors',
                        'placeholder': 'exemple@domaine.com'
                    }}) }}
                    {{ form_errors(form.email) }}
                </div>

                {# Prénom / Nom #}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="space-y-1.5">
                        {{ form_label(form.firstName, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                        {{ form_widget(form.firstName, {'attr': {
                            'class': 'w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors',
                            'placeholder': 'Prénom'
                        }}) }}
                        {{ form_errors(form.firstName) }}
                    </div>
                    <div class="space-y-1.5">
                        {{ form_label(form.lastName, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                        {{ form_widget(form.lastName, {'attr': {
                            'class': 'w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors',
                            'placeholder': 'Nom de famille'
                        }}) }}
                        {{ form_errors(form.lastName) }}
                    </div>
                </div>
            </div>
        </section>

        {# --------------------------------------------------------
           ENTREPRISE (admin uniquement)
           -------------------------------------------------------- #}
        {% if form.company is defined %}
        <section class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100">
                <h2 class="text-lg font-semibold text-gray-900 font-[Poppins] flex items-center gap-2">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'buildings', size: 'sm', color: 'primary' } only %}
                    Entreprise
                </h2>
            </div>
            <div class="p-6">
                <div class="space-y-1.5">
                    {{ form_widget(form.company, {'attr': {
                        'class': 'w-full px-4 py-2.5 border border-gray-200 rounded-lg bg-white focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors'
                    }}) }}
                    {{ form_errors(form.company) }}
                    <p class="text-sm text-gray-500 mt-2">L'utilisateur aura accès aux tokens de cette entreprise.</p>
                </div>
            </div>
        </section>
        {% endif %}

        {# --------------------------------------------------------
           RÔLE
           -------------------------------------------------------- #}
        {% set roleStyles = {
            'ROLE_USER': {
                label: 'Utilisateur',
                desc: 'Accès standard aux outils',
                icon: 'user',
                iconColor: 'primary',
                borderColor: '#0C81E4',
                bgColor: 'rgba(12, 129, 228, 0.05)',
                iconBg: 'rgba(12, 129, 228, 0.1)'
            },
            'ROLE_COMPANY_MANAGER': {
                label: 'Gestionnaire',
                desc: 'Gère les utilisateurs de son entreprise',
                icon: 'buildings',
                iconColor: 'info',
                borderColor: '#3B82F6',
                bgColor: 'rgba(59, 130, 246, 0.05)',
                iconBg: 'rgba(59, 130, 246, 0.1)'
            },
            'ROLE_COMMERCIAL': {
                label: 'Commercial',
                desc: 'Apporteur d\'affaires rémunéré à la commission',
                icon: 'wallet',
                iconColor: 'warning',
                borderColor: '#F59E0B',
                bgColor: 'rgba(245, 158, 11, 0.05)',
                iconBg: 'rgba(245, 158, 11, 0.1)'
            },
            'ROLE_ADMIN': {
                label: 'Administrateur',
                desc: 'Accès complet à la plateforme',
                icon: 'settings',
                iconColor: 'error',
                borderColor: '#EF4444',
                bgColor: 'rgba(239, 68, 68, 0.05)',
                iconBg: 'rgba(239, 68, 68, 0.1)'
            }
        } %}

        <section class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-100">
                <h2 class="text-lg font-semibold text-gray-900 font-[Poppins] flex items-center gap-2">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'shield', size: 'sm', color: 'primary' } only %}
                    Rôle
                </h2>
            </div>
            <div class="p-6">
                {% if isSelfEdit|default(false) %}
                    <div class="flex items-start gap-3 p-4 bg-warning/10 border border-warning/20 rounded-xl mb-4">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'info', size: 'sm', color: 'warning' } only %}
                        <p class="text-sm text-warning">Vous ne pouvez pas modifier votre propre rôle.</p>
                    </div>
                {% endif %}

                <div id="role-selector" class="grid grid-cols-1 md:grid-cols-3 gap-4 {{ isSelfEdit|default(false) ? 'opacity-50 pointer-events-none' : '' }}">
                    {% for child in form.role %}
                        {% set roleValue = child.vars.value %}
                        {% set style = roleStyles[roleValue]|default(roleStyles['ROLE_USER']) %}
                        {% set isChecked = child.vars.checked|default(false) %}

                        <div class="role-option relative cursor-pointer group block h-full"
                             data-border-color="{{ style.borderColor }}"
                             data-bg-color="{{ style.bgColor }}"
                             onclick="selectRole(this)">
                            <input type="radio"
                                   name="{{ form.role.vars.full_name }}"
                                   id="{{ child.vars.id }}"
                                   value="{{ roleValue }}"
                                   class="sr-only role-input"
                                   {{ isChecked ? 'checked' : '' }}>
                            <div class="role-card p-4 border-2 rounded-xl transition-all h-full group-hover:border-gray-300"
                                 style="{{ isChecked ? 'border-color: ' ~ style.borderColor ~ '; background: ' ~ style.bgColor ~ ';' : 'border-color: #E5E7EB;' }}">
                                <div class="flex flex-col items-center text-center gap-3">
                                    <div class="w-12 h-12 rounded-xl flex items-center justify-center" style="background: {{ style.iconBg }}">
                                        {% include '_atoms/icon/icon.html.twig' with { name: style.icon, size: 'lg', color: style.iconColor } only %}
                                    </div>
                                    <div>
                                        <span class="block font-semibold text-gray-900">{{ style.label }}</span>
                                        <span class="block text-xs text-gray-500 mt-1">{{ style.desc }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
                {{ form_errors(form.role) }}
                {# Marquer le champ comme rendu pour éviter le doublon via form_end #}
                {% do form.role.setRendered() %}

                {# Taux de commission : visible uniquement pour le rôle Commercial.
                   Sans effet si l'utilisateur a déjà un profil Commercial (le taux
                   existant n'est pas modifié par cet écran). #}
                <div id="commercial-rate-field" class="mt-6 hidden">
                    <label for="commissionRate" class="block text-sm font-medium text-gray-700 mb-1.5">
                        Taux de commission
                    </label>
                    <div class="relative max-w-xs">
                        <input type="number"
                               name="commissionRate"
                               id="commissionRate"
                               min="0"
                               max="100"
                               step="0.01"
                               value="10"
                               class="w-full px-4 py-2.5 pr-9 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors">
                        <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm">%</span>
                    </div>
                    <p class="text-sm text-gray-500 mt-2">Taux appliqué sur la base de commission, en pourcentage (ex : 10 pour 10&nbsp;%). Sans effet si un profil Commercial existe déjà pour cet utilisateur.</p>
                </div>
            </div>
        </section>

        {# --------------------------------------------------------
           ACTIONS
           -------------------------------------------------------- #}
        <div class="flex items-center justify-between pt-4">
            {% include '_atoms/button/button.html.twig' with {
                label: 'Annuler',
                variant: 'ghost',
                size: 'lg',
                href: path('admin_user_show', {uuid: user.uuid})
            } only %}

            {% include '_atoms/button/button.html.twig' with {
                label: 'Enregistrer',
                variant: 'primary',
                size: 'lg',
                type: 'submit'
            } only %}
        </div>

    {{ form_end(form) }}
</div>

<script>
function selectRole(element) {
    const container = document.getElementById('role-selector');
    const input = element.querySelector('.role-input');

    // Décocher tous les autres
    container.querySelectorAll('.role-input').forEach(r => r.checked = false);

    // Cocher celui-ci
    input.checked = true;

    // Mettre à jour les styles de toutes les cartes
    container.querySelectorAll('.role-option').forEach(option => {
        const card = option.querySelector('.role-card');
        const optionInput = option.querySelector('.role-input');

        if (optionInput.checked) {
            card.style.borderColor = option.dataset.borderColor;
            card.style.background = option.dataset.bgColor;
        } else {
            card.style.borderColor = '#E5E7EB';
            card.style.background = 'transparent';
        }
    });

    toggleCommercialRateField();
}

function toggleCommercialRateField() {
    const checked = document.querySelector('#role-selector .role-input:checked');
    const field = document.getElementById('commercial-rate-field');
    if (!field) {
        return;
    }
    field.classList.toggle('hidden', !checked || checked.value !== 'ROLE_COMMERCIAL');
}

document.addEventListener('DOMContentLoaded', toggleCommercialRateField);
</script>
{% endblock %}