{% extends "base.html" %}

{% block title %}Registrar Usuario - {{ config.APP_NAME }}{% endblock %}

{% block content %}
<div class="px-4 sm:px-6 lg:px-8">
    <!-- Header -->
    <div class="mb-8">
        <div class="md:flex md:items-center md:justify-between">
            <div class="flex-1 min-w-0">
                <h2 class="text-3xl font-bold leading-7 text-gray-900 dark:text-white sm:text-4xl gradient-text">
                    Registrar Nuevo Usuario
                </h2>
                <p class="mt-2 text-lg text-gray-600 dark:text-gray-400">
                    Crea una nueva cuenta de usuario en el sistema con permisos específicos
                </p>
            </div>
            <div class="mt-4 flex md:mt-0 md:ml-4">
                <a href="{{ url_for('admin_users') }}" class="btn-secondary">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Volver a Usuarios
                </a>
            </div>
        </div>
    </div>

    <!-- Form -->
    <div class="card shadow-xl animate-fade-in-up">
        <form method="POST" class="p-6">
            {{ form.hidden_tag() }}

            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                <!-- Nombre de Usuario -->
                <div>
                    <div class="form-group">
                        {{ form.username.label(class="form-label") }}
                        <div class="relative">
                            {{ form.username(class="form-input focus-ring pr-10", placeholder="Ej: jsmith, admin, usuario123") }}
                            <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                <i class="fas fa-user text-gray-400"></i>
                            </div>
                        </div>
                        {% if form.username.errors %}
                            {% for error in form.username.errors %}
                                <p class="form-error">{{ error }}</p>
                            {% endfor %}
                        {% endif %}
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Debe ser único en el sistema</p>
                    </div>
                </div>

                <!-- Correo Electrónico -->
                <div>
                    <div class="form-group">
                        {{ form.email.label(class="form-label") }}
                        <div class="relative">
                            {{ form.email(class="form-input focus-ring pr-10", placeholder="usuario@empresa.com") }}
                            <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
                                <i class="fas fa-envelope text-gray-400"></i>
                            </div>
                        </div>
                        {% if form.email.errors %}
                            {% for error in form.email.errors %}
                                <p class="form-error">{{ error }}</p>
                            {% endfor %}
                        {% endif %}
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Se usará para notificaciones</p>
                    </div>
                </div>

                <!-- Contraseña -->
                <div>
                    <div class="form-group">
                        {{ form.password.label(class="form-label") }}
                        <div class="relative">
                            {{ form.password(class="form-input focus-ring pr-20", type="password", id="passwordField", placeholder="Mínimo 8 caracteres") }}
                            <div class="absolute inset-y-0 right-0 flex items-center space-x-2 pr-3">
                                <button type="button" onclick="togglePassword('passwordField', 'passwordEye')" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-200">
                                    <i class="fas fa-eye" id="passwordEye"></i>
                                </button>
                            </div>
                        </div>
                        {% if form.password.errors %}
                            {% for error in form.password.errors %}
                                <p class="form-error">{{ error }}</p>
                            {% endfor %}
                        {% endif %}
                        <div id="passwordStrength" class="mt-2"></div>
                    </div>
                </div>

                <!-- Confirmar Contraseña -->
                <div>
                    <div class="form-group">
                        {{ form.password_confirm.label(class="form-label") }}
                        <div class="relative">
                            {{ form.password_confirm(class="form-input focus-ring pr-10", type="password", id="confirmPasswordField", placeholder="Repetir contraseña") }}
                            <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
                                <button type="button" onclick="togglePassword('confirmPasswordField', 'confirmPasswordEye')" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors duration-200">
                                    <i class="fas fa-eye" id="confirmPasswordEye"></i>
                                </button>
                            </div>
                        </div>
                        {% if form.password_confirm.errors %}
                            {% for error in form.password_confirm.errors %}
                                <p class="form-error">{{ error }}</p>
                            {% endfor %}
                        {% endif %}
                        <div id="passwordMatch" class="mt-2"></div>
                    </div>
                </div>

                <!-- Rol del Usuario -->
                <div>
                    <div class="form-group">
                        {{ form.role.label(class="form-label") }}
                        {{ form.role(class="form-select focus-ring", onchange="updateRoleDescription()") }}
                        {% if form.role.errors %}
                            {% for error in form.role.errors %}
                                <p class="form-error">{{ error }}</p>
                            {% endfor %}
                        {% endif %}
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Define los permisos del usuario</p>
                    </div>
                </div>

                <!-- Departamento -->
                <div>
                    <div class="form-group">
                        {{ form.department_id.label(class="form-label") }}
                        {{ form.department_id(class="form-select focus-ring") }}
                        {% if form.department_id.errors %}
                            {% for error in form.department_id.errors %}
                                <p class="form-error">{{ error }}</p>
                            {% endfor %}
                        {% endif %}
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Grupo de trabajo del usuario</p>
                    </div>
                </div>
            </div>

            <!-- Descripción de Roles -->
            <div class="mt-8 p-6 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 rounded-xl border border-blue-200 dark:border-gray-600">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                    <i class="fas fa-info-circle mr-3 text-blue-500"></i>
                    Descripción de Roles
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <!-- Solo Lectura -->
                    <div class="role-card" data-role="readonly">
                        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg border-2 border-green-200 dark:border-green-700 transition-all duration-200 hover:shadow-md">
                            <div class="flex items-center mb-3">
                                <div class="w-10 h-10 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-eye text-green-600 dark:text-green-400"></i>
                                </div>
                                <div class="ml-3">
                                    <h4 class="font-semibold text-green-700 dark:text-green-300">Solo Lectura</h4>
                                </div>
                            </div>
                            <p class="text-sm text-gray-600 dark:text-gray-400">
                                Puede ver contraseñas de su departamento pero no editarlas ni crear nuevas.
                            </p>
                            <div class="mt-3 space-y-1">
                                <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
                                    <i class="fas fa-check text-green-500 mr-2"></i>Ver contraseñas
                                </div>
                                <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
                                    <i class="fas fa-times text-red-500 mr-2"></i>Crear/Editar
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Editor -->
                    <div class="role-card" data-role="editor">
                        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg border-2 border-yellow-200 dark:border-yellow-700 transition-all duration-200 hover:shadow-md">
                            <div class="flex items-center mb-3">
                                <div class="w-10 h-10 bg-yellow-100 dark:bg-yellow-900/30 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-edit text-yellow-600 dark:text-yellow-400"></i>
                                </div>
                                <div class="ml-3">
                                    <h4 class="font-semibold text-yellow-700 dark:text-yellow-300">Editor</h4>
                                </div>
                            </div>
                            <p class="text-sm text-gray-600 dark:text-gray-400">
                                Puede crear, editar y eliminar contraseñas de su departamento.
                            </p>
                            <div class="mt-3 space-y-1">
                                <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
                                    <i class="fas fa-check text-green-500 mr-2"></i>Ver/Crear/Editar
                                </div>
                                <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
                                    <i class="fas fa-check text-green-500 mr-2"></i>Su departamento
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Administrador -->
                    <div class="role-card" data-role="admin">
                        <div class="bg-white dark:bg-gray-800 p-4 rounded-lg border-2 border-red-200 dark:border-red-700 transition-all duration-200 hover:shadow-md">
                            <div class="flex items-center mb-3">
                                <div class="w-10 h-10 bg-red-100 dark:bg-red-900/30 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-crown text-red-600 dark:text-red-400"></i>
                                </div>
                                <div class="ml-3">
                                    <h4 class="font-semibold text-red-700 dark:text-red-300">Administrador</h4>
                                </div>
                            </div>
                            <p class="text-sm text-gray-600 dark:text-gray-400">
                                Control total del sistema, usuarios y todos los departamentos.
                            </p>
                            <div class="mt-3 space-y-1">
                                <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
                                    <i class="fas fa-check text-green-500 mr-2"></i>Control total
                                </div>
                                <div class="flex items-center text-xs text-gray-500 dark:text-gray-400">
                                    <i class="fas fa-check text-green-500 mr-2"></i>Gestionar usuarios
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Submit Buttons -->
            <div class="flex justify-end space-x-3 pt-8 mt-8 border-t border-gray-200 dark:border-gray-700">
                <a href="{{ url_for('admin_users') }}" class="btn-secondary">
                    <i class="fas fa-times mr-2"></i>
                    Cancelar
                </a>
                <button type="submit" class="btn-primary shadow-glow">
                    <i class="fas fa-user-plus mr-2"></i>
                    Crear Usuario
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Password visibility toggle
function togglePassword(fieldId, eyeId) {
    const field = document.getElementById(fieldId);
    const eye = document.getElementById(eyeId);

    if (field.type === 'password') {
        field.type = 'text';
        eye.classList.remove('fa-eye');
        eye.classList.add('fa-eye-slash');
    } else {
        field.type = 'password';
        eye.classList.remove('fa-eye-slash');
        eye.classList.add('fa-eye');
    }
}

