{% extends "base.html" %}
{% block title %}Settings - Augur{% endblock %}
{% block extra_head %}
<style>
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 12px;
}
@media (max-width: 768px) {
    .settings-grid { grid-template-columns: 1fr; }
    .settings-cron-grid { grid-template-columns: 1fr !important; }
    .settings-toggle-grid { grid-template-columns: 1fr !important; }
    .settings-api-controls { flex-wrap: wrap; }
}
.persona-config-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: border-color 0.2s;
}
.persona-config-row:hover {
    border-color: var(--accent-orange);
}
.persona-config-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    object-fit: cover;
    flex-shrink: 0;
}
.persona-config-info {
    flex: 1;
    min-width: 0;
}
.persona-config-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
}
.persona-config-style {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.save-persona-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--accent-orange);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.15s;
    font-family: var(--font-ui);
    white-space: nowrap;
}
.save-persona-btn:hover {
    background: var(--accent-orange);
    color: #000;
    border-color: var(--accent-orange);
}
/* Toggle switch styles for cron section */
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.2s;
}
.toggle-row:hover {
    border-color: var(--accent-orange);
}
.toggle-label {
    font-size: 0.8rem;
    color: var(--text-primary);
    font-weight: 500;
}
.toggle-switch {
    appearance: none;
    width: 36px;
    height: 20px;
    background: var(--border-color);
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
}
.toggle-switch:checked {
    background: var(--accent-orange);
}
.toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--bg-void);
    border-radius: 50%;
    transition: transform 0.2s;
}
.toggle-switch:checked::after {
    transform: translateX(16px);
}
.toggle-slider { display: none; }
</style>
{% endblock %}

{% block content %}

<h1 class="sr-only" data-i18n="settings-title">系统设置</h1>

<!-- Section 0: Appearance -->
<div class="settings-section" id="section-appearance">
    <div class="settings-section-title">
        <span data-i18n="settings-section-appearance-title">外观设置</span>
        <span class="settings-section-desc" data-i18n="settings-section-appearance-desc">语言与主题偏好</span>
    </div>
    <div style="display:flex; gap:32px; flex-wrap:wrap; align-items:flex-start; padding:4px 0 8px;">
        <!-- Language -->
        <div>
            <div style="font-size:0.75rem; color:var(--text-muted); margin-bottom:8px; font-family:var(--font-mono);" data-i18n="settings-lang-select-label">界面语言</div>
            <div style="display:flex; gap:8px; flex-wrap:wrap;" role="group" aria-label="语言选择">
                <button type="button" class="btn btn-sm settings-lang-btn" data-lang="zh" onclick="setAppLang('zh')" data-i18n="settings-lang-zh">中文</button>
                <button type="button" class="btn btn-sm settings-lang-btn" data-lang="en" onclick="setAppLang('en')" data-i18n="settings-lang-en">English</button>
                <button type="button" class="btn btn-sm settings-lang-btn" data-lang="ja" onclick="setAppLang('ja')">日本語</button>
                <button type="button" class="btn btn-sm settings-lang-btn" data-lang="ko" onclick="setAppLang('ko')">한국어</button>
            </div>
        </div>
        <!-- Theme -->
        <div>
            <div style="font-size:0.75rem; color:var(--text-muted); margin-bottom:8px; font-family:var(--font-mono);" data-i18n="settings-theme-select-label">显示主题</div>
            <div style="display:flex; gap:8px;" role="group" aria-label="主题选择">
                <button type="button" class="btn btn-sm settings-theme-btn" data-theme="dark" onclick="setAppTheme('dark')" data-i18n="theme-dark">深色</button>
                <button type="button" class="btn btn-sm settings-theme-btn" data-theme="light" onclick="setAppTheme('light')" data-i18n="theme-light">浅色</button>
            </div>
        </div>
    </div>
</div>

<!-- Section 0.5: Terminal Workspace -->
<div class="settings-section" id="section-workspace">
    <div class="settings-section-title">
        <span data-i18n="settings-section-workspace-title">终端工作区</span>
        <span class="settings-section-desc" data-i18n="settings-section-workspace-desc">Bloomberg 风格布局预设与导航定制</span>
    </div>
    <div style="margin-bottom:12px;">
        <div style="font-size:0.75rem; color:var(--text-muted); margin-bottom:8px; font-family:var(--font-mono);" data-i18n="settings-workspace-profile-label">命名配置</div>
        <div style="display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:8px;">
            <select id="workspace-profile-select" class="form-select" style="min-width:180px; flex:1;" onchange="switchWorkspaceProfile(this.value)"></select>
            <button type="button" class="btn btn-sm" onclick="deleteWorkspaceProfile()" data-i18n="settings-workspace-profile-delete">删除</button>
        </div>
        <div style="display:flex; gap:8px; flex-wrap:wrap; align-items:center;">
            <input type="text" id="workspace-new-profile-name" class="api-key-input" placeholder="day-trading" maxlength="32" autocomplete="off" style="flex:1; min-width:140px;">
            <button type="button" class="btn btn-sm" onclick="createWorkspaceProfile()" data-i18n="settings-workspace-profile-create">新建配置</button>
        </div>
    </div>
    <div style="margin-bottom:12px;">
        <div style="font-size:0.75rem; color:var(--text-muted); margin-bottom:8px; font-family:var(--font-mono);" data-i18n="settings-workspace-preset-label">布局预设</div>
        <div style="display:flex; gap:8px; flex-wrap:wrap;" id="workspace-preset-btns">
            <button type="button" class="btn btn-sm workspace-preset-btn" data-preset="analyst" onclick="applyWorkspacePreset('analyst')">📊 <span data-i18n="workspace-preset-analyst">分析师</span></button>
            <button type="button" class="btn btn-sm workspace-preset-btn" data-preset="trader" onclick="applyWorkspacePreset('trader')">📈 <span data-i18n="workspace-preset-trader">交易员</span></button>
            <button type="button" class="btn btn-sm workspace-preset-btn" data-preset="committee" onclick="applyWorkspacePreset('committee')">🏛️ <span data-i18n="workspace-preset-committee">委员会</span></button>
            <button type="button" class="btn btn-sm workspace-preset-btn" data-preset="minimal" onclick="applyWorkspacePreset('minimal')">⚡ <span data-i18n="workspace-preset-minimal">极简</span></button>
        </div>
    </div>
    <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:12px;" class="settings-cron-grid">
        <div>
            <label style="font-size:0.75rem; color:var(--text-muted); display:block; margin-bottom:6px;" data-i18n="settings-workspace-default-page">默认首页</label>
            <select id="workspace-default-page" class="form-select" style="width:100%;">
                <option value="/">Dashboard</option>
                <option value="/stocks">Stock Analysis</option>
                <option value="/signals">Signals</option>
                <option value="/committee">Committee</option>
                <option value="/watchlist">Watchlist</option>
            </select>
        </div>
        <div>
            <label style="font-size:0.75rem; color:var(--text-muted); display:block; margin-bottom:6px;" data-i18n="settings-workspace-default-ticker">默认 Ticker</label>
            <input type="text" id="workspace-default-ticker" class="api-key-input" placeholder="AAPL" maxlength="20" autocomplete="off" style="width:100%;">
        </div>
    </div>
    <div style="margin-bottom:12px;">
        <label class="toggle-row" style="max-width:320px;">
            <span class="toggle-label" data-i18n="settings-workspace-ticker-tape">显示行情 Ticker Tape</span>
            <input type="checkbox" id="workspace-show-tape" class="toggle-switch" checked>
        </label>
        <label class="toggle-row" style="max-width:320px; margin-top:8px;">
            <span class="toggle-label" data-i18n="settings-workspace-sidebar-collapsed">默认折叠侧栏</span>
            <input type="checkbox" id="workspace-sidebar-collapsed" class="toggle-switch">
        </label>
    </div>
    <div style="margin-bottom:12px;">
        <div style="font-size:0.75rem; color:var(--text-muted); margin-bottom:8px;" data-i18n="settings-workspace-hidden-nav">隐藏导航项</div>
        <div id="workspace-nav-toggles" style="display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px;"></div>
    </div>
    <div style="margin-bottom:12px;">
        <div style="font-size:0.75rem; color:var(--text-muted); margin-bottom:4px;" data-i18n="settings-workspace-enabled-personas">分析委员会成员</div>
        <div style="font-size:0.72rem; color:var(--text-muted); margin-bottom:8px;" data-i18n="settings-workspace-enabled-personas-hint">勾选参与分析/共识的投资人；全部勾选 = 使用所有 Agent</div>
        <div style="display:flex; gap:8px; margin-bottom:8px; flex-wrap:wrap;">
            <button type="button" class="btn btn-sm" onclick="selectAllWorkspacePersonas()" data-i18n="settings-workspace-personas-all">全部启用</button>
            <button type="button" class="btn btn-sm" onclick="clearAllWorkspacePersonas()" data-i18n="settings-workspace-personas-clear">全部取消</button>
        </div>
        <div id="workspace-persona-toggles" style="display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px;">
            {% for persona in personas %}
            <label class="toggle-row" style="padding:6px 10px;">
                <span class="toggle-label">{{ persona.name }}</span>
                <input type="checkbox" class="toggle-switch workspace-persona-enable" data-agent-id="{{ persona.id }}" checked>
            </label>
            {% endfor %}
        </div>
    </div>
    <button class="btn btn-primary" onclick="saveWorkspaceConfig()" data-i18n="settings-workspace-save">保存工作区</button>
    <div id="workspace-status" style="font-size:0.8rem; margin-top:8px;"></div>
