{% extends "base.html" %}

{% block title %}Alpha 推荐历史{% endblock %}

{% block content %}
<div role="status" style="margin: 0 auto 16px; max-width: 1080px; padding: 12px 16px; border: 1px solid #bfdbfe; background: #eff6ff; color: #1e3a8a;">
    Alpha 推荐历史已迁入 TUI。
    <a href="/tui/?screen=research.signals&amp;action=dashboard.alpha-history" style="color:#1d4ed8; font-weight:700;">打开推荐历史任务</a>。
    当前 Classic 页面仅在兼容期内保留。
</div>
<section class="content-card" style="margin: 24px auto; max-width: 1080px;">
    <div class="section-header">
        <div>
            <h2 class="section-title">Alpha 推荐历史</h2>
            <p class="text-muted">支持按组合、阶段与来源回看历史候选和理由。</p>
        </div>
        <div style="display:flex; gap:12px; flex-wrap:wrap;">
            <a href="{% url 'dashboard:alpha_ranking' %}?alpha_scope=portfolio{% if filters.portfolio_id %}&portfolio_id={{ filters.portfolio_id }}{% endif %}&top_n=200" class="section-link">查看当前完整排名</a>
            <a href="{% url 'dashboard:index' %}" class="section-link">返回首页</a>
        </div>
    </div>

    <section class="alpha-history-exit-entry">
        <div class="alpha-history-exit-head">
            <div>
                <h3>当前持仓退出链路</h3>
                <p>历史页也直接挂到当前的 SELL / REDUCE / HOLD 跟踪链路，可一键回到 Dashboard 右侧退出详情。</p>
            </div>
            <a href="{{ current_exit_dashboard_url }}" class="section-link">回到 Dashboard 右侧详情</a>
        </div>
        {% if current_exit_watch_summary.total %}
        <div class="alpha-history-exit-summary">
            <span class="alpha-history-exit-pill alpha-history-exit-pill-urgent">立即处理 {{ current_exit_watch_summary.urgent_count|default:0 }}</span>
            <span class="alpha-history-exit-pill alpha-history-exit-pill-sell">SELL {{ current_exit_watch_summary.sell_count|default:0 }}</span>
            <span class="alpha-history-exit-pill alpha-history-exit-pill-reduce">REDUCE {{ current_exit_watch_summary.reduce_count|default:0 }}</span>
            <span class="alpha-history-exit-pill">HOLD {{ current_exit_watch_summary.hold_count|default:0 }}</span>
        </div>
        {% endif %}
        {% if current_exit_watchlist %}
        <div class="alpha-history-exit-list">
            {% for item in current_exit_watchlist|slice:":3" %}
            <article class="alpha-history-exit-item{% if item.is_selected %} is-selected{% endif %}">
                <div class="alpha-history-exit-main">
                    <strong>{{ item.asset_code }}</strong>
                    {% if item.asset_name %}<span>{{ item.asset_name }}</span>{% endif %}
                    <span class="alpha-history-exit-badge alpha-history-exit-badge-{{ item.exit_action|lower }}">{{ item.exit_action_label }}</span>
                    <span class="alpha-history-exit-priority">{{ item.priority_label }}</span>
                </div>
                <div class="alpha-history-page-meta">
                    <span>账户 {{ item.account_name }}</span>
                    <span>退出来源 {{ item.exit_source }}</span>
                    <span>决策侧 {{ item.decision_side_label }}</span>
                </div>
                <div class="alpha-history-page-text">
                    {{ item.exit_reason_text|default:"当前未触发退出动作。" }}
                </div>
                <div class="alpha-history-page-actions">
                    <a href="{{ item.dashboard_detail_url }}">在 Dashboard 右侧查看</a>
                    {% if item.recommendation_detail_url %}
                    <a href="{{ item.recommendation_detail_url }}" target="_blank" rel="noopener">推荐明细 API</a>
                    {% endif %}
                    {% if item.transition_plan_detail_url %}
                    <a href="{{ item.transition_plan_detail_url }}" target="_blank" rel="noopener">调仓计划 API</a>
                    {% endif %}
                    <a href="{{ item.decision_workspace_url|default:'/decision/workspace/' }}">进入决策工作台</a>
                </div>
            </article>
            {% endfor %}
        </div>
        {% else %}
        <div class="alpha-history-page-text">当前没有需要跟踪的持仓退出项。</div>
        {% endif %}
    </section>

    {% if history_runs %}
    <div class="alpha-history-page-list">
        {% for run in history_runs %}
        <article class="alpha-history-page-item">
            <div class="alpha-history-page-main">
                <strong>{{ run.trade_date }}</strong>
                <span>{{ run.scope_label }}</span>
            </div>
            <div class="alpha-history-page-meta">
                <span>来源 {{ run.source }}</span>
                <span>{{ run.provider_source }}</span>
                {% if run.effective_asof_date %}<span>评分日 {{ run.effective_asof_date }}</span>{% endif %}
                <span>{% if run.uses_cached_data %}缓存{% else %}实时优先{% endif %}</span>
            </div>
            {% if run.cache_reason %}
            <div class="alpha-history-page-text">{{ run.cache_reason }}</div>
            {% endif %}
            <div class="alpha-history-page-actions">
                <button
                    type="button"
                    class="alpha-history-detail-btn"
                    data-run-id="{{ run.id }}"
                    data-detail-url="{% url 'api_dashboard:alpha_history_detail' run.id %}"
                    onclick="loadAlphaHistoryDetail(this)"
                >
                    查看详情
                </button>
                <a href="{% url 'api_dashboard:alpha_history_detail' run.id %}" target="_blank" rel="noopener">打开 JSON</a>
            </div>
            <div id="alpha-history-detail-{{ run.id }}" class="alpha-history-detail" hidden></div>
        </article>
        {% endfor %}
    </div>
    {% else %}
    <div class="empty-state">
        <div class="empty-icon">🗂️</div>
        <p>暂无 Alpha 推荐历史。</p>
    </div>
    {% endif %}
