import { state } from './state.js';

export const Login = {
    render(onLoginSuccess) {
        const container = document.getElementById('view-container');
        container.innerHTML = `
            <div class="w-full h-full flex items-center justify-center p-6 animate-fade-in">
                <div class="glass-card max-w-md w-full p-10 space-y-8 border-white/5 shadow-2xl">
                    <div class="text-center space-y-2">
                        <h2 class="text-3xl font-serif tracking-wider text-white/90">欢迎回来</h2>
                        <p class="text-sm text-white/40 italic">开启你的数字生命档案</p>
                    </div>

                    <div class="space-y-4">
                        <div class="space-y-2">
                            <label class="text-[10px] text-white/30 uppercase tracking-[0.2em] font-bold">手机号码</label>
                            <input type="tel" id="login-phone" placeholder="输入手机号" 
                                class="glass-input w-full text-center tracking-[0.1em]" maxlength="11">
                        </div>
                        
                        <div class="grid grid-cols-3 gap-3">
                            <div class="col-span-2 space-y-2">
                                <label class="text-[10px] text-white/30 uppercase tracking-[0.2em] font-bold">验证码</label>
                                <input type="text" id="login-code" placeholder="六位验证码" 
                                    class="glass-input w-full text-center" maxlength="6">
                            </div>
                            <div class="flex items-end">
                                <button id="get-code-btn" class="w-full h-[46px] rounded-2xl border border-white/5 bg-white/5 text-[10px] uppercase tracking-tighter hover:bg-white/10 transition-all">
                                    获取
                                </button>
                            </div>
                        </div>
                    </div>

                    <button id="login-submit" class="w-full glass-btn py-4 rounded-2xl bg-orange-200/5 text-orange-200 font-bold tracking-[0.3em] hover:bg-orange-200/10 transition-all border-orange-200/20 shadow-lg shadow-orange-900/10">
                        开启旅程
                    </button>

                    <p class="text-[10px] text-center text-white/20 px-4 leading-relaxed">
                        登录即代表同意《用户协议》与《隐私政策》，我们将妥善保管您的生命数据。
                    </p>
                </div>
            </div>
        `;

        const phoneInput = document.getElementById('login-phone');
        const codeInput = document.getElementById('login-code');
        const codeBtn = document.getElementById('get-code-btn');
        const loginBtn = document.getElementById('login-submit');

        codeBtn.onclick = () => {
            if (phoneInput.value.length !== 11) return alert('请输入正确的手机号');
            codeBtn.disabled = true;
            let count = 60;
            const timer = setInterval(() => {
                codeBtn.innerText = `${count}S`;
                count--;
                if (count < 0) {
                    clearInterval(timer);
                    codeBtn.disabled = false;
                    codeBtn.innerText = '获取';
                }
            }, 1000);
            alert('验证码已发送 (模拟验证码: 888888)');
        };

        loginBtn.onclick = () => {
            if (phoneInput.value.length === 11 && codeInput.value === '888888') {
                state.isLoggedIn = true;
                state.phone = phoneInput.value;
                state.save();
                onLoginSuccess();
            } else {
                alert('验证失败，请检查手机号或验证码');
            }
        };
    }
};