{% extends "base.html" %}

{% block title %}Configurar Autenticación de Dos Factores - {{ config.APP_NAME }}{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md mx-auto">
        <!-- Header -->
        <div class="text-center mb-8">
            <div class="mx-auto h-16 w-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center mb-4 shadow-lg">
                <i class="fas fa-shield-alt text-white text-2xl"></i>
            </div>
            <h2 class="text-3xl font-bold text-gray-900 dark:text-white">
                Configurar 2FA
            </h2>
            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                Añade una capa extra de seguridad a tu cuenta
            </p>
        </div>

        <!-- Setup Card -->
        <div class="bg-white dark:bg-gray-800 shadow-2xl rounded-2xl p-8 border border-gray-200 dark:border-gray-700">
            <!-- Step Indicator -->
            <div class="mb-8">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="flex items-center justify-center w-8 h-8 bg-blue-600 text-white rounded-full text-sm font-semibold">
                            1
                        </div>
                        <span class="ml-3 text-sm font-medium text-gray-900 dark:text-white">Escanear código QR</span>
                    </div>
                    <div class="flex items-center">
                        <div class="flex items-center justify-center w-8 h-8 bg-gray-300 dark:bg-gray-600 text-gray-600 dark:text-gray-300 rounded-full text-sm font-semibold">
                            2
                        </div>
                        <span class="ml-3 text-sm font-medium text-gray-500 dark:text-gray-400">Verificar código</span>
                    </div>
                </div>
                <div class="mt-2 w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
                    <div class="bg-blue-600 h-2 rounded-full" style="width: 50%"></div>
                </div>
            </div>

            <!-- QR Code Section -->
            <div class="text-center mb-8">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    1. Escanea el código QR
                </h3>
                <div class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-600 p-6 rounded-xl mb-4 shadow-inner">
                    {% if qr_code %}
                    <img src="data:image/png;base64,{{ qr_code }}" alt="Código QR para 2FA" class="mx-auto w-48 h-48 rounded-lg shadow-lg">
                    {% else %}
                    <div class="w-48 h-48 mx-auto bg-gray-200 dark:bg-gray-600 rounded-lg flex items-center justify-center">
                        <i class="fas fa-qrcode text-4xl text-gray-400"></i>
                    </div>
                    {% endif %}
                </div>

                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                    Usa una aplicación de autenticación como:
                </p>

                <div class="flex justify-center space-x-4 mb-6">
                    <div class="flex items-center space-x-2 bg-gray-100 dark:bg-gray-700 px-3 py-2 rounded-lg">
                        <i class="fab fa-google text-blue-500"></i>
                        <span class="text-xs font-medium text-gray-700 dark:text-gray-300">Google Authenticator</span>
                    </div>
                    <div class="flex items-center space-x-2 bg-gray-100 dark:bg-gray-700 px-3 py-2 rounded-lg">
                        <i class="fas fa-mobile-alt text-green-500"></i>
                        <span class="text-xs font-medium text-gray-700 dark:text-gray-300">Authy</span>
                    </div>
                </div>

                <!-- Manual Entry -->
                <div class="border-t border-gray-200 dark:border-gray-600 pt-4">
                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">
                        ¿No puedes escanear? Ingresa este código manualmente:
                    </p>
                    <div class="bg-gray-50 dark:bg-gray-700 p-3 rounded-lg border">
                        <code class="text-xs font-mono text-gray-800 dark:text-gray-200 break-all">{{ secret }}</code>
                        <button onclick="copySecret()" class="ml-2 text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Verification Form -->
            <div>
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    2. Verifica tu configuración
                </h3>

                <form method="POST" id="verify2FAForm">
                    {{ form.hidden_tag() }}

                    <div class="mb-6">
                        <label for="{{ form.token.id }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Código de verificación (6 dígitos)
                        </label>
                        <div class="relative">
                            {{ form.token(class="form-input text-center text-2xl font-mono tracking-widest", placeholder="000000", maxlength="6", pattern="[0-9]{6}", autocomplete="off") }}
                            <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
                                <i class="fas fa-key text-gray-400"></i>
                            </div>
                        </div>
                        {% if form.token.errors %}
                            {% for error in form.token.errors %}
                                <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ error }}</p>
                            {% endfor %}
                        {% endif %}
                    </div>

                    <div class="mb-6">
                        <div class="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4">
                            <div class="flex">
                                <i class="fas fa-exclamation-triangle text-amber-500 mr-3 mt-0.5"></i>
                                <div class="text-sm text-amber-800 dark:text-amber-200">
                                    <p class="font-semibold mb-1">Importante:</p>
                                    <p>Guarda los códigos de respaldo después de activar 2FA. Los necesitarás si pierdes acceso a tu aplicación de autenticación.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="flex space-x-3">
                        <button type="submit" class="flex-1 btn-primary justify-center py-3" id="verifyButton">
                            <i class="fas fa-check mr-2"></i>
                            Activar 2FA
                        </button>
                        <a href="{{ url_for('profile') }}" class="flex-1 btn-secondary justify-center py-3">
                            <i class="fas fa-times mr-2"></i>
                            Cancelar
                        </a>
                    </div>
                </form>
            </div>
        </div>

        <!-- Help Section -->
        <div class="mt-8 text-center">
            <details class="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 p-6">
                <summary class="cursor-pointer text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">
                    <i class="fas fa-question-circle mr-2"></i>
                    ¿Necesitas ayuda?
                </summary>
                <div class="mt-4 text-left space-y-3 text-sm text-gray-600 dark:text-gray-400">
                    <div>
                        <h4 class="font-semibold text-gray-900 dark:text-white">¿Qué es la autenticación de dos factores?</h4>
                        <p>Es una capa adicional de seguridad que requiere no solo tu contraseña, sino también un código temporal generado por tu teléfono.</p>
                    </div>
                    <div>
                        <h4 class="font-semibold text-gray-900 dark:text-white">¿Cómo funciona?</h4>
                        <p>Después de ingresar tu contraseña, deberás proporcionar un código de 6 dígitos que cambia cada 30 segundos en tu aplicación de autenticación.</p>
                    </div>
                    <div>
                        <h4 class="font-semibold text-gray-900 dark:text-white">¿Qué aplicaciones puedo usar?</h4>
                        <p>Google Authenticator, Authy, Microsoft Authenticator, o cualquier aplicación compatible con TOTP.</p>
                    </div>
                </div>
            </details>
        </div>
    </div>
