<div class="space-y-6">
    
    <!-- Gender Selection -->
    <div class="cyber-card p-4 border border-cyber-primary/30">
        <h3 class="font-cyber cyber-text-primary mb-4">{lang gender}</h3>
        <div class="flex space-x-4">
            <label class="flex items-center space-x-2 cursor-pointer">
                <input type="radio" id="male" name="gender" onclick="userIconMover()" value="m" 
                       <!--{if $gender != "f"}-->checked<!--{/if}--> 
                       class="cyber-input">
                <span class="cyber-text-primary">$sexinfo['m']</span>
            </label>
            <label class="flex items-center space-x-2 cursor-pointer">
                <input type="radio" name="gender" onclick="userIconMover()" value="f" 
                       <!--{if $gender == "f"}-->checked<!--{/if}--> 
                       class="cyber-input">
                <span class="cyber-text-primary">$sexinfo['f']</span>
            </label>
        </div>
    </div>
    
    <!-- Icon Selection -->
    <div class="cyber-card p-4 border border-cyber-primary/30">
        <h3 class="font-cyber cyber-text-primary mb-4">{lang icon}</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block cyber-text-secondary mb-2">选择头像</label>
                <select id="icon" name="icon" class="cyber-input w-full" onchange="userIconMover()">
                    <!--{loop $iconarray $icon}-->
                    $icon
                    <!--{/loop}-->
                </select>
                <div class="text-xs cyber-text-secondary mt-2">
                    （0为随机）
                </div>
            </div>
            <div class="flex justify-center">
                <div id="userIconImg" class="cyber-card p-4 border border-cyber-primary/50">
                    <!--{eval $user_avatar_path = 'img/'.($gender != 'f' ? 'm' : 'f').'_'.$select_icon.'.gif';}-->
                    <!--{if !empty($groomid) && $groomid > 0}-->
                        <!--{eval $result = $db->query("SELECT gruleset FROM {$gtablepre}game WHERE groomid = {$groomid}");}-->
                        <!--{if $db->num_rows($result)}-->
                            <!--{eval $room_data = $db->fetch_array($result);}-->
                            <!--{eval $ruleset_id = $room_data['gruleset'];}-->
                            <!--{if !empty($ruleset_id)}-->
                                <!--{eval include_once GAME_ROOT.'./gamedata/ruleset/ruleset_config.php';}-->
                                <!--{eval $avatar_type = $gender == 'f' ? 'female' : 'male';}-->
                                <!--{eval $ruleset_avatar_path = get_ruleset_avatar_path($ruleset_id, $avatar_type, $select_icon);}-->
                                <!--{if $ruleset_avatar_path && file_exists($ruleset_avatar_path)}-->
                                    <!--{eval $user_avatar_path = $ruleset_avatar_path;}-->
                                <!--{/if}-->
                            <!--{/if}-->
                        <!--{/if}-->
                    <!--{/if}-->
                    <img src="$user_avatar_path"
                         alt="$select_icon"
                         class="w-20 h-12 object-cover cyber-glow">
                </div>
            </div>
        </div>
    </div>
    
    <!-- Interface Template Selection -->
    <!--{if CURSCRIPT == 'user'}-->
    <div class="cyber-card p-4 border border-cyber-primary/30">
        <h3 class="font-cyber cyber-text-primary mb-4">界面模板</h3>
        <div class="space-y-4">
            
            <!-- Classic Template -->
            <label class="flex items-start space-x-3 cursor-pointer cyber-card p-3 border border-cyber-secondary/30 hover:border-cyber-secondary transition-colors">
                <input type="radio" id="template_1" name="templateid" value="0" 
                       <!--{if !$u_templateid}-->checked<!--{/if}--> 
                       class="cyber-input mt-1">
                <div class="flex-1">
                    <div class="font-cyber cyber-text-primary">经典界面</div>
                    <div class="text-sm cyber-text-secondary mt-1">
                        传统的游戏界面，稳定可靠，适合所有设备
                    </div>
                    <div class="flex items-center space-x-2 mt-2">
                        <span class="px-2 py-1 bg-green-500/20 text-green-400 text-xs rounded">稳定</span>
                        <span class="px-2 py-1 bg-blue-500/20 text-blue-400 text-xs rounded">兼容性好</span>
                    </div>
                </div>
            </label>
            
            <!-- Nouveau Template -->
            <label class="flex items-start space-x-3 cursor-pointer cyber-card p-3 border border-cyber-primary/30 hover:border-cyber-primary transition-colors">
                <input type="radio" id="template_2" name="templateid" value="2"
                       <!--{if $u_templateid == 2}-->checked<!--{/if}-->
                       class="cyber-input mt-1">
                <div class="flex-1">
                    <div class="font-cyber cyber-text-primary">NOUVEAU（测试中）</div>
                    <div class="text-sm cyber-text-secondary mt-1">
                        全新的赛博朋克风格界面，响应式设计，支持多主题切换
                    </div>
                    <div class="flex items-center space-x-2 mt-2">
                        <span class="px-2 py-1 bg-cyan-500/20 text-cyan-400 text-xs rounded">现代化</span>
                        <span class="px-2 py-1 bg-purple-500/20 text-purple-400 text-xs rounded">响应式</span>
                        <span class="px-2 py-1 bg-pink-500/20 text-pink-400 text-xs rounded">多主题</span>
                        <span class="px-2 py-1 bg-orange-500/20 text-orange-400 text-xs rounded">测试中</span>
                        <span class="px-2 py-1 bg-green-500/20 text-green-400 text-xs rounded">中英双语</span>
                    </div>
                    <div class="mt-3 p-3 bg-cyber-bg-secondary/50 rounded border border-cyber-primary/20">
                        <div class="text-xs cyber-text-primary font-bold mb-2">✨ 新功能特性：</div>
                        <ul class="text-xs cyber-text-secondary space-y-1">
                            <li>• 赛博朋克/合成波朋克视觉风格</li>
                            <li>• 5种可切换的配色主题（赛博蓝、霓虹紫、矩阵绿、合成波橙、蒸汽波粉）</li>
                            <li>• 完全响应式设计，支持移动设备</li>
                            <li>• 增强的动画效果和交互体验</li>
                            <li>• 优化的聊天和游戏界面</li>
                            <li>• 现代化的按钮和表单控件</li>
                            <li>• 中英文双语支持，可随时切换</li>
                            <li>• 图片资源缺失时自动使用Emoji替代</li>
                        </ul>
                    </div>
                </div>
            </label>
            
            <!-- LULUXIA Template (Disabled) -->
            <label class="flex items-start space-x-3 cursor-not-allowed cyber-card p-3 border border-gray-600/30 opacity-50">
                <input type="radio" id="template_3" name="templateid" value="1" 
                       <!--{if $u_templateid == 1}-->checked<!--{/if}--> 
                       disabled
                       class="cyber-input mt-1">
                <div class="flex-1">
                    <div class="font-cyber text-gray-500">LULUXIA（未开放）</div>
                    <div class="text-sm text-gray-600 mt-1">
                        即将推出的新界面模板，敬请期待
                    </div>
                    <div class="flex items-center space-x-2 mt-2">
                        <span class="px-2 py-1 bg-gray-500/20 text-gray-400 text-xs rounded">开发中</span>
                    </div>
                </div>
            </label>
            
        </div>
        
        <!-- Template Preview -->
        <div class="mt-6 p-4 bg-cyber-bg-secondary/30 rounded border border-cyber-primary/20">
            <div class="text-sm cyber-text-primary font-bold mb-2">💡 提示：</div>
            <div class="text-xs cyber-text-secondary space-y-1">
                <p>• 选择模板后需要刷新页面才能生效</p>
                <p>• Nouveau模板支持快捷键 Ctrl+Shift+T 切换主题</p>
                <p>• 如遇到问题可随时切换回经典界面</p>
                <p>• 新模板仍在测试中，欢迎反馈意见</p>
            </div>
        </div>
    </div>
    <!--{/if}-->
    