</div>

<!-- Section A: LLM Model Config -->
<div class="settings-section" id="section-llm">
    <div class="settings-section-title">
        <span data-i18n="settings-section-a-title">A. LLM 模型配置</span>
        <span class="settings-section-desc" data-i18n="settings-section-a-desc">为每位投资大师分配 LLM 推理模型</span>
    </div>

    <div class="flex items-center justify-between mb-16" style="flex-wrap:wrap; gap:12px;">
        <div>
            <span id="unsaved-indicator" class="unsaved-dot" style="display:none;"></span>
            <span id="unsaved-text" aria-live="polite" role="status" data-i18n="settings-unsaved" style="display:none; font-size:0.75rem; color:var(--signal-sell); margin-left:4px; font-weight:400;">有未保存更改</span>
        </div>
        <div class="flex gap-8">
            <button class="btn btn-sm btn-ghost" onclick="resetAll()" data-i18n="settings-reset-all">全部重置</button>
            <button class="btn btn-primary" id="save-all-btn" onclick="saveAll()" data-i18n="settings-save-all">全部保存</button>
        </div>
    </div>

    <!-- Preset buttons -->
    <div class="flex gap-8 mb-16" style="flex-wrap:wrap;">
        <button class="btn btn-sm preset-btn" onclick="applyPreset('claude')" data-i18n="settings-preset-claude">全部 Claude</button>
        <button class="btn btn-sm preset-btn" onclick="applyPreset('deepseek-cn')" data-i18n="settings-preset-deepseek">中国投资人用 DeepSeek</button>
        <button class="btn btn-sm preset-btn" onclick="applyPreset('best')" data-i18n="settings-preset-best">最强配置</button>
    </div>

    <div class="settings-grid" id="persona-grid">
        {% for persona in personas %}
        <div class="persona-config-row" data-agent-id="{{ persona.id }}">
            <img src="/static/images/avatars/{{ persona.id }}.png"
                 alt="{{ persona.name }}"
                 class="persona-config-avatar"
                 onerror="this.src='/static/images/augur-owl-64.png'">
            <div class="persona-config-info">
                <div class="persona-config-name">{{ persona.name }}</div>
                <div class="persona-config-style">{{ persona.style }}</div>
            </div>
            <select class="form-select" data-agent-id="{{ persona.id }}" style="min-width:140px; max-width:180px;">
                {% for model in available_models %}
                <option value="{{ model }}" {% if model == persona.current_model %}selected{% endif %}>{{ model }}</option>
                {% endfor %}
            </select>
            <button class="save-persona-btn" onclick="savePersona('{{ persona.id }}')" data-i18n="settings-save">保存</button>
        </div>
        {% endfor %}
    </div>
</div>

<!-- Section B: Data Source API Keys -->
<div class="settings-section" id="section-datasources">
    <div class="settings-section-title">
        <span data-i18n="settings-section-b-title">B. 数据源 API 配置</span>
        <span class="settings-section-desc" data-i18n="settings-section-b-desc">管理外部数据源 API 密钥以获取更丰富的金融数据</span>
    </div>

    <div class="settings-api-row">
        <div class="settings-api-info">
            <div class="settings-api-name">Finnhub</div>
            <div class="settings-api-desc">提供基本面数据、分析师评级、财报日历等。免费 Tier 支持 60次/分钟。</div>
        </div>
        <div class="settings-api-controls">
            <input type="password" id="finnhub-key" class="api-key-input" placeholder="输入 Finnhub API Key" autocomplete="off">
            <button class="test-btn" onclick="testDatasource('finnhub')" data-i18n="settings-test">测试连接</button>
            <button class="save-persona-btn" onclick="saveDatasourceKey('finnhub')" data-i18n="settings-save">保存</button>
        </div>
        <div class="settings-api-status" id="finnhub-status"></div>
    </div>

    <div class="settings-api-row">
        <div class="settings-api-info">
            <div class="settings-api-name">Alpha Vantage</div>
            <div class="settings-api-desc">全面的基本面 OVERVIEW、收益历史、资产负债表数据。免费 Tier 支持 5次/分钟。</div>
        </div>
        <div class="settings-api-controls">
            <input type="password" id="alphavantage-key" class="api-key-input" placeholder="输入 Alpha Vantage API Key" autocomplete="off">
            <button class="test-btn" onclick="testDatasource('alphavantage')" data-i18n="settings-test">测试连接</button>
            <button class="save-persona-btn" onclick="saveDatasourceKey('alphavantage')" data-i18n="settings-save">保存</button>
        </div>
        <div class="settings-api-status" id="alphavantage-status"></div>
    </div>
