{% extends "base.html" %}

{% block title %}集中风控中心 - AgomTradePro{% endblock %}

{% block content %}
<style>
    .risk-center-shell {
        max-width: 1360px;
        margin: 0 auto;
        padding: 24px;
    }
    .risk-center-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
        flex-wrap: wrap;
        margin-bottom: 18px;
    }
    .risk-center-header h1 {
        margin: 0 0 8px;
        font-size: 28px;
    }
    .risk-center-muted {
        color: #64748b;
    }
    .risk-center-kpis,
    .risk-center-grid {
        display: grid;
        gap: 14px;
    }
    .risk-center-kpis {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        margin-bottom: 18px;
    }
    .risk-center-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }
    .risk-center-panel {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 16px;
    }
    .risk-center-panel h2 {
        margin: 0 0 12px;
        font-size: 18px;
    }
    .risk-center-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 12px;
    }
    .risk-center-form label,
    .risk-center-full {
        display: flex;
        flex-direction: column;
        gap: 5px;
        font-size: 13px;
        color: #334155;
    }
    .risk-center-full {
        grid-column: 1 / -1;
    }
    .risk-center-form input,
    .risk-center-form select,
    .risk-center-form textarea {
        width: 100%;
        min-height: 36px;
        border: 1px solid #cbd5e1;
        border-radius: 6px;
        padding: 8px 10px;
        color: #0f172a;
        background: #fff;
    }
    .risk-center-form textarea {
        min-height: 72px;
        resize: vertical;
    }
    .risk-center-actions {
        grid-column: 1 / -1;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        align-items: center;
    }
    .risk-center-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }
    .risk-center-table th,
    .risk-center-table td {
        padding: 8px;
        border-bottom: 1px solid #e2e8f0;
        text-align: left;
        vertical-align: top;
    }
    .risk-center-output {
        margin-top: 12px;
        background: #f8fafc;
        color: #0f172a;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 12px;
        min-height: 82px;
        white-space: pre-wrap;
        overflow: auto;
        font-size: 12px;
    }
    .risk-center-output pre {
        margin: 8px 0 0;
        background: #0f172a;
        color: #e2e8f0;
        border-radius: 6px;
        padding: 10px;
        overflow: auto;
    }
    .risk-center-badge {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        padding: 3px 8px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
    }
    .risk-center-badge.is-pass {
        background: #dcfce7;
        color: #166534;
    }
    .risk-center-badge.is-stop {
        background: #fee2e2;
        color: #991b1b;
    }
    .risk-center-summary-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 8px;
        margin-top: 10px;
    }
    .risk-center-summary-list div {
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        padding: 8px;
        background: #fff;
    }
    .risk-center-status {
        min-height: 20px;
        color: #475569;
        font-size: 13px;
    }
    .risk-center-tabs {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin: 0 0 16px;
        border-bottom: 1px solid #e2e8f0;
        padding-bottom: 10px;
    }
    .risk-center-tab {
        border: 1px solid #cbd5e1;
        background: #fff;
        color: #334155;
        min-height: 34px;
        border-radius: 6px;
        padding: 7px 12px;
        font-weight: 700;
        cursor: pointer;
    }
    .risk-center-tab.is-active {
        border-color: #2563eb;
        background: #eff6ff;
        color: #1d4ed8;
    }
    .risk-center-panel.is-hidden {
        display: none;
    }
    .risk-center-history-button {
        border: 1px solid #cbd5e1;
        background: #fff;
        border-radius: 6px;
        padding: 4px 8px;
        cursor: pointer;
        color: #334155;
        font-size: 12px;
    }
    .risk-center-history-button:hover {
        border-color: #2563eb;
        color: #1d4ed8;
    }
    .risk-center-detail-box {
        margin-top: 12px;
        border: 1px solid #dbeafe;
        background: #eff6ff;
        border-radius: 8px;
        padding: 12px;
    }
    @media (max-width: 900px) {
        .risk-center-grid,
        .risk-center-form {
            grid-template-columns: 1fr;
        }
    }
</style>

<div role="status" style="margin: 0 auto 16px; max-width: 1360px; padding: 12px 16px; border: 1px solid #bfdbfe; background: #eff6ff; color: #1e3a8a;">
    集中风控任务已迁入 TUI。
    <a href="/tui/?screen=macro-regime.strategy&amp;action=risk-center.effective-policy" style="color:#1d4ed8; font-weight:700;">打开账户有效策略任务</a>。
    当前 Classic 管理员页面仅在兼容期内保留。
