{% extends 'base.html' %}

{% block title %}设置 - {{ get_app_name() }}{% endblock %}

{% block styles %}
{{ super() }}
<style>
    #config-tab, #qf-tab, #password-tab, #init-tab {
        color: #2D2A24 !important;
    }
    #config-tab.active, #qf-tab.active, #init-tab.active {
        color: #141413 !important;
        font-weight: 600;
    }
    .model-config {
        display: none;
    }
    .om-model-help-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    .om-bili-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1200;
        background: rgba(20, 17, 12, 0.62);
        align-items: center;
        justify-content: center;
        padding: 1rem;
    }
    .om-bili-modal.is-open {
        display: flex;
    }
    .om-bili-dialog {
        width: min(920px, 96vw);
        background: var(--om-paper);
        border: 1px solid var(--om-border);
        border-radius: 10px;
        box-shadow: 0 18px 48px rgba(0,0,0,0.28);
        overflow: hidden;
    }
    .om-bili-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 0.85rem 1rem;
        border-bottom: 1px solid var(--om-border);
        background: var(--om-cream-soft);
    }
    .om-bili-title {
        margin: 0;
        color: var(--om-ink);
        font-size: 1rem;
        font-weight: 700;
    }
    .om-bili-close {
        border: 0;
        background: transparent;
        color: var(--om-muted);
        font-size: 1.5rem;
        line-height: 1;
        padding: 0 0.25rem;
    }
    .om-bili-frame-wrap {
        aspect-ratio: 16 / 9;
        background: #141413;
    }
    .om-bili-frame-wrap iframe {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
    }
    .om-model-id-help {
        color: #6B6760;
    }
    .om-model-id-help strong {
        color: #141413;
    }
