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

{% block title %}Nouvel Utilisateur{% endblock %}

{% block page_title %}Nouvel Utilisateur{% endblock %}

{% block body %}
<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
        <div class="flex items-center space-x-4">
            <a href="{{ path('app_user_index') }}" 
               class="inline-flex items-center px-3 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded-lg transition-colors duration-200">
                <i class="fas fa-arrow-left mr-2"></i>
                Retour
            </a>
            <div>
                <h2 class="text-2xl font-bold text-gray-900">Créer un nouvel utilisateur</h2>
                <p class="text-gray-600 mt-1">Ajoutez un nouveau membre à votre équipe</p>
            </div>
        </div>
    </div>

    <!-- Formulaire de création -->
    <div class="max-w-4xl mx-auto">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200">
            <div class="px-6 py-4 border-b border-gray-200">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
                        <i class="fas fa-user-plus text-white"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900">Informations de l'utilisateur</h3>
                        <p class="text-sm text-gray-600">Complétez les informations ci-dessous pour créer le compte</p>
                    </div>
                </div>
            </div>
            
            <div class="p-6">
                <form method="post" class="space-y-6">
                    <!-- Informations personnelles -->
                    <div class="section-card bg-gray-50 rounded-lg p-4">
                        <h4 class="text-sm font-medium text-gray-900 mb-4 flex items-center">
                            <i class="fas fa-user text-gray-600 mr-2"></i>
                            Informations personnelles
                        </h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="firstName" class="block text-sm font-medium text-gray-700 mb-2">
                                    Prénom <span class="text-red-500">*</span>
                                </label>
                                <input type="text" 
                                       class="form-field w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200" 
                                       id="firstName" 
                                       name="firstName" 
                                       required
                                       placeholder="Entrez le prénom">
                            </div>
                            <div>
                                <label for="lastName" class="block text-sm font-medium text-gray-700 mb-2">
                                    Nom <span class="text-red-500">*</span>
                                </label>
                                <input type="text" 
                                       class="form-field w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200" 
                                       id="lastName" 
                                       name="lastName" 
                                       required
                                       placeholder="Entrez le nom">
                            </div>
                        </div>
                    </div>

                    <!-- Informations de connexion -->
                    <div class="section-card bg-blue-50 rounded-lg p-4">
                        <h4 class="text-sm font-medium text-gray-900 mb-4 flex items-center">
                            <i class="fas fa-envelope text-blue-600 mr-2"></i>
                            Informations de connexion
                        </h4>
                        <div class="space-y-4">
                            <div>
                                <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                                    Adresse email <span class="text-red-500">*</span>
                                </label>
                                <input type="email" 
                                       class="form-field w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200" 
                                       id="email" 
                                       name="email" 
                                       required
                                       placeholder="utilisateur@example.com">
                                <p class="text-xs text-gray-600 mt-1">
                                    <i class="fas fa-info-circle mr-1"></i>
                                    L'email servira d'identifiant de connexion
                                </p>
                            </div>

                            <div>
                                <label for="password" class="block text-sm font-medium text-gray-700 mb-2">
                                    Mot de passe temporaire <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <input type="password" 
                                           class="form-field w-full px-3 py-2 pr-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200" 
                                           id="password" 
                                           name="password" 
                                           required
                                           placeholder="Minimum 8 caractères"
                                           minlength="8">
                                    <button type="button" 
                                            onclick="togglePassword('password')" 
                                            class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600">
                                        <i class="fas fa-eye" id="password-icon"></i>
                                    </button>
                                </div>
                                <div class="mt-2">
                                    <div class="flex items-center space-x-2">
                                        <div class="flex-1 bg-gray-200 rounded-full h-1.5">
                                            <div id="password-strength" class="bg-red-500 h-1.5 rounded-full transition-all duration-300" style="width: 0%"></div>
                                        </div>
                                        <span id="password-strength-text" class="text-xs text-gray-500">Faible</span>
                                    </div>
                                    <p class="text-xs text-gray-600 mt-1">
                                        <i class="fas fa-key mr-1"></i>
                                        L'utilisateur devra changer ce mot de passe lors de sa première connexion
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Rôle et permissions -->
                    <div class="section-card bg-purple-50 rounded-lg p-4">
                        <h4 class="text-sm font-medium text-gray-900 mb-4 flex items-center">
                            <i class="fas fa-shield-alt text-purple-600 mr-2"></i>
                            Rôle et permissions
                        </h4>
                        <div>
                            <label for="role_id" class="block text-sm font-medium text-gray-700 mb-2">
                                Rôle
                            </label>
                            <select class="form-field w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200" 
                                    id="role_id" 
                                    name="role_id">
                                <option value="">Sélectionner un rôle</option>
                                {% for role in roles %}
                                    <option value="{{ role.id }}">{{ role.name }}</option>
                                {% endfor %}
                            </select>
                            <p class="text-xs text-gray-600 mt-1">
                                <i class="fas fa-info-circle mr-1"></i>
                                Le rôle détermine les permissions de base. Vous pourrez les personnaliser après la création.
                            </p>
                        </div>
                    </div>

                    <!-- Informations importantes -->
                    <div class="bg-amber-50 border border-amber-200 rounded-lg p-4">
                        <div class="flex items-start space-x-3">
                            <div class="flex-shrink-0">
                                <i class="fas fa-lightbulb text-amber-600 mt-0.5"></i>
                            </div>
                            <div>
                                <h4 class="text-sm font-medium text-amber-900 mb-2">Informations importantes</h4>
                                <ul class="text-sm text-amber-800 space-y-1 list-disc list-inside">
                                    <li>L'utilisateur sera automatiquement assigné à votre équipe si vous êtes chef d'équipe</li>
                                    <li>Vous pourrez définir des permissions spécifiques après la création</li>
                                    <li>Un email de bienvenue sera envoyé avec les informations de connexion</li>
                                    <li>Le compte sera activé immédiatement après la création</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- Actions -->
                    <div class="flex flex-col sm:flex-row sm:justify-between space-y-3 sm:space-y-0 pt-6 border-t border-gray-200">
                        <a href="{{ path('app_user_index') }}" 
                           class="inline-flex items-center justify-center px-6 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium rounded-lg transition-colors duration-200">
                            <i class="fas fa-times mr-2"></i>
                            Annuler
                        </a>
                        <button type="submit" 
                                id="submit-btn"
                                class="inline-flex items-center justify-center px-6 py-2.5 bg-green-600 hover:bg-green-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white text-sm font-medium rounded-lg transition-all duration-200">
                            <i class="fas fa-user-plus mr-2"></i>
                            <span id="submit-text">Créer l'utilisateur</span>
                            <div id="submit-spinner" class="hidden ml-2">
                                <div class="animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full"></div>
                            </div>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