</div>

<!-- Section C: Notification Channels -->
<div class="settings-section" id="section-notifications">
    <div class="settings-section-title">
        <span data-i18n="settings-section-c-title">C. 通知渠道</span>
        <span class="settings-section-desc" data-i18n="settings-section-c-desc">配置信号触发时的自动通知推送</span>
    </div>

    <div class="settings-api-row">
        <div class="settings-api-info">
            <div class="settings-api-name">Telegram Bot</div>
            <div class="settings-api-desc">通过 Telegram Bot 接收买卖信号推送。需先通过 @BotFather 创建 Bot 并获取 Token。</div>
        </div>
        <div class="settings-api-controls">
            <input type="password" id="telegram-token" class="api-key-input" placeholder="Bot Token (123456:ABC-DEF...)" autocomplete="off">
            <input type="text" id="telegram-chat-id" class="api-key-input" placeholder="Chat ID" style="max-width:120px;" autocomplete="off">
            <button class="test-btn" onclick="testNotification('telegram')">测试</button>
            <button class="save-persona-btn" onclick="saveNotification('telegram')" data-i18n="settings-save">保存</button>
        </div>
        <div class="settings-api-status" id="telegram-status"></div>
    </div>

    <div class="settings-api-row">
        <div class="settings-api-info">
            <div class="settings-api-name">Slack Webhook</div>
            <div class="settings-api-desc">通过 Slack Incoming Webhook 发送信号通知到指定频道。</div>
        </div>
        <div class="settings-api-controls">
            <input type="password" id="slack-webhook" class="api-key-input" placeholder="https://hooks.slack.com/services/..." autocomplete="off">
            <button class="test-btn" onclick="testNotification('slack')">测试</button>
            <button class="save-persona-btn" onclick="saveNotification('slack')" data-i18n="settings-save">保存</button>
        </div>
        <div class="settings-api-status" id="slack-status"></div>
    </div>

    <div class="settings-api-row">
        <div class="settings-api-info">
            <div class="settings-api-name">微信 (WeChat)</div>
            <div class="settings-api-desc">通过企业微信机器人或 Server酱 推送信号通知。(开发中)</div>
        </div>
        <div class="settings-api-controls">
            <input type="password" id="wechat-key" class="api-key-input" placeholder="Webhook Key / SendKey (开发中)" autocomplete="off" disabled>
            <button class="test-btn" disabled>测试</button>
            <button class="save-persona-btn" disabled>保存</button>
        </div>
        <div class="settings-api-status" id="wechat-status"><span style="color:var(--text-muted); font-size:0.75rem;" data-i18n="settings-coming-soon">即将支持</span></div>
    </div>
</div>

<!-- Section C-2: API Authentication -->
<div class="settings-section" id="section-api-auth">
    <div class="settings-section-title">
        <span data-i18n="settings-section-c2-title">C-2. API 认证</span>
        <span class="settings-section-desc" data-i18n="settings-section-c2-desc">配置 API Token 以安全访问 Augur API</span>
    </div>

    <div class="settings-api-row">
        <div class="settings-api-info">
            <div class="settings-api-name">API Token</div>
            <div class="settings-api-desc">输入服务器配置的 AUGUR_API_TOKEN 值。保存后所有 API 请求将自动携带此 Token。</div>
        </div>
        <div class="settings-api-controls">
            <input type="password" id="api-auth-token" class="api-key-input" placeholder="输入 API Token" autocomplete="off">
            <button class="test-btn" onclick="testApiToken()">测试</button>
            <button class="save-persona-btn" onclick="saveApiToken()" data-i18n="settings-save">保存</button>
        </div>
        <div class="settings-api-status" id="api-auth-status"></div>
    </div>
</div>

<!-- Section D: Export/Import Config -->
<div class="settings-section" id="section-export">
    <div class="settings-section-title">
        <span data-i18n="settings-section-d-title">D. 配置导入/导出</span>
        <span class="settings-section-desc" data-i18n="settings-section-d-desc">备份或迁移您的 Augur 配置</span>
    </div>

    <div class="flex gap-12" style="flex-wrap:wrap; padding: 16px 0;">
        <button class="btn btn-primary" onclick="exportConfig()">
            <span style="margin-right:4px;">&#x2B07;</span> <span data-i18n="settings-export">导出配置 (JSON)</span>
        </button>
        <label class="btn btn-sm btn-ghost" style="cursor:pointer;">
            <span style="margin-right:4px;">&#x2B06;</span> <span data-i18n="settings-import">导入配置</span>
            <input type="file" id="import-file" accept=".json" style="display:none;" onchange="importConfig(event)">
        </label>
    </div>
    <div id="import-status" style="font-size:0.8rem; margin-top:8px;"></div>
</div>

