{% extends "base.html" %}
{% block title %}تحقق من بريدك - Jadwa AI{% endblock %}
{% block content %}
<div class="min-h-[calc(100vh-80px)] flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
    <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">
        <div class="text-center mb-8">
            <div class="w-16 h-16 bg-gold-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg class="w-8 h-8 text-gold-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                </svg>
            </div>
            <h2 class="text-3xl font-serif font-bold text-white mb-2">تحقق من بريدك</h2>
            <p class="text-slate-400 text-sm">أدخل رمز التحقق المرسل إلى بريدك</p>
        </div>

        {% 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 %}

        <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-black/50 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"
                       id="otp-{{ i }}" name="otp" data-index="{{ i }}">
            </div>
            {% endfor %}
        </div>
        <input type="hidden" name="otp_full" id="otp_full">

        <p class="text-center text-slate-400 text-sm mb-6">
            تم إرسال رمز التحقق إلى: <span class="text-gold-400 font-semibold">{{ email }}</span>
        </p>

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

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

            <button type="button" onclick="resendOTP()" class="w-full py-3 px-4 border border-slate-600 text-sm rounded-xl text-slate-400 bg-white/5 hover:bg-white/10 hover:text-white transition focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500">
                إعادة إرسال رمز التحقق
            </button>
        </form>

        <div class="text-center pt-4">
            <a href="{{ url_for('auth.register_step2') }}" class="text-slate-500 text-sm hover:text-slate-400 transition border-b border-transparent hover:border-slate-500 pb-0.5">
                ← استخدام بريد آخر
            </a>
        </div>
    </div>
</div>

<script>
    function resendOTP() {
        fetch('{{ url_for("auth.resend_otp") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': '{{ csrf_token() }}'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('تم إعادة إرسال رمز التحقق');
                } else {
                    alert('حدث خطأ: ' + data.message);
                }
            })
            .catch(error => {
                alert('حدث خطأ أثناء إعادة الإرسال');
            });
    }

    document.addEventListener('DOMContentLoaded', function() {
        const firstInput = document.getElementById('otp-0');
        if (firstInput) firstInput.focus();

        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();
                }
            });

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

            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();
            });
        });

        const otpForm = document.getElementById('otpForm');
        otpForm.addEventListener('submit', function(e) {
            let otp = '';
            inputs.forEach(input => {
                otp += input.value;
            });
            document.getElementById('otp_hidden').value = otp;
        });
    });
</script>
{% endblock %}