{% extends "base.html" %}

{% block content %}
<div class="container mx-auto px-4">
    <h1 class="text-3xl font-bold mb-4">{{ settings.system_name }} - 注册</h1>
    <form id="registerForm" class="bg-white shadow-md rounded-lg p-6">
        <div class="mb-4">
            <label for="username" class="block text-gray-700 font-bold mb-2">用户名</label>
            <input type="text" name="username" id="username" placeholder="用户名" class="w-full px-3 py-2 border rounded-lg" required>
        </div>
        <div class="mb-4">
            <label for="email" class="block text-gray-700 font-bold mb-2">邮箱</label>
            <input type="email" name="email" id="email" placeholder="邮箱" class="w-full px-3 py-2 border rounded-lg" required>
        </div>
        <div class="mb-4">
            <label for="password" class="block text-gray-700 font-bold mb-2">密码</label>
            <input type="password" name="password" id="password" placeholder="密码" class="w-full px-3 py-2 border rounded-lg" required>
        </div>
        <div id="captcha" class="mb-4">
            <p class="text-gray-700 font-bold mb-2">人机验证</p>
            <div id="embed-captcha"></div>
        </div>
        <button type="submit" id="submitBtn" class="w-full bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition duration-300">注册</button>
    </form>
    <div id="message" class="mt-4"></div>
    <div id="progressBar" class="hidden mt-4 w-full h-1 bg-gray-200 rounded-full overflow-hidden">
        <div class="w-full h-full bg-blue-500 animate-pulse"></div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/static/js/gt4.js"></script>
<script>
    initGeetest4({
        captchaId: '{{ config["GEETEST_ID"] }}'
    },function (gt) {
        captcha = gt
        captcha.appendTo("#embed-captcha");
    });

    function showAlert(message, type) {
        const alertContainer = document.getElementById('message');
        alertContainer.innerHTML = `
            <div class="bg-${type}-100 border-l-4 border-${type}-500 text-${type}-700 p-4 mb-4 rounded-lg shadow-md" role="alert">
                <p class="font-bold">${message}</p>
            </div>
        `;
    }

    document.getElementById('registerForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const result = captcha.getValidate();
        if (!result) {
            return showAlert("请先完成行为验证", "red")
        }
        const username = document.getElementById('username').value;
        const email = document.getElementById('email').value;
        const password = document.getElementById('password').value;

        const message_data = { username: username, email: email, password: password};
        const data =  { ...result, ...message_data};

        // 获取提交按钮并禁用它
        const submitBtn = document.getElementById('submitBtn');
        submitBtn.disabled = true;
        submitBtn.textContent = '请稍后...';
        submitBtn.classList.add('opacity-50', 'cursor-not-allowed');

        // 显示进度条
        document.getElementById('progressBar').classList.remove('hidden');

        $.ajax({
            url: '/register',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function(response) {
                // 隐藏进度条
                document.getElementById('progressBar').classList.add('hidden');
                
                // 恢复按钮状态
                submitBtn.disabled = false;
                submitBtn.textContent = '注册';
                submitBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                
                if (response.success) {
                    showAlert(response.message, "green");
                    setTimeout(() => {
                        window.location.href = "{{ url_for('auth.login') }}";
                    }, 5000);
                } else {
                    showAlert(response.message, "red");
                }
            },
            error: function() {
                // 隐藏进度条
                document.getElementById('progressBar').classList.add('hidden');
                
                // 恢复按钮状态
                submitBtn.disabled = false;
                submitBtn.textContent = '注册';
                submitBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                
                showAlert("注册失败，请稍后重试。", "red");
            }
        });
    });
</script>
{% endblock %}