</style>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">

    <div class="card">
        <div class="card-header">
            <h4 class="mb-0" style="font-weight: 600;">设置</h4>
        </div>
            <div class="card-body" style="padding: 1.5rem;">
                {% with messages = get_flashed_messages(with_categories=true) %}
                    {% if messages %}
                        {% for category, message in messages %}
                            <div class="alert alert-{{ category }}">
                                {{ message }}
                            </div>
                        {% endfor %}
                    {% endif %}
                {% endwith %}
                
                <ul class="nav nav-tabs mb-4">
                    <li class="nav-item">
                        <a class="nav-link active" id="config-tab" data-bs-toggle="tab" href="#config">AI配置</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="qf-tab" data-bs-toggle="tab" href="#qf">QF数据互联</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="password-tab" data-bs-toggle="tab" href="#password">用户信息修改</a>
                    </li>
                    {% if user.role == 'admin' %}
                    <li class="nav-item">
                        <a class="nav-link" id="update-tab" data-bs-toggle="tab" href="#update">检查更新</a>
                    </li>
                    {% endif %}
                    {% if not om_is_campus %}
                    <li class="nav-item">
                        <a class="nav-link" id="init-tab" data-bs-toggle="tab" href="#init">系统初始化</a>
                    </li>
                    {% endif %}
                </ul>
                
                <div class="tab-content">
                    <!-- AI配置标签页 -->
                    <div class="tab-pane fade show active" id="config">
                        <form method="POST" action="{{ url_for('profile') }}">
                            <input type="hidden" name="active_tab" value="config">
                            <input type="hidden" name="update_config" value="1">
                            
                            <div class="form-group">
                                <label for="selected_model" style="font-weight: 600; color: #141413;">选择AI模型</label>
                                <select class="form-control" id="selected_model" name="selected_model" required style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    <option value="deepseek" {% if ai_config and ai_config.selected_model == 'deepseek' %}selected{% endif %}>DeepSeek</option>
                                    <option value="doubao" {% if ai_config and ai_config.selected_model == 'doubao' %}selected{% endif %}>豆包</option>
                                    <option value="qwen" {% if ai_config and ai_config.selected_model == 'qwen' %}selected{% endif %}>阿里云百炼</option>
                                    <option value="glm" {% if ai_config and ai_config.selected_model == 'glm' %}selected{% endif %}>智谱清言(GLM)</option>
                                    <option value="siliconflow" {% if ai_config and ai_config.selected_model == 'siliconflow' %}selected{% endif %}>硅基流动</option>
                                    <option value="cherry" {% if ai_config and ai_config.selected_model == 'cherry' %}selected{% endif %}>Cherry Studio 企业版</option>
                                    <option value="ollama" {% if ai_config and ai_config.selected_model == 'ollama' %}selected{% endif %}>Ollama (本地)</option>
                                    <option value="custom" {% if ai_config and ai_config.selected_model == 'custom' %}selected{% endif %}>自定义 API (OpenAI 兼容)</option>
                                    {% for opt in campus_shared_options or [] %}
                                    <option value="{{ opt.key }}" {% if ai_config and ai_config.selected_model == opt.key %}selected{% endif %}>{{ opt.label }}</option>
                                    {% endfor %}
                                </select>
                                <div class="mt-2 om-model-help-row" id="apply-key-row">
                                    <a id="apply-key-btn" href="#" target="_blank" rel="noopener"
                                       class="btn btn-sm btn-outline-primary"
                                       style="border-radius: 6px; padding: 0.4rem 0.85rem; font-weight: 500; display: inline-flex; align-items: center; gap: 0.35rem;">
                                        <i class="bi bi-box-arrow-up-right"></i>
                                        <span id="apply-key-btn-text">申请 API Key</span>
                                    </a>
                                    <button type="button" id="model-video-btn"
                                            class="btn btn-sm btn-outline-secondary"
                                            style="border-radius: 6px; padding: 0.4rem 0.85rem; font-weight: 500; display: inline-flex; align-items: center; gap: 0.35rem;">
                                        <i class="bi bi-play-circle"></i>
                                        视频演示
                                    </button>
                                    <small class="text-muted ms-2" id="apply-key-hint" style="font-size: 0.8rem;"></small>
                                </div>
                            </div>
                            
                            <div id="deepseek_config" class="model-config">
                                <h5 class="mt-4 mb-3" style="color: #141413; font-weight: 600;">DeepSeek 配置</h5>
                                <div class="form-group">
                                    <label for="deepseek_api_key" style="font-weight: 600; color: #141413;">API Key</label>
                                    <input type="password" class="form-control api-key-input" id="deepseek_api_key" name="deepseek_api_key" value="{{ model_configs_dict['deepseek'].api_key if model_configs_dict.get('deepseek') else '' }}" style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    <small class="form-text text-muted" style="color: #6B6760;">请输入您的DeepSeek API密钥</small>
                                </div>
                                <div class="form-group mt-2">
                                    <label for="deepseek_model" style="font-weight: 600; color: #141413;">模型名称（可选）</label>
                                    <input type="text" class="form-control" id="deepseek_model" name="deepseek_model" value="{{ model_configs_dict['deepseek'].extra_settings if model_configs_dict.get('deepseek') else '' }}" placeholder="可留空，或填写官方平台提供的模型 ID" style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    <small class="form-text text-muted om-model-id-help">模型 ID 以官方平台当前页面为准；不确定怎么找时，请点击上方<strong>视频演示</strong>查看获取方法。</small>
                                </div>
                                <button type="button" class="btn btn-info mt-2 test-api-key" data-model="deepseek" data-api-key-field="deepseek_api_key" class="btn btn-primary">测试API密钥</button>
                            </div>

                            <div id="doubao_config" class="model-config">
                                <h5 class="mt-4 mb-3" style="color: #141413; font-weight: 600;">豆包 配置</h5>
                                <div class="form-group">
                                    <label for="doubao_api_key" style="font-weight: 600; color: #141413;">API Key</label>
                                    <input type="password" class="form-control api-key-input" id="doubao_api_key" name="doubao_api_key" value="{{ model_configs_dict['doubao'].api_key if model_configs_dict.get('doubao') else '' }}" style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    <small class="form-text text-muted" style="color: #6B6760;">请输入您的豆包（火山方舟 Ark）API Key</small>
                                </div>
                                <div class="form-group mt-2">
                                    <label for="doubao_model" style="font-weight: 600; color: #141413;">对话模型名称（必填）</label>
                                    <input type="text" class="form-control" id="doubao_model" name="doubao_model" value="{{ model_configs_dict['doubao'].extra_settings if model_configs_dict.get('doubao') else '' }}" placeholder="填写火山方舟控制台中的模型 ID 或 Endpoint ID" style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    <small class="form-text text-muted om-model-id-help">请以火山方舟控制台显示的模型 ID / Endpoint ID 为准；点击上方<strong>视频演示</strong>可查看复制位置。</small>
                                </div>
                                <div class="form-group mt-2">
                                    <label for="doubao_image_gen_model" style="font-weight: 600; color: #141413;"><i class="bi bi-magic"></i> 图片生成模型（非必填，独立于对话模型）</label>
                                    <input type="text" class="form-control" id="doubao_image_gen_model" name="doubao_image_gen_model" value="{{ model_configs_dict['doubao'].image_gen_model if model_configs_dict.get('doubao') and model_configs_dict.get('doubao').image_gen_model else '' }}" placeholder="填写官方平台中的图片生成模型 ID，留空则不开启图片生成" style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    <small class="form-text text-muted om-model-id-help">图片生成模型与对话模型独立；请以官方平台当前可用模型 ID 为准。</small>
                                </div>
                                <div class="form-group mt-2">
                                    <label for="doubao_video_gen_model" style="font-weight: 600; color: #141413;"><i class="bi bi-film"></i> 视频生成模型（非必填，独立于对话模型）</label>
                                    <input type="text" class="form-control" id="doubao_video_gen_model" name="doubao_video_gen_model" value="{{ model_configs_dict['doubao'].video_gen_model if model_configs_dict.get('doubao') and model_configs_dict.get('doubao').video_gen_model else '' }}" placeholder="如 doubao-seedance-1-5-pro-251215，留空则不开启视频生成" style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    <small class="form-text text-muted om-model-id-help">视频生成（seedance 系列）按视频时长/分辨率计费，请以火山方舟控制台为准；默认生成 5 秒 720p。</small>
                                </div>
                                <button type="button" class="btn btn-info mt-2 test-api-key" data-model="doubao" data-api-key-field="doubao_api_key" data-model-field="doubao_model" class="btn btn-primary">测试API密钥</button>
                            </div>

                            <div id="qwen_config" class="model-config">
                                <h5 class="mt-4 mb-3" style="color: #141413; font-weight: 600;">阿里云百炼（通义） 配置</h5>
                                <div class="form-group">
                                    <label for="qwen_api_key" style="font-weight: 600; color: #141413;">API Key</label>
                                    <input type="password" class="form-control api-key-input" id="qwen_api_key" name="qwen_api_key" value="{{ model_configs_dict['qwen'].api_key if model_configs_dict.get('qwen') else '' }}" style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    <small class="form-text text-muted" style="color: #6B6760;">请输入您的阿里云百炼 API密钥</small>
                                </div>
                                <div class="form-group mt-2">
                                    <label for="qwen_model" style="font-weight: 600; color: #141413;">对话模型名称（可选）</label>
                                    <input type="text" class="form-control" id="qwen_model" name="qwen_model" value="{{ model_configs_dict['qwen'].extra_settings if model_configs_dict.get('qwen') else '' }}" placeholder="可留空，或填写阿里云百炼控制台中的模型 ID" style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    <small class="form-text text-muted om-model-id-help">需要图片识别时，请在百炼控制台选择支持视觉的模型，并复制对应模型 ID；具体位置见上方<strong>视频演示</strong>。</small>
                                </div>
                                <div class="form-group mt-2">
                                    <label for="qwen_image_gen_model" style="font-weight: 600; color: #141413;"><i class="bi bi-magic"></i> 图片生成模型（非必填，独立于对话模型）</label>
                                    <input type="text" class="form-control" id="qwen_image_gen_model" name="qwen_image_gen_model" value="{{ model_configs_dict['qwen'].image_gen_model if model_configs_dict.get('qwen') and model_configs_dict.get('qwen').image_gen_model else '' }}" placeholder="填写官方平台中的图片生成模型 ID，留空则不开启图片生成" style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    <small class="form-text text-muted om-model-id-help">图片生成模型 ID 以百炼控制台当前可用模型为准；生成可能需要等待几十秒。</small>
                                </div>
                                <button type="button" class="btn btn-info mt-2 test-api-key" data-model="qwen" data-api-key-field="qwen_api_key" data-model-field="qwen_model" class="btn btn-primary">测试API密钥</button>
                            </div>

                            <div id="glm_config" class="model-config">
                                <h5 class="mt-4 mb-3" style="color: #141413; font-weight: 600;">智谱清言(GLM) 配置</h5>
                                <div class="form-group">
                                    <label for="glm_api_key" style="font-weight: 600; color: #141413;">API Key</label>
                                    <input type="password" class="form-control api-key-input" id="glm_api_key" name="glm_api_key" value="{{ model_configs_dict['glm'].api_key if model_configs_dict.get('glm') else '' }}" style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    <small class="form-text text-muted" style="color: #6B6760;">请输入您的智谱清言 API密钥</small>
                                </div>
                                <div class="form-group mt-2">
                                    <label for="glm_model" style="font-weight: 600; color: #141413;">对话模型名称（可选）</label>
                                    <input type="text" class="form-control" id="glm_model" name="glm_model" value="{{ model_configs_dict['glm'].extra_settings if model_configs_dict.get('glm') else '' }}" placeholder="可留空，或填写智谱开放平台中的模型 ID" style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    <small class="form-text text-muted om-model-id-help">需要图片识别时，请在智谱开放平台选择支持视觉的模型，并复制对应模型 ID；具体位置见上方<strong>视频演示</strong>。</small>
                                </div>
                                <div class="form-group mt-2">
                                    <label for="glm_image_gen_model" style="font-weight: 600; color: #141413;"><i class="bi bi-magic"></i> 图片生成模型（非必填，独立于对话模型）</label>
                                    <input type="text" class="form-control" id="glm_image_gen_model" name="glm_image_gen_model" value="{{ model_configs_dict['glm'].image_gen_model if model_configs_dict.get('glm') and model_configs_dict.get('glm').image_gen_model else '' }}" placeholder="填写官方平台中的图片生成模型 ID，留空则不开启图片生成" style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    <small class="form-text text-muted om-model-id-help">图片生成模型 ID 以智谱开放平台当前可用模型为准。</small>
                                </div>
                                <button type="button" class="btn btn-info mt-2 test-api-key" data-model="glm" data-api-key-field="glm_api_key" data-model-field="glm_model" class="btn btn-primary">测试API密钥</button>
                            </div>

                            <div id="siliconflow_config" class="model-config">
                                <h5 class="mt-4 mb-3" style="color: #141413; font-weight: 600;">硅基流动 配置</h5>
                                <div class="form-group">
                                    <label for="siliconflow_api_key" style="font-weight: 600; color: #141413;">API Key</label>
                                    <input type="password" class="form-control api-key-input" id="siliconflow_api_key" name="siliconflow_api_key" value="{{ model_configs_dict['siliconflow'].api_key if model_configs_dict.get('siliconflow') else '' }}" style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    <small class="form-text text-muted" style="color: #6B6760;">请输入您的硅基流动 API密钥</small>
                                </div>
                                <div class="form-group">
                                    <label for="siliconflow_model" style="font-weight: 600; color: #141413;">对话模型名称</label>
                                    <input type="text" class="form-control" id="siliconflow_model" name="siliconflow_model" value="{{ model_configs_dict['siliconflow'].extra_settings if model_configs_dict.get('siliconflow') else 'Qwen/Qwen2.5-72B-Instruct' }}" placeholder="填写硅基流动控制台中的模型 ID" style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    <small class="form-text text-muted om-model-id-help">请以硅基流动模型广场 / 控制台显示的模型 ID 为准；点击上方<strong>视频演示</strong>可查看复制位置。</small>
                                </div>
                                <div class="form-group mt-2">
                                    <label for="siliconflow_image_gen_model" style="font-weight: 600; color: #141413;"><i class="bi bi-magic"></i> 图片生成模型（非必填，独立于对话模型）</label>
                                    <input type="text" class="form-control" id="siliconflow_image_gen_model" name="siliconflow_image_gen_model" value="{{ model_configs_dict['siliconflow'].image_gen_model if model_configs_dict.get('siliconflow') and model_configs_dict.get('siliconflow').image_gen_model else '' }}" placeholder="填写官方平台中的图片生成模型 ID，留空则不开启图片生成" style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    <small class="form-text text-muted om-model-id-help">图片生成模型 ID 以硅基流动当前可用模型为准。</small>
                                </div>
                                <button type="button" class="btn btn-info mt-2 test-api-key" data-model="siliconflow" data-api-key-field="siliconflow_api_key" data-model-field="siliconflow_model" class="btn btn-primary">测试API密钥</button>
                            </div>

                            <div id="cherry_config" class="model-config">
                                <h5 class="mt-4 mb-3" style="color: #141413; font-weight: 600;">Cherry Studio 企业版 配置</h5>
                                <div class="form-group">
                                    <label for="cherry_api_key" style="font-weight: 600; color: #141413;">API Key</label>
                                    <input type="password" class="form-control api-key-input" id="cherry_api_key" name="cherry_api_key" value="{{ model_configs_dict['cherry'].api_key if model_configs_dict.get('cherry') else '' }}" style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    <small class="form-text text-muted" style="color: #6B6760;">在 Cherry Studio 企业版管理后台的「API 密钥」中生成</small>
                                </div>
                                <div class="form-group mt-2">
                                    <label for="cherry_api_url" style="font-weight: 600; color: #141413;">服务端地址（可选）</label>
                                    <input type="text" class="form-control" id="cherry_api_url" name="cherry_api_url" value="{{ model_configs_dict['cherry'].api_url if model_configs_dict.get('cherry') and model_configs_dict.get('cherry').api_url else '' }}" placeholder="一般留空即可（默认官方云端）" style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    <small class="form-text text-muted" style="color: #6B6760;"><strong>一般留空即可</strong>，默认使用官方云端（express-ent-admin.cherryin.ai）。此字段为将来自部署企业版预留，目前无需填写</small>
                                </div>
                                <div class="form-group mt-2">
                                    <label for="cherry_model" style="font-weight: 600; color: #141413;">对话模型名称（可选）</label>
                                    <input type="text" class="form-control" id="cherry_model" name="cherry_model" value="{{ model_configs_dict['cherry'].extra_settings if model_configs_dict.get('cherry') else '' }}" placeholder="可留空（默认 deepseek/deepseek-v4-flash），或填管理后台可用模型 ID" style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    <small class="form-text text-muted om-model-id-help">模型 ID 以企业版后台「模型管理」列表为准，如 <code>deepseek/deepseek-v4-flash</code>、<code>qwen/qwen3-vl-plus</code>（支持图片识别）。</small>
                                </div>
                                <div class="form-group mt-2">
                                    <label for="cherry_image_gen_model" style="font-weight: 600; color: #141413;"><i class="bi bi-magic"></i> 图片生成模型（非必填，独立于对话模型）</label>
                                    <input type="text" class="form-control" id="cherry_image_gen_model" name="cherry_image_gen_model" value="{{ model_configs_dict['cherry'].image_gen_model if model_configs_dict.get('cherry') and model_configs_dict.get('cherry').image_gen_model else '' }}" placeholder="如 openai/gpt-image-2，留空则不开启图片生成" style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    <small class="form-text text-muted om-model-id-help">填企业版后台可用的图片生成模型 ID，如 <code>openai/gpt-image-2</code>、<code>google/gemini-2.5-flash-image</code>。</small>
                                </div>
                                <button type="button" class="btn btn-info mt-2 test-api-key" data-model="cherry" data-api-key-field="cherry_api_key" data-api-url-field="cherry_api_url" data-model-field="cherry_model" class="btn btn-primary">测试API密钥</button>
                            </div>

                            <div id="ollama_config" class="model-config">
                                <h5 class="mt-4 mb-3" style="color: #141413; font-weight: 600;">Ollama (本地) 配置</h5>
                                <div class="form-group">
                                    <label for="ollama_api_url" style="font-weight: 600; color: #141413;">Ollama API 地址</label>
                                    <input type="text" class="form-control" id="ollama_api_url" name="ollama_api_url" value="{{ model_configs_dict['ollama'].api_url if model_configs_dict.get('ollama') else 'http://localhost:11434' }}" placeholder="http://localhost:11434" style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    <small class="form-text text-muted" style="color: #6B6760;">请输入您的Ollama服务地址（默认：http://localhost:11434）</small>
                                </div>
                                <div class="form-group">
                                    <label for="ollama_model" style="font-weight: 600; color: #141413;">模型名称</label>
                                    <input type="text" class="form-control" id="ollama_model" name="ollama_model" value="{{ model_configs_dict['ollama'].extra_settings if model_configs_dict.get('ollama') else 'llama3' }}" placeholder="llama3" style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    <small class="form-text text-muted" style="color: #6B6760;">请输入要使用的模型名称，如：llama3、qwen3-coder:30b、deepseek-r1:7b 等</small>
                                </div>
                                <button type="button" class="btn btn-info mt-2 test-api-key" data-model="ollama" data-api-url-field="ollama_api_url" data-model-field="ollama_model" class="btn btn-primary">测试连接</button>
                            </div>

                            <div id="custom_config" class="model-config">
                                <h5 class="mt-4 mb-3" style="color: #141413; font-weight: 600;">自定义 API (OpenAI 兼容) 配置</h5>
                                <div class="form-group">
                                    <label for="custom_api_url" style="font-weight: 600; color: #141413;">Base URL</label>
                                    <input type="text" class="form-control" id="custom_api_url" name="custom_api_url" value="{{ model_configs_dict['custom'].api_url if model_configs_dict.get('custom') and model_configs_dict.get('custom').api_url else '' }}" placeholder="如 https://api.openai.com/v1" style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    <small class="form-text text-muted" style="color: #6B6760;">填到 <code>/v1</code> 为止即可，系统会自动拼接 <code>/chat/completions</code> 与 <code>/images/generations</code>。支持任何 OpenAI 兼容服务（OpenAI、Kimi、各类中转 / 聚合 API、本地 vLLM 等）。</small>
                                </div>
                                <div class="form-group mt-2">
                                    <label for="custom_api_key" style="font-weight: 600; color: #141413;">API Key</label>
                                    <input type="password" class="form-control api-key-input" id="custom_api_key" name="custom_api_key" value="{{ model_configs_dict['custom'].api_key if model_configs_dict.get('custom') else '' }}" style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    <small class="form-text text-muted" style="color: #6B6760;">你所用 OpenAI 兼容服务提供的密钥</small>
                                </div>
                                <div class="form-group mt-2">
                                    <label for="custom_model" style="font-weight: 600; color: #141413;">对话模型名称</label>
                                    <input type="text" class="form-control" id="custom_model" name="custom_model" value="{{ model_configs_dict['custom'].extra_settings if model_configs_dict.get('custom') else '' }}" placeholder="如 gpt-4o-mini、deepseek-chat、moonshot-v1-8k" style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    <small class="form-text text-muted om-model-id-help">填你的服务实际可用的模型 ID。</small>
                                </div>
                                <div class="form-group mt-2">
                                    <label for="custom_image_gen_model" style="font-weight: 600; color: #141413;"><i class="bi bi-magic"></i> 图片生成模型（非必填，独立于对话模型）</label>
                                    <input type="text" class="form-control" id="custom_image_gen_model" name="custom_image_gen_model" value="{{ model_configs_dict['custom'].image_gen_model if model_configs_dict.get('custom') and model_configs_dict.get('custom').image_gen_model else '' }}" placeholder="如 gpt-image-1，留空则不开启图片生成" style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    <small class="form-text text-muted om-model-id-help">需该服务支持 OpenAI 的 <code>/v1/images/generations</code> 接口，模型 ID 以其文档为准。</small>
                                </div>
                                <button type="button" class="btn btn-info mt-2 test-api-key" data-model="custom" data-api-key-field="custom_api_key" data-api-url-field="custom_api_url" data-model-field="custom_model" class="btn btn-primary">测试API密钥</button>
                            </div>

                            {% if om_is_campus_admin %}
                            <div class="form-group mt-4" style="background:#F7F4EC;border:1px solid #E5E0D8;border-radius:8px;padding:14px 16px;">
                                <label style="font-weight:600;color:#141413;display:block;margin-bottom:6px;">🏫 全校统一 API 共享</label>
                                <small class="form-text text-muted" style="color:#6B6760;display:block;margin-bottom:10px;">勾选你要分享给全校老师的厂商（仅列出已配置 Key 的），再打开下面的总开关即可生效。老师会在「选择 AI 模型」及每个 AI 导师的模型选择里看到这些「🏫 学校统一 · 厂商」，直接用你配置的 Key；老师自己的配置不受影响。未勾选的、或关闭开关后，老师都看不到。</small>
                                {% for opt in admin_share_candidates or [] %}
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="share_provider" value="{{ opt.key }}" id="share_prov_{{ opt.key }}" {% if opt.key in shared_providers_list %}checked{% endif %}>
                                    <label class="form-check-label" for="share_prov_{{ opt.key }}" style="color:#141413;">{{ opt.label }}</label>
                                </div>
                                {% endfor %}
                                {% if not admin_share_candidates %}
                                <div class="text-muted" style="font-size:0.85rem;">（还没有已配置 Key 的厂商，请先在上面配好至少一个厂商并保存，再回来勾选分享。）</div>
                                {% endif %}
                                <div class="form-check form-switch mt-3" style="border-top:1px solid #E5E0D8;padding-top:10px;">
                                    <input class="form-check-input" type="checkbox" id="share_to_campus" name="share_to_campus" {% if ai_config and ai_config.share_to_campus %}checked{% endif %}>
                                    <label class="form-check-label" for="share_to_campus" style="font-weight:600;color:#141413;">启用全校共享（打开后，上面勾选的厂商对全校老师可见）</label>
                                </div>
                            </div>
                            {% endif %}

                            <button type="submit" class="btn btn-success mt-4" style="font-weight: 500; background-color: #5B7553; border: none; border-radius: 6px; padding: 0.625rem 1.5rem;">保存配置</button>
                            
                            <div class="alert alert-secondary mt-4" style="border-radius: 8px; background-color: #F7F4EC; border: 1px solid #E5E0D8;">
                                <p style="margin-bottom: 0.5rem;"><strong>说明：</strong></p>
                                <p style="margin-bottom: 0; color: #6B6760;">配置完成AI模型后，您可以在任务分析页面使用智能分析功能。智能分析将根据您的表单数据和附件内容，生成详细的分析报告。请注意保护您的API密钥安全，避免泄露。</p>
                            </div>
                        </form>
                    </div>
                    
                    <!-- QF数据互联标签页 -->
                    <div class="tab-pane fade" id="qf">
                        <form method="POST" action="{{ url_for('profile') }}" id="qfForm">
                            <input type="hidden" name="active_tab" value="qf">
                            <input type="hidden" name="update_qf_config" value="1">
                            
                            <div class="form-group mb-3">
                                <label for="qf_username" style="font-weight: 600; color: #141413;">QF在线版的用户名</label>
                                <input type="text" class="form-control" id="qf_username" name="qf_username" value="{{ qf_config.username if qf_config else '' }}" style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                            </div>
                            
                            <div class="form-group mb-3">
                                <label for="qf_password" style="font-weight: 600; color: #141413;">QF在线版的密码</label>
                                <input type="password" class="form-control" id="qf_password" name="qf_password" value="{{ qf_config.password if qf_config else '' }}" style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                            </div>
                            
                            <button type="submit" class="btn" style="font-weight: 500; border-radius: 8px; padding: 0.625rem 1.5rem;">保存</button>
                            <button type="button" id="testQfBtn" class="btn" style="background-color: #5B7553; color: white; font-weight: 500; border-radius: 8px; padding: 0.625rem 1.5rem; margin-left: 10px;">测试连接</button>
                            
                            <div class="alert alert-secondary mt-4" style="border-radius: 8px; background-color: #F7F4EC; border: 1px solid #E5E0D8;">
                                <p style="margin-bottom: 0.5rem;"><strong>说明：</strong></p>
                                <p style="margin-bottom: 0; color: #6B6760;">在“<a href="https://quickform.cn/" target=“_blank" rel=“noopener”>QuickForm在线版</a>”（quickform.cn）中调试数据任务容易成功，尤其是"数据大屏"功能。我们推荐用在线版新建数据任务，再导入到校园版或者教师版。</p>
                            </div>
                        </form>
                    </div>
                    
                    <!-- 用户信息修改标签页 -->
                    <div class="tab-pane fade" id="password">
                        <div class="card mb-4" style="border: 1px solid #E5E0D8; border-radius: 8px;">
                            <div class="card-body" style="padding: 1.5rem;">
                                <h6 style="font-weight: 600; color: #141413; margin-bottom: 1rem;">修改用户名</h6>
                                {% if om_is_campus %}
                                <div class="alert alert-secondary" style="border-radius: 8px;">
                                    当前角色：<strong>{{ user.role }}</strong>
                                    {% if user.force_password_change %}
                                    <span class="ms-2 text-danger">首次登录请先修改密码</span>
                                    {% endif %}
                                </div>
                                {% endif %}
                                <form method="POST" action="{{ url_for('profile', next=next_page) if next_page else url_for('profile') }}">
                                    <input type="hidden" name="active_tab" value="password">
                                    <input type="hidden" name="change_username" value="1">
                                    {% if next_page %}
                                    <input type="hidden" name="next" value="{{ next_page }}">
                                    {% endif %}
                                    <div class="form-group">
                                        <label for="username" style="font-weight: 600; color: #141413;">用户名</label>
                                        <input type="text" class="form-control" id="username" name="username" value="{{ user.username }}" required style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    </div>
                                    <button type="submit" class="btn btn-success mt-2" style="font-weight: 500; background-color: #5B7553; border: none; border-radius: 6px; padding: 0.5rem 1.5rem;">保存用户名</button>
                                </form>
                            </div>
                        </div>
                        
                        <div class="card" style="border: 1px solid #E5E0D8; border-radius: 8px;">
                            <div class="card-body" style="padding: 1.5rem;">
                                <h6 style="font-weight: 600; color: #141413; margin-bottom: 1rem;">修改密码</h6>
                                <form method="POST" action="{{ url_for('profile', next=next_page) if next_page else url_for('profile') }}">
                                    <input type="hidden" name="active_tab" value="password">
                                    <input type="hidden" name="change_password" value="1">
                                    {% if next_page %}
                                    <input type="hidden" name="next" value="{{ next_page }}">
                                    {% endif %}
                                    <div class="form-group">
                                        <label for="current_password" style="font-weight: 600; color: #141413;">当前密码</label>
                                        <input type="password" class="form-control" id="current_password" name="current_password" required style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    </div>
                                    <div class="form-group">
                                        <label for="new_password" style="font-weight: 600; color: #141413;">新密码</label>
                                        <input type="password" class="form-control" id="new_password" name="new_password" required style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                        <small class="form-text text-muted" style="color: #6B6760;">密码长度至少为6个字符</small>
                                    </div>
                                    <div class="form-group">
                                        <label for="confirm_password" style="font-weight: 600; color: #141413;">确认新密码</label>
                                        <input type="password" class="form-control" id="confirm_password" name="confirm_password" required style="border: 1px solid #C9C3B8; border-radius: 6px; padding: 0.625rem 0.875rem;">
                                    </div>
                                    <button type="submit" class="btn btn-success mt-2" style="font-weight: 500; background-color: #5B7553; border: none; border-radius: 6px; padding: 0.5rem 1.5rem;">保存密码</button>
                                </form>
                            </div>
                        </div>
                        
                        <div class="alert alert-secondary mt-4" style="border-radius: 8px; background-color: #F7F4EC; border: 1px solid #E5E0D8;">
                            <p style="margin-bottom: 0.5rem;"><strong>说明：</strong></p>
                            <p style="margin-bottom: 0; color: #6B6760;">如果发现密码错误，可以使用启动页面来初始化用户名为"admin"、密码为"openmentor"。</p>
                        </div>
                    </div>
                    
                    <!-- 在线更新标签页 -->
                    {% if user.role == 'admin' %}
                    <div class="tab-pane fade" id="update">
                        <div class="card mb-3" style="border: 1px solid #E5E0D8; border-radius: 8px;">
                            <div class="card-body" style="padding: 1.5rem;">
                                <div class="d-flex align-items-center justify-content-between flex-wrap" style="gap: 0.75rem;">
                                    <div>
                                        <h6 style="font-weight: 600; color: #141413; margin-bottom: 0.35rem;">在线更新</h6>
                                        <div class="small text-muted">当前版本 <strong id="upd-current">v{{ om_version }}</strong> · <span id="upd-channel">—</span></div>
                                    </div>
                                    <button type="button" id="upd-check-btn" class="btn" style="background:#141413;color:#fff;font-weight:500;border-radius:8px;padding:0.5rem 1.25rem;">检查更新</button>
                                </div>

                                <div id="upd-result" class="mt-3" style="display:none;"></div>

                                <div id="upd-progress-wrap" class="mt-3" style="display:none;">
                                    <div style="height:8px;background:#EFEBE3;border-radius:6px;overflow:hidden;">
                                        <div id="upd-progress-bar" style="height:100%;width:0%;background:#5B7553;transition:width .3s;"></div>
                                    </div>
                                    <div id="upd-progress-msg" class="small text-muted mt-1">—</div>
                                </div>

                                <div class="mt-3" style="display:flex;gap:0.5rem;flex-wrap:wrap;">
                                    <button type="button" id="upd-download-btn" class="btn" style="display:none;background:#3C6E47;color:#fff;font-weight:500;border-radius:8px;padding:0.5rem 1.25rem;">下载更新</button>
                                    <button type="button" id="upd-apply-btn" class="btn" style="display:none;background:#9A6A2E;color:#fff;font-weight:500;border-radius:8px;padding:0.5rem 1.25rem;">应用更新并重启</button>
                                </div>

                                <div class="alert alert-light mt-3 mb-0 small" style="border:1px solid #E5E0D8;border-radius:8px;color:#6B6760;">
                                    <i class="bi bi-shield-check"></i>
                                    更新只替换程序代码，<strong>绝不会动</strong>你的数据库、AI 配置、学生上传的附件与生成的图片、语音缓存。被替换的旧版会自动备份到 <code>backups/</code> 可回滚。
                                    <span id="upd-managed-note"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endif %}

                    <!-- 系统初始化标签页 -->
                    {% if not om_is_campus %}
                    <div class="tab-pane fade" id="init">
                        <div class="alert alert-warning" style="border-radius: 8px;">
                            <p style="margin-bottom: 0.5rem;"><strong>警告：</strong></p>
                            <p style="margin-bottom: 0;">此操作将清除所有AI配置（保留Ollama）、清除QF数据互联配置、用户名初始化为"admin"、密码初始化为"openmentor"，并删除前3个任务外的所有数据和附件。此操作不可恢复！</p>
                        </div>
                        
                        <button type="button" id="initSystemBtn" class="btn" style="background-color: #9A3A33; color: white; font-weight: 500; border-radius: 8px; padding: 0.625rem 1.5rem;">执行系统初始化</button>
                        <div id="initStatus" class="mt-3" style="display: none;"></div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="om-bili-modal" id="model-video-modal" aria-hidden="true">
    <div class="om-bili-dialog" role="dialog" aria-modal="true" aria-labelledby="model-video-title">
        <div class="om-bili-head">
            <h5 class="om-bili-title" id="model-video-title">视频演示</h5>
            <button type="button" class="om-bili-close" id="model-video-close" aria-label="关闭">×</button>
        </div>
        <div class="om-bili-frame-wrap">
            <iframe id="model-video-frame" src="about:blank" allowfullscreen="allowfullscreen" scrolling="no" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // 根据URL参数或表单提交保持标签页状态
    document.addEventListener('DOMContentLoaded', function() {
        const urlParams = new URLSearchParams(window.location.search);
        const activeTab = urlParams.get('active_tab');
        if (activeTab) {
            const tabTrigger = document.querySelector(`[href="#${activeTab}"]`);
            if (tabTrigger) {
                const tab = new bootstrap.Tab(tabTrigger);
                tab.show();
            }
        }
    });

    // 各模型的 API Key 申请页面
    const APPLY_KEY_LINKS = {
        'deepseek':    {url: 'https://platform.deepseek.com',           label: '前往 DeepSeek 平台申请',      hint: 'platform.deepseek.com'},
        'doubao':      {url: 'https://www.volcengine.com/product/ark', label: '前往火山方舟申请',           hint: 'volcengine.com（字节跳动）'},
        'qwen':        {url: 'https://bailian.console.aliyun.com',     label: '前往阿里云百炼申请',         hint: 'bailian.console.aliyun.com'},
        'glm':         {url: 'https://open.bigmodel.cn',                label: '前往智谱开放平台申请',       hint: 'open.bigmodel.cn（部分模型免费）'},
        'siliconflow': {url: 'https://siliconflow.cn',                  label: '前往硅基流动申请',           hint: 'siliconflow.cn'},
        'cherry':      {url: 'https://enterprise.cherryai.com.cn',      label: '了解 Cherry Studio 企业版',  hint: 'key 在企业版管理后台「API 密钥」生成'},
        'ollama':      {url: 'https://ollama.com/download',             label: '前往 Ollama 下载',           hint: '本地部署，无需 API Key'},
    };

    // 视频演示 BV 号：用于设置页 API 申请/模型 ID 获取教学视频。
    const MODEL_VIDEO_LINKS = {
        'deepseek':    {bv: 'BV1BiGe6fEWt', title: 'DeepSeek API 申请视频演示'},
        'doubao':      {bv: 'BV1BpGq6KEwb', title: '豆包 API 申请视频演示'},
        'qwen':        {bv: 'BV1njGq6gE6K', title: '阿里云 API 申请视频演示'},
        'glm':         {bv: 'BV1aXGi6dEGs', title: '智谱清言 API 申请视频演示'},
        'siliconflow': {bv: 'BV1RUGi6bEcP', title: '硅基流动 API 申请视频演示'},
    };

    function updateApplyKeyButton(model) {
        const cfg = APPLY_KEY_LINKS[model];
        const row = document.getElementById('apply-key-row');
        const btn = document.getElementById('apply-key-btn');
        const txt = document.getElementById('apply-key-btn-text');
        const hint = document.getElementById('apply-key-hint');
        const videoBtn = document.getElementById('model-video-btn');
        // 自定义 API / 学校统一 API 没有申请链接：整行隐藏，避免残留上一个厂商的跳转按钮
        if (!cfg) {
            if (row) row.style.display = 'none';
            return;
        }
        if (row) row.style.display = '';
        btn.href = cfg.url;
        txt.textContent = cfg.label;
        hint.textContent = cfg.hint;
        if (videoBtn) {
            videoBtn.style.display = MODEL_VIDEO_LINKS[model] ? 'inline-flex' : 'none';
            videoBtn.setAttribute('data-model', model);
        }
    }

    function openModelVideo(model) {
        const cfg = MODEL_VIDEO_LINKS[model];
        if (!cfg) return;
        if (!cfg.bv) {
            alert('这个模型的视频演示还没有上线，后续填入 B 站 BV 号后即可播放。');
            return;
        }
        const modal = document.getElementById('model-video-modal');
        const frame = document.getElementById('model-video-frame');
        const title = document.getElementById('model-video-title');
        title.textContent = cfg.title || '视频演示';
        frame.src = 'https://player.bilibili.com/player.html?bvid=' + encodeURIComponent(cfg.bv) + '&page=1&high_quality=1&danmaku=0&autoplay=1';
        modal.classList.add('is-open');
        modal.setAttribute('aria-hidden', 'false');
    }

    function closeModelVideo() {
        const modal = document.getElementById('model-video-modal');
        const frame = document.getElementById('model-video-frame');
        modal.classList.remove('is-open');
        modal.setAttribute('aria-hidden', 'true');
        frame.src = 'about:blank';
    }

    document.getElementById('model-video-btn').addEventListener('click', function() {
        openModelVideo(this.getAttribute('data-model'));
    });
    document.getElementById('model-video-close').addEventListener('click', closeModelVideo);
    document.getElementById('model-video-modal').addEventListener('click', function(e) {
        if (e.target === this) closeModelVideo();
    });

    // 根据选择的模型显示对应的配置项
    document.getElementById('selected_model').addEventListener('change', function() {
        const model = this.value;
        document.getElementById('deepseek_config').style.display = model === 'deepseek' ? 'block' : 'none';
        document.getElementById('doubao_config').style.display = model === 'doubao' ? 'block' : 'none';
        document.getElementById('qwen_config').style.display = model === 'qwen' ? 'block' : 'none';
        document.getElementById('glm_config').style.display = model === 'glm' ? 'block' : 'none';
        document.getElementById('siliconflow_config').style.display = model === 'siliconflow' ? 'block' : 'none';
        document.getElementById('cherry_config').style.display = model === 'cherry' ? 'block' : 'none';
        document.getElementById('ollama_config').style.display = model === 'ollama' ? 'block' : 'none';
        document.getElementById('custom_config').style.display = model === 'custom' ? 'block' : 'none';
        updateApplyKeyButton(model);
    });

    // 初始化显示
    const selectedModel = document.getElementById('selected_model').value;
    document.getElementById('deepseek_config').style.display = selectedModel === 'deepseek' ? 'block' : 'none';
    document.getElementById('doubao_config').style.display = selectedModel === 'doubao' ? 'block' : 'none';
    document.getElementById('qwen_config').style.display = selectedModel === 'qwen' ? 'block' : 'none';
    document.getElementById('glm_config').style.display = selectedModel === 'glm' ? 'block' : 'none';
    document.getElementById('siliconflow_config').style.display = selectedModel === 'siliconflow' ? 'block' : 'none';
    document.getElementById('cherry_config').style.display = selectedModel === 'cherry' ? 'block' : 'none';
    document.getElementById('ollama_config').style.display = selectedModel === 'ollama' ? 'block' : 'none';
    document.getElementById('custom_config').style.display = selectedModel === 'custom' ? 'block' : 'none';
    updateApplyKeyButton(selectedModel);
    
    // API密钥测试功能
    document.querySelectorAll('.test-api-key').forEach(button => {
        button.addEventListener('click', async function() {
            const model = this.getAttribute('data-model');
            const apiKeyField = this.getAttribute('data-api-key-field');
            const apiUrlField = this.getAttribute('data-api-url-field');
            const modelField = this.getAttribute('data-model-field');

            let apiKey = '';
            let apiUrl = '';
            let modelName = '';

            if (apiKeyField) {
                apiKey = document.getElementById(apiKeyField).value;
            }
            if (apiUrlField) {
                apiUrl = document.getElementById(apiUrlField).value;
            }
            if (modelField) {
                modelName = document.getElementById(modelField).value;
            }

            if (model === 'ollama') {
                if (!apiUrl) {
                    alert('请先输入Ollama API地址');
                    return;
                }
            } else {
                if (!apiKey) {
                    alert('请先输入API密钥');
                    return;
                }
            }

            const originalText = this.textContent;
            this.textContent = '测试中...';
            this.disabled = true;

            try {
                const response = await fetch('/test_api_key', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        model: model,
                        api_key: apiKey,
                        api_url: apiUrl,
                        model_name: modelName
                    })
                });

                const result = await response.json();

                if (result.success) {
                    alert(model === 'ollama' ? 'Ollama连接成功！' : 'API密钥测试成功！');
                } else {
                    alert(model === 'ollama' ? 'Ollama连接失败: ' + result.error : 'API密钥测试失败: ' + result.error);
                }
            } catch (error) {
                alert('测试过程中发生错误: ' + error.message);
            } finally {
                this.textContent = originalText;
                this.disabled = false;
            }
        });
    });

    // QF数据互联测试连接
    document.getElementById('testQfBtn').addEventListener('click', async function() {
        const originalText = this.textContent;
        this.textContent = '测试中...';
        this.disabled = true;

        try {
            const response = await fetch('/api/qf/test_connection', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
            });

            const result = await response.json();

            if (result.success) {
                alert('连接成功！找到 ' + result.tasks.length + ' 个任务');
            } else {
                alert('连接失败: ' + result.message);
            }
        } catch (error) {
            alert('测试失败: ' + error.message);
        } finally {
            this.textContent = originalText;
            this.disabled = false;
        }
    });

    // 系统初始化
    const initSystemBtn = document.getElementById('initSystemBtn');
    if (initSystemBtn) initSystemBtn.addEventListener('click', async function() {
        if (!confirm('确定要执行系统初始化吗？所有数据将被清除！')) {
            return;
        }
        
        const originalText = this.textContent;
        this.textContent = '初始化中...';
        this.disabled = true;

        try {
            const response = await fetch('/api/system/init', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                }
            });

            const result = await response.json();
            const statusDiv = document.getElementById('initStatus');
            statusDiv.style.display = 'block';

            if (result.success) {
                statusDiv.innerHTML = '<span style="color: #5B7553;">' + result.message + '</span>';
            } else {
                statusDiv.innerHTML = '<span style="color: #B8463E;">' + result.message + '</span>';
            }
        } catch (error) {
            document.getElementById('initStatus').style.display = 'block';
            document.getElementById('initStatus').innerHTML = '<span style="color: #B8463E;">初始化失败: ' + error.message + '</span>';
        } finally {
            this.textContent = originalText;
            this.disabled = false;
        }
    });

    // ==================== 在线更新（管理员） ====================
    (function setupUpdate() {
        const checkBtn = document.getElementById('upd-check-btn');
        if (!checkBtn) return;   // 非管理员页面没有此标签
        const result = document.getElementById('upd-result');
        const dlBtn = document.getElementById('upd-download-btn');
        const applyBtn = document.getElementById('upd-apply-btn');
        const progWrap = document.getElementById('upd-progress-wrap');
        const progBar = document.getElementById('upd-progress-bar');
        const progMsg = document.getElementById('upd-progress-msg');
        const channelEl = document.getElementById('upd-channel');
        const managedNote = document.getElementById('upd-managed-note');
        let managed = true;

        function box(html, kind) {
            const c = kind === 'err' ? '#8B342E' : (kind === 'ok' ? '#3C6E47' : '#141413');
            const bg = kind === 'err' ? '#F2DCD9' : (kind === 'ok' ? '#E6EFE3' : '#F4F1EA');
            result.style.display = 'block';
            result.innerHTML = `<div style="padding:0.6rem 0.85rem;background:${bg};color:${c};border-radius:8px;font-size:0.9rem;">${html}</div>`;
        }

        async function loadStatus() {
            try {
                const r = await fetch('/api/update/status');
                if (!r.ok) return;
                const d = await r.json();
                if (channelEl) channelEl.textContent = d.channel === 'campus' ? '校园版' : '个人版';
                managed = !!d.managed;
                if (managedNote) managedNote.textContent = managed ? '' : '（当前为开发/源码模式，仅下载不落地。）';
                if (d.pending) { applyBtn.style.display = 'inline-block'; box('已有下载好的新版待应用，点「应用更新并重启」即可完成升级。', 'ok'); }
            } catch (e) {}
        }

        checkBtn.addEventListener('click', async () => {
            checkBtn.disabled = true; const t = checkBtn.textContent; checkBtn.textContent = '检查中…';
            dlBtn.style.display = 'none'; applyBtn.style.display = 'none';
            try {
                const r = await fetch('/api/update/check', { method: 'POST' });
                const d = await r.json();
                if (!d.ok) { box(d.msg || '检查失败', 'err'); return; }
                if (!d.newer) { box(`已是最新版本（v${d.current}）。`, 'ok'); return; }
                const sizeMB = d.size ? ` · 约 ${(d.size/1048576).toFixed(1)} MB` : '';
                const notes = (d.notes || '').trim();
                box(`发现新版本 <strong>v${d.latest}</strong>（当前 v${d.current}）${sizeMB}` +
                    (notes ? `<div style="margin-top:0.5rem;white-space:pre-wrap;font-size:0.85rem;color:#6B6760;">${notes.replace(/</g,'&lt;')}</div>` : ''), 'info');
                dlBtn.style.display = 'inline-block';
            } catch (e) { box('检查失败：' + e.message, 'err'); }
            finally { checkBtn.disabled = false; checkBtn.textContent = t; }
        });

        dlBtn.addEventListener('click', async () => {
            dlBtn.disabled = true; progWrap.style.display = 'block'; progBar.style.width = '0%'; progMsg.textContent = '开始下载…';
            try {
                const r = await fetch('/api/update/download', { method: 'POST' });
                const d = await r.json();
                if (!d.ok) { progMsg.textContent = d.msg || '下载失败'; dlBtn.disabled = false; return; }
                const poll = setInterval(async () => {
                    try {
                        const pr = await fetch('/api/update/progress'); const p = await pr.json();
                        progBar.style.width = (p.pct || 0) + '%'; progMsg.textContent = p.msg || '';
                        if (p.state === 'ready') { clearInterval(poll); dlBtn.style.display = 'none'; applyBtn.style.display = 'inline-block'; }
                        else if (p.state === 'error') { clearInterval(poll); progMsg.textContent = '❌ ' + (p.msg || '下载失败'); dlBtn.disabled = false; }
                    } catch (e) {}
                }, 700);
            } catch (e) { progMsg.textContent = '下载失败：' + e.message; dlBtn.disabled = false; }
        });

        applyBtn.addEventListener('click', async () => {
            if (!confirm(managed ? '确认应用更新并重启服务？期间约 10 秒无法访问，你的数据不受影响。'
                                 : '当前为开发模式，只会演练不会真正落地。继续？')) return;
            applyBtn.disabled = true; const t = applyBtn.textContent; applyBtn.textContent = '正在应用…';
            try {
                const r = await fetch('/api/update/apply', { method: 'POST' });
                const d = await r.json();
                if (!d.ok) { box(d.msg || '应用失败', 'err'); applyBtn.disabled = false; applyBtn.textContent = t; return; }
                box('✅ ' + (d.msg || '正在重启升级…') + '<br><span class="text-muted">等服务重启后本页会自动刷新。</span>', 'ok');
                if (!managed) { applyBtn.disabled = false; applyBtn.textContent = t; return; }
                // 轮询首页直到服务重新起来，然后刷新
                setTimeout(function wait() {
                    fetch('/', { cache: 'no-store' }).then(r => { if (r.ok) location.reload(); else setTimeout(wait, 1500); })
                                                     .catch(() => setTimeout(wait, 1500));
                }, 4000);
            } catch (e) { box('应用失败：' + e.message, 'err'); applyBtn.disabled = false; applyBtn.textContent = t; }
        });

        loadStatus();
    })();
</script>
{% endblock %}