<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title data-i18n="zeroclaw.title">ZeroClaw Config</title>
    <link rel="stylesheet" href="/static/css/zeroclaw.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="/static/js/i18n.js"></script>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #0a0a14;
            color: #e0e0e0;
            min-height: 100vh;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            background: #12121f;
            border-radius: 12px;
            margin-bottom: 20px;
        }
        .header h1 {
            font-size: 24px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .header-actions {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        .status-badge {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: #1a1a2e;
            border-radius: 20px;
            font-size: 14px;
        }
        .status-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #666;
        }
        .status-dot.active { background: #4ade80; box-shadow: 0 0 8px #4ade80; }
        .status-dot.inactive { background: #ef4444; }
        
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
        }
        .btn-primary { background: #6366f1; color: white; }
        .btn-primary:hover { background: #4f46e5; }
        .btn-success { background: #10b981; color: white; }
        .btn-success:hover { background: #059669; }
        .btn-warning { background: #f59e0b; color: white; }
        .btn-danger { background: #ef4444; color: white; }
        
        .layout {
            display: grid;
            grid-template-columns: 240px 1fr;
            gap: 20px;
        }
        
        /* 侧边栏 */
        .sidebar {
            background: #12121f;
            border-radius: 12px;
            padding: 16px;
            height: fit-content;
            position: sticky;
            top: 20px;
        }
        .sidebar-title {
            font-size: 12px;
            color: #666;
            text-transform: uppercase;
            margin-bottom: 12px;
            letter-spacing: 1px;
        }
        .nav-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 14px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            margin-bottom: 4px;
            color: #aaa;
        }
        .nav-item:hover { background: #1a1a2e; color: #fff; }
        .nav-item.active { background: #6366f1; color: white; }
        .nav-item span.icon { font-size: 18px; }
        
        /* 主内容区 */
        .main-content {
            background: #12121f;
            border-radius: 12px;
            padding: 24px;
            min-height: 600px;
        }
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
            padding-bottom: 16px;
            border-bottom: 1px solid #2a2a4e;
        }
        .section-title { font-size: 20px; font-weight: 600; }
        
        /* 表单项 */
        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .form-group.full-width { grid-column: 1 / -1; }
        .form-label {
            font-size: 13px;
            color: #888;
            font-weight: 500;
        }
        .form-input, .form-select {
            padding: 10px 14px;
            background: #0a0a14;
            border: 1px solid #2a2a4e;
            border-radius: 8px;
            color: #e0e0e0;
            font-size: 14px;
            transition: border-color 0.2s;
        }
        .form-input:focus, .form-select:focus {
            outline: none;
            border-color: #6366f1;
        }
        .form-textarea {
            padding: 10px 14px;
            background: #0a0a14;
            border: 1px solid #2a2a4e;
            border-radius: 8px;
            color: #e0e0e0;
            font-size: 13px;
            font-family: 'Monaco', 'Menlo', monospace;
            min-height: 120px;
            resize: vertical;
        }
        
        /* 开关 */
        .toggle-group {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid #1a1a2e;
        }
        .toggle-label { display: flex; flex-direction: column; gap: 4px; }
        .toggle-label .title { font-size: 14px; color: #e0e0e0; }
        .toggle-label .desc { font-size: 12px; color: #666; }
        .toggle {
            position: relative;
            width: 44px;
            height: 24px;
        }
        .toggle input { opacity: 0; width: 0; height: 0; }
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            inset: 0;
            background: #2a2a4e;
            border-radius: 24px;
            transition: 0.3s;
        }
        .toggle-slider:before {
            content: '';
            position: absolute;
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background: white;
            border-radius: 50%;
            transition: 0.3s;
        }
        .toggle input:checked + .toggle-slider { background: #6366f1; }
        .toggle input:checked + .toggle-slider:before { transform: translateX(20px); }
        
        /* 数组编辑 */
        .array-editor {
            background: #0a0a14;
            border: 1px solid #2a2a4e;
            border-radius: 8px;
            padding: 12px;
        }
        .array-item {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }
        .array-item input {
            flex: 1;
            padding: 8px 12px;
            background: #12121f;
            border: 1px solid #2a2a4e;
            border-radius: 6px;
            color: #e0e0e0;
        }
        .array-item .btn-remove {
            padding: 6px 10px;
            background: #2a2a4e;
            border: none;
            border-radius: 6px;
            color: #ef4444;
            cursor: pointer;
        }
        .btn-add {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            background: #1a1a2e;
            border: 1px dashed #3a3a5e;
            border-radius: 6px;
            color: #888;
            cursor: pointer;
            font-size: 13px;
            margin-top: 8px;
        }
        .btn-add:hover { border-color: #6366f1; color: #6366f1; }
        
        /* 折叠面板 */
        .collapse-item {
            border: 1px solid #2a2a4e;
            border-radius: 8px;
            margin-bottom: 12px;
            overflow: hidden;
        }
        .collapse-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 16px;
            background: #0a0a14;
            cursor: pointer;
            font-weight: 500;
        }
        .collapse-header:hover { background: #12121f; }
        .collapse-content {
            padding: 16px;
            display: none;
            border-top: 1px solid #2a2a4e;
        }
        .collapse-item.open .collapse-content { display: block; }
        
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #666;
        }
        .empty-state .icon { font-size: 48px; margin-bottom: 16px; }
        
        /* 加载状态 */
        .loading {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px;
            color: #666;
        }
        .spinner {
            width: 24px;
            height: 24px;
            border: 2px solid #2a2a4e;
            border-top-color: #6366f1;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin-right: 10px;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        
        @media (max-width: 768px) {
            .layout { grid-template-columns: 1fr; }
            .sidebar { position: static; }
            .form-grid { grid-template-columns: 1fr; }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1 data-i18n="zeroclaw.heading">ZeroClaw Configuration</h1>
            <div class="header-actions">
                <div class="status-badge">
                    <span class="status-dot" id="statusDot"></span>
                    <span id="statusText" data-i18n="zeroclaw.status_checking">Checking...</span>
                </div>
                <button class="btn btn-success" onclick="restartService()" data-i18n="zeroclaw.restart_service">Restart Service</button>
                <button class="btn btn-primary" onclick="saveCurrentSection()" data-i18n="zeroclaw.save_config">Save</button>
            </div>
        </div>
        
        <div class="layout">
            <div class="sidebar">
                <div class="sidebar-title">配置分类</div>
                <div id="navList"></div>
            </div>
            
            <div class="main-content" id="mainContent">
                <div class="loading">
                    <div class="spinner"></div>
                    <span>加载中...</span>
                </div>
            </div>
        </div>
    </div>

    <script>
        const CONFIG_PATH = '/root/.zeroclaw/config.toml';
        let currentSection = 'basic';
        let sections = [];
        
        // 加载sections
        async function loadSections() {
            try {
                const resp = await fetch('/api/zeroclaw/sections');
                const data = await resp.json();
                if (data.success) {
                    sections = data.sections;
                    renderNav();
                    loadSection('basic');
                }
            } catch(e) {
                console.error(e);
            }
        }
        
        // 渲染导航
        function renderNav() {
            const navList = document.getElementById('navList');
            navList.innerHTML = sections.map(s => `
                <div class="nav-item ${s.id === currentSection ? 'active' : ''}" 
                     data-id="${s.id}" onclick="loadSection('${s.id}')">
                    <span class="icon">${s.icon}</span>
                    <span>${s.name}</span>
                </div>
            `).join('');
        }
        
        // 加载section配置
        async function loadSection(sectionId) {
            currentSection = sectionId;
            renderNav();
            
            document.getElementById('mainContent').innerHTML = `
                <div class="loading">
                    <div class="spinner"></div>
                    <span>加载中...</span>
                </div>
            `;
            
            try {
                const resp = await fetch('/api/zeroclaw/section/' + sectionId);
                const data = await resp.json();
                if (data.success) {
                    renderSection(sectionId, data.data);
                }
            } catch(e) {
                document.getElementById('mainContent').innerHTML = `
                    <div class="empty-state">
                        <div class="icon">❌</div>
                        <div>加载失败</div>
                    </div>
                `;
            }
        }
        
        // 渲染section内容
        function renderSection(sectionId, data) {
            const container = document.getElementById('mainContent');
            const section = sections.find(s => s.id === sectionId);
            let html = `
                <div class="section-header">
                    <div class="section-title">${section ? section.icon + ' ' + section.name : sectionId}</div>
                </div>
                <div class="form-grid">
            `;
            
            if (sectionId === 'basic') {
                html += `
                    <div class="form-group">
                        <label class="form-label">默认供应商</label>
                        <input type="text" class="form-input" id="field-default_provider" 
                               value="${data.default_provider || ''}" placeholder="openrouter">
                    </div>
                    <div class="form-group">
                        <label class="form-label">默认模型</label>
                        <input type="text" class="form-input" id="field-default_model" 
                               value="${data.default_model || ''}" placeholder="anthropic/claude-sonnet-4.6">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Temperature</label>
                        <input type="number" class="form-input" id="field-default_temperature" 
                               value="${data.default_temperature || 0.7}" step="0.1" min="0" max="2">
                    </div>
                `;
            }
            else if (sectionId === 'providers') {
                html += `
                    <div class="form-group full-width">
                        <label class="form-label">模型供应商配置 (JSON格式)</label>
                        <textarea class="form-textarea" id="field-model_providers">${JSON.stringify(data, null, 2)}</textarea>
                    </div>
                `;
            }
            else if (sectionId === 'autonomy') {
                html += renderAutonomyFields(data);
            }
            else if (sectionId === 'security') {
                html += renderSecurityFields(data);
            }
            else if (sectionId === 'runtime') {
                html += `
                    <div class="form-group">
                        <label class="form-label">运行时类型</label>
                        <select class="form-select" id="field-runtime-kind">
                            <option value="native" ${data.runtime?.kind === 'native' ? 'selected' : ''}>Native</option>
                            <option value="docker" ${data.runtime?.kind === 'docker' ? 'selected' : ''}>Docker</option>
                        </select>
                    </div>
                    <div class="form-group full-width">
                        <label class="form-label">Docker 配置</label>
                        <textarea class="form-textarea" id="field-runtime-docker">${JSON.stringify(data.runtime?.docker || {}, null, 2)}</textarea>
                    </div>
                `;
            }
            else if (sectionId === 'gateway') {
                html += `
                    <div class="form-group">
                        <label class="form-label">端口</label>
                        <input type="number" class="form-input" id="field-gateway-port" 
                               value="${data.port || ''}">
                    </div>
                    <div class="form-group">
                        <label class="form-label">主机</label>
                        <input type="text" class="form-input" id="field-gateway-host" 
                               value="${data.host || ''}">
                    </div>
                    <div class="form-group">
                        <label class="form-label">需要配对</label>
                        <label class="toggle">
                            <input type="checkbox" id="field-gateway-require_pairing" 
                                   ${data.require_pairing ? 'checked' : ''}>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                `;
            }
            else if (sectionId === 'memory') {
                html += `
                    <div class="form-group">
                        <label class="form-label">后端类型</label>
                        <select class="form-select" id="field-memory-backend">
                            <option value="sqlite" ${data.backend === 'sqlite' ? 'selected' : ''}>SQLite</option>
                            <option value="none" ${data.backend === 'none' ? 'selected' : ''}>None</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">自动保存</label>
                        <label class="toggle">
                            <input type="checkbox" id="field-memory-auto_save" 
                                   ${data.auto_save !== false ? 'checked' : ''}>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="form-group">
                        <label class="form-label">记忆保留天数</label>
                        <input type="number" class="form-input" id="field-memory-conversation_retention_days" 
                               value="${data.conversation_retention_days || 30}">
                    </div>
                    <div class="form-group">
                        <label class="form-label">最大历史消息</label>
                        <input type="number" class="form-input" id="field-memory-max_history_messages" 
                               value="${data.max_history_messages || 50}">
                    </div>
                `;
            }
            else if (sectionId === 'agent') {
                html += `
                    <div class="form-group">
                        <label class="form-label">最大工具迭代次数</label>
                        <input type="number" class="form-input" id="field-agent-max_tool_iterations" 
                               value="${data.max_tool_iterations || 10}">
                    </div>
                    <div class="form-group">
                        <label class="form-label">最大历史消息</label>
                        <input type="number" class="form-input" id="field-agent-max_history_messages" 
                               value="${data.max_history_messages || 50}">
                    </div>
                    <div class="form-group">
                        <label class="form-label">压缩上下文</label>
                        <label class="toggle">
                            <input type="checkbox" id="field-agent-compact_context" 
                                   ${data.compact_context ? 'checked' : ''}>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                `;
            }
            else if (sectionId === 'scheduler') {
                html += `
                    <div class="form-group">
                        <label class="form-label">启用调度器</label>
                        <label class="toggle">
                            <input type="checkbox" id="field-scheduler-enabled" 
                                   ${data.enabled !== false ? 'checked' : ''}>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="form-group">
                        <label class="form-label">最大任务数</label>
                        <input type="number" class="form-input" id="field-scheduler-max_tasks" 
                               value="${data.max_tasks || 64}">
                    </div>
                    <div class="form-group">
                        <label class="form-label">最大并发数</label>
                        <input type="number" class="form-input" id="field-scheduler-max_concurrent" 
                               value="${data.max_concurrent || 4}">
                    </div>
                `;
            }
            else if (sectionId === 'reliability') {
                html += `
                    <div class="form-group">
                        <label class="form-label">供应商重试次数</label>
                        <input type="number" class="form-input" id="field-reliability-provider_retries" 
                               value="${data.provider_retries || 2}">
                    </div>
                    <div class="form-group">
                        <label class="form-label">供应商退避时间(ms)</label>
                        <input type="number" class="form-input" id="field-reliability-provider_backoff_ms" 
                               value="${data.provider_backoff_ms || 500}">
                    </div>
                `;
            }
            else if (sectionId === 'cron') {
                html += `
                    <div class="form-group">
                        <label class="form-label">启用定时任务</label>
                        <label class="toggle">
                            <input type="checkbox" id="field-cron-enabled" 
                                   ${data.enabled !== false ? 'checked' : ''}>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="form-group">
                        <label class="form-label">最大运行历史</label>
                        <input type="number" class="form-input" id="field-cron-max_run_history" 
                               value="${data.max_run_history || 50}">
                    </div>
                `;
            }
            else if (sectionId === 'browser') {
                html += `
                    <div class="form-group">
                        <label class="form-label">启用浏览器</label>
                        <label class="toggle">
                            <input type="checkbox" id="field-browser-enabled" 
                                   ${data.enabled ? 'checked' : ''}>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="form-group">
                        <label class="form-label">后端</label>
                        <select class="form-select" id="field-browser-backend">
                            <option value="agent_browser" ${data.backend === 'agent_browser' ? 'selected' : ''}>Agent Browser</option>
                            <option value="native" ${data.backend === 'native' ? 'selected' : ''}>Native</option>
                        </select>
                    </div>
                `;
            }
            else if (sectionId === 'observability') {
                html += `
                    <div class="form-group">
                        <label class="form-label">后端</label>
                        <select class="form-select" id="field-observability-backend">
                            <option value="none" ${data.backend === 'none' ? 'selected' : ''}>None</option>
                        </select>
                    </div>
                `;
            }
            else {
                // 默认渲染JSON
                html += `
                    <div class="form-group full-width">
                        <label class="form-label">配置内容 (JSON)</label>
                        <textarea class="form-textarea" id="field-json">${JSON.stringify(data, null, 2)}</textarea>
                    </div>
                `;
            }
            
            html += '</div>';
            container.innerHTML = html;
        }
        
        // 渲染自主权限字段
        function renderAutonomyFields(data) {
            let html = '';
            
            // 级别选择
            html += `
                <div class="form-group">
                    <label class="form-label">自主级别</label>
                    <select class="form-select" id="field-autonomy-level">
                        <option value="supervised" ${data.level === 'supervised' ? 'selected' : ''}>Supervised (监督)</option>
                        <option value="auto" ${data.level === 'auto' ? 'selected' : ''}>Auto (自动)</option>
                    </select>
                </div>
            `;
            
            // 布尔开关
            const boolFields = [
                ['workspace_only', '仅工作区'],
                ['require_approval_for_medium_risk', '中等风险需审批'],
                ['block_high_risk_commands', '阻止高风险命令'],
            ];
            
            boolFields.forEach(([key, label]) => {
                html += `
                    <div class="form-group">
                        <label class="form-label">${label}</label>
                        <label class="toggle">
                            <input type="checkbox" id="field-autonomy-${key}" ${data[key] ? 'checked' : ''}>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                `;
            });
            
            // 数组字段
            const arrayFields = [
                ['allowed_commands', '允许的命令'],
                ['forbidden_paths', '禁止的路径'],
                ['auto_approve', '自动批准的操作'],
            ];
            
            arrayFields.forEach(([key, label]) => {
                const arr = data[key] || [];
                html += `
                    <div class="form-group full-width">
                        <label class="form-label">${label}</label>
                        <div class="array-editor" id="array-${key}">
                            ${arr.map(v => `
                                <div class="array-item">
                                    <input type="text" value="${v}">
                                    <button class="btn-remove" onclick="this.parentElement.remove()">✕</button>
                                </div>
                            `).join('')}
                        </div>
                        <button class="btn-add" onclick="addArrayItem('${key}')">+ 添加</button>
                    </div>
                `;
            });
            
            return html;
        }
        
        // 渲染安全设置字段
        function renderSecurityFields(data) {
            let html = '';
            
            // 沙箱
            if (data.sandbox) {
                html += `
                    <div class="form-group">
                        <label class="form-label">沙箱后端</label>
                        <select class="form-select" id="field-security-sandbox-backend">
                            <option value="auto" ${data.sandbox.backend === 'auto' ? 'selected' : ''}>Auto</option>
                            <option value="none" ${data.sandbox.backend === 'none' ? 'selected' : ''}>None</option>
                        </select>
                    </div>
                `;
            }
            
            // 资源限制
            if (data.resources) {
                html += `
                    <div class="form-group">
                        <label class="form-label">最大内存 (MB)</label>
                        <input type="number" class="form-input" id="field-security-resources-max_memory_mb" 
                               value="${data.resources.max_memory_mb || 512}">
                    </div>
                    <div class="form-group">
                        <label class="form-label">最大CPU时间 (秒)</label>
                        <input type="number" class="form-input" id="field-security-resources-max_cpu_time_seconds" 
                               value="${data.resources.max_cpu_time_seconds || 60}">
                    </div>
                    <div class="form-group">
                        <label class="form-label">最大子进程数</label>
                        <input type="number" class="form-input" id="field-security-resources-max_subprocesses" 
                               value="${data.resources.max_subprocesses || 10}">
                    </div>
                `;
            }
            
            // OTP
            if (data.otp) {
                html += `
                    <div class="form-group">
                        <label class="form-label">启用OTP</label>
                        <label class="toggle">
                            <input type="checkbox" id="field-security-otp-enabled" ${data.otp.enabled ? 'checked' : ''}>
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                    <div class="form-group full-width">
                        <label class="form-label">受保护的操作</label>
                        <div class="array-editor" id="array-security-otp-gated_actions">
                            ${(data.otp.gated_actions || []).map(v => `
                                <div class="array-item">
                                    <input type="text" value="${v}">
                                    <button class="btn-remove" onclick="this.parentElement.remove()">✕</button>
                                </div>
                            `).join('')}
                        </div>
                        <button class="btn-add" onclick="addArrayItem('security-otp-gated_actions')">+ 添加</button>
                    </div>
                `;
            }
            
            return html;
        }
        
        // 添加数组项
        function addArrayItem(key) {
            const container = document.getElementById('array-' + key);
            if (container) {
                const div = document.createElement('div');
                div.className = 'array-item';
                div.innerHTML = '<input type="text" value=""><button class="btn-remove" onclick="this.parentElement.remove()">✕</button>';
                container.appendChild(div);
            }
        }
        
        // 保存当前section
        async function saveCurrentSection() {
            const data = {};
            
            // 收集所有输入字段
            document.querySelectorAll('.form-input, .form-select, .form-textarea').forEach(el => {
                const id = el.id.replace('field-', '');
                if (id.startsWith('field-')) return;
                
                // 跳过JSON字段（单独处理）
                if (id === 'json' || id === 'model_providers' || id.startsWith('runtime-') || id.startsWith('security-')) return;
                
                if (el.type === 'checkbox') {
                    data[id] = el.checked;
                } else if (el.type === 'number') {
                    data[id] = parseFloat(el.value) || 0;
                } else {
                    data[id] = el.value;
                }
            });
            
            // 处理嵌套对象
            if (currentSection === 'runtime') {
                data.runtime = { kind: document.getElementById('field-runtime-kind')?.value || 'native' };
                try {
                    const dockerTxt = document.getElementById('field-runtime-docker')?.value || '{}';
                    data.runtime.docker = JSON.parse(dockerTxt);
                } catch(e) {}
            }
            
            if (currentSection === 'gateway') {
                data.port = parseInt(document.getElementById('field-gateway-port')?.value) || 42617;
                data.host = document.getElementById('field-gateway-host')?.value || '127.0.0.1';
                data.require_pairing = document.getElementById('field-gateway-require_pairing')?.checked || false;
            }
            
            if (currentSection === 'memory') {
                data.backend = document.getElementById('field-memory-backend')?.value || 'sqlite';
                data.auto_save = document.getElementById('field-memory-auto_save')?.checked !== false;
                data.conversation_retention_days = parseInt(document.getElementById('field-memory-conversation_retention_days')?.value) || 30;
                data.max_history_messages = parseInt(document.getElementById('field-memory-max_history_messages')?.value) || 50;
            }
            
            if (currentSection === 'agent') {
                data.max_tool_iterations = parseInt(document.getElementById('field-agent-max_tool_iterations')?.value) || 10;
                data.max_history_messages = parseInt(document.getElementById('field-agent-max_history_messages')?.value) || 50;
                data.compact_context = document.getElementById('field-agent-compact_context')?.checked || false;
            }
            
            if (currentSection === 'scheduler') {
                data.enabled = document.getElementById('field-scheduler-enabled')?.checked !== false;
                data.max_tasks = parseInt(document.getElementById('field-scheduler-max_tasks')?.value) || 64;
                data.max_concurrent = parseInt(document.getElementById('field-scheduler-max_concurrent')?.value) || 4;
            }
            
            if (currentSection === 'reliability') {
                data.provider_retries = parseInt(document.getElementById('field-reliability-provider_retries')?.value) || 2;
                data.provider_backoff_ms = parseInt(document.getElementById('field-reliability-provider_backoff_ms')?.value) || 500;
            }
            
            if (currentSection === 'cron') {
                data.enabled = document.getElementById('field-cron-enabled')?.checked !== false;
                data.max_run_history = parseInt(document.getElementById('field-cron-max_run_history')?.value) || 50;
            }
            
            if (currentSection === 'browser') {
                data.enabled = document.getElementById('field-browser-enabled')?.checked || false;
                data.backend = document.getElementById('field-browser-backend')?.value || 'agent_browser';
            }
            
            // 处理数组字段
            ['allowed_commands', 'forbidden_paths', 'auto_approve'].forEach(key => {
                const container = document.getElementById('array-autonomy-' + key);
                if (container) {
                    data[key] = Array.from(container.querySelectorAll('input')).map(i => i.value).filter(v => v);
                }
            });
            
            try {
                const resp = await fetch('/api/zeroclaw/section/' + currentSection, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify({data: data})
                });
                const result = await resp.json();
                if (result.success) {
                    Swal.fire('✅ 成功', result.message, 'success');
                } else {
                    Swal.fire('❌ 错误', result.message, 'error');
                }
            } catch(e) {
                Swal.fire('❌ 错误', '保存失败', 'error');
            }
        }
        
        // 重启服务
        async function restartService() {
            try {
                const resp = await fetch('/api/zeroclaw/restart', {method: 'POST'});
                const data = await resp.json();
                if (data.success) {
                    Swal.fire('✅ 已发送', '服务重启指令已发送', 'success');
                    setTimeout(checkServiceStatus, 2000);
                } else {
                    Swal.fire('❌ 错误', data.message, 'error');
                }
            } catch(e) {
                Swal.fire('❌ 错误', '重启失败', 'error');
            }
        }
        
        // 检查服务状态
        async function checkServiceStatus() {
            try {
                const resp = await fetch('/api/zeroclaw/status');
                const data = await resp.json();
                const dot = document.getElementById('statusDot');
                const text = document.getElementById('statusText');
                if (data.active) {
                    dot.className = 'status-dot active';
                    text.setAttribute('data-i18n', 'zeroclaw.status_active');
                    if (typeof I18n !== 'undefined') I18n.updatePage();
                } else {
                    dot.className = 'status-dot inactive';
                    text.setAttribute('data-i18n', 'zeroclaw.status_inactive');
                    if (typeof I18n !== 'undefined') I18n.updatePage();
                }
            } catch(e) {
                document.getElementById('statusText').setAttribute('data-i18n', 'zeroclaw.status_inactive');
                if (typeof I18n !== 'undefined') I18n.updatePage();
            }
        }
        
        // 初始化
        loadSections();
        checkServiceStatus();
        setInterval(checkServiceStatus, 10000);
        
        // 更新i18n翻译
        if (typeof I18n !== 'undefined') {
            I18n.updatePage();
        }
    </script>
</body>
</html>
