{% extends "base.html" %}

{% block title %}Mi Perfil - {{ 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 sm:truncate">
                    Mi Perfil
                </h2>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                    Gestiona tu cuenta y configuración de seguridad
                </p>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Profile Info Card -->
        <div class="lg:col-span-1">
            <div class="bg-white dark:bg-gray-800 shadow-xl rounded-2xl overflow-hidden border border-gray-200 dark:border-gray-700">
                <!-- Profile Header -->
                <div class="bg-gradient-to-br from-indigo-500 to-purple-600 px-6 py-8 text-center">
                    <div class="w-24 h-24 mx-auto bg-white rounded-full flex items-center justify-center shadow-lg mb-4">
                        <span class="text-3xl font-bold text-indigo-600">{{ current_user.username[0].upper() }}</span>
                    </div>
                    <h3 class="text-xl font-bold text-white">{{ current_user.username }}</h3>
                    <p class="text-indigo-100 text-sm">{{ current_user.email }}</p>
                </div>

                <!-- Profile Details -->
                <div class="px-6 py-6 space-y-4">
                    <div class="flex items-center justify-between">
                        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Rol</span>
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium
                            {% if current_user.role == 'admin' %}bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200
                            {% elif current_user.role == 'editor' %}bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200
                            {% else %}bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200{% endif %}">
                            {% if current_user.role == 'admin' %}
                                <i class="fas fa-crown mr-1"></i>Administrador
                            {% elif current_user.role == 'editor' %}
                                <i class="fas fa-edit mr-1"></i>Editor
                            {% else %}
                                <i class="fas fa-eye mr-1"></i>Solo Lectura
                            {% endif %}
                        </span>
                    </div>

                    <div class="flex items-center justify-between">
                        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Departamento</span>
                        <span class="text-sm text-gray-900 dark:text-white">
                            {% if current_user.department %}
                                <i class="fas fa-building mr-1 text-blue-500"></i>
                                {{ current_user.department.name }}
                            {% else %}
                                <span class="text-gray-400 italic">Sin asignar</span>
                            {% endif %}
                        </span>
                    </div>

                    <div class="flex items-center justify-between">
                        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Miembro desde</span>
                        <span class="text-sm text-gray-900 dark:text-white">
                            <i class="fas fa-calendar mr-1 text-green-500"></i>
                            {{ current_user.created_at.strftime('%d/%m/%Y') }}
                        </span>
                    </div>

                    <div class="flex items-center justify-between">
                        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Último acceso</span>
                        <span class="text-sm text-gray-900 dark:text-white">
                            {% if current_user.last_login %}
                                <i class="fas fa-clock mr-1 text-purple-500"></i>
                                {{ current_user.last_login.strftime('%d/%m/%Y %H:%M') }}
                            {% else %}
                                <span class="text-gray-400 italic">Nunca</span>
                            {% endif %}
                        </span>
                    </div>
                </div>
            </div>

            <!-- Security Status Card -->
            <div class="mt-6 bg-white dark:bg-gray-800 shadow-xl rounded-2xl overflow-hidden border border-gray-200 dark:border-gray-700">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                        <i class="fas fa-shield-alt mr-2 text-blue-500"></i>
                        Estado de Seguridad
                    </h3>
                </div>
                <div class="px-6 py-6 space-y-4">
                    <!-- 2FA Status -->
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <i class="fas fa-mobile-alt mr-3 text-gray-400"></i>
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Autenticación 2FA</span>
                        </div>
                        {% if current_user.two_factor_enabled %}
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                            <i class="fas fa-check-circle mr-1"></i>Activado
                        </span>
                        {% else %}
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
                            <i class="fas fa-times-circle mr-1"></i>Desactivado
                        </span>
                        {% endif %}
                    </div>

                    <!-- Session Security -->
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <i class="fas fa-lock mr-3 text-gray-400"></i>
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Sesión Segura</span>
                        </div>
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                            <i class="fas fa-check-circle mr-1"></i>HTTPS
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Settings Cards -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Change Password Card -->
            <div class="bg-white dark:bg-gray-800 shadow-xl rounded-2xl overflow-hidden border border-gray-200 dark:border-gray-700">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                        <i class="fas fa-key mr-2 text-blue-500"></i>
                        Cambiar Contraseña
                    </h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                        Actualiza tu contraseña regularmente para mayor seguridad
                    </p>
                </div>

                <form method="POST" class="px-6 py-6">
                    {{ form.hidden_tag() }}

                    <div class="space-y-6">
                        <div>
                            <label for="{{ form.current_password.id }}" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                Contraseña Actual
                            </label>
                            <div class="relative">
                                {{ form.current_password(class="form-input pr-10", placeholder="Ingresa tu contraseña actual") }}
                                <button type="button" onclick="togglePasswordVisibility('current_password')" class="absolute inset-y-0 right-0 pr-3 flex items-center">
                                    <i id="current_password_icon" class="fas fa-eye text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"></i>
                                </button>
                            </div>
                            {% if form.current_password.errors %}
                                {% for error in form.current_password.errors %}
                                    <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ error }}</p>
                                {% endfor %}
                            {% endif %}
                        </div>

                        <div>
                            <label for="{{ form.new_password.id }}" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                Nueva Contraseña
                            </label>
                            <div class="relative">
                                {{ form.new_password(class="form-input pr-10", placeholder="Ingresa tu nueva contraseña", onkeyup="checkPasswordStrength(this.value)") }}
                                <button type="button" onclick="togglePasswordVisibility('new_password')" class="absolute inset-y-0 right-0 pr-3 flex items-center">
                                    <i id="new_password_icon" class="fas fa-eye text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"></i>
                                </button>
                            </div>
                            <!-- Password Strength Indicator -->
                            <div id="passwordStrength" class="mt-2 hidden">
                                <div class="flex items-center space-x-2">
                                    <div class="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                                        <div id="strengthBar" class="h-2 rounded-full transition-all duration-300"></div>
                                    </div>
                                    <span id="strengthText" class="text-xs font-medium"></span>
                                </div>
                                <div id="strengthSuggestions" class="mt-1 text-xs text-gray-600 dark:text-gray-400"></div>
                            </div>
                            {% if form.new_password.errors %}
                                {% for error in form.new_password.errors %}
                                    <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ error }}</p>
                                {% endfor %}
                            {% endif %}
                        </div>

                        <div>
                            <label for="{{ form.new_password_confirm.id }}" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
                                Confirmar Nueva Contraseña
                            </label>
                            <div class="relative">
                                {{ form.new_password_confirm(class="form-input pr-10", placeholder="Confirma tu nueva contraseña") }}
                                <button type="button" onclick="togglePasswordVisibility('new_password_confirm')" class="absolute inset-y-0 right-0 pr-3 flex items-center">
                                    <i id="new_password_confirm_icon" class="fas fa-eye text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"></i>
                                </button>
                            </div>
                            {% if form.new_password_confirm.errors %}
                                {% for error in form.new_password_confirm.errors %}
                                    <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ error }}</p>
                                {% endfor %}
                            {% endif %}
                        </div>

                        <div class="flex justify-end">
                            <button type="submit" class="btn-primary">
                                <i class="fas fa-save mr-2"></i>
                                Actualizar Contraseña
                            </button>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Two-Factor Authentication Card -->
            <div class="bg-white dark:bg-gray-800 shadow-xl rounded-2xl overflow-hidden border border-gray-200 dark:border-gray-700">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-green-50 to-emerald-50 dark:from-gray-700 dark:to-gray-600">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                        <i class="fas fa-shield-alt mr-2 text-green-500"></i>
                        Autenticación de Dos Factores (2FA)
                    </h3>
                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                        Añade una capa extra de seguridad a tu cuenta con 2FA
                    </p>
                </div>

                <div class="px-6 py-6">
                    {% if current_user.two_factor_enabled %}
                    <!-- 2FA Activated State -->
                    <div class="space-y-6">
                        <!-- Status Display -->
                        <div class="flex items-center">
                            <div class="w-16 h-16 bg-gradient-to-br from-green-400 to-green-600 rounded-xl flex items-center justify-center mr-4 shadow-lg">
                                <i class="fas fa-shield-check text-white text-2xl"></i>
                            </div>
                            <div class="flex-1">
                                <h4 class="text-lg font-bold text-gray-900 dark:text-white flex items-center">
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 mr-3">
                                        <i class="fas fa-check-circle mr-1"></i>Activado
                                    </span>
                                    2FA Configurado
                                </h4>
                                <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                                    Tu cuenta está protegida con autenticación de dos factores
                                </p>
                            </div>
                        </div>

                        <!-- Security Information -->
                        <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-xl p-4">
                            <div class="flex items-start">
                                <div class="flex-shrink-0">
                                    <i class="fas fa-info-circle text-green-400 mt-0.5"></i>
                                </div>
                                <div class="ml-3">
                                    <h5 class="text-sm font-medium text-green-800 dark:text-green-200">Configuración activa</h5>
                                    <div class="mt-2 text-sm text-green-700 dark:text-green-300">
                                        <ul class="list-disc list-inside space-y-1">
                                            <li>Aplicación de autenticación configurada</li>
                                            <li>Códigos de respaldo disponibles</li>
                                            <li>Inicio de sesión seguro activado</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Secret Key Display (Hidden by default) -->
                        <div class="bg-gray-50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 rounded-xl p-4">
                            <div class="flex items-center justify-between mb-3">
                                <h5 class="text-sm font-medium text-gray-700 dark:text-gray-300">
                                    <i class="fas fa-key mr-2 text-gray-400"></i>Clave Secreta
                                </h5>
                                <button type="button" id="toggleSecretBtn" onclick="toggleSecret()" class="text-xs text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 font-medium">
                                    <i class="fas fa-eye mr-1"></i>Mostrar
                                </button>
                            </div>
                            <div id="secretContainer" class="hidden">
                                <div class="flex items-center space-x-2">
                                    <code id="secretKey" class="flex-1 px-3 py-2 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-mono break-all text-gray-700 dark:text-gray-300">
                                        {{ current_user.two_factor_secret or '••••••••••••••••••••••••••••••••' }}
                                    </code>
                                    <button type="button" onclick="copySecret()" class="p-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300" title="Copiar clave">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                </div>
                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
                                    <i class="fas fa-exclamation-triangle mr-1 text-yellow-500"></i>
                                    Guarda esta clave en un lugar seguro. Solo móstrala si necesitas reconfigurar tu aplicación de autenticación.
                                </p>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="flex flex-col sm:flex-row gap-3">
                            <button type="button" onclick="openDisable2FAModal()" class="btn-danger flex-1">
                                <i class="fas fa-times mr-2"></i>
                                Desactivar 2FA
                            </button>
                            <a href="{{ url_for('setup_2fa') }}" class="btn-secondary flex-1">
                                <i class="fas fa-sync mr-2"></i>
                                Reconfigurar
                            </a>
                        </div>
                    </div>
                    {% else %}
                    <!-- 2FA Deactivated State -->
                    <div class="space-y-6">
                        <!-- Status Display -->
                        <div class="flex items-center">
                            <div class="w-16 h-16 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-xl flex items-center justify-center mr-4 shadow-lg">
                                <i class="fas fa-shield-alt text-white text-2xl"></i>
                            </div>
                            <div class="flex-1">
                                <h4 class="text-lg font-bold text-gray-900 dark:text-white flex items-center">
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 mr-3">
                                        <i class="fas fa-exclamation-triangle mr-1"></i>Inactivo
                                    </span>
                                    2FA Desactivado
                                </h4>
                                <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
                                    Tu cuenta podría ser más segura con 2FA activado
                                </p>
                            </div>
                        </div>

                        <!-- Security Recommendation -->
                        <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-xl p-4">
                            <div class="flex items-start">
                                <div class="flex-shrink-0">
                                    <i class="fas fa-exclamation-triangle text-yellow-400 mt-0.5"></i>
                                </div>
                                <div class="ml-3">
                                    <h5 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">Recomendación de seguridad</h5>
                                    <div class="mt-2 text-sm text-yellow-700 dark:text-yellow-300">
                                        <p>La autenticación de dos factores añade una capa extra de protección a tu cuenta. Recomendamos activarla para:</p>
                                        <ul class="list-disc list-inside mt-2 space-y-1">
                                            <li>Proteger contra accesos no autorizados</li>
                                            <li>Cumplir con las mejores prácticas de seguridad</li>
                                            <li>Mantener tus datos seguros</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                       <!-- Botón de Activación Mejorado -->
                        <div class="flex justify-center">
                            <a href="{{ url_for('setup_2fa') }}"
                               class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-gradient-to-r from-green-500 to-emerald-600 text-white font-bold shadow-lg hover:from-green-600 hover:to-emerald-700 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 shadow-glow">
                                <i class="fas fa-shield-alt text-lg"></i>
                                Activar Autenticación 2FA
                            </a>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Activity Summary Card -->
            <div class="bg-white dark:bg-gray-800 shadow-xl rounded-2xl overflow-hidden border border-gray-200 dark:border-gray-700">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-purple-50 to-pink-50 dark:from-gray-700 dark:to-gray-600">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                        <i class="fas fa-chart-line mr-2 text-purple-500"></i>
                        Resumen de Actividad
                    </h3>
                </div>

                <div class="px-6 py-6">
                    <div class="grid grid-cols-2 gap-6">
                        <div class="text-center">
                            <div class="text-3xl font-bold text-blue-600 dark:text-blue-400">
                                {{ current_user.created_passwords|length }}
                            </div>
                            <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                                Contraseñas Creadas
                            </div>
                        </div>
                        <div class="text-center">
                            <div class="text-3xl font-bold text-green-600 dark:text-green-400">
                                {{ current_user.access_logs.count() }}
                            </div>
                            <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                                Accesos Registrados
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal de Confirmación para Desactivar 2FA -->
    {% if current_user.two_factor_enabled %}
    <div id="disable2FAModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden items-center justify-center z-50">
        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl max-w-md mx-4 transform transition-all">
            <div class="p-6">
                <!-- Header del Modal -->
                <div class="flex items-center mb-6">
                    <div class="mx-auto flex-shrink-0 flex items-center justify-center h-16 w-16 rounded-full bg-red-100 dark:bg-red-900">
                        <i class="fas fa-shield-alt text-red-600 dark:text-red-400 text-2xl"></i>
                    </div>
                </div>

                <!-- Contenido del Modal -->
                <div class="text-center">
                    <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-4">
                        Desactivar Autenticación 2FA
                    </h3>
                    <div class="mb-6">
                        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                            ¿Estás seguro de que deseas desactivar la autenticación de dos factores?
                        </p>
                        <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 text-left">
                            <div class="flex items-start">
                                <div class="flex-shrink-0">
                                    <i class="fas fa-exclamation-triangle text-red-400 mt-0.5"></i>
                                </div>
                                <div class="ml-3">
                                    <h4 class="text-sm font-medium text-red-800 dark:text-red-200">Advertencia de Seguridad</h4>
                                    <div class="mt-2 text-sm text-red-700 dark:text-red-300">
                                        <ul class="list-disc list-inside space-y-1">
                                            <li>Tu cuenta será menos segura</li>
                                            <li>Perderás la protección adicional contra accesos no autorizados</li>
                                            <li>Tendrás que reconfigurar 2FA si quieres activarlo de nuevo</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Botones de Acción -->
                    <div class="flex flex-col sm:flex-row gap-3">
                        <button type="button" onclick="closeDisable2FAModal()" class="btn-secondary flex-1">
                            <i class="fas fa-times mr-2"></i>
                            Cancelar
                        </button>
                        <form method="POST" action="{{ url_for('disable_2fa') }}" class="flex-1">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                            <button type="submit" class="btn-danger w-full">
                                <i class="fas fa-shield-alt mr-2"></i>
                                Confirmar Desactivación
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
function togglePasswordVisibility(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');
    }
}

