{% extends "base.html" %}

{% block title %}{{ _('register') }} - 高可用学习平台{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/register.css') }}">
{% endblock %}

{% block full_content %}
<div class="overlay"></div>

<div class="theme-toggle" id="theme-toggle">
    {% if session.get('theme', 'light') == 'light' %}☀️{% else %}🌙{% endif %}
</div>

<div class="language-selector">
    <select id="language-select">
        <option value="zh" {% if session.get('language', 'zh') == 'zh' %}selected{% endif %}>简体中文</option>
        <option value="en" {% if session.get('language', 'zh') == 'en' %}selected{% endif %}>English</option>
    </select>
</div>

<div class="main-container">
    <div class="login-container">
        <div class="logo">
            <img src="{{ url_for('static', filename='images/logo.png') }}" alt="Logo" onerror="this.src='/api/placeholder/90/90'">
        </div>
        <h1>高可用学习平台</h1>
        <p class="subtitle">{{ _('create_account') }}</p>

        <div class="step-container">
            <div class="step {% if not email_verified %}active{% else %}completed{% endif %}" id="step-1">1
                <div class="step-label">{{ _('email_verification') }}</div>
            </div>
            <div class="step {% if email_verified %}active{% endif %}" id="step-2">2
                <div class="step-label">{{ _('account_info') }}</div>
            </div>
            <div class="step" id="step-3">3
                <div class="step-label">{{ _('registration_success') }}</div>
            </div>
        </div>

        <div class="registration-step {% if not email_verified %}active{% endif %}" id="step-1-content">
            <form id="email-verification-form" method="post" action="{{ url_for('auth.register') }}">
                {{ email_form.hidden_tag() }}
                <input type="hidden" name="send_code" value="1">

                <div class="form-group">
                    <label for="email">{{ _('email') }}</label>
                    <div class="verification-container">
                        <div class="input-with-icon verification-input">
                            <span class="input-icon">📧</span>
                            {{ email_form.email(class="form-control", placeholder=_('email_placeholder'), id="verification-email") }}
                        </div>
                        <button type="submit" class="send-code-btn" id="send-code-btn">
                            {{ _('send_verification_code') }}
                        </button>
                    </div>
                    {% for error in email_form.email.errors %}
                    <div class="validation-message show">{{ error }}</div>
                    {% endfor %}
                    <div class="validation-message" id="email-error"></div>
                </div>

                <div class="form-buttons">
                    <a href="{{ url_for('auth.login') }}" class="btn btn-login btn-back">{{ _('back_to_login') }}</a>
                </div>
            </form>
        </div>

        <div class="registration-step {% if email_verified %}active{% endif %}" id="step-2-content">
            <form id="registration-form" method="post" action="{{ url_for('auth.register') }}">
                {{ registration_form.hidden_tag() }}
                <input type="hidden" name="register" value="1">

                <div class="form-group">
                    <label for="email">{{ _('email') }}</label>
                    <div class="input-with-icon">
                        <span class="input-icon">📧</span>
                        {{ registration_form.email(class="form-control", readonly="readonly", value=verified_email) }}
                    </div>
                </div>

                <div class="form-group">
                    <label for="verification_code">{{ _('verification_code') }}</label>
                    <div class="input-with-icon">
                        <span class="input-icon">🔑</span>
                        {{ registration_form.verification_code(class="form-control", placeholder=_('enter_verification_code')) }}
                    </div>
                    {% for error in registration_form.verification_code.errors %}
                    <div class="validation-message show">{{ error }}</div>
                    {% endfor %}
                    <div class="validation-message" id="code-error"></div>
                    <div class="countdown" id="resend-countdown"></div>
                    <button type="button" class="btn-link" id="resend-btn" style="display: none; background: none; border: none; color: var(--primary-color); padding: 0; margin-top: 5px; cursor: pointer; text-decoration: underline;">{{ _('resend_code') }}</button>
                </div>

                <div class="form-group">
                    <label for="username">{{ _('username') }}</label>
                    <div class="input-with-icon">
                        <span class="input-icon">👤</span>
                        {{ registration_form.username(class="form-control", placeholder=_('enter_username')) }}
                    </div>
                    {% for error in registration_form.username.errors %}
                    <div class="validation-message show">{{ error }}</div>
                    {% endfor %}
                    <div class="validation-message" id="username-error"></div>
                </div>

                <div class="form-group">
                    <label for="password">{{ _('password') }}</label>
                    <div class="input-with-icon">
                        <span class="input-icon">🔒</span>
                        {{ registration_form.password(class="form-control", placeholder=_('enter_password'), id="register-password") }}
                        <span class="password-toggle" id="password-toggle">👁️</span>
                    </div>
                    {% for error in registration_form.password.errors %}
                    <div class="validation-message show">{{ error }}</div>
                    {% endfor %}
                    <div class="validation-message" id="password-error"></div>
                    <div class="strength-meter">
                        <div class="strength-meter-fill" id="strength-meter-fill"></div>
                    </div>
                    <div class="password-strength-text" id="password-strength-text"></div>
                </div>

                <div class="form-group">
                    <label for="password2">{{ _('repeat_password') }}</label>
                    <div class="input-with-icon">
                        <span class="input-icon">🔒</span>
                        {{ registration_form.password2(class="form-control", placeholder=_('repeat_password_placeholder')) }}
                    </div>
                    {% for error in registration_form.password2.errors %}
                    <div class="validation-message show">{{ error }}</div>
                    {% endfor %}
                    <div class="validation-message" id="password2-error"></div>
                </div>

                <div class="form-buttons">
                    <button type="button" class="btn btn-login btn-back" id="back-to-step1">{{ _('back') }}</button>
                    <button type="submit" class="btn btn-login btn-next">{{ _('register') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<footer>
    <p>© 2023 高可用学习平台 | <a href="#">{{ _('privacy_policy') }}</a> | <a href="#">{{ _('terms_of_service') }}</a></p>
</footer>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 主题切换
        const themeToggle = document.getElementById('theme-toggle');

        themeToggle.addEventListener('click', function() {
            const currentTheme = "{{ session.get('theme', 'light') }}";
            const newTheme = currentTheme === 'light' ? 'dark' : 'light';
            window.location.href = "{{ url_for('main.set_theme', theme='') }}" + newTheme + "?next={{ request.path|urlencode }}";
        });

        // 语言选择器
        const languageSelect = document.getElementById('language-select');
        languageSelect.addEventListener('change', function() {
            window.location.href = "{{ url_for('main.set_language', lang='') }}" + this.value + "?next={{ request.path|urlencode }}";
        });

        // 密码可见性切换
        const passwordInput = document.getElementById('register-password');
        const passwordToggle = document.getElementById('password-toggle');

        if (passwordToggle && passwordInput) {
            passwordToggle.addEventListener('click', function() {
                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordInput.setAttribute('type', type);
                passwordToggle.innerHTML = type === 'password' ? '👁️' : '👁️‍🗨️';
            });
        }

        // 密码强度检测
        if (passwordInput) {
            const strengthMeter = document.getElementById('strength-meter-fill');
            const strengthText = document.getElementById('password-strength-text');

            passwordInput.addEventListener('input', function() {
                const password = this.value;
                const strength = checkPasswordStrength(password);

                // 更新强度指示器
                strengthMeter.className = 'strength-meter-fill';

                if (password.length === 0) {
                    strengthMeter.style.width = '0';
                    strengthText.textContent = '';
                } else if (strength < 2) {
                    strengthMeter.classList.add('weak');
                    strengthText.textContent = '{{ _("password_weak") }}';
                } else if (strength < 3) {
                    strengthMeter.classList.add('medium');
                    strengthText.textContent = '{{ _("password_medium") }}';
                } else if (strength < 4) {
                    strengthMeter.classList.add('strong');
                    strengthText.textContent = '{{ _("password_strong") }}';
                } else {
                    strengthMeter.classList.add('very-strong');
                    strengthText.textContent = '{{ _("password_very_strong") }}';
                }
            });
        }

        // 检查密码强度的函数
        function checkPasswordStrength(password) {
            let strength = 0;

            if (password.length >= 8) strength++;
            if (/[a-z]/.test(password)) strength++;
            if (/[A-Z]/.test(password)) strength++;
            if (/[0-9]/.test(password)) strength++;
            if (/[^a-zA-Z0-9]/.test(password)) strength++;

            return strength;
        }

        // 注册表单验证
        const registrationForm = document.getElementById('registration-form');
        const verificationCodeInput = document.getElementById('verification_code');
        const usernameInput = document.getElementById('username');
        const password2Input = document.getElementById('password2');

        const codeError = document.getElementById('code-error');
        const usernameError = document.getElementById('username-error');
        const password2Error = document.getElementById('password2-error');

        if (registrationForm) {
            registrationForm.addEventListener('submit', function(e) {
                let isValid = true;

                // 验证码验证
                if (verificationCodeInput.value.trim() === '') {
                    codeError.textContent = '{{ _("verification_code_required") }}';
                    codeError.classList.add('show');
                    isValid = false;
                } else if (verificationCodeInput.value.length !== 6) {
                    codeError.textContent = '{{ _("verification_code_invalid") }}';
                    codeError.classList.add('show');
                    isValid = false;
                } else {
                   codeError.classList.remove('show');
                }

                // 用户名验证
                if (usernameInput.value.trim() === '') {
                    usernameError.textContent = '{{ _("username_required") }}';
                    usernameError.classList.add('show');
                    isValid = false;
                } else {
                    usernameError.classList.remove('show');
                }

                // 密码匹配验证
                if (password2Input.value !== passwordInput.value) {
                    password2Error.textContent = '{{ _("passwords_not_match") }}';
                    password2Error.classList.add('show');
                    isValid = false;
                } else {
                    password2Error.classList.remove('show');
                }

                if (!isValid) {
                    e.preventDefault();
                }
            });
        }

        // 邮箱验证表单
        const emailVerificationForm = document.getElementById('email-verification-form');
        const emailInput = document.getElementById('verification-email');
        const emailError = document.getElementById('email-error');
        const sendCodeBtn = document.getElementById('send-code-btn');

        if (emailVerificationForm) {
            emailVerificationForm.addEventListener('submit', function(e) {
                if (emailInput.value.trim() === '') {
                    e.preventDefault();
                    emailError.textContent = '{{ _("email_required") }}';
                    emailError.classList.add('show');
                } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput.value.trim())) {
                    e.preventDefault();
                    emailError.textContent = '{{ _("invalid_email") }}';
                    emailError.classList.add('show');
                } else {
                    emailError.classList.remove('show');
                }
            });

            // 动态发送验证码
            sendCodeBtn.addEventListener('click', function(e) {
                if (emailInput.value.trim() === '' || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailInput.value.trim())) {
                    return; // 让表单自己处理验证
                }

                e.preventDefault();

                // 禁用按钮
                sendCodeBtn.disabled = true;
                sendCodeBtn.textContent = '{{ _("sending") }}...';

                // 发送Ajax请求
                const xhr = new XMLHttpRequest();
                xhr.open('POST', '{{ url_for("auth.send_verification_code") }}', true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            try {
                                const response = JSON.parse(xhr.responseText);
                                if (response.success) {
                                    // 显示成功消息
                                    showNotification(response.message, 'success');

                                    // 存储邮箱地址
                                    const verifiedEmail = emailInput.value.trim();

                                    // 显示下一步
                                    document.getElementById('step-1').classList.remove('active');
                                    document.getElementById('step-1').classList.add('completed');
                                    document.getElementById('step-2').classList.add('active');

                                    document.getElementById('step-1-content').classList.remove('active');
                                    document.getElementById('step-2-content').classList.add('active');

                                    // 设置邮箱字段
                                    document.getElementById('email').value = verifiedEmail;

                                    // 启动倒计时
                                    startResendCountdown();
                                } else {
                                    // 显示错误消息
                                    showNotification(response.message, 'error');
                                    sendCodeBtn.disabled = false;
                                    sendCodeBtn.textContent = '{{ _("send_verification_code") }}';
                                }
                            } catch (e) {
                                showNotification('{{ _("server_error") }}', 'error');
                                sendCodeBtn.disabled = false;
                                sendCodeBtn.textContent = '{{ _("send_verification_code") }}';
                            }
                        } else {
                            showNotification('{{ _("server_error") }}', 'error');
                            sendCodeBtn.disabled = false;
                            sendCodeBtn.textContent = '{{ _("send_verification_code") }}';
                        }
                    }
                };
                xhr.send('email=' + encodeURIComponent(emailInput.value.trim()));
            });
        }

        // 返回按钮
        const backToStep1 = document.getElementById('back-to-step1');
        if (backToStep1) {
            backToStep1.addEventListener('click', function() {
                document.getElementById('step-1').classList.add('active');
                document.getElementById('step-1').classList.remove('completed');
                document.getElementById('step-2').classList.remove('active');

                document.getElementById('step-1-content').classList.add('active');
                document.getElementById('step-2-content').classList.remove('active');
            });
        }

        // 重发验证码
        const resendBtn = document.getElementById('resend-btn');
        const resendCountdown = document.getElementById('resend-countdown');

        if (resendBtn) {
            resendBtn.addEventListener('click', function() {
                // 禁用按钮
                resendBtn.style.display = 'none';

                // 发送Ajax请求
                const xhr = new XMLHttpRequest();
                xhr.open('POST', '{{ url_for("auth.send_verification_code") }}', true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        try {
                            const response = JSON.parse(xhr.responseText);
                            if (response.success) {
                                showNotification(response.message, 'success');
                                startResendCountdown();
                            } else {
                                showNotification(response.message, 'error');
                                resendBtn.style.display = 'block';
                            }
                        } catch (e) {
                            showNotification('{{ _("server_error") }}', 'error');
                            resendBtn.style.display = 'block';
                        }
                    } else if (xhr.readyState === 4) {
                        showNotification('{{ _("server_error") }}', 'error');
                        resendBtn.style.display = 'block';
                    }
                };
                xhr.send('email=' + encodeURIComponent(document.getElementById('email').value));
            });
        }

        // 验证码倒计时
        function startResendCountdown() {
            let seconds = 60;
            resendCountdown.textContent = `{{ _("resend_code_in") }} ${seconds} {{ _("seconds") }}`;
            resendCountdown.style.display = 'block';
            resendBtn.style.display = 'none';

            const interval = setInterval(function() {
                seconds--;
                resendCountdown.textContent = `{{ _("resend_code_in") }} ${seconds} {{ _("seconds") }}`;

                if (seconds <= 0) {
                    clearInterval(interval);
                    resendCountdown.style.display = 'none';
                    resendBtn.style.display = 'block';
                }
            }, 1000);
        }

        // 显示通知
        function showNotification(message, type) {
            // 检查是否已有通知
            let notification = document.querySelector('.notification');
            if (notification) {
                document.body.removeChild(notification);
            }

            // 创建新通知
            notification = document.createElement('div');
            notification.className = `notification ${type}`;

            const icon = type === 'success' ? '✓' : '✗';

            notification.innerHTML = `
                <div class="notification-icon">${icon}</div>
                <div class="notification-content">
                    <p>${message}</p>
                </div>
            `;

            document.body.appendChild(notification);

            // 显示通知
            setTimeout(() => {
                notification.classList.add('show');
            }, 10);

            // 自动隐藏
            setTimeout(() => {
                notification.classList.remove('show');
                setTimeout(() => {
                    try {
                        document.body.removeChild(notification);
                    } catch (e) {
                        // 忽略可能的错误
                    }
                }, 300);
            }, 3000);
        }

        // 如果是第二步，启动倒计时
        {% if email_verified %}
        startResendCountdown();
        {% endif %}
    });
</script>
{% endblock %}