</div>
<div class="risk-center-shell" data-risk-center-api="{{ api_base_url }}">
    <div class="risk-center-header">
        <div>
            <h1>{{ page_title }}</h1>
            <p class="risk-center-muted" style="margin:0;">{{ page_subtitle }}</p>
        </div>
        <div style="display:flex; gap:10px; flex-wrap:wrap;">
            <a href="{{ api_base_url }}" class="btn btn-secondary" style="text-decoration:none;">API</a>
            <a href="/tui/#/risk-center.overview" class="btn btn-secondary" style="text-decoration:none;">TUI</a>
        </div>
    </div>

    <div class="risk-center-kpis">
        <section class="risk-center-panel">
            <div class="risk-center-muted" style="font-size:12px;">全局底线</div>
            <div style="font-size:22px; font-weight:700; margin-top:6px;">{% if floor.is_active %}启用{% else %}停用{% endif %}</div>
            <div class="risk-center-muted" style="font-size:13px; margin-top:8px;">总仓位上限 {{ floor.max_total_position_pct|floatformat:2 }}</div>
        </section>
        <section class="risk-center-panel">
            <div class="risk-center-muted" style="font-size:12px;">风险模板</div>
            <div style="font-size:22px; font-weight:700; margin-top:6px;">{{ templates|length }}</div>
            <div class="risk-center-muted" style="font-size:13px; margin-top:8px;">conservative / moderate / aggressive / custom</div>
        </section>
        <section class="risk-center-panel">
            <div class="risk-center-muted" style="font-size:12px;">账户策略</div>
            <div style="font-size:22px; font-weight:700; margin-top:6px;">{{ policies|length }}</div>
            <div class="risk-center-muted" style="font-size:13px; margin-top:8px;">按 canonical account_id 独立配置</div>
        </section>
        <section class="risk-center-panel">
            <div class="risk-center-muted" style="font-size:12px;">例外/审计</div>
            <div style="font-size:22px; font-weight:700; margin-top:6px;">{{ exceptions|length }} / {{ audits|length }}</div>
            <div class="risk-center-muted" style="font-size:13px; margin-top:8px;">例外必须带原因和过期时间</div>
        </section>
    </div>

    <nav class="risk-center-tabs" aria-label="风控中心视图">
        <button type="button" class="risk-center-tab is-active" data-risk-tab="all">全部</button>
        <button type="button" class="risk-center-tab" data-risk-tab="baseline">底线/模板</button>
        <button type="button" class="risk-center-tab" data-risk-tab="policy">账户策略</button>
        <button type="button" class="risk-center-tab" data-risk-tab="guard">交易检查</button>
        <button type="button" class="risk-center-tab" data-risk-tab="reports">投后/日报</button>
        <button type="button" class="risk-center-tab" data-risk-tab="audit">例外/审计</button>
    </nav>

    <div class="risk-center-grid">
        <section class="risk-center-panel" data-risk-section="baseline">
            <h2>全局底线</h2>
            <form class="risk-center-form" data-risk-form="floor">
                <label>总仓位上限
                    <input name="max_total_position_pct" type="number" min="0" max="1" step="0.001" value="{{ floor.max_total_position_pct }}">
                </label>
                <label>单标的上限
                    <input name="max_single_position_pct" type="number" min="0" max="1" step="0.001" value="{{ floor.max_single_position_pct }}">
                </label>
                <label>最大日亏损
                    <input name="max_daily_loss_pct" type="number" min="0" max="1" step="0.001" value="{{ floor.max_daily_loss_pct }}">
                </label>
                <label>最大回撤
                    <input name="max_drawdown_pct" type="number" min="0" max="1" step="0.001" value="{{ floor.max_drawdown_pct }}">
                </label>
                <label>最大止损比例
                    <input name="max_stop_loss_pct" type="number" min="0" max="1" step="0.001" value="{{ floor.max_stop_loss_pct }}">
                </label>
                <label>最低现金比例
                    <input name="min_cash_pct" type="number" min="0" max="1" step="0.001" value="{{ floor.min_cash_pct }}">
                </label>
                <label>强制止损
                    <select name="force_stop_loss">
                        <option value="true" {% if floor.force_stop_loss %}selected{% endif %}>true</option>
                        <option value="false" {% if not floor.force_stop_loss %}selected{% endif %}>false</option>
                    </select>
                </label>
                <label>启用
                    <select name="is_active">
                        <option value="true" {% if floor.is_active %}selected{% endif %}>true</option>
                        <option value="false" {% if not floor.is_active %}selected{% endif %}>false</option>
                    </select>
                </label>
                <label class="risk-center-full">硬排除列表
                    <input name="hard_exclusions" value="{{ floor.hard_exclusions|join:',' }}" placeholder="000001.SZ,000002.SZ">
                </label>
                <label class="risk-center-full">变更理由
                    <input name="reason" value="risk center console update">
                </label>
                <div class="risk-center-actions">
                    <button type="submit" class="btn btn-primary">保存全局底线</button>
                    <span class="risk-center-status" data-risk-status="floor"></span>
                </div>
            </form>
        </section>

        <section class="risk-center-panel" data-risk-section="baseline">
            <h2>风险模板</h2>
            <table class="risk-center-table">
                <thead>
                    <tr><th>模板</th><th>偏好</th><th>总仓位</th><th>单标的</th><th>现金</th></tr>
                </thead>
                <tbody>
                    {% for template in templates %}
                    <tr>
                        <td>{{ template.name }}</td>
                        <td>{{ template.risk_profile }}</td>
                        <td>{{ template.max_total_position_pct|floatformat:2 }}</td>
                        <td>{{ template.max_single_position_pct|floatformat:2 }}</td>
                        <td>{{ template.min_cash_pct|floatformat:2 }}</td>
                    </tr>
                    {% empty %}
                    <tr><td colspan="5" class="risk-center-muted">暂无风险模板</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </section>

        <section class="risk-center-panel" data-risk-section="policy">
            <h2>账户策略</h2>
            <form class="risk-center-form" data-risk-form="policy">
                <label>账户 ID
                    <input name="account_id" type="number" min="1" step="1" required>
                </label>
                <label>风险偏好
                    <select name="risk_profile">
                        <option value="">继承账户/默认</option>
                        <option value="conservative">conservative</option>
                        <option value="moderate">moderate</option>
                        <option value="aggressive">aggressive</option>
                        <option value="custom">custom</option>
                    </select>
                </label>
                <label>模板 ID
                    <input name="template_id" type="number" min="1" step="1" placeholder="可选">
                </label>
                <label>总仓位上限
                    <input name="max_total_position_pct" type="number" min="0" max="1" step="0.001">
                </label>
                <label>单标的上限
                    <input name="max_single_position_pct" type="number" min="0" max="1" step="0.001">
                </label>
                <label>最低现金比例
                    <input name="min_cash_pct" type="number" min="0" max="1" step="0.001">
                </label>
                <label class="risk-center-full">变更理由
                    <input name="reason" value="account policy console update">
                </label>
                <div class="risk-center-actions">
                    <button type="submit" class="btn btn-primary">保存账户策略</button>
                    <button type="button" class="btn btn-secondary" data-risk-preview-policy>预览有效策略</button>
                    <span class="risk-center-status" data-risk-status="policy"></span>
                </div>
            </form>
            <div class="risk-center-output" data-risk-output="policy">等待账户策略操作...</div>
        </section>

        <section class="risk-center-panel" data-risk-section="audit">
            <h2>例外审批</h2>
            <form class="risk-center-form" data-risk-form="exception">
                <label>账户 ID
                    <input name="account_id" type="number" min="1" step="1" placeholder="空值表示全局">
                </label>
                <label>字段
                    <select name="field_name" required>
                        <option value="max_total_position_pct">max_total_position_pct</option>
                        <option value="max_single_position_pct">max_single_position_pct</option>
                        <option value="min_cash_pct">min_cash_pct</option>
                        <option value="max_stop_loss_pct">max_stop_loss_pct</option>
                        <option value="hard_exclusions">hard_exclusions</option>
                    </select>
                </label>
                <label>允许值
                    <input name="allowed_value" required placeholder="0.9 或 JSON">
                </label>
                <label>过期时间
                    <input name="expires_at" type="datetime-local" required>
                </label>
                <label class="risk-center-full">理由
                    <textarea name="reason" required placeholder="说明临时突破底线的业务原因"></textarea>
                </label>
                <div class="risk-center-actions">
                    <button type="submit" class="btn btn-primary">创建例外</button>
                    <span class="risk-center-status" data-risk-status="exception"></span>
                </div>
            </form>
            <table class="risk-center-table" style="margin-top:12px;">
                <thead>
                    <tr><th>账户</th><th>字段</th><th>过期</th><th>理由</th></tr>
                </thead>
                <tbody>
                    {% for exception in exceptions|slice:":6" %}
                    <tr>
                        <td>{{ exception.account_id|default:"全局" }}</td>
                        <td>{{ exception.field_name }}</td>
                        <td>{{ exception.expires_at|date:"Y-m-d H:i" }}</td>
                        <td>{{ exception.reason }}</td>
                    </tr>
                    {% empty %}
                    <tr><td colspan="4" class="risk-center-muted">暂无例外</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </section>

        <section class="risk-center-panel" data-risk-section="guard">
            <h2>交易前风控预览</h2>
            <form class="risk-center-form" data-risk-form="pretrade">
                <label>账户 ID
                    <input name="account_id" type="number" min="1" step="1" required>
                </label>
                <label>证券代码
                    <input name="symbol" placeholder="000001.SZ" required>
                </label>
                <label>方向
                    <select name="side">
                        <option value="buy">buy</option>
                        <option value="sell">sell</option>
                    </select>
                </label>
                <label>数量
                    <input name="quantity" type="number" min="0" step="0.0001" required>
                </label>
                <label>价格
                    <input name="price" type="number" min="0" step="0.0001" required>
                </label>
                <label>账户权益
                    <input name="account_equity" type="number" min="0" step="0.01" required>
                </label>
                <label>当前总持仓
                    <input name="total_position_value" type="number" min="0" step="0.01" required>
                </label>
                <label>现金余额
                    <input name="cash_balance" type="number" min="0" step="0.01">
                </label>
                <label class="risk-center-full">当前单标的市值
                    <input name="current_symbol_position_value" type="number" min="0" step="0.01" value="0">
                </label>
                <div class="risk-center-actions">
                    <button type="submit" class="btn btn-primary">检查拟交易</button>
                    <span class="risk-center-status" data-risk-status="pretrade"></span>
                </div>
            </form>
            <div class="risk-center-output" data-risk-output="pretrade">输入一笔拟交易，查看是否会被集中风控拒绝。</div>
        </section>

        <section class="risk-center-panel" data-risk-section="reports">
            <h2>投后风控巡检</h2>
            <form class="risk-center-form" data-risk-form="postinvestment">
                <label>账户 ID
                    <input name="account_id" type="number" min="1" step="1" required>
                </label>
                <label>报告日期
                    <input name="report_date" type="date">
                </label>
                <label>账户权益
                    <input name="account_equity" type="number" min="0" step="0.01" required>
                </label>
                <label>现金余额
                    <input name="cash_balance" type="number" min="0" step="0.01">
                </label>
                <label>持仓总市值
                    <input name="total_position_value" type="number" min="0" step="0.01">
                </label>
                <label>当日盈亏比例
                    <input name="daily_pnl_pct" type="number" step="0.0001" placeholder="-0.03">
                </label>
                <label>当前回撤比例
                    <input name="drawdown_pct" type="number" min="0" max="1" step="0.0001" placeholder="0.08">
                </label>
                <label class="risk-center-full">持仓快照 JSON
                    <textarea name="positions" placeholder='[{"symbol":"000001.SZ","market_value":30000,"unrealized_pnl_pct":-0.08}]'></textarea>
                </label>
                <div class="risk-center-actions">
                    <button type="submit" class="btn btn-primary">巡检当前持仓</button>
                    <button type="button" class="btn btn-secondary" data-risk-daily-report>生成风控/持仓日报</button>
                    <span class="risk-center-status" data-risk-status="postinvestment"></span>
                    <span class="risk-center-status" data-risk-status="dailyreport"></span>
                </div>
            </form>
            <div class="risk-center-output" data-risk-output="postinvestment">输入当前账户快照，查看投后是否触碰集中风控。</div>
            <div class="risk-center-output" data-risk-output="dailyreport">日报会包含风控日报和持仓日报两部分。</div>
            <form class="risk-center-form" data-risk-form="dailyhistory" style="margin-top:14px;">
                <label>账户 ID
                    <input name="account_id" type="number" min="1" step="1">
                </label>
                <label>报告日期
                    <input name="report_date" type="date">
                </label>
                <label>开始日期
                    <input name="start_date" type="date">
                </label>
                <label>结束日期
                    <input name="end_date" type="date">
                </label>
                <label>返回数量
                    <input name="limit" type="number" min="1" max="365" step="1" value="30">
                </label>
                <div class="risk-center-actions">
                    <button type="submit" class="btn btn-secondary">查询历史日报</button>
                    <span class="risk-center-status" data-risk-status="dailyhistory"></span>
                </div>
            </form>
            <div class="risk-center-output" data-risk-output="dailyhistory">可按账户和日期查询已归档的风控日报、持仓日报。</div>
        </section>

        <section class="risk-center-panel risk-center-full" data-risk-section="audit">
            <h2>账户策略列表 / 最近审计</h2>
            <div class="risk-center-grid">
                <table class="risk-center-table">
                    <thead>
                        <tr><th>账户</th><th>模板</th><th>总仓位</th><th>启用</th></tr>
                    </thead>
                    <tbody>
                        {% for policy in policies %}
                        <tr>
                            <td>{{ policy.account_id }}</td>
                            <td>{{ policy.template.key|default:"-" }}</td>
                            <td>{{ policy.max_total_position_pct|default:"-" }}</td>
                            <td>{{ policy.is_active }}</td>
                        </tr>
                        {% empty %}
                        <tr><td colspan="4" class="risk-center-muted">暂无账户策略</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
                <table class="risk-center-table">
                    <thead>
                        <tr><th>对象</th><th>动作</th><th>用户</th><th>时间</th></tr>
                    </thead>
                    <tbody>
                        {% for audit in audits|slice:":8" %}
                        <tr>
                            <td>{{ audit.target_type }} #{{ audit.target_id }}</td>
                            <td>{{ audit.action }}</td>
                            <td>{{ audit.actor_username }}</td>
                            <td>{{ audit.created_at|date:"Y-m-d H:i" }}</td>
                        </tr>
                        {% empty %}
                        <tr><td colspan="4" class="risk-center-muted">暂无审计记录</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>
    </div>