</div>

<!-- Loading Overlay -->
<div id="loadingOverlay" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white dark:bg-gray-800 rounded-lg p-6 text-center">
        <div class="loading-spinner mx-auto mb-4"></div>
        <p class="text-gray-600 dark:text-gray-400">Activando 2FA...</p>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function copySecret() {
    const secretText = '{{ secret }}';
    navigator.clipboard.writeText(secretText).then(() => {
        // Mostrar feedback visual
        const button = event.target.closest('button');
        const icon = button.querySelector('i');
        icon.classList.remove('fa-copy');
        icon.classList.add('fa-check');

        setTimeout(() => {
            icon.classList.remove('fa-check');
            icon.classList.add('fa-copy');
        }, 2000);
    });
}

// Auto-formato del código de 6 dígitos
document.getElementById('{{ form.token.id }}').addEventListener('input', function(e) {
    // Solo permitir números
    this.value = this.value.replace(/[^0-9]/g, '');

    // Limitar a 6 dígitos
    if (this.value.length > 6) {
        this.value = this.value.slice(0, 6);
    }

    // Auto-submit cuando se completen 6 dígitos
    if (this.value.length === 6) {
        setTimeout(() => {
            document.getElementById('verify2FAForm').submit();
        }, 500);
    }
});

// Mostrar loading al enviar formulario
document.getElementById('verify2FAForm').addEventListener('submit', function() {
    document.getElementById('loadingOverlay').classList.remove('hidden');
    document.getElementById('loadingOverlay').classList.add('flex');
});

// Focus automático en el campo de código
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('{{ form.token.id }}').focus();
});
</script>
{% endblock %}