<!-- Section E: Scheduled Monitoring -->
<div class="settings-section" id="section-cron">
    <div class="settings-section-title">
        <span data-i18n="settings-section-e-title">E. 定时监控配置</span>
        <span class="settings-section-desc" data-i18n="settings-section-e-desc">配置定时分析调度、警报阈值及通知渠道开关</span>
    </div>

    <div class="settings-cron-grid" style="display:grid; grid-template-columns: 1fr 1fr; gap:16px; padding:16px 0;">
        <!-- Cron Schedule -->
        <div>
            <label style="font-size:0.8rem; color:var(--text-muted); margin-bottom:4px; display:block;">Cron 表达式</label>
            <input type="text" id="cron-schedule" class="api-key-input" value="0 9 * * 1-5" placeholder="0 9 * * 1-5" style="width:100%;" autocomplete="off">
            <div style="font-size:0.7rem; color:var(--text-muted); margin-top:4px;">格式: 分 时 日 月 星期 (默认: 工作日9:00)</div>
        </div>

        <!-- Timezone -->
        <div>
            <label style="font-size:0.8rem; color:var(--text-muted); margin-bottom:4px; display:block;">时区</label>
            <select id="cron-timezone" class="form-select" style="width:100%;">
                <option value="Asia/Shanghai">Asia/Shanghai (中国)</option>
                <option value="Asia/Hong_Kong">Asia/Hong_Kong (香港)</option>
                <option value="Asia/Tokyo">Asia/Tokyo (东京)</option>
                <option value="Asia/Singapore">Asia/Singapore (新加坡)</option>
                <option value="US/Eastern">US/Eastern (纽约)</option>
                <option value="US/Pacific">US/Pacific (洛杉矶)</option>
                <option value="Europe/London">Europe/London (伦敦)</option>
                <option value="Europe/Berlin">Europe/Berlin (柏林)</option>
                <option value="UTC">UTC</option>
            </select>
        </div>
    </div>

    <!-- Alert Threshold -->
    <div style="padding:12px 0;">
        <label style="font-size:0.8rem; color:var(--text-muted); margin-bottom:4px; display:block;">
            警报阈值 (仅 score &ge; 此值时通知): <span id="settings-cron-threshold-val" style="color:var(--accent-orange); font-weight:600;">3</span>
        </label>
        <input type="range" id="cron-threshold" min="1" max="10" value="3" step="1"
               style="width:100%; accent-color:var(--accent-orange);"
               oninput="document.getElementById('settings-cron-threshold-val').textContent = this.value;">
        <div style="display:flex; justify-content:space-between; font-size:0.65rem; color:var(--text-muted);">
            <span>1 (全部通知)</span>
            <span>10 (仅强信号)</span>
        </div>
    </div>

    <!-- Notification Channel Toggles -->
    <div style="padding:12px 0;">
        <label style="font-size:0.8rem; color:var(--text-muted); margin-bottom:8px; display:block;">通知渠道开关</label>
        <div style="display:grid; grid-template-columns: 1fr 1fr; gap:10px;" class="settings-toggle-grid">
            <label class="toggle-row">
                <span class="toggle-label">Telegram</span>
                <input type="checkbox" id="cron-notify-telegram" class="toggle-switch">
                <span class="toggle-slider"></span>
            </label>
            <label class="toggle-row">
                <span class="toggle-label">Slack</span>
                <input type="checkbox" id="cron-notify-slack" class="toggle-switch">
                <span class="toggle-slider"></span>
            </label>
            <label class="toggle-row">
                <span class="toggle-label">WeChat (微信)</span>
                <input type="checkbox" id="cron-notify-wechat" class="toggle-switch">
                <span class="toggle-slider"></span>
            </label>
            <label class="toggle-row">
                <span class="toggle-label">Lark (飞书)</span>
                <input type="checkbox" id="cron-notify-lark" class="toggle-switch">
                <span class="toggle-slider"></span>
            </label>
        </div>
    </div>

    <!-- Save + Run Now buttons -->
    <div class="flex gap-12" style="padding:16px 0; flex-wrap:wrap;">
        <button class="btn btn-primary" onclick="saveCronConfig()" data-i18n="settings-save-cron">保存定时配置</button>
        <button class="btn btn-sm btn-ghost" onclick="runCronNow()" id="run-now-btn" data-i18n="settings-run-now">立即执行一次</button>
    </div>
    <div id="cron-status" style="font-size:0.8rem; margin-top:4px;"></div>
</div>

{% endblock %}

{% block extra_scripts %}
<script>
var originalValues = {};
function _t(key, fb) { return (typeof window.t === 'function') ? window.t(key, fb) : (fb || key); }

function _highlightAppearanceBtns() {
    var lang = typeof getCurrentLang === 'function' ? getCurrentLang() : (localStorage.getItem('augur-lang') || 'zh');
    var theme = document.documentElement.classList.contains('light') ? 'light' : 'dark';
    document.querySelectorAll('.settings-lang-btn').forEach(function(b) {
        var active = b.getAttribute('data-lang') === lang;
        b.style.borderColor = active ? 'var(--accent-orange)' : '';
        b.style.opacity = active ? '1' : '0.5';
    });
    document.querySelectorAll('.settings-theme-btn').forEach(function(b) {
        var active = b.getAttribute('data-theme') === theme;
        b.style.borderColor = active ? 'var(--accent-orange)' : '';
        b.style.opacity = active ? '1' : '0.5';
    });
}

function setAppLang(lang) {
    if (typeof applyLanguage === 'function') {
        localStorage.setItem('augur-lang', lang);
        applyLanguage(lang);
    }
    _highlightAppearanceBtns();
    showToast(_t('settings-saved', '已保存'), 'success');
}

function setAppTheme(theme) {
    if (theme === 'light') {
        document.documentElement.classList.add('light');
        localStorage.setItem('augur-theme', 'light');
    } else {
        document.documentElement.classList.remove('light');
        localStorage.setItem('augur-theme', 'dark');
    }
    if (typeof updateThemeUI === 'function') updateThemeUI();
    document.dispatchEvent(new CustomEvent('augur:theme-change', { detail: { theme: theme } }));
    _highlightAppearanceBtns();
    showToast(_t('settings-saved', '已保存'), 'success');
}

// Track original values on load for unsaved detection
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.persona-config-row select').forEach(function(sel) {
        var id = sel.getAttribute('data-agent-id');
        originalValues[id] = sel.value;
        sel.addEventListener('change', function() { checkUnsaved(); });
    });

    // Highlight current lang/theme buttons
    _highlightAppearanceBtns();

    // Load saved API keys from config (masked)
    loadSavedKeys();
});

function loadSavedKeys() {
    fetch('/api/config')
    .then(function(r) { return r.json(); })
    .then(function(cfg) {
        var ds = cfg.datasource_keys || {};
        if (ds.finnhub) document.getElementById('finnhub-key').placeholder = _t('settings-configured');
        if (ds.alphavantage) document.getElementById('alphavantage-key').placeholder = _t('settings-configured');
        var notif = cfg.notifications || {};
        if (notif.telegram_token) document.getElementById('telegram-token').placeholder = _t('settings-configured');
        if (notif.telegram_chat_id) document.getElementById('telegram-chat-id').placeholder = _t('settings-configured');
        if (notif.slack_webhook) document.getElementById('slack-webhook').placeholder = _t('settings-configured');
    })
    .catch(function() {});
}

function checkUnsaved() {
    var hasChanges = false;
    document.querySelectorAll('.persona-config-row select').forEach(function(sel) {
        var id = sel.getAttribute('data-agent-id');
        if (sel.value !== originalValues[id]) hasChanges = true;
    });
    var dot = document.getElementById('unsaved-indicator');
    var txt = document.getElementById('unsaved-text');
    if (dot) dot.style.display = hasChanges ? 'inline-block' : 'none';
    if (txt) txt.style.display = hasChanges ? 'inline' : 'none';
}

var chineseInvestors = ['duan_yongping', 'zhang_lei', 'li_lu', 'dan_bin', 'dayu'];

