{% extends "base.html" %}

{% block title %}Verify 2FA - {{ brand_name }}{% endblock %}

{% block styles %}
<style>
    /* Modern styling for the 2FA input */
    .otp-input {
        width: 3rem;
        height: 3.5rem;
        text-align: center;
        font-size: 1.5rem;
        font-weight: bold;
        background: rgba(0, 0, 0, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0.75rem;
        color: white;
        transition: all 0.2s;
    }

    .otp-input:focus {
        outline: none;
        border-color: rgba(59, 130, 246, 0.5);
        /* blue-500 */
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

    /* Hide generic number arrows */
    .otp-input::-webkit-outer-spin-button,
    .otp-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
</style>
{% endblock %}

{% block content %}
<div class="h-screen w-full flex items-center justify-center p-4">
    <div
        class="glass-panel p-8 modal-radius-xl w-full max-w-md relative overflow-hidden border border-white/10 shadow-3xl">
        <div class="absolute top-0 right-0 p-8 opacity-5">
            <i data-lucide="shield-check" class="h-32 w-32 text-blue-400"></i>
        </div>

        <div class="relative z-10 flex flex-col items-center text-center">
            <div class="p-4 bg-blue-500/10 rounded-2xl mb-6 shadow-sm border border-blue-500/20">
                <i data-lucide="lock" class="h-8 w-8 text-blue-400"></i>
            </div>

            <h2 class="text-3xl font-bold text-white mb-2">Two-Factor Authentication</h2>
            <p class="text-xs text-zinc-400 font-bold uppercase tracking-widest leading-relaxed mb-8">
                {% if request.args.get('action') == 'register' %}
                We've sent a verification link and 6-digit code to your email to verify your registration.
                {% else %}
                New device detected. Use the link or 6-digit code in your email to continue.
                {% endif %}
            </p>

            <form action="{{ url_for('verify_2fa') }}" method="POST" class="w-full flex flex-col items-center">
                <input type="hidden" name="auth_action" value="{{ request.args.get('action', 'login') }}">

                <div class="flex gap-2 justify-center mb-8" id="otp-container">
                    <input type="text" maxlength="1" class="otp-input" required autofocus autocomplete="off">
                    <input type="text" maxlength="1" class="otp-input" required autocomplete="off">
                    <input type="text" maxlength="1" class="otp-input" required autocomplete="off">
                    <input type="text" maxlength="1" class="otp-input" required autocomplete="off">
                    <input type="text" maxlength="1" class="otp-input" required autocomplete="off">
                    <input type="text" maxlength="1" class="otp-input" required autocomplete="off">
                </div>
                <!-- Hidden input that submits the actual full code -->
                <input type="hidden" name="code" id="full-code" required>

                <button type="submit"
                    class="w-full glass-button no-hover-lift text-white font-bold py-3 px-4 rounded-xl text-sm transition-colors">
                    Verify Code
                </button>

                <div class="mt-6 flex flex-col items-center gap-2">
                    <a href="{{ url_for('login') }}"
                        class="text-[10px] text-zinc-500 font-bold uppercase tracking-widest hover:text-white transition-colors">Return
                        to Login</a>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', () => {
        lucide.createIcons();
        const inputs = document.querySelectorAll('.otp-input');
        const hiddenCode = document.getElementById('full-code');
        const form = document.querySelector('form');

        // Auto-focus and paste support
        inputs.forEach((input, index) => {
            input.addEventListener('input', (e) => {
                // Numbers only
                e.target.value = e.target.value.replace(/[^0-9]/g, '');
                if (e.target.value && index < inputs.length - 1) {
                    inputs[index + 1].focus();
                }
                updateHiddenCode();
            });

            input.addEventListener('keydown', (e) => {
                if (e.key === 'Backspace' && !e.target.value && index > 0) {
                    inputs[index - 1].focus();
                }
            });

            input.addEventListener('paste', (e) => {
                e.preventDefault();
                const pasteData = e.clipboardData.getData('text').replace(/[^0-9]/g, '').slice(0, inputs.length);
                pasteData.split('').forEach((char, i) => {
                    inputs[i].value = char;
                });
                if (pasteData.length > 0) {
                    inputs[Math.min(pasteData.length, inputs.length - 1)].focus();
                }
                updateHiddenCode();
            });
        });

        function updateHiddenCode() {
            hiddenCode.value = Array.from(inputs).map(i => i.value).join('');
        }

        form.addEventListener('submit', (e) => {
            updateHiddenCode();
            if (hiddenCode.value.length !== 6) {
                e.preventDefault();
                window.createToast(Date.now(), 'Incomplete', 'Please fill all 6 digits.', false);
            }
        });

        // Handle flashed messages from the backend
        {% with messages = get_flashed_messages(with_categories = true) %}
        {% if messages %}
        {% for category, message in messages %}
        window.createToast(Date.now(), '{{ category | title }}', '{{ message }}', {{ 'true' if category == 'success' else 'false' }});
    {% endfor %}
    {% endif %}
    {% endwith %}
});
</script>
{% endblock %}