// Toggle password visibility
function togglePassword(fieldId) {
    const field = document.getElementById(fieldId);
    const icon = document.getElementById(fieldId + '-icon');
    
    if (field.type === 'password') {
        field.type = 'text';
        icon.classList.remove('fa-eye');
        icon.classList.add('fa-eye-slash');
    } else {
        field.type = 'password';
        icon.classList.remove('fa-eye-slash');
        icon.classList.add('fa-eye');
    }
}

// Password strength indicator
function checkPasswordStrength(password) {
    let strength = 0;
    const strengthBar = document.getElementById('password-strength');
    const strengthText = document.getElementById('password-strength-text');
    
    if (password.length >= 8) strength += 25;
    if (password.match(/[a-z]/)) strength += 25;
    if (password.match(/[A-Z]/)) strength += 25;
    if (password.match(/[0-9]/) || password.match(/[^a-zA-Z0-9]/)) strength += 25;
    
    strengthBar.style.width = strength + '%';
    
    if (strength < 50) {
        strengthBar.className = 'bg-red-500 h-1.5 rounded-full transition-all duration-300';
        strengthText.textContent = 'Faible';
        strengthText.className = 'text-xs text-red-600';
    } else if (strength < 75) {
        strengthBar.className = 'bg-yellow-500 h-1.5 rounded-full transition-all duration-300';
        strengthText.textContent = 'Moyen';
        strengthText.className = 'text-xs text-yellow-600';
    } else {
        strengthBar.className = 'bg-green-500 h-1.5 rounded-full transition-all duration-300';
        strengthText.textContent = 'Fort';
        strengthText.className = 'text-xs text-green-600';
    }
}

// Form validation and interactions
document.addEventListener('DOMContentLoaded', function() {
    const firstName = document.getElementById('firstName');
    const lastName = document.getElementById('lastName');
    const email = document.getElementById('email');
    const password = document.getElementById('password');
    const form = document.querySelector('form');
    const submitBtn = document.getElementById('submit-btn');
    const submitText = document.getElementById('submit-text');
    const submitSpinner = document.getElementById('submit-spinner');
    
    // Auto-generate email suggestion
    function updateEmailSuggestion() {
        if (firstName.value && lastName.value && !email.value) {
            const suggestion = (firstName.value + '.' + lastName.value + '@clinique-genets.fr').toLowerCase();
            email.placeholder = suggestion;
        }
    }
    
    firstName.addEventListener('input', updateEmailSuggestion);
    lastName.addEventListener('input', updateEmailSuggestion);
    
    // Password strength checking
    password.addEventListener('input', function() {
        checkPasswordStrength(this.value);
    });
    
    // Form submission with loading state
    form.addEventListener('submit', function(e) {
        submitBtn.disabled = true;
        submitText.textContent = 'Création en cours...';
        submitSpinner.classList.remove('hidden');
    });
    
    // Real-time form validation
    const inputs = [firstName, lastName, email, password];
    inputs.forEach(input => {
        input.addEventListener('input', function() {
            if (this.checkValidity()) {
                this.classList.remove('border-red-300', 'focus:ring-red-500', 'focus:border-red-500');
                this.classList.add('border-gray-300', 'focus:ring-blue-500', 'focus:border-blue-500');
            } else {
                this.classList.remove('border-gray-300', 'focus:ring-blue-500', 'focus:border-blue-500');
                this.classList.add('border-red-300', 'focus:ring-red-500', 'focus:border-red-500');
            }
        });
    });
});
</script>

<style>
/* Animation pour les champs de formulaire */
.form-field {
    transition: all 0.2s ease;
}

.form-field:focus {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* Animation pour les boutons */
button, a {
    transition: all 0.2s ease;
}

button:hover:not(:disabled), a:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Style pour les sections */
.section-card {
    transition: all 0.2s ease;
}

.section-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Animation du spinner */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Validation styles */
input:invalid:not(:focus):not(:placeholder-shown) {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

input:valid:not(:focus):not(:placeholder-shown) {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .grid {
        grid-template-columns: 1fr;
    }
    
    .section-card {
        padding: 1rem;
    }
}
</style>
{% endblock %}