function applyPreset(preset) {
    var selects = document.querySelectorAll('.persona-config-row select');
    var unmatchedCount = 0;
    selects.forEach(function(sel) {
        var agentId = sel.getAttribute('data-agent-id');
        var options = sel.options;
        var matched = false;

        if (preset === 'claude') {
            for (var i = 0; i < options.length; i++) {
                if (options[i].value.toLowerCase().indexOf('claude') !== -1) {
                    sel.selectedIndex = i; matched = true; break;
                }
            }
            if (!matched) unmatchedCount++;
        } else if (preset === 'deepseek-cn') {
            if (chineseInvestors.indexOf(agentId) !== -1) {
                for (var i = 0; i < options.length; i++) {
                    if (options[i].value.toLowerCase().indexOf('deepseek') !== -1) {
                        sel.selectedIndex = i; matched = true; break;
                    }
                }
                if (!matched) unmatchedCount++;
            }
        } else if (preset === 'best') {
            if (agentId === 'aschenbrenner') {
                for (var i = 0; i < options.length; i++) {
                    if (options[i].value.toLowerCase().indexOf('claude') !== -1 && options[i].value.toLowerCase().indexOf('opus') !== -1) {
                        sel.selectedIndex = i; matched = true; break;
                    }
                }
                if (!matched) unmatchedCount++;
            } else if (chineseInvestors.indexOf(agentId) !== -1) {
                for (var i = 0; i < options.length; i++) {
                    if (options[i].value.toLowerCase().indexOf('deepseek') !== -1) {
                        sel.selectedIndex = i; matched = true; break;
                    }
                }
                if (!matched) unmatchedCount++;
            } else {
                for (var i = 0; i < options.length; i++) {
                    if (options[i].value.toLowerCase().indexOf('claude') !== -1 && options[i].value.toLowerCase().indexOf('sonnet') !== -1) {
                        sel.selectedIndex = i; matched = true; break;
                    }
                }
                if (!matched) unmatchedCount++;
            }
        }
    });
    checkUnsaved();
    var presetLabel = preset === 'claude' ? _t('settings-preset-claude') : preset === 'deepseek-cn' ? _t('settings-preset-deepseek') : _t('settings-preset-best');
    showToast(_t('settings-toast-preset-applied') + presetLabel, 'info');
    if (unmatchedCount > 0) {
        showToast(_t('settings-toast-preset-unmatched').replace('{n}', unmatchedCount), 'warning');
    }
}

function savePersona(agentId) {
    var select = document.querySelector('select[data-agent-id="' + agentId + '"]');
    var model = select.value;
    fetch('/api/config/persona/' + agentId, {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({model: model})
    })
    .then(function(resp) { return resp.json(); })
    .then(function(data) {
        if (data.status === 'ok') {
            originalValues[agentId] = model;
            checkUnsaved();
            showToast(agentId + _t('settings-toast-model-updated') + model);
            var row = select.closest('.persona-config-row');
            if (row) {
                row.style.borderColor = 'var(--signal-buy)';
                setTimeout(function() { row.style.borderColor = ''; }, 1500);
            }
        } else {
            showToast(_t('settings-toast-save-failed') + (data.detail || ''), 'error');
        }
    })
    .catch(function(err) {
        showToast(_t('settings-toast-request-failed') + err.message, 'error');
    });
}

function saveAll() {
    var cards = document.querySelectorAll('.persona-config-row');
    var promises = [];
    cards.forEach(function(card) {
        var agentId = card.getAttribute('data-agent-id');
        var select = card.querySelector('select');
        var model = select.value;
        promises.push(
            fetch('/api/config/persona/' + agentId, {
                method: 'PUT',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({model: model})
            }).then(function(r) { return r.json(); })
        );
    });
    Promise.all(promises)
    .then(function(results) {
        var ok = results.filter(function(r) { return r.status === 'ok'; }).length;
        var failed = results.length - ok;
        cards.forEach(function(card) {
            var agentId = card.getAttribute('data-agent-id');
            var select = card.querySelector('select');
            originalValues[agentId] = select.value;
        });
        checkUnsaved();
        if (failed > 0) {
            showToast(_t('settings-toast-saved-partial').replace('{ok}', ok).replace('{failed}', failed), 'warning');
        } else {
            showToast(_t('settings-toast-saved-all').replace('{n}', ok));
        }
        var btn = document.getElementById('save-all-btn');
        if (btn) {
            var orig = btn.textContent;
            btn.textContent = _t('settings-saved-checkmark');
            btn.classList.add('check-pop');
            setTimeout(function() {
                btn.textContent = orig;
                btn.classList.remove('check-pop');
            }, 2000);
        }
    })
    .catch(function(err) {
        showToast(_t('settings-toast-batch-save-failed') + err.message, 'error');
    });
}

function resetAll() {
    if (!confirm(_t('settings-toast-reset-confirm'))) return;
    document.querySelectorAll('.persona-config-row select').forEach(function(sel) {
        sel.selectedIndex = 0;
    });
    checkUnsaved();
    showToast(_t('settings-toast-reset-done'), 'warning');
}

// Data source key management
function saveDatasourceKey(source) {
    var keyId = source === 'finnhub' ? 'finnhub-key' : 'alphavantage-key';
    var key = document.getElementById(keyId).value.trim();
    if (!key) { showToast(_t('settings-toast-enter-api-key'), 'warning'); return; }
    // Save via config endpoint
    fetch('/api/config/import', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({datasource_keys: {[source]: key}})
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.status === 'ok') {
            showToast(source + _t('settings-toast-api-key-saved'));
            document.getElementById(keyId).value = '';
            document.getElementById(keyId).placeholder = _t('settings-configured');
        } else {
            showToast(_t('settings-toast-save-failed') + (data.detail || ''), 'error');
        }
    })
    .catch(function(err) { showToast(_t('settings-toast-save-failed') + err.message, 'error'); });
}

function testDatasource(source) {
    var statusEl = document.getElementById(source + '-status');
    statusEl.innerHTML = '<span style="color:var(--text-muted);">' + escapeHtml(_t('settings-status-testing')) + '</span>';
    fetch('/api/config/test-datasource', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({source: source})
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.status === 'ok') {
            statusEl.innerHTML = '<span style="color:var(--accent-green);">&#x2713; ' + escapeHtml(_t('settings-status-connected')) + '</span>';
        } else {
            statusEl.innerHTML = '<span style="color:var(--accent-red);">&#x2717; ' + escapeHtml(data.detail || _t('settings-status-failed')) + '</span>';
        }
    })
    .catch(function(err) {
        statusEl.innerHTML = '<span style="color:var(--accent-red);">&#x2717; ' + escapeHtml(_t('settings-status-test-failed')) + '</span>';
    });
}

// Notification management
function saveNotification(channel) {
    var payload = {};
    if (channel === 'telegram') {
        var token = document.getElementById('telegram-token').value.trim();
        var chatId = document.getElementById('telegram-chat-id').value.trim();
        if (!token || !chatId) {
            showToast(_t('settings-toast-enter-telegram'), 'warning');
            return;
        }
        payload.telegram_token = token;
        payload.telegram_chat_id = chatId;
    } else if (channel === 'slack') {
        var webhook = document.getElementById('slack-webhook').value.trim();
        if (!webhook) {
            showToast(_t('settings-toast-enter-slack'), 'warning');
            return;
        }
        if (webhook.indexOf('hooks.slack.com') === -1) {
            showToast(_t('settings-toast-enter-slack'), 'warning');
            return;
        }
        payload.slack_webhook = webhook;
    }
    fetch('/api/config/import', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({notifications: payload})
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.status === 'ok') {
            showToast(channel + _t('settings-toast-notif-saved'));
        } else {
            showToast(_t('settings-toast-save-failed').replace(': ', ''), 'error');
        }
    })
    .catch(function(err) { showToast(_t('settings-toast-save-failed') + err.message, 'error'); });
}

