{# @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 %}Nouvel utilisateur - {{ isAdmin|default(true) ? 'Admin' : 'Mon entreprise' }}{% 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: 'Nouvel utilisateur' }
            ]
        } only %}
    </div>

    <div class="flex items-start gap-4 mb-8">
        <div class="w-12 h-12 rounded-xl bg-success/10 flex items-center justify-center shrink-0">
            {% include '_atoms/icon/icon.html.twig' with { name: 'user-plus', size: 'lg', color: 'success' } only %}
        </div>
        <div>
            <h1 class="text-2xl font-bold text-gray-900 font-[Poppins]">Nouvel utilisateur</h1>
            <p class="text-gray-500 mt-1">Créez un compte pour un nouveau membre</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
           -------------------------------------------------------- #}
        <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">
                {% if form.company is defined %}
                    {# Admin : peut choisir l'entreprise #}
                    <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 sera automatiquement rattaché à l'entreprise sélectionnée et aura accès à ses tokens.</p>
                    </div>
                {% elseif managerCompany is defined %}
                    {# Manager : entreprise fixe #}
                    <div class="flex items-center gap-4 p-4 bg-gray-50 rounded-xl">
                        {% include '_atoms/avatar/avatar.html.twig' with {
                            name: managerCompany.name,
                            size: 'md'
                        } only %}
                        <div>
                            <span class="block font-semibold text-gray-900">{{ managerCompany.name }}</span>
                            <span class="block text-sm text-gray-500">L'utilisateur sera rattaché à votre entreprise</span>
                        </div>
                    </div>
                {% endif %}
            </div>
        </section>

        {# --------------------------------------------------------
           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">
                {% set roleCount = form.role.children|length %}
                <div id="role-selector" class="grid grid-cols-1 md:grid-cols-{{ roleCount > 2 ? '3' : '2' }} gap-4">
                    {% 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) }}
                {% do form.role.setRendered() %}

                {# Taux de commission : visible uniquement pour le rôle Commercial #}
                <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;%).</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_list')
            } only %}

            {% include '_atoms/button/button.html.twig' with {
                label: 'Créer l\'utilisateur',
                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');

    container.querySelectorAll('.role-input').forEach(r => r.checked = false);
    input.checked = true;

    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', function () {
    // Présélection du rôle Commercial quand on arrive via « Créer un commercial » (?role=commercial)
    if (new URLSearchParams(window.location.search).get('role') === 'commercial') {
        const input = document.querySelector('#role-selector .role-input[value="ROLE_COMMERCIAL"]');
        const option = input ? input.closest('.role-option') : null;
        if (option) {
            selectRole(option);
        }
    }
    toggleCommercialRateField();
});
</script>
{% endblock %}