{% extends "base.html" %}
{% load static %}

{% block title %}系统设置 - AgomTradePro{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/admin-shell.css' %}">
{% endblock %}

{% block content %}
<div class="page-container admin-shell admin-shell--narrow">
    <div class="page-header admin-shell__hero">
        <div class="admin-shell__lead">
            <h1 class="admin-shell__title">系统设置</h1>
            <p class="text-muted admin-shell__subtitle">设置中心工作流：维护系统级参数、页面语义和默认运行约定。</p>
        </div>
        <div class="admin-shell__actions">
            <a href="{% url 'admin-console' %}" class="btn btn-secondary admin-shell__action-link">返回管理控制台</a>
            <a href="{% url 'settings-center' %}" class="btn btn-secondary admin-shell__action-link">返回设置中心</a>
        </div>
    </div>

    <div class="entry-banner admin-shell__banner">
        <strong>入口说明：</strong> 当前页属于“设置中心”的系统配置页；审批、Token、日志、文档等管理员操作请回“管理控制台”处理。不要把配置编辑和管理员值守混在一起。
    </div>

    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }}">{{ message }}</div>
        {% endfor %}
    {% endif %}

    <form method="post" class="settings-form admin-shell__surface">
        {% csrf_token %}

        <!-- 审批配置 -->
        <div class="settings-section">
            <h2>用户审批配置</h2>
            <div class="form-group">
                <label class="checkbox-label">
                    <input type="checkbox" name="require_user_approval" {% if system_settings.require_user_approval %}checked{% endif %}>
                    <span>需要管理员审批新用户</span>
                </label>
                <p class="help-text">关闭后新用户注册将自动批准，无需管理员审批</p>
            </div>
            <div class="form-group">
                <label class="checkbox-label">
                    <input type="checkbox" name="auto_approve_first_admin" {% if system_settings.auto_approve_first_admin %}checked{% endif %}>
                    <span>自动批准首个管理员用户</span>
                </label>
                <p class="help-text">系统无管理员时，首个注册的用户自动成为管理员并获得批准</p>
            </div>
            <div class="form-group">
                <label class="checkbox-label">
                    <input type="checkbox" name="default_mcp_enabled" {% if system_settings.default_mcp_enabled %}checked{% endif %}>
                    <span>新用户默认开启 MCP/SDK</span>
                </label>
                <p class="help-text">决定新注册或新批准用户默认是否能使用 MCP/SDK</p>
            </div>
            <div class="form-group">
                <label class="checkbox-label">
                    <input type="checkbox" name="allow_token_plaintext_view" {% if system_settings.allow_token_plaintext_view %}checked{% endif %}>
                    <span>允许查看 Token 明文</span>
                </label>
                <p class="help-text">关闭后，生成后不再显示完整 Token，用户和管理员都只能看到预览</p>
            </div>
        </div>

        <div class="settings-section">
            <h2>视觉约定</h2>
            <div class="form-group">
                <label for="market_color_convention">市场颜色约定</label>
                <select id="market_color_convention" name="market_color_convention" class="form-control">
                    {% for value, label in market_color_choices %}
                    <option value="{{ value }}" {% if system_settings.market_color_convention == value %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
                <p class="help-text">统一控制全站涨跌和资金流向的颜色语义，保存后立即生效。</p>
            </div>
            <div class="visual-preview-grid">
                <div class="visual-preview-card">
                    <span class="visual-preview-label">上涨 / 正收益</span>
                    <strong class="text-rise">+2.35%</strong>
                </div>
                <div class="visual-preview-card">
                    <span class="visual-preview-label">下跌 / 回撤</span>
                    <strong class="text-fall">-1.28%</strong>
                </div>
                <div class="visual-preview-card">
                    <span class="visual-preview-label">资金净流入</span>
                    <strong class="text-inflow">+3.6 亿</strong>
                </div>
                <div class="visual-preview-card">
                    <span class="visual-preview-label">资金净流出</span>
                    <strong class="text-outflow">-2.1 亿</strong>
                </div>
            </div>
            <p class="help-text">当前生效：{{ market_visuals.label }}</p>
        </div>

        <div class="settings-section">
            <h2>Alpha 默认股票池</h2>
            <div class="form-group">
                <label for="alpha_pool_mode">首页 Alpha 默认池子模式</label>
                <select id="alpha_pool_mode" name="alpha_pool_mode" class="form-control">
                    {% for value, label in alpha_pool_mode_choices %}
                    <option value="{{ value }}" {% if system_settings.alpha_pool_mode == value %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
                <p class="help-text">严格估值覆盖池最保守；市场可交易池按资产主数据放宽；价格覆盖池按本地价格库可用资产放宽。</p>
            </div>
        </div>

        <!-- 用户协议配置 -->
        <div class="settings-section">
            <h2>用户协议内容</h2>
            <div class="form-group">
                <label for="user_agreement_content">用户服务协议（支持 HTML）:</label>
                <textarea id="user_agreement_content" name="user_agreement_content" class="form-control code-editor" rows="15">{{ system_settings.user_agreement_content }}</textarea>
                <p class="help-text">用户注册时需要同意的协议内容，支持 HTML 格式</p>
            </div>
        </div>

        <!-- 风险提示配置 -->
        <div class="settings-section">
            <h2>风险提示内容</h2>
            <div class="form-group">
                <label for="risk_warning_content">投资风险提示书（支持 HTML）:</label>
                <textarea id="risk_warning_content" name="risk_warning_content" class="form-control code-editor" rows="15">{{ system_settings.risk_warning_content }}</textarea>
                <p class="help-text">用户注册时需要确认的风险提示内容，支持 HTML 格式</p>
            </div>
        </div>

        <!-- 其他配置 -->
        <div class="settings-section">
            <h2>其他配置</h2>
            <div class="form-group">
                <label for="notes">备注:</label>
                <textarea id="notes" name="notes" class="form-control" rows="3">{{ system_settings.notes }}</textarea>
                <p class="help-text">配置变更记录或说明</p>
            </div>
        </div>

        <div class="settings-section">
            <h2>运行时市场配置</h2>
            <div class="form-group">
                <label for="benchmark_code_map">基准代码映射（JSON）:</label>
                <textarea id="benchmark_code_map" name="benchmark_code_map" class="form-control code-editor" rows="10">{{ benchmark_code_map_json }}</textarea>
                <p class="help-text">示例键：equity_default_index、equity_market_benchmark、factor_beta_benchmark</p>
            </div>
            <div class="form-group">
                <label for="asset_proxy_code_map">资产代理代码映射（JSON）:</label>
                <textarea id="asset_proxy_code_map" name="asset_proxy_code_map" class="form-control code-editor" rows="12">{{ asset_proxy_code_map_json }}</textarea>
                <p class="help-text">用于资产大类到价格/交易代理标的的数据库配置映射</p>
            </div>
            <div class="form-group">
                <label>宏观指标治理入口:</label>
                <div class="form-control-static">
                    宏观指标目录、量纲与发布时间治理已统一迁移到 Data Center。
                    请通过 <a href="/data-center/providers/">数据中台</a> 与 `/api/data-center/indicators/*` 管理，不再在系统设置页维护 JSON 目录。
                </div>
            </div>
        </div>

        <!-- 提交按钮 -->
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">保存配置</button>
            <a href="{% url 'settings-center' %}" class="btn btn-secondary">取消</a>
        </div>
    </form>

    <!-- 预览区域 -->
    <div class="preview-section admin-shell__surface">
        <h2>协议预览</h2>
        <div class="preview-tabs">
            <button class="tab-button active" onclick="showTab('agreement')">用户协议</button>
            <button class="tab-button" onclick="showTab('risk')">风险提示</button>
        </div>
        <div id="agreementPreview" class="preview-content active">
            {{ system_settings.user_agreement_content|safe }}
        </div>
        <div id="riskPreview" class="preview-content">
            {{ system_settings.risk_warning_content|safe }}
        </div>
    </div>
</div>

<style>
.entry-banner {
    margin-bottom: 20px;
}

.text-muted {
    color: var(--color-text-secondary);
}

.alert {
    padding: 12px 16px;
    margin-bottom: 24px;
    border-radius: var(--radius-sm);
    font-size: 14px;
}

.alert-success {
    background: #D5FBDD;
    color: #14866D;
    border: 1px solid #9FE5B8;
}

.alert-error {
    background: #FEE7E7;
    color: #D33;
    border: 1px solid #F8B4B4;
}

.alert-warning {
    background: #FFF3CD;
    color: #856404;
    border: 1px solid #FFECB5;
}

.alert-info {
    background: #D5EDFB;
    color: #146698;
    border: 1px solid #9BC8F8;
}

.settings-form {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.settings-section {
    padding: 24px;
    border-bottom: 1px solid var(--color-border);
}

.settings-section:last-child {
    border-bottom: none;
}

.settings-section h2 {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.form-group {
    margin-bottom: 20px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 14px;
    color: var(--color-text-primary);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.help-text {
    margin: 8px 0 0 0;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.1);
}

.visual-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.visual-preview-card {
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.visual-preview-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.code-editor {
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    line-height: 1.5;
}

textarea.form-control {
    resize: vertical;
}

.form-actions {
    padding: 24px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    background: var(--color-surface);
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
}

.btn-primary {
    background: var(--color-primary);
    color: white;
}

.btn-primary:hover {
    background: var(--color-primary-hover);
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background: #5a6268;
}

.preview-section {
    margin-top: 32px;
    background: var(--color-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.preview-section h2 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    padding: 16px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.preview-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
}

.tab-button {
    padding: 12px 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.tab-button:hover {
    color: var(--color-primary);
}

.tab-button.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.preview-content {
    display: none;
    padding: 20px;
    max-height: 400px;
    overflow-y: auto;
}

.preview-content.active {
    display: block;
}

.preview-content h2 {
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.preview-content h3 {
    font-size: 16px;
    margin-top: 16px;
    margin-bottom: 8px;
}

.preview-content p {
    line-height: 1.6;
    margin-bottom: 10px;
}

.preview-content ul {
    margin-left: 20px;
    margin-bottom: 10px;
}

.preview-content li {
    margin-bottom: 6px;
    line-height: 1.6;
}
</style>

<script>
function showTab(tab) {
    // 切换标签按钮状态
    document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
    event.target.classList.add('active');

    // 切换预览内容
    document.querySelectorAll('.preview-content').forEach(content => content.classList.remove('active'));
    if (tab === 'agreement') {
        document.getElementById('agreementPreview').classList.add('active');
    } else {
        document.getElementById('riskPreview').classList.add('active');
    }
}

// 实时预览
document.getElementById('user_agreement_content').addEventListener('input', function(e) {
    document.getElementById('agreementPreview').innerHTML = e.target.value;
});

document.getElementById('risk_warning_content').addEventListener('input', function(e) {
    document.getElementById('riskPreview').innerHTML = e.target.value;
});
</script>
{% endblock %}