function testNotification(channel) {
    var statusEl = document.getElementById(channel + '-status');
    statusEl.innerHTML = '<span style="color:var(--text-muted);">' + escapeHtml(_t('settings-status-testing')) + '</span>';
    fetch('/api/config/test-notification', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({channel: channel})
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.status === 'ok') {
            statusEl.innerHTML = '<span style="color:var(--accent-green);">&#x2713; ' + escapeHtml(_t('settings-status-test-sent')) + '</span>';
        } else {
            statusEl.innerHTML = '<span style="color:var(--accent-red);">&#x2717; ' + escapeHtml(data.detail || _t('settings-status-send-failed')) + '</span>';
        }
    })
    .catch(function(err) {
        statusEl.innerHTML = '<span style="color:var(--accent-red);">&#x2717; ' + escapeHtml(_t('settings-status-test-failed')) + '</span>';
    });
}

// Export/Import config
function exportConfig() {
    fetch('/api/config/export')
    .then(function(r) { return r.json(); })
    .then(function(data) {
        var blob = new Blob([JSON.stringify(data, null, 2)], {type: 'application/json'});
        var url = URL.createObjectURL(blob);
        var a = document.createElement('a');
        a.href = url;
        a.download = 'augur-config-' + new Date().toISOString().slice(0,10) + '.json';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
        showToast(_t('settings-toast-exported'));
    })
    .catch(function(err) { showToast(_t('settings-toast-export-failed') + err.message, 'error'); });
}

function importConfig(event) {
    var file = event.target.files[0];
    if (!file) return;
    var statusEl = document.getElementById('import-status');
    statusEl.innerHTML = '<span style="color:var(--text-muted);">' + escapeHtml(_t('settings-status-importing')) + '</span>';

    var reader = new FileReader();
    reader.onload = function(e) {
        try {
            var config = JSON.parse(e.target.result);
            fetch('/api/config/import', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(config)
            })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (data.status === 'ok') {
                    statusEl.innerHTML = '<span style="color:var(--accent-green);">&#x2713; ' + escapeHtml(_t('settings-status-imported')) + '</span>';
                    showToast(_t('settings-toast-import-success'));
                } else {
                    statusEl.innerHTML = '<span style="color:var(--accent-red);">&#x2717; ' + escapeHtml(data.detail || _t('settings-status-import-failed')) + '</span>';
                }
            })
            .catch(function(err) {
                statusEl.innerHTML = '<span style="color:var(--accent-red);">&#x2717; ' + escapeHtml(_t('settings-status-import-failed')) + '</span>';
            });
        } catch (parseErr) {
            statusEl.innerHTML = '<span style="color:var(--accent-red);">&#x2717; ' + escapeHtml(_t('settings-status-json-failed')) + '</span>';
        }
    };
    reader.readAsText(file);
    // Reset file input
    event.target.value = '';
}

// Warn before leaving with unsaved changes
window.addEventListener('beforeunload', function(e) {
    var hasChanges = false;
    document.querySelectorAll('.persona-config-row select').forEach(function(sel) {
        var id = sel.getAttribute('data-agent-id');
        if (sel.value !== originalValues[id]) hasChanges = true;
    });
    if (hasChanges) {
        e.preventDefault();
        e.returnValue = '';
    }
});

// ============ Cron Config Functions ============

function loadCronConfig() {
    fetch('/api/cron/config')
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.status !== 'ok') return;
        var schedule = data.schedule || {};
        var notifications = data.notifications || {};

        // Populate schedule fields
        if (schedule.cron) document.getElementById('cron-schedule').value = schedule.cron;
        if (schedule.timezone) {
            var tzSelect = document.getElementById('cron-timezone');
            for (var i = 0; i < tzSelect.options.length; i++) {
                if (tzSelect.options[i].value === schedule.timezone) {
                    tzSelect.selectedIndex = i;
                    break;
                }
            }
        }

        // Alert threshold
        var threshold = notifications.alert_threshold || 3;
        document.getElementById('cron-threshold').value = threshold;
        document.getElementById('settings-cron-threshold-val').textContent = threshold;

        // Channel toggles
        var tg = notifications.telegram || {};
        var slack = notifications.slack || {};
        var wechat = notifications.wechat || {};
        var lark = notifications.lark || {};
        document.getElementById('cron-notify-telegram').checked = !!tg.enabled;
        document.getElementById('cron-notify-slack').checked = !!slack.enabled;
        document.getElementById('cron-notify-wechat').checked = !!wechat.enabled;
        document.getElementById('cron-notify-lark').checked = !!lark.enabled;
    })
    .catch(function() {});
}

function saveCronConfig() {
    var schedule = {
        cron: document.getElementById('cron-schedule').value.trim() || '0 9 * * 1-5',
        timezone: document.getElementById('cron-timezone').value
    };

    // Build notifications object preserving existing keys
    fetch('/api/cron/config')
    .then(function(r) { return r.json(); })
    .then(function(data) {
        var existing = data.notifications || {};
        var threshold = parseInt(document.getElementById('cron-threshold').value) || 3;

        // Update enabled flags for each channel
        if (!existing.telegram) existing.telegram = {};
        existing.telegram.enabled = document.getElementById('cron-notify-telegram').checked;

        if (!existing.slack) existing.slack = {};
        existing.slack.enabled = document.getElementById('cron-notify-slack').checked;

        if (!existing.wechat) existing.wechat = {};
        existing.wechat.enabled = document.getElementById('cron-notify-wechat').checked;

        if (!existing.lark) existing.lark = {};
        existing.lark.enabled = document.getElementById('cron-notify-lark').checked;

        existing.alert_threshold = threshold;

        return fetch('/api/cron/config', {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({schedule: schedule, notifications: existing})
        });
    })
    .then(function(r) { return r.json(); })
    .then(function(result) {
        if (result.status === 'ok') {
            showToast(_t('settings-toast-cron-saved'));
            var statusEl = document.getElementById('cron-status');
            statusEl.innerHTML = '<span style="color:var(--accent-green);">&#x2713; ' + escapeHtml(_t('settings-status-config-saved')) + '</span>';
            setTimeout(function() { statusEl.innerHTML = ''; }, 3000);
        } else {
            showToast(_t('settings-toast-save-failed') + (result.detail || ''), 'error');
        }
    })
    .catch(function(err) { showToast(_t('settings-toast-save-failed') + err.message, 'error'); });
}