// Password strength checker
function checkPasswordStrength(password) {
    if (!password) return null;

    let score = 0;

    // Length check
    if (password.length >= 8) score++;
    if (password.length >= 12) score++;
    if (password.length >= 16) score++;

    // Character variety
    if (/[a-z]/.test(password)) score++;
    if (/[A-Z]/.test(password)) score++;
    if (/\d/.test(password)) score++;
    if (/[^a-zA-Z\d]/.test(password)) score++;

    // Common patterns (negative score)
    if (/(.)\1{2,}/.test(password)) score--;
    if (/123|abc|qwe/i.test(password)) score--;

    let strength = '';
    let strengthClass = '';

    if (score >= 6) {
        strength = 'Muy Fuerte';
        strengthClass = 'badge-success';
    } else if (score >= 5) {
        strength = 'Fuerte';
        strengthClass = 'badge-primary';
    } else if (score >= 3) {
        strength = 'Moderada';
        strengthClass = 'badge-warning';
    } else if (score >= 1) {
        strength = 'Débil';
        strengthClass = 'badge-warning';
    } else {
        strength = 'Muy Débil';
        strengthClass = 'badge-error';
    }

    return { strength, strengthClass, score };
}

// Update password strength display
function updatePasswordStrength() {
    const password = document.getElementById('passwordField').value;
    const strengthDiv = document.getElementById('passwordStrength');

    if (!password) {
        strengthDiv.innerHTML = '';
        return;
    }

    const result = checkPasswordStrength(password);
    if (result) {
        strengthDiv.innerHTML = `
            <div class="flex items-center space-x-3">
                <span class="badge ${result.strengthClass}">
                    Fortaleza: ${result.strength}
                </span>
                ${/[^a-zA-Z\d]/.test(password) ? '<span class="text-xs text-green-600 dark:text-green-400"><i class="fas fa-check mr-1"></i>Incluye símbolos</span>' : ''}
            </div>
        `;
    }

    // Also check password match
    checkPasswordMatch();
}

