export const UI = {
    inspirationClusters: {
        childhood: ['秋千', '晚霞', '糖果', '奔跑', '蝉鸣', '雨后泥土', '旧书包', '风筝'],
        joy: ['海浪', '拥抱', '掌声', '晨曦', '破土而出', '默契', '星空', '释放'],
        low: ['落叶', '雨伞', '长廊', '深呼吸', '自愈', '沉潜', '坚韧', '等待', '破茧']
    },

    renderInspiration(type, targetId) {
        const words = this.inspirationClusters[type];
        return words.map(word => `
            <span class="prompt-tag px-3 py-1 bg-white/5 border border-white/5 rounded-full text-[10px] text-white/40 cursor-pointer hover:bg-orange-200/10 hover:text-orange-200 transition-all" 
                onclick="document.getElementById('${targetId}').value += '${word}'">${word}</span>
        `).join('');
    },

    renderInput(label, id, type = 'text', placeholder = '', value = '') {
        return `
            <div class="flex flex-col gap-2 mb-4 w-full">
                <label class="text-[10px] text-white/30 uppercase tracking-widest font-bold">${label}</label>
                <input type="${type}" id="${id}" value="${value}" placeholder="${placeholder}"
                    class="glass-input w-full focus:ring-2 focus:ring-orange-200/50">
            </div>
        `;
    },

    renderTextArea(label, id, placeholder = '', value = '') {
        return `
            <div class="flex flex-col gap-2 mb-4 w-full">
                <label class="text-[10px] text-white/30 uppercase tracking-widest font-bold">${label}</label>
                <textarea id="${id}" rows="4" placeholder="${placeholder}" 
                    class="glass-input w-full resize-none focus:ring-2 focus:ring-orange-200/50">${value}</textarea>
            </div>
        `;
    },

    renderSelect(label, id, options, selectedValue = '') {
        return `
            <div class="flex flex-col gap-2 mb-4 w-full">
                <label class="text-[10px] text-white/30 uppercase tracking-widest font-bold">${label}</label>
                <select id="${id}" class="glass-input w-full appearance-none">
                    ${options.map(opt => `<option value="${opt.value}" ${opt.value === selectedValue ? 'selected' : ''}>${opt.label}</option>`).join('')}
                </select>
            </div>
        `;
    },

    renderAccountSettings(data) {
        return `
            <div class="space-y-6 animate-fade-in">
                <div class="flex items-center gap-4 mb-8">
                    <div class="w-12 h-12 rounded-full bg-orange-200/10 flex items-center justify-center">
                        <i data-lucide="settings-2" class="text-orange-200 w-5 h-5"></i>
                    </div>
                    <div>
                        <h4 class="text-xl font-serif">个人设定</h4>
                        <p class="text-xs text-white/40">在这里调整你的人生航向基础信息</p>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6">
                    ${this.renderInput('昵称', 'edit-nickname', 'text', '你想被如何称呼？', data.nickname)}
                    ${this.renderInput('职业', 'edit-profession', 'text', '你当下的社会锚点', data.profession || '')}
                    ${this.renderInput('MBTI', 'edit-mbti', 'text', '性格色彩', data.mbti)}
                    ${this.renderInput('星座', 'edit-zodiac', 'text', '星辰指引', data.zodiac)}
                </div>
                ${this.renderInput('兴趣爱好', 'edit-hobbies', 'text', '让灵魂起舞的事物', data.hobbies.join(', '))}
                
                <div class="flex gap-4 mt-8 pt-6 border-t border-white/5">
                    <button id="save-profile-btn" class="flex-1 glass-btn py-3 bg-orange-200/10 text-orange-100 font-bold tracking-widest">保存修改</button>
                    <button id="cancel-edit-btn" class="px-6 glass-btn py-3 text-white/40">返回</button>
                </div>
            </div>
        `;
    }
};