function runCronNow() {
    var btn = document.getElementById('run-now-btn');
    var statusEl = document.getElementById('cron-status');
    btn.disabled = true;
    btn.textContent = _t('perf-running');
    statusEl.innerHTML = '<span style="color:var(--text-muted);">' + escapeHtml(_t('settings-status-running')) + '</span>';

    fetch('/api/cron/run-now', {method: 'POST'})
    .then(function(r) { return r.json(); })
    .then(function(data) {
        btn.disabled = false;
        btn.textContent = _t('settings-run-now');
        if (data.status === 'ok') {
            var count = data.count || 0;
            statusEl.innerHTML = '<span style="color:var(--accent-green);">&#x2713; ' + escapeHtml(_t('settings-status-cron-done').replace('{n}', count)) + '</span>';
            showToast(_t('settings-toast-cron-done').replace('{n}', count));
        } else {
            statusEl.innerHTML = '<span style="color:var(--accent-red);">&#x2717; ' + escapeHtml(data.detail || _t('settings-toast-run-failed')) + '</span>';
            showToast(_t('settings-toast-run-failed'), 'error');
        }
    })
    .catch(function(err) {
        btn.disabled = false;
        btn.textContent = _t('settings-run-now');
        statusEl.innerHTML = '<span style="color:var(--accent-red);">&#x2717; ' + escapeHtml(_t('settings-toast-request-failed').replace(': ', '')) + '</span>';
        showToast(_t('settings-toast-request-failed') + err.message, 'error');
    });
}

// Load cron config on page load
document.addEventListener('DOMContentLoaded', function() {
    loadCronConfig();
    loadApiAuthStatus();
    initWorkspaceSettings();
});

var WORKSPACE_NAV_PAGES = [
    {id:'scanner',label:'Scanner'},{id:'backtest',label:'Backtest'},{id:'optimizer',label:'Optimizer'},
    {id:'compare',label:'Compare'},{id:'debate',label:'Debate'},{id:'committee',label:'Committee'},
    {id:'hermes-setup',label:'Hermes'},{id:'history',label:'History'},{id:'performance',label:'Leaderboard'},
    {id:'create-persona',label:'Create Persona'},{id:'portfolio',label:'Portfolio'}
];
var _workspaceState = { layout_preset: 'analyst', hidden_nav: [] };
var _workspaceActiveProfile = 'default';

function renderWorkspaceProfileSelect(profiles, active) {
    var sel = document.getElementById('workspace-profile-select');
    if (!sel) return;
    sel.innerHTML = '';
    (profiles || []).forEach(function(p) {
        var opt = document.createElement('option');
        opt.value = p.name;
        opt.textContent = p.name + (p.active ? ' *' : '');
        if (p.name === active || p.active) opt.selected = true;
        sel.appendChild(opt);
    });
    _workspaceActiveProfile = active || (profiles[0] && profiles[0].name) || 'default';
}

function initWorkspaceSettings() {
    var container = document.getElementById('workspace-nav-toggles');
    if (!container) return;
    container.innerHTML = '';
    WORKSPACE_NAV_PAGES.forEach(function(p) {
        var lbl = document.createElement('label');
        lbl.className = 'toggle-row';
        lbl.style.padding = '6px 10px';
        lbl.innerHTML = '<span class="toggle-label">' + p.label + '</span>' +
            '<input type="checkbox" class="toggle-switch workspace-nav-hide" data-page="' + p.id + '">';
        container.appendChild(lbl);
    });
    loadWorkspaceConfig();
}

function applyWorkspaceFields(ws) {
    document.getElementById('workspace-default-page').value = ws.default_page || '/';
    document.getElementById('workspace-default-ticker').value = ws.default_ticker || '';
    document.getElementById('workspace-show-tape').checked = ws.show_ticker_tape !== false;
    document.getElementById('workspace-sidebar-collapsed').checked = !!ws.sidebar_collapsed;
    document.querySelectorAll('.workspace-preset-btn').forEach(function(b) {
        var active = b.getAttribute('data-preset') === ws.layout_preset;
        b.style.borderColor = active ? 'var(--accent-orange)' : '';
        b.style.opacity = active ? '1' : '0.65';
    });
    var hidden = ws.hidden_nav || [];
    document.querySelectorAll('.workspace-nav-hide').forEach(function(cb) {
        cb.checked = hidden.indexOf(cb.getAttribute('data-page')) !== -1;
    });
    applyWorkspacePersonas(ws.enabled_personas || []);
}

function applyWorkspacePersonas(enabled) {
    var list = enabled || [];
    var useAll = list.length === 0;
    document.querySelectorAll('.workspace-persona-enable').forEach(function(cb) {
        var id = cb.getAttribute('data-agent-id');
        cb.checked = useAll || list.indexOf(id) !== -1;
    });
}

function selectAllWorkspacePersonas() {
    document.querySelectorAll('.workspace-persona-enable').forEach(function(cb) { cb.checked = true; });
}

function clearAllWorkspacePersonas() {
    document.querySelectorAll('.workspace-persona-enable').forEach(function(cb) { cb.checked = false; });
}

function collectEnabledPersonas() {
    var boxes = document.querySelectorAll('.workspace-persona-enable');
    var checked = [];
    boxes.forEach(function(cb) {
        if (cb.checked) checked.push(cb.getAttribute('data-agent-id'));
    });
    if (checked.length === 0) return null;
    if (checked.length === boxes.length) return [];
    return checked;
}

function loadWorkspaceConfig() {
    fetch('/api/workspace')
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.status !== 'ok' || !data.workspace) return;
        _workspaceState = data.workspace;
        _workspaceActiveProfile = data.active_profile || 'default';
        renderWorkspaceProfileSelect(data.profiles || [], _workspaceActiveProfile);
        applyWorkspaceFields(data.workspace);
    })
    .catch(function() {});
}

function switchWorkspaceProfile(name) {
    if (!name || name === _workspaceActiveProfile) return;
    fetch('/api/workspace/active', {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({profile: name})
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.status === 'ok') {
            _workspaceActiveProfile = data.active_profile || name;
            _workspaceState = data.workspace || _workspaceState;
            applyWorkspaceFields(_workspaceState);
            try { sessionStorage.removeItem('augur-workspace-routed'); } catch(e) {}
            showToast(_t('settings-workspace-profile-switched', 'Profile switched') + ': ' + name, 'info');
            loadWorkspaceConfig();
        } else {
            showToast(data.detail || _t('settings-toast-save-failed'), 'error');
        }
    })
    .catch(function(err) { showToast(_t('settings-toast-save-failed') + err.message, 'error'); });
}

function createWorkspaceProfile() {
    var input = document.getElementById('workspace-new-profile-name');
    var name = (input && input.value || '').trim().toLowerCase();
    if (!name) {
        showToast(_t('settings-workspace-profile-name-required', 'Enter a profile name'), 'error');
        return;
    }
    fetch('/api/workspace/profiles', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({name: name, copy_from: _workspaceActiveProfile})
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.status === 'ok') {
            if (input) input.value = '';
            showToast(_t('settings-workspace-profile-created', 'Profile created') + ': ' + name);
            loadWorkspaceConfig();
        } else {
            showToast(data.detail || _t('settings-toast-save-failed'), 'error');
        }
    })
    .catch(function(err) { showToast(_t('settings-toast-save-failed') + err.message, 'error'); });
}

