{% extends "base.html" %}
{% block title %}تأكد من بريدك - Jadwa AI{% endblock %}
{% block content %}
<div class="min-h-screen bg-slate-900 flex items-center justify-center py-12 px-4">
    <!-- Background Decor -->
    <div class="absolute bottom-0 right-0 w-[600px] h-[600px] bg-emerald-500/5 rounded-full blur-[120px] -z-10 animate-pulse-slow"></div>
    <div class="absolute top-0 left-0 w-[600px] h-[600px] bg-gold-500/5 rounded-full blur-[120px] -z-10 animate-pulse-slow"></div>

    <div class="max-w-md w-full bg-slate-900/70 backdrop-blur-xl p-10 rounded-3xl border border-slate-700 shadow-2xl relative">
        <!-- Progress -->
        <div class="flex items-center justify-center mb-8">
            <div class="flex gap-2 items-center">
                <div class="w-8 h-8 rounded-full bg-emerald-500 flex items-center justify-center text-white">
                    <span class="text-lg font-bold">1</span>
                </div>
                <div class="w-8 h-1 bg-emerald-500 rounded-full"></div>
                <div class="w-8 h-1 bg-emerald-500 rounded-full"></div>
                <div class="w-8 h-8 rounded-full bg-emerald-500 flex items-center justify-center text-white">
                    <span class="text-lg font-bold">2</span>
                </div>
                <div class="w-8 h-1 bg-emerald-500/30 rounded-full"></div>
                <div class="w-8 h-1 bg-emerald-500/30 rounded-full"></div>
                <div class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center text-slate-400">
                    <span class="text-lg font-bold">3</span>
                </div>
            </div>
        </div>

        <!-- OTP Input -->
        <h2 class="text-2xl font-bold text-white text-center mb-6">
            أدخل رمز التحقق المرسل إلى بريدك
        </h2>

        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                <div class="mb-4 p-4 rounded-xl {% if category == 'error' %}bg-red-500/20 border-red-500/50{% else %}bg-emerald-500/20 border-emerald-500/50{% endif %} text-sm text-white">
                    {{ message }}
                </div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        <form id="otpForm" action="{{ url_for('auth.verify_otp') }}" method="POST" class="space-y-4">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

            <div class="space-y-4">
                <!-- OTP Input - 6 separate inputs -->
                <div class="flex justify-center gap-3 mb-6">
                    {% for i in range(6) %}
                    <div class="w-12 h-16 flex items-center justify-center border-b-2 border-white/20 bg-slate-800 rounded-lg">
                        <input type="text" maxlength="1" inputmode="numeric" pattern="[0-9]" required autocomplete="one-time-code"
                               class="w-full h-full text-center text-3xl font-bold text-white bg-transparent focus:outline-none focus:border-emerald-500"
                               id="otp-{{ i }}" name="otp" data-index="{{ i }}">
                    </div>
                    {% endfor %}
                </div>

                <!-- Hidden combined OTP input -->
                <input type="hidden" name="otp_combined" id="otp_combined">
            </div>

            <!-- Resend Button -->
            <button type="button" onclick="resendOTP()" id="resendBtn" class="w-full py-3 px-4 border border-slate-600 rounded-xl text-slate-400 bg-slate-700 hover:bg-slate-600 hover:text-white transition flex items-center gap-2">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                </svg>
                إعادة إرسال الرمز
            </button>

            <button type="submit" class="group relative w-full flex justify-center py-4 px-6 border border-transparent text-sm font-bold rounded-xl text-white bg-gradient-to-r from-emerald-400 to-emerald-600 hover:from-emerald-300 hover:to-emerald-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 transition duration-300 shadow-[0_0_20px_rgba(16,185,129,0.3)] hover:shadow-[0_0_30px_rgba(16,185,129,0.5)] hover:-translate-y-0.5">
                التحقق ومتابعة
            </button>

            <div class="text-center pt-4">
                <a href="{{ url_for('auth.register_personal') }}" class="text-slate-400 text-sm hover:text-white transition">
                    ← عودة
                </a>
            </div>
        </form>
    </div>

    <script>
        // Auto-focus first OTP input
        document.addEventListener('DOMContentLoaded', function() {
            const firstInput = document.getElementById('otp-0');
            if (firstInput) firstInput.focus();

            // Auto-advance to next input
            const inputs = document.querySelectorAll('input[name="otp"]');
            inputs.forEach((input, index) => {
                input.addEventListener('input', function(e) {
                    const value = e.target.value;
                    if (value.length === 1 && index < inputs.length - 1) {
                        inputs[index + 1].focus();
                    }
                });

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

                // Handle paste
                input.addEventListener('paste', function(e) {
                    e.preventDefault();
                    const paste = (e.clipboardData || window.clipboardData).getData('text');
                    const digits = paste.replace(/\D/g, '').substring(0, 6);
                    digits.split('').forEach((digit, i) => {
                        if (inputs[i]) inputs[i].value = digit;
                    });
                    if (inputs[digits.length - 1]) inputs[digits.length - 1].focus();
                });
            });
        });

        // Combine OTP before form submission
        const otpForm = document.getElementById('otpForm');
        otpForm.addEventListener('submit', function(e) {
            let otp = '';
            const inputs = document.querySelectorAll('input[name="otp"]');
            inputs.forEach(input => {
                otp += input.value;
            });

            const otpInput = document.getElementById('otp_combined');
            if (otpInput) {
                otpInput.value = otp;
            }
        });

        // Resend OTP function
        function resendOTP() {
            // Create a form and submit it
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = "{{ url_for('auth.resend_enterprise_otp') }}";

            const csrfToken = document.createElement('input');
            csrfToken.type = 'hidden';
            csrfToken.name = 'csrf_token';
            csrfToken.value = "{{ csrf_token() }}";
            form.appendChild(csrfToken);

            document.body.appendChild(form);
            form.submit();
        }
    </script>
{% endblock %}