</div>

<script>
// Enhanced user icon functionality
function userIconMover() {
    const gender = document.querySelector('input[name="gender"]:checked').value;
    const iconSelect = document.getElementById('icon');
    const iconImg = document.getElementById('userIconImg').querySelector('img');

    if (iconSelect && iconImg) {
        const iconValue = iconSelect.value;

        // 检查是否在RuleSet房间中
        let newSrc;
        if (typeof window.rulesetAvatarPath !== 'undefined' && window.rulesetAvatarPath) {
            newSrc = `${window.rulesetAvatarPath}${gender}_${iconValue}.gif`;
        } else {
            newSrc = `img/${gender}_${iconValue}.gif`;
        }

        iconImg.src = newSrc;
        iconImg.alt = iconValue;

        // Add animation effect
        iconImg.style.opacity = '0';
        setTimeout(() => {
            iconImg.style.opacity = '1';
            iconImg.style.transition = 'opacity 0.3s ease';
        }, 100);
    }
}

// Template selection enhancements
document.addEventListener('DOMContentLoaded', function() {
    const templateRadios = document.querySelectorAll('input[name="templateid"]');
    
    templateRadios.forEach(radio => {
        radio.addEventListener('change', function() {
            // Remove active state from all labels
            document.querySelectorAll('label[for^="template_"]').forEach(label => {
                label.classList.remove('border-cyber-primary', 'bg-cyber-primary/10');
            });
            
            // Add active state to selected label
            const label = document.querySelector(`label[for="${this.id}"]`);
            if (label && !this.disabled) {
                label.classList.add('border-cyber-primary', 'bg-cyber-primary/10');
                
                // Show notification for Nouveau template
                if (this.value === '2') {
                    showTemplateInfo();
                }
            }
        });
    });
    
    // Set initial active state
    const checkedRadio = document.querySelector('input[name="templateid"]:checked');
    if (checkedRadio) {
        const label = document.querySelector(`label[for="${checkedRadio.id}"]`);
        if (label) {
            label.classList.add('border-cyber-primary', 'bg-cyber-primary/10');
        }
    }
});

