{% extends "base.html" %}
{% block title %}注册 - 智联青云{% endblock %}
{% block navbar %}{% endblock %}
{% block content %}
<div class="min-h-screen bg-slate-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
    <div class="sm:mx-auto sm:w-full sm:max-w-md">
        <h2 class="mt-6 text-center text-3xl font-extrabold text-slate-900">注册新账户</h2>
        <p class="mt-2 text-center text-sm text-slate-600">
            已有账户？ <a href="/login" class="font-medium text-primary hover:text-blue-500">立即登录</a>
        </p>
    </div>
    <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
        <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
            <!-- 选项卡 -->
            <div class="flex border-b border-slate-200 mb-6">
                <button id="tab-phone" onclick="switchTab('phone')" class="flex-1 pb-4 text-sm font-medium text-center text-primary border-b-2 border-primary">手机号注册</button>
                <button id="tab-email" onclick="switchTab('email')" class="flex-1 pb-4 text-sm font-medium text-center text-slate-500 hover:text-slate-700">邮箱注册</button>
            </div>

            <!-- 手机注册表单 -->
            <form id="form-phone" class="space-y-6" onsubmit="handlePhoneRegister(event)">
                <div>
                    <label class="block text-sm font-medium text-slate-700">姓名</label>
                    <input id="phone-name" type="text" required class="mt-1 appearance-none block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm placeholder-slate-400 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">手机号码</label>
                    <input id="phone-number" type="tel" required class="mt-1 appearance-none block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm placeholder-slate-400 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">图形验证码</label>
                    <div class="mt-1 flex items-center space-x-2">
                        <input id="captcha-text-phone" type="text" class="focus:ring-primary focus:border-primary block flex-1 sm:text-sm border-slate-300 rounded-md py-2 border px-3" placeholder="请输入图形验证码">
                        <img id="captcha-img-phone" class="cursor-pointer h-10" onclick="fetchCaptcha('phone')" alt="验证码">
                        <button type="button" onclick="fetchCaptcha('phone')" class="p-2 text-slate-400 hover:text-slate-600" title="刷新验证码">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">短信验证码</label>
                    <div class="mt-1 flex rounded-md shadow-sm">
                        <input id="sms-code-phone" type="text" required class="focus:ring-primary focus:border-primary block w-full rounded-none rounded-l-md sm:text-sm border-slate-300 py-2 border px-3" placeholder="请输入短信验证码">
                        <button type="button" id="send-sms-btn-phone" onclick="handleSendSmsPhone()" class="relative inline-flex items-center px-4 py-2 border border-slate-300 text-sm font-medium rounded-r-md text-slate-700 bg-slate-50 hover:bg-slate-100">获取验证码</button>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">密码</label>
                    <input id="phone-password" type="password" required class="mt-1 appearance-none block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm placeholder-slate-400 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">确认密码</label>
                    <input id="phone-confirm" type="password" required class="mt-1 appearance-none block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm placeholder-slate-400 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm">
                </div>
                <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-blue-700">注册</button>
            </form>

            <!-- 邮箱注册表单（已添加手机号绑定） -->
            <form id="form-email" class="space-y-6 hidden" onsubmit="handleEmailRegister(event)">
                <div>
                    <label class="block text-sm font-medium text-slate-700">姓名</label>
                    <input id="reg-name" type="text" required class="mt-1 appearance-none block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm placeholder-slate-400 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">邮箱地址</label>
                    <input id="reg-email" type="email" required class="mt-1 appearance-none block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm placeholder-slate-400 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">手机号码（用于绑定）</label>
                    <input id="reg-phone" type="tel" required class="mt-1 appearance-none block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm placeholder-slate-400 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">图形验证码</label>
                    <div class="mt-1 flex items-center space-x-2">
                        <input id="captcha-text-reg" type="text" class="focus:ring-primary focus:border-primary block flex-1 sm:text-sm border-slate-300 rounded-md py-2 border px-3" placeholder="请输入图形验证码">
                        <img id="captcha-img-reg" class="cursor-pointer h-10" onclick="fetchCaptcha('reg')" alt="验证码">
                        <button type="button" onclick="fetchCaptcha('reg')" class="p-2 text-slate-400 hover:text-slate-600" title="刷新验证码">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">邮箱验证码</label>
                    <div class="mt-1 flex rounded-md shadow-sm">
                        <input id="reg-email-code" type="text" required class="focus:ring-primary focus:border-primary block w-full rounded-none rounded-l-md sm:text-sm border-slate-300 py-2 border px-3" placeholder="请输入邮箱验证码">
                        <button type="button" id="send-email-btn" onclick="handleSendEmailCode()" class="relative inline-flex items-center px-4 py-2 border border-slate-300 text-sm font-medium rounded-r-md text-slate-700 bg-slate-50 hover:bg-slate-100">获取验证码</button>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">密码</label>
                    <input id="reg-password" type="password" required class="mt-1 appearance-none block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm placeholder-slate-400 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700">确认密码</label>
                    <input id="reg-confirm" type="password" required class="mt-1 appearance-none block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm placeholder-slate-400 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm">
                </div>
                <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-blue-700">注册</button>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let captchaId = '';
let countdown = 0;

