{% extends 'layout/base.twig' %}

{% set title = 'Setup Two-Factor Authentication' %}
{% set pageTitle = 'Setup 2FA' %}
{% set pageDescription = 'Configure two-factor authentication for your account' %}
{% set pageIcon = 'fas fa-shield-alt' %}

{% block content %}
<div class="max-w-3xl mx-auto">
    <div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
                <i class="fas fa-shield-alt text-gray-400 dark:text-slate-500 mr-2 text-sm"></i>
                Setup Two-Factor Authentication
            </h2>
        </div>

        <div class="p-6 space-y-5">
            {# Step 1: Download Authenticator App #}
            <div class="border-l-4 border-blue-500 pl-4">
                <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">Step 1: Install an Authenticator App</h4>
                <p class="text-sm text-gray-600 dark:text-slate-400 mb-3">Download one of these apps on your mobile device:</p>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                    <div class="bg-gray-50 dark:bg-slate-700/50 rounded-lg p-3 text-center">
                        <i class="fab fa-google text-2xl text-blue-600 dark:text-blue-400 mb-2"></i>
                        <p class="text-sm font-medium text-gray-900 dark:text-white">Google Authenticator</p>
                        <p class="text-xs text-gray-500 dark:text-slate-400">iOS & Android</p>
                    </div>
                    <div class="bg-gray-50 dark:bg-slate-700/50 rounded-lg p-3 text-center">
                        <i class="fas fa-mobile-alt text-2xl text-blue-600 dark:text-blue-400 mb-2"></i>
                        <p class="text-sm font-medium text-gray-900 dark:text-white">Authy</p>
                        <p class="text-xs text-gray-500 dark:text-slate-400">iOS & Android</p>
                    </div>
                    <div class="bg-gray-50 dark:bg-slate-700/50 rounded-lg p-3 text-center">
                        <i class="fab fa-microsoft text-2xl text-blue-600 dark:text-blue-400 mb-2"></i>
                        <p class="text-sm font-medium text-gray-900 dark:text-white">Microsoft Authenticator</p>
                        <p class="text-xs text-gray-500 dark:text-slate-400">iOS & Android</p>
                    </div>
                </div>
            </div>

            {# Step 2: Scan QR Code #}
            <div class="border-l-4 border-green-500 pl-4">
                <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">Step 2: Scan QR Code</h4>
                <p class="text-sm text-gray-600 dark:text-slate-400 mb-4">Open your authenticator app and scan this QR code:</p>
                
                <div class="flex flex-col items-center space-y-4">
                    <div class="bg-white border-2 border-gray-200 dark:border-slate-600 rounded-lg p-4">
                        <img src="{{ qrCodeUrl }}" alt="QR Code for 2FA setup" class="w-48 h-48">
                    </div>
                    
                    <div class="text-center">
                        <p class="text-xs text-gray-500 dark:text-slate-400 mb-2">Can't scan? Enter this code manually:</p>
                        <div class="bg-gray-100 dark:bg-slate-700 rounded-lg p-3 font-mono text-sm">
                            <code class="text-gray-800 dark:text-slate-200">{{ secret }}</code>
                        </div>
                    </div>
                </div>
            </div>

            {# Step 3: Verify Code #}
            <div class="border-l-4 border-yellow-500 pl-4">
                <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">Step 3: Verify Setup</h4>
                <p class="text-sm text-gray-600 dark:text-slate-400 mb-4">Enter the 6-digit code from your authenticator app:</p>
                
                <form method="POST" action="/2fa/verify-setup" id="verifyForm">
                    {{ csrf_field() }}
                    
                    <div class="max-w-xs mx-auto">
                        <input type="text" name="verification_code" id="verification_code" maxlength="6" pattern="[0-9]{6}" placeholder="123456"
                               class="w-full px-4 py-3 text-center text-2xl font-mono border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-slate-500 focus:ring-2 focus:ring-primary focus:border-primary" required>
                        <p class="text-xs text-gray-500 dark:text-slate-400 mt-2 text-center">Enter 6-digit code</p>
                    </div>

                    <div class="flex flex-col sm:flex-row gap-3 pt-3">
                        <button type="submit" class="inline-flex items-center justify-center px-5 py-2.5 bg-primary hover:bg-primary-dark text-white rounded-lg font-medium text-sm">
                            <i class="fas fa-check mr-2"></i>Verify & Enable 2FA
                        </button>
                        <a href="/2fa/cancel-setup" class="inline-flex items-center justify-center px-5 py-2.5 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 rounded-lg font-medium hover:bg-gray-50 dark:hover:bg-slate-700 text-sm">
                            <i class="fas fa-times mr-2"></i>Cancel
                        </a>
                    </div>
                </form>
            </div>

            {# Security Notice #}
            <div class="bg-yellow-50 dark:bg-yellow-500/10 border border-yellow-200 dark:border-yellow-500/20 rounded-lg p-4">
                <div class="flex">
                    <i class="fas fa-exclamation-triangle text-yellow-600 dark:text-yellow-400 mt-0.5 mr-3"></i>
                    <div>
                        <p class="text-sm font-medium text-yellow-900 dark:text-yellow-300">Important Security Notice</p>
                        <p class="text-sm text-yellow-700 dark:text-yellow-400/80 mt-1">
                            Once 2FA is enabled, you'll need your authenticator app to log in. 
                            Make sure to save your backup codes in a secure location.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const codeInput = document.getElementById('verification_code');
    codeInput.focus();
    codeInput.addEventListener('input', function() {
        this.value = this.value.replace(/[^0-9]/g, '');
        if (this.value.length === 6) {
            setTimeout(() => document.getElementById('verifyForm').submit(), 500);
        }
    });
});
</script>
{% endblock %}