function showTemplateInfo() {
    if (window.showModal) {
        window.showModal('Nouveau 模板', `
            <div class="space-y-4 text-sm">
                <div class="cyber-terminal p-3">
                    <div class="cyber-text-primary">欢迎体验 Nouveau 界面！</div>
                </div>
                <div>
                    <h4 class="cyber-text-primary font-bold mb-2">主要特性：</h4>
                    <ul class="space-y-1 cyber-text-secondary">
                        <li>• 现代化的赛博朋克视觉设计</li>
                        <li>• 完全响应式，支持移动设备</li>
                        <li>• 5种主题配色可选</li>
                        <li>• 增强的动画和交互效果</li>
                        <li>• 优化的游戏界面布局</li>
                    </ul>
                </div>
                <div>
                    <h4 class="cyber-text-primary font-bold mb-2">快捷键：</h4>
                    <ul class="space-y-1 cyber-text-secondary">
                        <li>• Ctrl+Shift+T - 切换主题</li>
                        <li>• F11 - 全屏模式</li>
                    </ul>
                </div>
                <div class="cyber-card p-3 border border-cyber-warning/30">
                    <div class="cyber-text-warning text-xs">
                        ⚠️ 注意：此模板仍在测试阶段，如遇问题请切换回经典界面
                    </div>
                </div>
            </div>
        `);
    }
}

// Icon preview enhancements
document.getElementById('icon').addEventListener('change', function() {
    const iconImg = document.getElementById('userIconImg');
    iconImg.classList.add('cyber-pulse');
    setTimeout(() => {
        iconImg.classList.remove('cyber-pulse');
    }, 1000);
});
</script>

<style>
/* User configuration specific styles */
input[type="radio"] {
    appearance: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--cyber-border);
    border-radius: 50%;
    background: var(--cyber-bg-secondary);
    position: relative;
    cursor: pointer;
}

input[type="radio"]:checked {
    border-color: var(--cyber-primary);
    background: var(--cyber-primary);
}

input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cyber-bg-primary);
}

input[type="radio"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Template selection cards */
label[for^="template_"] {
    transition: all 0.3s ease;
}

label[for^="template_"]:hover:not(.cursor-not-allowed) {
    transform: translateY(-2px);
    box-shadow: var(--cyber-shadow);
}

/* Icon preview styling */
#userIconImg img {
    transition: all 0.3s ease;
}

#userIconImg:hover img {
    transform: scale(1.1);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .grid.grid-cols-1.md\\:grid-cols-2 {
        grid-template-columns: 1fr;
    }
    
    label[for^="template_"] {
        padding: 1rem;
    }
}
</style>