</section>

<style>
.alpha-history-page-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.alpha-history-page-item {
    border: 1px solid #dde6f0;
    border-radius: 14px;
    padding: 14px 16px;
    background: #fff;
}

.alpha-history-exit-entry {
    border: 1px solid #dbe7f5;
    border-radius: 14px;
    background: #f8fbff;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.alpha-history-exit-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.alpha-history-exit-head h3 {
    margin: 0 0 4px 0;
    font-size: 16px;
    color: #122c57;
}

.alpha-history-exit-head p {
    margin: 0;
    font-size: 13px;
    color: #556274;
}

.alpha-history-exit-summary {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.alpha-history-exit-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #ecf1f8;
    color: #425164;
    font-size: 12px;
    font-weight: 700;
}

.alpha-history-exit-pill-urgent {
    background: #ffe7e7;
    color: #a33434;
}

.alpha-history-exit-pill-sell {
    background: #ffecec;
    color: #b42318;
}

.alpha-history-exit-pill-reduce {
    background: #fff0d9;
    color: #9a6220;
}

.alpha-history-exit-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.alpha-history-exit-item {
    border: 1px solid #dde6f0;
    border-radius: 12px;
    background: #fff;
    padding: 12px;
}

.alpha-history-exit-item.is-selected {
    border-color: #3756a4;
    box-shadow: 0 0 0 2px rgba(55, 86, 164, 0.12);
}

.alpha-history-exit-main {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 8px;
}

.alpha-history-exit-badge {
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 700;
    background: #eef3ff;
    color: #3756a4;
}

.alpha-history-exit-badge-sell {
    background: #ffe4e4;
    color: #a33434;
}

.alpha-history-exit-badge-reduce {
    background: #fff1d8;
    color: #9a6220;
}

.alpha-history-exit-badge-hold {
    background: #edf6ea;
    color: #2c6f3c;
}

.alpha-history-exit-priority {
    font-size: 12px;
    font-weight: 700;
    color: #a33434;
}