</div>

<script>
(() => {
    const shell = document.querySelector("[data-risk-center-api]");
    if (!shell) return;
    const apiBase = shell.dataset.riskCenterApi || "/api/risk-center/";
    const csrf = document.cookie
        .split("; ")
        .find((row) => row.startsWith("csrftoken="))
        ?.split("=")[1] || "";
    const status = (key, message) => {
        const node = document.querySelector(`[data-risk-status="${key}"]`);
        if (node) node.textContent = message;
    };
    const escapeHtml = (value) => String(value ?? "")
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#39;");
    const output = (key, payload) => {
        const node = document.querySelector(`[data-risk-output="${key}"]`);
        if (node) node.innerHTML = `<pre>${escapeHtml(JSON.stringify(payload, null, 2))}</pre>`;
    };
    const pct = (value) => {
        if (value === null || value === undefined || Number.isNaN(Number(value))) return "-";
        return `${(Number(value) * 100).toFixed(2)}%`;
    };
    const money = (value) => {
        if (value === null || value === undefined || Number.isNaN(Number(value))) return "-";
        return Number(value).toLocaleString("zh-CN", { maximumFractionDigits: 2 });
    };
    let latestDailyHistoryRows = [];
    const renderDailyReportDetail = (item) => {
        const risk = item?.risk_daily_report || {};
        const position = item?.position_daily_report || {};
        const check = item?.post_investment_check || {};
        const actions = (risk.action_items || []).map((value) => `<li>${escapeHtml(value)}</li>`).join("");
        const alerts = (check.position_alerts || [])
            .slice(0, 8)
            .map((value) => `<li><strong>${escapeHtml(value.symbol || "-")}</strong> ${escapeHtml(value.message || "")}</li>`)
            .join("");
        const topPositions = (position.top_positions || [])
            .slice(0, 8)
            .map((value) => `<li><strong>${escapeHtml(value.symbol || "-")}</strong> ${pct(value.weight)} / ${money(value.market_value)}</li>`)
            .join("");
        return `
            <div class="risk-center-detail-box">
                <span class="risk-center-badge ${risk.status === "breach" ? "is-stop" : "is-pass"}">${escapeHtml(risk.headline || risk.status || "-")}</span>
                <div class="risk-center-summary-list">
                    <div><strong>报告日期</strong><br>${escapeHtml(item?.report_date || "-")}</div>
                    <div><strong>账户</strong><br>${escapeHtml(item?.account_id || "-")}</div>
                    <div><strong>违规/提示</strong><br>${money(risk.breach_count)} / ${money(risk.warning_count)}</div>
                    <div><strong>持仓/仓位</strong><br>${money(position.position_count)} / ${pct(position.total_position_pct)}</div>
                </div>
                ${actions ? `<p style="margin:10px 0 4px;"><strong>处理事项</strong></p><ul>${actions}</ul>` : ""}
                ${alerts ? `<p style="margin:10px 0 4px;"><strong>持仓警报</strong></p><ul>${alerts}</ul>` : ""}
                ${topPositions ? `<p style="margin:10px 0 4px;"><strong>持仓日报 Top</strong></p><ul>${topPositions}</ul>` : ""}
            </div>
        `;
    };
    const renderEffectivePolicy = (payload) => {
        const data = payload.data || payload;
        const params = data.parameters || {};
        const sources = data.sources || {};
        const floorApplied = data.floor_applied || [];
        const exceptions = data.exceptions_applied || [];
        const node = document.querySelector('[data-risk-output="policy"]');
        if (!node) return;
        const sourceRows = Object.entries(sources)
            .slice(0, 8)
            .map(([key, value]) => `<div><strong>${escapeHtml(key)}</strong><br>${escapeHtml(value)}</div>`)
            .join("");
        node.innerHTML = `
            <span class="risk-center-badge is-pass">账户 ${escapeHtml(data.account_id)} 已解析</span>
            <div class="risk-center-summary-list">
                <div><strong>总仓位</strong><br>${pct(params.max_total_position_pct)}</div>
                <div><strong>单标的</strong><br>${pct(params.max_single_position_pct)}</div>
                <div><strong>现金底线</strong><br>${pct(params.min_cash_pct)}</div>
                <div><strong>止损上限</strong><br>${pct(params.max_stop_loss_pct)}</div>
            </div>
            <p style="margin:10px 0 0;">底线压制 ${floorApplied.length} 项，例外生效 ${exceptions.length} 项。</p>
            <div class="risk-center-summary-list">${sourceRows || "<div>暂无来源明细</div>"}</div>
            <pre>${escapeHtml(JSON.stringify(data, null, 2))}</pre>
        `;
    };
    const renderPreTrade = (payload) => {
        const data = payload.data || payload;
        const metrics = data.metrics || {};
        const node = document.querySelector('[data-risk-output="pretrade"]');
        if (!node) return;
        const violations = (data.violations || []).map((item) => `<li>${escapeHtml(item)}</li>`).join("");
        const warnings = (data.warnings || []).map((item) => `<li>${escapeHtml(item)}</li>`).join("");
        node.innerHTML = `
            <span class="risk-center-badge ${data.passed ? "is-pass" : "is-stop"}">${data.passed ? "允许提交" : "风控拒绝"}</span>
            <div class="risk-center-summary-list">
                <div><strong>订单金额</strong><br>${money(metrics.order_value)}</div>
                <div><strong>预计总仓位</strong><br>${pct(metrics.projected_total_position_pct)}</div>
                <div><strong>预计单标的</strong><br>${pct(metrics.projected_single_position_pct)}</div>
                <div><strong>预计现金</strong><br>${pct(metrics.projected_cash_pct)}</div>
            </div>
            ${violations ? `<p style="margin:10px 0 4px;"><strong>违规项</strong></p><ul>${violations}</ul>` : ""}
            ${warnings ? `<p style="margin:10px 0 4px;"><strong>提示</strong></p><ul>${warnings}</ul>` : ""}
            <pre>${escapeHtml(JSON.stringify(data, null, 2))}</pre>
        `;
    };
    const renderPostInvestment = (payload) => {
        const data = payload.data || payload;
        const metrics = data.metrics || {};
        const node = document.querySelector('[data-risk-output="postinvestment"]');
        if (!node) return;
        const violations = (data.violations || []).map((item) => `<li>${escapeHtml(item)}</li>`).join("");
        const warnings = (data.warnings || []).map((item) => `<li>${escapeHtml(item)}</li>`).join("");
        const alerts = (data.position_alerts || [])
            .slice(0, 10)
            .map((item) => `<li><strong>${escapeHtml(item.symbol || "-")}</strong> ${escapeHtml(item.type || "")}: ${escapeHtml(item.message || "")}</li>`)
            .join("");
        const badgeClass = data.status === "breach" ? "is-stop" : "is-pass";
        const label = data.status === "breach" ? "已触碰风控" : data.status === "watch" ? "需要观察" : "健康";
        node.innerHTML = `
            <span class="risk-center-badge ${badgeClass}">${label}</span>
            <div class="risk-center-summary-list">
                <div><strong>账户权益</strong><br>${money(metrics.account_equity)}</div>
                <div><strong>总仓位</strong><br>${pct(metrics.total_position_pct)}</div>
                <div><strong>现金比例</strong><br>${pct(metrics.cash_pct)}</div>
                <div><strong>持仓数量</strong><br>${money(metrics.position_count)}</div>
            </div>
            ${violations ? `<p style="margin:10px 0 4px;"><strong>违规项</strong></p><ul>${violations}</ul>` : ""}
            ${warnings ? `<p style="margin:10px 0 4px;"><strong>提示</strong></p><ul>${warnings}</ul>` : ""}
            ${alerts ? `<p style="margin:10px 0 4px;"><strong>持仓警报</strong></p><ul>${alerts}</ul>` : ""}
            <pre>${escapeHtml(JSON.stringify(data, null, 2))}</pre>
        `;
    };
    const renderDailyReport = (payload) => {
        const data = payload.data || payload;
        const risk = data.risk_daily_report || {};
        const position = data.position_daily_report || {};
        const node = document.querySelector('[data-risk-output="dailyreport"]');
        if (!node) return;
        const violations = (risk.violations || []).map((item) => `<li>${escapeHtml(item)}</li>`).join("");
        const actions = (risk.action_items || []).map((item) => `<li>${escapeHtml(item)}</li>`).join("");
        const positions = (position.top_positions || [])
            .slice(0, 8)
            .map((item) => `<li><strong>${escapeHtml(item.symbol || "-")}</strong> ${pct(item.weight)} / ${money(item.market_value)}</li>`)
            .join("");
        const badgeClass = risk.status === "breach" ? "is-stop" : "is-pass";
        node.innerHTML = `
            <span class="risk-center-badge ${badgeClass}">风控日报：${escapeHtml(risk.headline || risk.status || "-")}</span>
            <div class="risk-center-summary-list">
                <div><strong>报告日期</strong><br>${escapeHtml(data.report_date || "-")}</div>
                <div><strong>违规数</strong><br>${money(risk.breach_count)}</div>
                <div><strong>持仓数</strong><br>${money(position.position_count)}</div>
                <div><strong>总仓位</strong><br>${pct(position.total_position_pct)}</div>
            </div>
            ${violations ? `<p style="margin:10px 0 4px;"><strong>风控违规</strong></p><ul>${violations}</ul>` : ""}
            ${actions ? `<p style="margin:10px 0 4px;"><strong>处理事项</strong></p><ul>${actions}</ul>` : ""}
            ${positions ? `<p style="margin:10px 0 4px;"><strong>持仓日报 Top</strong></p><ul>${positions}</ul>` : ""}
            <pre>${escapeHtml(JSON.stringify(data, null, 2))}</pre>
        `;
    };
    const renderDailyReportHistory = (payload) => {
        const data = payload.data || payload;
        const rows = Array.isArray(data) ? data : [data];
        latestDailyHistoryRows = rows;
        const node = document.querySelector('[data-risk-output="dailyhistory"]');
        if (!node) return;
        const items = rows
            .map((item, index) => {
                const risk = item.risk_daily_report || {};
                const position = item.position_daily_report || {};
                const statusClass = (risk.status || item.status) === "breach" ? "is-stop" : "is-pass";
                return `
                    <tr>
                        <td>${escapeHtml(item.report_date || "-")}</td>
                        <td>${escapeHtml(item.account_id || "-")}</td>
                        <td><span class="risk-center-badge ${statusClass}">${escapeHtml(risk.status || item.status || "-")}</span></td>
                        <td>${money(risk.breach_count)}</td>
                        <td>${money(position.position_count)}</td>
                        <td>${pct(position.total_position_pct)}</td>
                        <td><button type="button" class="risk-center-history-button" data-risk-history-index="${index}">详情</button></td>
                    </tr>
                `;
            })
            .join("");
        node.innerHTML = `
            <table class="risk-center-table">
                <thead><tr><th>日期</th><th>账户</th><th>状态</th><th>违规</th><th>持仓</th><th>总仓位</th><th></th></tr></thead>
                <tbody>${items || '<tr><td colspan="7" class="risk-center-muted">暂无日报记录</td></tr>'}</tbody>
            </table>
            <div data-risk-history-detail>${rows[0] ? renderDailyReportDetail(rows[0]) : ""}</div>
            <pre>${escapeHtml(JSON.stringify(data, null, 2))}</pre>
        `;
    };
    const parseValue = (value) => {
        const trimmed = String(value || "").trim();
        if (trimmed === "") return null;
        if (trimmed === "true") return true;
        if (trimmed === "false") return false;
        if (/^-?\d+(\.\d+)?$/.test(trimmed)) return Number(trimmed);
        try {
            return JSON.parse(trimmed);
        } catch {
            return trimmed;
        }
    };
    const formPayload = (form) => {
        const payload = {};
        new FormData(form).forEach((value, key) => {
            if (key === "hard_exclusions") {
                payload[key] = String(value || "")
                    .split(",")
                    .map((item) => item.trim())
                    .filter(Boolean);
                return;
            }
            const parsed = parseValue(value);
            if (parsed !== null) payload[key] = parsed;
        });
        return payload;
    };
    const request = async (endpoint, options = {}) => {
        const response = await fetch(`${apiBase}${endpoint}`, {
            credentials: "same-origin",
            headers: {
                "Content-Type": "application/json",
                "X-CSRFToken": csrf,
                ...(options.headers || {}),
            },
            ...options,
        });
        const payload = await response.json();
        if (!response.ok) throw new Error(payload.detail || payload.error || response.statusText);
        return payload;
    };
    document.querySelectorAll("[data-risk-tab]").forEach((button) => {
        button.addEventListener("click", () => {
            const target = button.dataset.riskTab || "all";
            document.querySelectorAll("[data-risk-tab]").forEach((item) => {
                item.classList.toggle("is-active", item === button);
            });
            document.querySelectorAll("[data-risk-section]").forEach((section) => {
                const sectionKey = section.dataset.riskSection;
                section.classList.toggle("is-hidden", target !== "all" && sectionKey !== target);
            });
        });
    });
    document.querySelector('[data-risk-output="dailyhistory"]')?.addEventListener("click", (event) => {
        const target = event.target;
        const button = target?.closest ? target.closest("[data-risk-history-index]") : null;
        if (!button) return;
        const index = Number(button.dataset.riskHistoryIndex);
        const item = latestDailyHistoryRows[index];
        const detail = document.querySelector("[data-risk-history-detail]");
        if (detail && item) detail.innerHTML = renderDailyReportDetail(item);
    });
    document.querySelector('[data-risk-form="floor"]')?.addEventListener("submit", async (event) => {
        event.preventDefault();
        status("floor", "保存中...");
        try {
            const payload = await request("floor/", {
                method: "PUT",
                body: JSON.stringify(formPayload(event.currentTarget)),
            });
            status("floor", "已保存");
            output("policy", payload);
        } catch (error) {
            status("floor", error.message);
        }
    });
    document.querySelector('[data-risk-form="policy"]')?.addEventListener("submit", async (event) => {
        event.preventDefault();
        status("policy", "保存中...");
        try {
            const payload = await request("account-policies/", {
                method: "POST",
                body: JSON.stringify(formPayload(event.currentTarget)),
            });
            status("policy", "已保存");
            output("policy", payload);
        } catch (error) {
            status("policy", error.message);
        }
    });
    document.querySelector("[data-risk-preview-policy]")?.addEventListener("click", async () => {
        const form = document.querySelector('[data-risk-form="policy"]');
        const accountId = form?.querySelector('[name="account_id"]')?.value;
        if (!accountId) {
            status("policy", "请输入账户 ID");
            return;
        }
        status("policy", "读取中...");
        try {
            const payload = await request(`effective-policy/?account_id=${encodeURIComponent(accountId)}`);
            status("policy", "已读取");
            renderEffectivePolicy(payload);
        } catch (error) {
            status("policy", error.message);
        }
    });
    document.querySelector('[data-risk-form="pretrade"]')?.addEventListener("submit", async (event) => {
        event.preventDefault();
        status("pretrade", "检查中...");
        try {
            const payload = await request("pre-trade-check/", {
                method: "POST",
                body: JSON.stringify(formPayload(event.currentTarget)),
            });
            status("pretrade", payload.data?.passed ? "允许" : "拒绝");
            renderPreTrade(payload);
        } catch (error) {
            status("pretrade", error.message);
        }
    });
    document.querySelector('[data-risk-form="postinvestment"]')?.addEventListener("submit", async (event) => {
        event.preventDefault();
        status("postinvestment", "巡检中...");
        try {
            const body = formPayload(event.currentTarget);
            delete body.report_date;
            const payload = await request("post-investment-check/", {
                method: "POST",
                body: JSON.stringify(body),
            });
            status("postinvestment", payload.data?.status || "完成");
            renderPostInvestment(payload);
        } catch (error) {
            status("postinvestment", error.message);
        }
    });
    document.querySelector("[data-risk-daily-report]")?.addEventListener("click", async () => {
        const form = document.querySelector('[data-risk-form="postinvestment"]');
        status("dailyreport", "生成中...");
        try {
            const payload = await request("daily-report/", {
                method: "POST",
                body: JSON.stringify(formPayload(form)),
            });
            status("dailyreport", payload.data?.risk_daily_report?.status || "完成");
            renderDailyReport(payload);
        } catch (error) {
            status("dailyreport", error.message);
        }
    });
    document.querySelector('[data-risk-form="dailyhistory"]')?.addEventListener("submit", async (event) => {
        event.preventDefault();
        status("dailyhistory", "查询中...");
        const payload = formPayload(event.currentTarget);
        const query = new URLSearchParams();
        Object.entries(payload).forEach(([key, value]) => {
            if (value !== null && value !== undefined && value !== "") query.set(key, String(value));
        });
        try {
            const response = await request(`daily-report/?${query.toString()}`, { method: "GET" });
            const data = response.data || [];
            status("dailyhistory", Array.isArray(data) ? `已返回 ${data.length} 条` : "已返回 1 条");
            renderDailyReportHistory(response);
        } catch (error) {
            status("dailyhistory", error.message);
        }
    });
    document.querySelector('[data-risk-form="exception"]')?.addEventListener("submit", async (event) => {
        event.preventDefault();
        status("exception", "创建中...");
        const payload = formPayload(event.currentTarget);
        if (payload.expires_at && !String(payload.expires_at).endsWith("Z")) {
            payload.expires_at = new Date(payload.expires_at).toISOString();
        }
        try {
            const response = await request("exceptions/", {
                method: "POST",
                body: JSON.stringify(payload),
            });
            status("exception", "已创建");
            output("policy", response);
        } catch (error) {
            status("exception", error.message);
        }
    });
})();
</script>
{% endblock %}