function checkPasswordStrength(password) {
    const strengthContainer = document.getElementById('passwordStrength');
    const strengthBar = document.getElementById('strengthBar');
    const strengthText = document.getElementById('strengthText');
    const suggestionsContainer = document.getElementById('strengthSuggestions');

    if (password.length === 0) {
        strengthContainer.classList.add('hidden');
        return;
    }

    strengthContainer.classList.remove('hidden');

    // Simular verificación de fortaleza (en producción esto debería ser una llamada AJAX)
    let score = 0;
    let suggestions = [];

    // Longitud
    if (password.length >= 12) score += 2;
    else if (password.length >= 8) score += 1;
    else suggestions.push('Usa al menos 8 caracteres');

    // Variedad
    if (/[a-z]/.test(password)) score += 1;
    else suggestions.push('Incluye letras minúsculas');

    if (/[A-Z]/.test(password)) score += 1;
    else suggestions.push('Incluye letras mayúsculas');

    if (/\d/.test(password)) score += 1;
    else suggestions.push('Incluye números');

    if (/[!@#$%^&*()_+\-=\[\]{}|;:,.<>?]/.test(password)) score += 2;
    else suggestions.push('Incluye símbolos');

    // Actualizar barra y texto
    let width, color, text;

    if (score <= 2) {
        width = '20%';
        color = 'bg-red-500';
        text = 'Muy Débil';
    } else if (score <= 4) {
        width = '40%';
        color = 'bg-orange-500';
        text = 'Débil';
    } else if (score <= 6) {
        width = '60%';
        color = 'bg-yellow-500';
        text = 'Moderada';
    } else if (score <= 8) {
        width = '80%';
        color = 'bg-blue-500';
        text = 'Fuerte';
    } else {
        width = '100%';
        color = 'bg-green-500';
        text = 'Muy Fuerte';
    }

    strengthBar.className = `h-2 rounded-full transition-all duration-300 ${color}`;
    strengthBar.style.width = width;
    strengthText.textContent = text;
    strengthText.className = `text-xs font-medium ${color.replace('bg-', 'text-')}`;

    // Mostrar sugerencias
    if (suggestions.length > 0) {
        suggestionsContainer.textContent = 'Sugerencias: ' + suggestions.slice(0, 3).join(', ');
    } else {
        suggestionsContainer.textContent = '¡Excelente contraseña!';
    }
}

function toggleSecret() {
    const secretContainer = document.getElementById('secretContainer');
    const toggleBtn = document.getElementById('toggleSecretBtn');
    const secretKey = document.getElementById('secretKey');

    if (secretContainer.classList.contains('hidden')) {
        secretContainer.classList.remove('hidden');
        toggleBtn.innerHTML = '<i class="fas fa-eye-slash mr-1"></i>Ocultar';
        secretKey.classList.remove('line-clamp-2');
    } else {
        secretContainer.classList.add('hidden');
        toggleBtn.innerHTML = '<i class="fas fa-eye mr-1"></i>Mostrar';
        secretKey.classList.add('line-clamp-2');
    }
}

function copySecret() {
    const secretKey = document.getElementById('secretKey');
    const textArea = document.createElement('textarea');
    textArea.value = secretKey.textContent.trim();
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand('copy');
    document.body.removeChild(textArea);

    // Mostrar mensaje de éxito temporal
    const originalText = secretKey.innerHTML;
    secretKey.innerHTML = '<i class="fas fa-check-circle text-green-500"></i> Copiado';
    setTimeout(() => {
        secretKey.innerHTML = originalText;
    }, 2000);
}

// Abrir modal para desactivar 2FA
function openDisable2FAModal() {
    const modal = document.getElementById('disable2FAModal');
    modal.classList.remove('hidden');
    modal.classList.add('flex');
}

// Cerrar modal para desactivar 2FA
function closeDisable2FAModal() {
    const modal = document.getElementById('disable2FAModal');
    modal.classList.add('hidden');
    modal.classList.remove('flex');
}
</script>
{% endblock %}