{% extends "base.html" %}

{% block title %}注册 - 儿童语言学习系统{% endblock %}

{% block content %}
<div class="auth-page-container">
    <div class="container py-4">
        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-7">
                <div class="card kid-auth-card shadow-lg">
                     <div class="kid-auth-header">
                        <i class="fas fa-star icon"></i>
                        <h2 class="fw-bold">加入我们！</h2>
                    </div>
                    <div class="card-body p-4 p-md-5">
                        <p class="text-center text-muted mb-4">开启一段奇妙的语言学习之旅！</p>
                        
                        <form method="POST" id="registerForm">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="name" class="form-label">姓名 <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="name" name="name" 
                                           placeholder="孩子的姓名" required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="age" class="form-label">年龄 <span class="text-danger">*</span></label>
                                    <select class="form-select" id="age" name="age" required>
                                        <option value="">请选择年龄</option>
                                        <option value="3">3岁</option>
                                        <option value="4">4岁</option>
                                        <option value="5">5岁</option>
                                        <option value="6">6岁</option>
                                        <option value="7">7岁</option>
                                    </select>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">性别 <span class="text-danger">*</span></label>
                                <div class="d-flex gap-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="gender" id="gender_male" value="0" required>
                                        <label class="form-check-label" for="gender_male">
                                            <i class="fas fa-mars text-primary me-1"></i>小王子
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="gender" id="gender_female" value="1" required>
                                        <label class="form-check-label" for="gender_female">
                                            <i class="fas fa-venus text-pink me-1"></i>小公主
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="email" class="form-label">邮箱地址 <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                                    <input type="email" class="form-control" id="email" name="email" 
                                           placeholder="请输入邮箱地址" required>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="verification_code" class="form-label">邮箱验证码 <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="verification_code" name="verification_code" 
                                           placeholder="请输入6位验证码" maxlength="6" required>
                                    <button type="button" class="btn btn-outline-primary" id="sendCodeBtn">
                                        发送验证码
                                    </button>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="password" class="form-label">密码 <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fas fa-lock"></i>
                                        </span>
                                        <input type="password" class="form-control" id="password" name="password" 
                                               placeholder="至少6位密码" required minlength="6">
                                        <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="confirm_password" class="form-label">确认密码 <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <span class="input-group-text">
                                            <i class="fas fa-lock"></i>
                                        </span>
                                        <input type="password" class="form-control" id="confirm_password" name="confirm_password" 
                                               placeholder="再次输入密码" required minlength="6">
                                        <button class="btn btn-outline-secondary" type="button" id="toggleConfirmPassword">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="parent_contact" class="form-label">家长联系方式 <span class="text-muted">(可选)</span></label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-phone-alt"></i></span>
                                    <input type="text" class="form-control" id="parent_contact" name="parent_contact" 
                                           placeholder="手机号或微信号，便于沟通">
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary w-100 py-2 my-3" id="submitBtn">
                                <i class="fas fa-user-plus me-2"></i>完成注册
                            </button>
                        </form>

                        <hr class="my-2">

                        <div class="text-center">
                            <p class="mb-0">已有账户？ 
                                <a href="{{ url_for('auth.login') }}" class="fw-bold" style="color: var(--kid-accent);">
                                    马上登录
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    let countdownTimer = null;
    
    // 密码显示/隐藏切换
    function setupPasswordToggle(toggleId, inputId) {
        const toggle = document.getElementById(toggleId);
        const input = document.getElementById(inputId);
        
        toggle.addEventListener('click', function() {
            const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
            input.setAttribute('type', type);
            
            const icon = toggle.querySelector('i');
            icon.classList.toggle('fa-eye');
            icon.classList.toggle('fa-eye-slash');
        });
    }
    
    setupPasswordToggle('togglePassword', 'password');
    setupPasswordToggle('toggleConfirmPassword', 'confirm_password');
    
    // 发送验证码
    const sendCodeBtn = document.getElementById('sendCodeBtn');
    sendCodeBtn.addEventListener('click', function() {
        const email = document.getElementById('email').value.trim();
        
        if (!email) {
            alert('请先输入邮箱地址');
            return;
        }
        
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(email)) {
            alert('请输入有效的邮箱地址');
            return;
        }
        
        // 禁用按钮
        sendCodeBtn.disabled = true;
        sendCodeBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>发送中...';
        
        // 发送验证码
        fetch('/auth/send-verification-code', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                email: email,
                type: 'register'
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('验证码已发送到您的邮箱！');
                startCountdown();
            } else {
                alert(data.message || '发送失败，请重试');
                sendCodeBtn.disabled = false;
                sendCodeBtn.innerHTML = '发送验证码';
            }
        })
        .catch(error => {
            alert('发送失败，请检查网络连接');
            sendCodeBtn.disabled = false;
            sendCodeBtn.innerHTML = '发送验证码';
        });
    });
    
    // 倒计时
    function startCountdown() {
        let count = 60;
        countdownTimer = setInterval(() => {
            sendCodeBtn.innerHTML = `${count}秒后重试`;
            count--;
            
            if (count < 0) {
                clearInterval(countdownTimer);
                sendCodeBtn.disabled = false;
                sendCodeBtn.innerHTML = '重新发送';
            }
        }, 1000);
    }
    
    // 表单验证
    const registerForm = document.getElementById('registerForm');
    registerForm.addEventListener('submit', function(e) {
        const password = document.getElementById('password').value;
        const confirmPassword = document.getElementById('confirm_password').value;
        const verificationCode = document.getElementById('verification_code').value.trim();
        
        if (password !== confirmPassword) {
            e.preventDefault();
            alert('两次输入的密码不一致');
            return;
        }
        
        if (password.length < 6) {
            e.preventDefault();
            alert('密码长度至少6位');
            return;
        }
        
        if (!verificationCode || verificationCode.length !== 6) {
            e.preventDefault();
            alert('请输入6位验证码');
            return;
        }
        
        // 显示提交状态
        const submitBtn = document.getElementById('submitBtn');
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>注册中...';
    });
    
    // 验证码输入限制
    const verificationInput = document.getElementById('verification_code');
    verificationInput.addEventListener('input', function(e) {
        e.target.value = e.target.value.replace(/[^0-9]/g, '');
    });
});
</script>
{% endblock %}