happy-life-star/web-prototype/registration.js

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

export const Registration = {
    render() {
        const container = document.getElementById('view-container');
        container.innerHTML = `
            <div id="step-container" class="w-full h-full flex flex-col items-center justify-center">
                <div id="step-content" class="glass-card w-full max-w-2xl p-8 min-h-[500px] flex flex-col justify-between overflow-y-auto">
                    <!-- Step content will be injected here -->
                </div>
                <div class="mt-8 flex gap-3" id="step-indicators">
                    <div class="step-indicator" data-step="1"></div>
                    <div class="step-indicator" data-step="2"></div>
                    <div class="step-indicator" data-step="3"></div>
                    <div class="step-indicator" data-step="4"></div>
                    <div class="step-indicator" data-step="5"></div>
                </div>
            </div>
        `;
        this.goToStep(1);
    },

    goToStep(step) {
        state.currentStep = step;
        const content = document.getElementById('step-content');
        
        gsap.to(content, { opacity: 0, y: 10, duration: 0.3, onComplete: () => {
            this.renderStep(step, content);
            gsap.to(content, { opacity: 1, y: 0, duration: 0.5 });
            this.updateIndicators(step);
            lucide.createIcons();
        }});
    },

    renderStep(step, el) {
        switch(step) {
            case 1:
                el.innerHTML = `
                    <div class="text-center mb-6">
                        <h2 class="text-3xl font-serif mb-2">你是谁？</h2>
                        <p class="text-white/40">让我们从最基础的认知开始...</p>
                    </div>
                    <div class="space-y-4">
                        ${UI.renderInput('昵称', 'reg-nick', 'text', '你想如何称呼自己？')}
                        <div class="grid grid-cols-2 gap-4">
                            ${UI.renderInput('星座', 'reg-zodiac', 'text', '如：天蝎座')}
                            ${UI.renderInput('MBTI', 'reg-mbti', 'text', '如：INFJ')}
                        </div>
                        ${UI.renderInput('兴趣爱好', 'reg-hobbies', 'text', '用逗号分隔你的热爱')}
                    </div>
                    <div class="flex justify-end mt-8">
                        <button id="btn-next" class="glass-btn px-8 py-3 rounded-full flex items-center gap-2">
                            下一步 <i data-lucide="arrow-right" class="w-4 h-4"></i>
                        </button>
                    </div>
                `;
                document.getElementById('btn-next').onclick = () => {
                    state.updateRegistration({
                        nickname: document.getElementById('reg-nick').value,
                        zodiac: document.getElementById('reg-zodiac').value,
                        mbti: document.getElementById('reg-mbti').value,
                        hobbies: document.getElementById('reg-hobbies').value.split(',')
                    });
                    this.goToStep(2);
                };
                break;

            case 2: // Childhood
                el.innerHTML = `
                    <div class="flex flex-col md:flex-row gap-8 h-full">
                        <div class="flex-1">
                            <h2 class="text-2xl font-serif mb-2">童年往事</h2>
                            <p class="text-white/40 mb-6 text-sm">那个阶段，你的世界是什么颜色的？</p>
                            ${UI.renderInput('大约时间', 'reg-child-date', 'date')}
                            ${UI.renderTextArea('描述你的感受', 'reg-child-text', '那个午后，我在...')}
                            <div class="flex flex-wrap gap-2 mt-2">${UI.renderInspiration('childhood', 'reg-child-text')}</div>
                        </div>
                        <div class="w-full md:w-1/3 flex items-center justify-center">
                            <img src="https://r2-bucket.flowith.net/f/182f104dccfd0838/illustration_past_dimension_index_2%401024x1024.jpeg" class="rounded-2xl shadow-xl w-full aspect-square object-cover opacity-80">
                        </div>
                    </div>
                    <div class="flex justify-between mt-8">
                        <button onclick="window.reg_instance.goToStep(1)" class="text-white/40 hover:text-white">返回</button>
                        <button id="btn-next" class="glass-btn px-8 py-3 rounded-full">继续探索</button>
                    </div>
                `;
                document.getElementById('btn-next').onclick = () => {
                    state.updateRegistration({ childhood: { date: document.getElementById('reg-child-date').value, text: document.getElementById('reg-child-text').value }});
                    this.goToStep(3);
                };
                break;

            case 3: // Joy
                el.innerHTML = `
                    <div class="flex flex-col md:flex-row gap-8 h-full">
                        <div class="flex-1">
                            <h2 class="text-2xl font-serif mb-2">感到满足的瞬间</h2>
                            <p class="text-white/40 mb-6 text-sm">那些让你嘴角上扬，感到充盈的经历。</p>
                            ${UI.renderInput('发生日期', 'reg-joy-date', 'date')}
                            ${UI.renderTextArea('那一刻发生了什么？', 'reg-joy-text', '微风拂过，我发现...')}
                            <div class="flex flex-wrap gap-2 mt-2">${UI.renderInspiration('joy', 'reg-joy-text')}</div>
                        </div>
                        <div class="w-full md:w-1/3 flex items-center justify-center">
                            <img src="https://r2-bucket.flowith.net/f/5ec7d5ffbfed2024/illustration_recording_present_moment_index_3%401024x1024.jpeg" class="rounded-2xl shadow-xl w-full aspect-square object-cover opacity-80">
                        </div>
                    </div>
                    <div class="flex justify-between mt-8">
                        <button onclick="window.reg_instance.goToStep(2)" class="text-white/40 hover:text-white">返回</button>
                        <button id="btn-next" class="glass-btn px-8 py-3 rounded-full">继续探索</button>
                    </div>
                `;
                document.getElementById('btn-next').onclick = () => {
                    state.updateRegistration({ joy: { date: document.getElementById('reg-joy-date').value, text: document.getElementById('reg-joy-text').value }});
                    this.goToStep(4);
                };
                break;

            case 4: // Low points
                el.innerHTML = `
                    <div class="flex flex-col md:flex-row gap-8 h-full">
                        <div class="flex-1">
                            <h2 class="text-2xl font-serif mb-2">沉潜的时光</h2>
                            <p class="text-white/40 mb-6 text-sm">那些让你慢下来，向内生长的日子。</p>
                            ${UI.renderInput('大约时间', 'reg-low-date', 'date')}
                            ${UI.renderTextArea('你是如何度过的？', 'reg-low-text', '在寂静中，我开始思考...')}
                            <div class="flex flex-wrap gap-2 mt-2">${UI.renderInspiration('low', 'reg-low-text')}</div>
                        </div>
                        <div class="w-full md:w-1/3 flex items-center justify-center">
                            <div class="glass-card w-full aspect-square flex items-center justify-center bg-slate-800/50">
                                <i data-lucide="cloud-rain" class="w-16 h-16 text-white/20"></i>
                            </div>
                        </div>
                    </div>
                    <div class="flex justify-between mt-8">
                        <button onclick="window.reg_instance.goToStep(3)" class="text-white/40 hover:text-white">返回</button>
                        <button id="btn-next" class="glass-btn px-8 py-3 rounded-full">接近未来</button>
                    </div>
                `;
                document.getElementById('btn-next').onclick = () => {
                    state.updateRegistration({ low: { date: document.getElementById('reg-low-date').value, text: document.getElementById('reg-low-text').value }});
                    this.goToStep(5);
                };
                break;

            case 5: // Future
                el.innerHTML = `
                    <div class="flex flex-col md:flex-row gap-8 h-full">
                        <div class="flex-1">
                            <h2 class="text-2xl font-serif mb-2">展望未来</h2>
                            <p class="text-white/40 mb-6 text-sm">你渴望成为一个怎样的人？</p>
                            ${UI.renderTextArea('未来的愿景', 'reg-future-vision', '我希望在三年后...')}
                            ${UI.renderTextArea('理想生活状态', 'reg-future-ideal', '每天清晨，我能够...')}
                        </div>
                        <div class="w-full md:w-1/3 flex items-center justify-center">
                            <img src="https://r2-bucket.flowith.net/f/5039a9a6936372c4/create_future_illustration_index_4%401024x1024.jpeg" class="rounded-2xl shadow-xl w-full aspect-square object-cover opacity-80">
                        </div>
                    </div>
                    <div class="flex justify-between mt-8">
                        <button onclick="window.reg_instance.goToStep(4)" class="text-white/40 hover:text-white">返回</button>
                        <button id="btn-finish" class="glass-btn px-8 py-3 bg-orange-200/20 text-orange-200 border-orange-200/30 rounded-full">开启人生新篇章</button>
                    </div>
                `;
                document.getElementById('btn-finish').onclick = () => {
                    state.updateRegistration({ future: { vision: document.getElementById('reg-future-vision').value, ideal: document.getElementById('reg-future-ideal').value }});
                    this.completeRegistration();
                };
                break;
        }
    },

    updateIndicators(step) {
        document.querySelectorAll('.step-indicator').forEach(el => {
            el.classList.toggle('active', parseInt(el.dataset.step) === step);
        });
    },

    completeRegistration() {
        const loader = document.getElementById('loader');
        loader.classList.remove('hidden');
        setTimeout(() => {
            state.view = 'dashboard';
            window.location.reload(); // Simple way to re-init app view
        }, 1500);
    }
};
window.reg_instance = Registration;