// Check password confirmation match
function checkPasswordMatch() {
    const password = document.getElementById('passwordField').value;
    const confirm = document.getElementById('confirmPasswordField').value;
    const matchDiv = document.getElementById('passwordMatch');

    if (!confirm) {
        matchDiv.innerHTML = '';
        return;
    }

    if (password === confirm) {
        matchDiv.innerHTML = '<span class="text-xs text-green-600 dark:text-green-400"><i class="fas fa-check mr-1"></i>Las contraseñas coinciden</span>';
    } else {
        matchDiv.innerHTML = '<span class="text-xs text-red-600 dark:text-red-400"><i class="fas fa-times mr-1"></i>Las contraseñas no coinciden</span>';
    }
}

// Update role description highlighting
function updateRoleDescription() {
    const selectedRole = document.querySelector('select[name="role"]').value;

    // Remove all active states
    document.querySelectorAll('.role-card div').forEach(card => {
        card.classList.remove('ring-2', 'ring-blue-500', 'ring-offset-2');
    });

    // Add active state to selected role
    const activeCard = document.querySelector(`[data-role="${selectedRole}"] div`);
    if (activeCard) {
        activeCard.classList.add('ring-2', 'ring-blue-500', 'ring-offset-2');
    }
}

// Event listeners
document.addEventListener('DOMContentLoaded', function() {
    const passwordField = document.getElementById('passwordField');
    const confirmField = document.getElementById('confirmPasswordField');

    if (passwordField) {
        passwordField.addEventListener('input', updatePasswordStrength);
    }

    if (confirmField) {
        confirmField.addEventListener('input', checkPasswordMatch);
    }

    // Initialize role description
    updateRoleDescription();
});
</script>
{% endblock %}