.alpha-history-page-main,
.alpha-history-page-meta {
    display: flex;
    gap: 10px 14px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.alpha-history-page-meta,
.alpha-history-page-text,
.alpha-history-page-actions a {
    font-size: 13px;
    color: #556274;
}

.alpha-history-page-actions a {
    color: #164ca1;
    text-decoration: none;
}

.alpha-history-page-actions a:hover {
    text-decoration: underline;
}

.alpha-history-page-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.alpha-history-detail-btn,
.alpha-history-copy-btn {
    border: 1px solid #c8d6e8;
    border-radius: 8px;
    background: #f8fbff;
    color: #164ca1;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 10px;
}

.alpha-history-detail-btn:hover,
.alpha-history-copy-btn:hover {
    background: #eef5ff;
}

.alpha-history-detail {
    margin-top: 14px;
    border-top: 1px solid #e6edf5;
    padding-top: 14px;
}

.alpha-history-detail-summary,
.alpha-history-snapshot-card,
.alpha-history-json-block {
    border: 1px solid #e6edf5;
    border-radius: 12px;
    background: #fbfcfe;
    padding: 12px;
}

.alpha-history-detail-summary {
    display: flex;
    gap: 10px 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    font-size: 13px;
    color: #425164;
}

.alpha-history-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.alpha-history-snapshot-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.alpha-history-snapshot-head,
.alpha-history-snapshot-meta {
    display: flex;
    gap: 8px 12px;
    align-items: center;
    flex-wrap: wrap;
}

.alpha-history-snapshot-head strong {
    color: #122c57;
}

.alpha-history-stage {
    border-radius: 999px;
    background: #eef3ff;
    color: #3756a4;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 8px;
}

.alpha-history-snapshot-meta,
.alpha-history-reason-list {
    font-size: 12px;
    color: #556274;
}

.alpha-history-reason-list {
    margin: 0;
    padding-left: 18px;
}

.alpha-history-json-block {
    margin-top: 12px;
}

.alpha-history-json-block summary {
    cursor: pointer;
    font-weight: 700;
    color: #164ca1;
}

.alpha-history-json-text {
    width: 100%;
    min-height: 180px;
    margin-top: 10px;
    border: 1px solid #d9e3ef;
    border-radius: 8px;
    padding: 10px;
    font-family: Consolas, Monaco, monospace;
    font-size: 12px;
    resize: vertical;
}

@media (max-width: 768px) {
    .alpha-history-exit-head {
        flex-direction: column;
    }
}
</style>
<script>
function escapeAlphaHistoryHtml(value) {
    return String(value ?? '')
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');
}

function renderAlphaHistoryReasonList(items, emptyText) {
    const list = Array.isArray(items) ? items : [];
    if (!list.length) {
        return `<li>${escapeAlphaHistoryHtml(emptyText)}</li>`;
    }
    return list.slice(0, 4).map((item) => {
        const text = item && typeof item === 'object'
            ? (item.text || item.summary || JSON.stringify(item))
            : item;
        return `<li>${escapeAlphaHistoryHtml(text)}</li>`;
    }).join('');
}

function renderAlphaHistorySnapshot(snapshot) {
    const title = `${snapshot.code || '-'} ${snapshot.name || ''}`.trim();
    return `
        <article class="alpha-history-snapshot-card">
            <div class="alpha-history-snapshot-head">
                <strong>${escapeAlphaHistoryHtml(title)}</strong>
                <span class="alpha-history-stage">${escapeAlphaHistoryHtml(snapshot.stage || '-')}</span>
            </div>
            <div class="alpha-history-snapshot-meta">
                <span>排名 #${escapeAlphaHistoryHtml(snapshot.rank ?? '-')}</span>
                <span>评分 ${escapeAlphaHistoryHtml(snapshot.alpha_score ?? '-')}</span>
                <span>置信度 ${escapeAlphaHistoryHtml(snapshot.confidence ?? '-')}</span>
                <span>风控 ${escapeAlphaHistoryHtml(snapshot.gate_status || '-')}</span>
            </div>
            <div>
                <strong>买入理由</strong>
                <ul class="alpha-history-reason-list">
                    ${renderAlphaHistoryReasonList(snapshot.buy_reasons, '暂无买入理由。')}
                </ul>
            </div>
            <div>
                <strong>不买理由</strong>
                <ul class="alpha-history-reason-list">
                    ${renderAlphaHistoryReasonList(snapshot.no_buy_reasons, '当前无明显阻断项。')}
                </ul>
            </div>
            <div class="alpha-history-snapshot-meta">
                <span>建议仓位 ${escapeAlphaHistoryHtml(snapshot.suggested_position_pct ?? 0)}%</span>
                <span>金额 ${escapeAlphaHistoryHtml(snapshot.suggested_notional ?? 0)}</span>
                <span>数量 ${escapeAlphaHistoryHtml(snapshot.suggested_quantity ?? 0)}</span>
            </div>
            <div class="alpha-history-page-text">
                证伪条件：${escapeAlphaHistoryHtml((snapshot.invalidation_rule || {}).summary || '暂无证伪条件。')}
            </div>
        </article>
    `;
}

async function loadAlphaHistoryDetail(button) {
    const runId = button.dataset.runId;
    const target = document.getElementById(`alpha-history-detail-${runId}`);
    if (!target) {
        return;
    }

    if (target.dataset.loaded === 'true') {
        target.hidden = !target.hidden;
        button.textContent = target.hidden ? '查看详情' : '收起详情';
        return;
    }

    target.hidden = false;
    target.innerHTML = '<div class="alpha-history-page-text">正在加载详情...</div>';
    button.disabled = true;

    try {
        const response = await fetch(button.dataset.detailUrl, {
            headers: { 'Accept': 'application/json' },
        });
        const payload = await response.json();
        if (!response.ok || !payload.success) {
            throw new Error(payload.error || `HTTP ${response.status}`);
        }

        const detail = payload.data;
        const snapshots = Array.isArray(detail.snapshots) ? detail.snapshots : [];
        const rawJson = JSON.stringify(detail, null, 2);
        target.innerHTML = `
            <div class="alpha-history-detail-summary">
                <span>组合 ${escapeAlphaHistoryHtml(detail.portfolio_name || '-')}</span>
                <span>交易日 ${escapeAlphaHistoryHtml(detail.trade_date || '-')}</span>
                <span>范围 ${escapeAlphaHistoryHtml(detail.scope_label || '-')}</span>
                <span>来源 ${escapeAlphaHistoryHtml(detail.source || '-')}</span>
                <span>${detail.uses_cached_data ? '缓存结果' : '实时优先'}</span>
            </div>
            <div class="alpha-history-snapshot-grid">
                ${snapshots.map(renderAlphaHistorySnapshot).join('') || '<div class="alpha-history-page-text">本次记录没有候选快照。</div>'}
            </div>
            <details class="alpha-history-json-block">
                <summary>JSON 原文</summary>
                <textarea id="alpha-history-json-${escapeAlphaHistoryHtml(runId)}" class="alpha-history-json-text" readonly>${escapeAlphaHistoryHtml(rawJson)}</textarea>
                <button type="button" class="alpha-history-copy-btn" onclick="copyAlphaHistoryJson('${escapeAlphaHistoryHtml(runId)}', this)">复制 JSON</button>
            </details>
        `;
        target.dataset.loaded = 'true';
        button.textContent = '收起详情';
    } catch (error) {
        target.innerHTML = `<div class="alpha-history-page-text">加载失败：${escapeAlphaHistoryHtml(error.message)}</div>`;
    } finally {
        button.disabled = false;
    }
}

async function copyAlphaHistoryJson(runId, button) {
    const textarea = document.getElementById(`alpha-history-json-${runId}`);
    if (!textarea) {
        return;
    }
    if (navigator.clipboard && window.isSecureContext) {
        await navigator.clipboard.writeText(textarea.value);
    } else {
        textarea.focus();
        textarea.select();
        document.execCommand('copy');
        textarea.setSelectionRange(0, 0);
    }
    button.textContent = '已复制';
    setTimeout(() => {
        button.textContent = '复制 JSON';
    }, 1600);
}
</script>
{% endblock %}