// 切换选项卡
function switchTab(tab) {
    document.getElementById('form-phone').classList.toggle('hidden', tab !== 'phone');
    document.getElementById('form-email').classList.toggle('hidden', tab !== 'email');
    document.getElementById('tab-phone').className = 'flex-1 pb-4 text-sm font-medium text-center ' + (tab === 'phone' ? 'text-primary border-b-2 border-primary' : 'text-slate-500 hover:text-slate-700');
    document.getElementById('tab-email').className = 'flex-1 pb-4 text-sm font-medium text-center ' + (tab === 'email' ? 'text-primary border-b-2 border-primary' : 'text-slate-500 hover:text-slate-700');
}

// 获取图形验证码
async function fetchCaptcha(suffix) {
    try {
        const res = await fetch('/api/captcha');
        const data = await res.json();
        captchaId = data.captchaId;
        document.getElementById('captcha-img-' + suffix).src = 'data:image/png;base64,' + data.img;
        const input = document.getElementById('captcha-text-' + suffix);
        if (input) input.value = '';
    } catch(e) { console.error('获取验证码失败', e); }
}

// 手机注册发送短信验证码
async function handleSendSmsPhone() {
    const phone = document.getElementById('phone-number').value;
    const captchaText = document.getElementById('captcha-text-phone').value;
    if (!/^1[3-9]\d{9}$/.test(phone)) { alert('请输入有效的中国手机号码'); return; }
    if (!captchaText) { alert('请输入图形验证码'); return; }
    const btn = document.getElementById('send-sms-btn-phone');
    btn.disabled = true;
    try {
        const res = await fetch('/api/send-sms', { 
            method: 'POST', 
            headers: {'Content-Type':'application/json'}, 
            body: JSON.stringify({phone, captchaId, captchaText}) 
        });
        const data = await res.json();
        if (data.success) {
            countdown = 60;
            const timer = setInterval(() => { 
                countdown--; 
                btn.textContent = countdown > 0 ? countdown+'s后重发' : '获取验证码'; 
                if(countdown<=0){clearInterval(timer);btn.disabled=false;} 
            }, 1000);
            if (data.mockCode) alert('验证码已发送: ' + data.mockCode);
            else alert('验证码已发送');
        } else { 
            alert(data.message); 
            btn.disabled = false; 
            if(data.refreshCaptcha) fetchCaptcha('phone'); 
        }
    } catch(e) { 
        alert('发送失败，请确保后端已启动'); 
        btn.disabled = false; 
    }
    fetchCaptcha('phone');
}

// 手机注册提交
async function handlePhoneRegister(e) {
    e.preventDefault();
    const password = document.getElementById('phone-password').value;
    const confirm = document.getElementById('phone-confirm').value;
    if (password !== confirm) { alert('两次输入的密码不一致'); return; }
    const body = {
        name: document.getElementById('phone-name').value,
        phone: document.getElementById('phone-number').value,
        password: password,
        smsCode: document.getElementById('sms-code-phone').value
    };
    try {
        const res = await fetch('/api/register-mobile', { 
            method:'POST', 
            headers:{'Content-Type':'application/json'}, 
            body: JSON.stringify(body) 
        });
        const data = await res.json();
        if (data.success) { 
            alert('注册成功！'); 
            window.location.href = '/'; 
        } else { 
            alert(data.message); 
        }
    } catch(e) { 
        alert('注册失败'); 
    }
}

// 邮箱发送验证码（保持不变）
async function handleSendEmailCode() {
    const email = document.getElementById('reg-email').value;
    const captchaText = document.getElementById('captcha-text-reg').value;
    if (!email) { alert('请先输入邮箱地址'); return; }
    if (!captchaText) { alert('请输入图形验证码'); return; }
    const btn = document.getElementById('send-email-btn');
    btn.disabled = true;
    try {
        const res = await fetch('/api/send-email-code', { 
            method:'POST', 
            headers:{'Content-Type':'application/json'}, 
            body: JSON.stringify({email, captchaId, captchaText}) 
        });
        const data = await res.json();
        if (data.success) {
            countdown = 60;
            const timer = setInterval(() => { 
                countdown--; 
                btn.textContent = countdown > 0 ? countdown+'s后重发' : '获取验证码'; 
                if(countdown<=0){clearInterval(timer);btn.disabled=false;} 
            }, 1000);
            alert('验证码已发送到邮箱，请查收');
        } else { 
            alert(data.message); 
            btn.disabled = false; 
            if(data.refreshCaptcha) fetchCaptcha('reg'); 
        }
    } catch(e) { 
        alert('发送失败'); 
        btn.disabled = false; 
    }
    fetchCaptcha('reg');
}

// 邮箱注册提交（修改，增加手机号）
async function handleEmailRegister(e) {
    e.preventDefault();
    const password = document.getElementById('reg-password').value;
    const confirm = document.getElementById('reg-confirm').value;
    if (password !== confirm) { alert('两次输入的密码不一致'); return; }
    const body = {
        name: document.getElementById('reg-name').value,
        email: document.getElementById('reg-email').value,
        phone: document.getElementById('reg-phone').value,
        password: password,
        emailCode: document.getElementById('reg-email-code').value
    };
    try {
        const res = await fetch('/api/register', { 
            method:'POST', 
            headers:{'Content-Type':'application/json'}, 
            body: JSON.stringify(body) 
        });
        const data = await res.json();
        if (data.success) { 
            alert('注册成功！'); 
            window.location.href = '/'; 
        } else { 
            alert(data.message); 
        }
    } catch(e) { 
        alert('注册失败'); 
    }
}

// 初始化图形验证码（默认手机选项卡）
fetchCaptcha('phone');
</script>
{% endblock %}