function deleteWorkspaceProfile() {
    var sel = document.getElementById('workspace-profile-select');
    var name = sel && sel.value;
    if (!name || name === _workspaceActiveProfile) {
        showToast(_t('settings-workspace-profile-cannot-delete', 'Cannot delete this profile'), 'error');
        return;
    }
    if (!confirm(_t('settings-workspace-profile-delete-confirm', 'Delete profile') + ' "' + name + '"?')) return;
    fetch('/api/workspace/profiles/' + encodeURIComponent(name), {method: 'DELETE'})
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.status === 'ok') {
            showToast(_t('settings-workspace-profile-deleted', 'Profile deleted'));
            loadWorkspaceConfig();
        } else {
            showToast(data.detail || _t('settings-toast-save-failed'), 'error');
        }
    })
    .catch(function(err) { showToast(_t('settings-toast-save-failed') + err.message, 'error'); });
}

function applyWorkspacePreset(preset) {
    fetch('/api/workspace/presets')
    .then(function(r) { return r.json(); })
    .then(function(data) {
        var p = (data.presets || {})[preset];
        if (!p) return;
        _workspaceState.layout_preset = preset;
        _workspaceState.committee_preset = p.committee_preset || _workspaceState.committee_preset;
        document.getElementById('workspace-default-page').value = p.default_page || '/';
        document.getElementById('workspace-show-tape').checked = p.show_ticker_tape !== false;
        document.querySelectorAll('.workspace-nav-hide').forEach(function(cb) {
            cb.checked = (p.hidden_nav || []).indexOf(cb.getAttribute('data-page')) !== -1;
        });
        document.querySelectorAll('.workspace-preset-btn').forEach(function(b) {
            var active = b.getAttribute('data-preset') === preset;
            b.style.borderColor = active ? 'var(--accent-orange)' : '';
            b.style.opacity = active ? '1' : '0.65';
        });
        showToast(_t('settings-workspace-preset-applied', 'Preset applied') + ': ' + preset, 'info');
    })
    .catch(function() {});
}

function saveWorkspaceConfig() {
    var hidden = [];
    document.querySelectorAll('.workspace-nav-hide:checked').forEach(function(cb) {
        hidden.push(cb.getAttribute('data-page'));
    });
    var enabledPersonas = collectEnabledPersonas();
    if (enabledPersonas === null) {
        showToast(_t('settings-workspace-personas-required', 'Select at least one persona'), 'warning');
        return;
    }
    var payload = {
        layout_preset: _workspaceState.layout_preset || 'custom',
        default_page: document.getElementById('workspace-default-page').value,
        default_ticker: document.getElementById('workspace-default-ticker').value.trim(),
        show_ticker_tape: document.getElementById('workspace-show-tape').checked,
        sidebar_collapsed: document.getElementById('workspace-sidebar-collapsed').checked,
        hidden_nav: hidden,
        enabled_personas: enabledPersonas
    };
    fetch('/api/workspace', {
        method: 'PUT',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(payload)
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.status === 'ok') {
            _workspaceState = data.workspace || _workspaceState;
            try { sessionStorage.removeItem('augur-workspace-routed'); } catch(e) {}
            showToast(_t('settings-workspace-saved', 'Workspace saved'));
            var el = document.getElementById('workspace-status');
            if (el) el.innerHTML = '<span style="color:var(--accent-green);">&#x2713; OK</span>';
        } else {
            showToast(_t('settings-toast-save-failed'), 'error');
        }
    })
    .catch(function(err) { showToast(_t('settings-toast-save-failed') + err.message, 'error'); });
}

// ============ API Auth Token Functions ============

function loadApiAuthStatus() {
    var statusEl = document.getElementById('api-auth-status');
    var token = localStorage.getItem('augur_api_token');
    if (token) {
        document.getElementById('api-auth-token').placeholder = _t('settings-configured');
        statusEl.innerHTML = '<span style="color:var(--accent-green); font-size:0.75rem;">&#x2713; ' + escapeHtml(_t('settings-status-configured')) + '</span>';
    } else {
        statusEl.innerHTML = '<span style="color:var(--text-muted); font-size:0.75rem;">' + escapeHtml(_t('settings-status-not-configured')) + '</span>';
    }
}

function saveApiToken() {
    var token = document.getElementById('api-auth-token').value.trim();
    if (!token) {
        localStorage.removeItem('augur_api_token');
        document.getElementById('api-auth-token').placeholder = _t('settings-api-token-ph', 'API Token');
        document.getElementById('api-auth-status').innerHTML = '<span style="color:var(--text-muted); font-size:0.75rem;">' + escapeHtml(_t('settings-status-not-configured')) + '</span>';
        showToast(_t('settings-toast-token-cleared'));
        return;
    }
    localStorage.setItem('augur_api_token', token);
    document.getElementById('api-auth-token').value = '';
    document.getElementById('api-auth-token').placeholder = _t('settings-configured');
    document.getElementById('api-auth-status').innerHTML = '<span style="color:var(--accent-green); font-size:0.75rem;">&#x2713; ' + escapeHtml(_t('settings-status-configured')) + '</span>';
    showToast(_t('settings-toast-token-saved'));
}

function testApiToken() {
    var statusEl = document.getElementById('api-auth-status');
    statusEl.innerHTML = '<span style="color:var(--text-muted); font-size:0.75rem;">' + escapeHtml(_t('settings-status-verifying')) + '</span>';
    var token = document.getElementById('api-auth-token').value.trim() || localStorage.getItem('augur_api_token') || '';
    var headers = {};
    if (token) {
        headers['Authorization'] = 'Bearer ' + token;
    }
    fetch('/api/auth/verify', { headers: headers })
    .then(function(r) { return r.json().then(function(d) { return {status: r.status, data: d}; }); })
    .then(function(res) {
        if (res.status === 200 && res.data.authenticated) {
            var mode = res.data.mode === 'open' ? _t('settings-status-connected-mode-open') : _t('settings-status-connected-mode-token');
            statusEl.innerHTML = '<span style="color:var(--accent-green); font-size:0.75rem;">&#x2713; ' + escapeHtml(_t('settings-status-connected')) + ' ' + escapeHtml(mode) + '</span>';
            showToast(_t('settings-toast-auth-success'));
        } else {
            statusEl.innerHTML = '<span style="color:var(--accent-red); font-size:0.75rem;">&#x2717; ' + escapeHtml(res.data.detail || _t('settings-toast-auth-failed')) + '</span>';
            showToast(_t('settings-toast-auth-failed'), 'error');
        }
    })
    .catch(function(err) {
        statusEl.innerHTML = '<span style="color:var(--accent-red); font-size:0.75rem;">&#x2717; ' + escapeHtml(_t('settings-toast-request-failed').replace(': ', '')) + '</span>';
        showToast(_t('settings-toast-verify-failed') + err.message, 'error');
    });
}
</script>
{% endblock %}