{% extends "base.html" %}
{% block title %}对比分析 - Augur{% endblock %}
{% block extra_head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script src="/static/js/factor-map.js"></script>
<style>
#compare-radar-container {
    max-width: 480px;
    margin: 0 auto 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 16px;
}
@media (min-width: 1200px) {
    #compare-radar-container { max-width: 560px; }
}
#compare-radar-title {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 4px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
#compare-radar-subtitle {
    text-align: center;
    font-size: 0.65rem;
    color: var(--text-muted);
    opacity: 0.6;
    margin-bottom: 8px;
}
.compare-card { position: relative; }
.compare-card .signal-dot {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.compare-card.agree    .signal-dot { background: var(--signal-buy); }
.compare-card.disagree .signal-dot { background: var(--signal-sell); }
.compare-conf-bar {
    height: 2px;
    background: var(--border-color);
    border-radius: 1px;
    margin-top: 10px;
    overflow: hidden;
}
.compare-conf-bar__fill {
    height: 100%;
    background: var(--accent-orange);
    border-radius: 1px;
    transition: width 0.4s ease;
}
.agent-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}
.agent-checkbox-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.78rem;
    transition: all 0.2s;
}
.agent-checkbox-item:hover {
    border-color: var(--accent-orange);
    background: var(--bg-card-hover);
}
.agent-checkbox-item.selected {
    border-color: var(--accent-orange);
    background: var(--amber-wash, rgba(255,149,0,0.1));
}
.agent-checkbox-item input[type="checkbox"] {
    accent-color: var(--accent-orange);
}
.compare-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.compare-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 16px;
    position: relative;
}
.compare-card.agree { border-color: var(--signal-buy); }
.compare-card.disagree { border-color: var(--signal-sell); }
.compare-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}
.compare-card-name {
    font-weight: 600;
    font-size: 0.88rem;
}
.compare-reasoning {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.5;
    max-height: 120px;
    overflow-y: auto;
}
.compare-findings {
    margin-top: 8px;
    font-size: 0.72rem;
}
.compare-findings li {
    padding: 2px 0;
    color: var(--text-secondary);
}
#compare-spinner { display:none; text-align:center; padding:40px; }
#compare-results-section { display:none; }
.select-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 8px;
}
</style>
{% endblock %}
{% block content %}

<header class="page-header mb-16">
    <div class="page-header__text">
        <h1 class="page-title" data-i18n="compare-title">对比分析</h1>
        <p class="page-lead" data-i18n="compare-desc">选择 2-5 位投资大师，对比同一标的的分析差异</p>
    </div>
</header>

<div class="card mb-24">
    <div class="mb-12">
        <label class="data-label mb-4" for="compare-ticker" data-i18n="compare-ticker-label">股票代码</label>
        <div class="flex items-center gap-12" style="flex-wrap:wrap;">
            <input id="compare-ticker" type="text" class="form-input" style="max-width:200px; font-family:var(--font-data); font-size:1.1rem; font-weight:700; text-transform:uppercase;" placeholder="AAPL" aria-required="true" autocomplete="off">
            <button type="button" class="btn btn-primary" onclick="runCompare()" id="compare-btn" disabled data-i18n="compare-run">对比分析</button>
        </div>
    </div>

    <div class="mb-8">
        <span class="data-label mb-8" id="compare-agents-label" data-i18n="compare-agents-label">选择投资大师 (2-5 位)</span>
        <div class="agent-checkbox-grid" id="agent-grid" role="group" aria-labelledby="compare-agents-label">
            {% for p in personas %}
            <label class="agent-checkbox-item" onclick="updateSelection(this)">
                <input type="checkbox" value="{{ p.id }}" name="agents">
                <span>{{ p.name }}</span>
            </label>
            {% endfor %}
        </div>
        <div class="select-count agent-counter insufficient" id="select-count" data-i18n="compare-initial-select">2-5 位 (已选 0)</div>
    </div>
</div>

<!-- Spinner -->
<div id="compare-spinner" role="status" aria-live="polite" aria-busy="true">
    <div class="spinner" style="margin:0 auto;" aria-hidden="true"></div>
    <p class="loading-pulse text-orange text-mono mt-16" style="font-size:0.88rem;" data-i18n="compare-loading">正在对比分析...</p>
    <div class="compare-results mt-16">
        <div class="skeleton skeleton-compare-card"></div>
        <div class="skeleton skeleton-compare-card"></div>
        <div class="skeleton skeleton-compare-card"></div>
    </div>
</div>

<!-- Error Panel -->
<div id="compare-error" class="error-panel mb-16" style="display:none;" role="alert">
    <div class="error-panel-title"><span class="error-panel-icon" aria-hidden="true">&#x26A0;</span><span data-i18n="compare-error-title">对比分析失败</span></div>
    <div class="error-panel-msg" id="compare-error-msg"></div>
    <div class="error-panel-retry">
        <button type="button" class="btn btn-sm" onclick="runCompare()" data-i18n="compare-retry">重试</button>
    </div>
</div>

<!-- Results -->
<div id="compare-results-section">
    <div class="flex items-center justify-between mb-12 compare-results-header">
        <h2 class="section-title compact lg" data-i18n="compare-results">对比结果</h2>
        <div class="flex items-center gap-12">
            <div id="compare-consensus" class="text-muted" style="font-size:0.78rem;"></div>
            <div class="export-btn-group" id="compare-export" style="display:none;">
                <button type="button" class="btn btn-sm" onclick="exportCompareJSON()" data-i18n="compare-export-json">JSON</button>
                <button type="button" class="btn btn-sm" onclick="exportCompareMD()" data-i18n="compare-export-md">Markdown</button>
                <button type="button" class="btn btn-sm" onclick="shareCompareLink()" data-i18n="compare-export-share">分享</button>
            </div>
        </div>
    </div>
    <div id="compare-radar-container" style="display:none;">
        <div id="compare-radar-title" data-i18n="compare-radar-title">评分雷达图</div>
        <div id="compare-radar-subtitle" data-i18n="compare-radar-subtitle">各维度均换算为 0-10 分</div>
        <canvas id="compare-radar-canvas" height="320"></canvas>
        <!-- Factor breakdown table (shown when real factors exist) -->
        <div id="compare-factor-breakdown" style="display:none; margin-top:16px;">
            <button type="button" id="compare-factor-toggle" onclick="toggleFactorBreakdown()" style="background:none;border:1px solid var(--border-color);border-radius:6px;padding:5px 12px;font-size:0.78rem;color:var(--text-secondary);cursor:pointer;margin-bottom:10px;" data-i18n="compare-factor-toggle">▶ 展开因子明细</button>
            <div id="compare-factor-inner" style="display:none;overflow-x:auto;">
                <table id="compare-factor-table" style="width:100%; border-collapse:collapse; font-size:0.78rem; font-family:var(--font-mono);">
                    <thead id="compare-factor-thead"></thead>
                    <tbody id="compare-factor-tbody"></tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="compare-results" id="compare-results"></div>
</div>

<!-- Empty State (shown initially) -->
<div id="compare-empty" class="empty-state card">
    <span class="empty-state-icon" aria-hidden="true">&#128200;</span>
    <div class="empty-state-title" data-i18n="compare-empty-title">选择大师开始对比</div>
    <p class="empty-state-desc" data-i18n="compare-empty-desc">在上方选择 2-5 位投资大师，对比同一标的的分析差异，查看一致与分歧</p>
    <div class="empty-state-action">
        <button type="button" class="btn btn-primary btn-sm" onclick="document.getElementById('compare-ticker').focus()" data-i18n="compare-empty-cta">输入股票代码</button>
        <a href="/history" class="btn btn-sm btn-ghost" style="text-decoration:none;" data-i18n="compare-empty-history">查看历史分析</a>
    </div>
</div>

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

function updateSelection(label) {
    var checkbox = label.querySelector('input[type="checkbox"]');
    var allChecked = document.querySelectorAll('#agent-grid input[type="checkbox"]:checked');
    if (!checkbox.checked && allChecked.length >= 5) {
        checkbox.checked = false;
        showToast(_t('compare-max-agents'), 'warning');
        return;
    }
    setTimeout(function() {
        var checked = document.querySelectorAll('#agent-grid input[type="checkbox"]:checked');
        var count = checked.length;
        var countEl = document.getElementById('select-count');
        countEl.textContent = _t('compare-select-count').replace('{n}', count);
        if (count >= 2 && count <= 5) {
            countEl.className = 'select-count agent-counter ready';
        } else {
            countEl.className = 'select-count agent-counter insufficient';
        }
        document.querySelectorAll('.agent-checkbox-item').forEach(function(item) {
            var cb = item.querySelector('input[type="checkbox"]');
            if (cb.checked) item.classList.add('selected');
            else item.classList.remove('selected');
        });
        validateCompareForm();
    }, 10);
}

function validateCompareForm() {
    var ticker = document.getElementById('compare-ticker').value.trim();
    var checked = document.querySelectorAll('#agent-grid input[type="checkbox"]:checked');
    var btn = document.getElementById('compare-btn');
    if (!btn) return;
    if (ticker.length > 0 && checked.length >= 2 && checked.length <= 5) {
        btn.disabled = false;
    } else {
        btn.disabled = true;
    }
}

function applyCompareQueryParams() {
    var params = new URLSearchParams(window.location.search);
    var ticker = params.get('ticker');
    var agents = params.get('agents');
    if (ticker) {
        document.getElementById('compare-ticker').value = ticker.toUpperCase();
    }
    if (agents) {
        var ids = agents.split(',').map(function(s) { return s.trim(); }).filter(Boolean);
        document.querySelectorAll('#agent-grid input[type="checkbox"]').forEach(function(cb) {
            cb.checked = ids.indexOf(cb.value) !== -1;
            var label = cb.closest('.agent-checkbox-item');
            if (label) {
                if (cb.checked) label.classList.add('selected');
                else label.classList.remove('selected');
            }
        });
        var countEl = document.getElementById('select-count');
        var count = document.querySelectorAll('#agent-grid input[type="checkbox"]:checked').length;
        countEl.textContent = _t('compare-select-count').replace('{n}', count);
        countEl.className = 'select-count agent-counter ' + (count >= 2 && count <= 5 ? 'ready' : 'insufficient');
    }
    validateCompareForm();
    if (ticker && agents) {
        showToast(_t('compare-url-loaded'));
        if (params.get('autorun') === '1') {
            runCompare();
        }
    }
}

// Real-time ticker validation
document.addEventListener('DOMContentLoaded', function() {
    var tickerInput = document.getElementById('compare-ticker');
    tickerInput.addEventListener('input', function() {
        validateCompareForm();
    });
    tickerInput.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') { e.preventDefault(); runCompare(); }
    });
    applyCompareQueryParams();
    validateCompareForm();
});

function signalBadgeClass(s) {
    if (!s) return 'signal-badge-neutral';
    var m = {'bullish':'signal-badge-buy','neutral':'signal-badge-neutral','bearish':'signal-badge-sell'};
    return m[s.toLowerCase()] || 'signal-badge-neutral';
}

function signalLabel(s) {
    var m = {'bullish':'BUY','neutral':'HOLD','bearish':'SELL'};
    return m[(s||'').toLowerCase()] || s;
}

function runCompare() {
    var ticker = document.getElementById('compare-ticker').value.trim().toUpperCase();
    if (!ticker) { showToast(_t('msg-enter-ticker'), 'warning'); return; }

    var checked = document.querySelectorAll('#agent-grid input[type="checkbox"]:checked');
    var agentIds = [];
    checked.forEach(function(cb) { agentIds.push(cb.value); });

    if (agentIds.length < 2) { showToast(_t('compare-min-agents'), 'warning'); return; }
    if (agentIds.length > 5) { showToast(_t('compare-max-agents'), 'warning'); return; }

    document.getElementById('compare-spinner').style.display = 'block';
    document.getElementById('compare-results-section').style.display = 'none';
    document.getElementById('compare-error').style.display = 'none';
    document.getElementById('compare-empty').style.display = 'none';

    fetch('/api/compare', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ticker: ticker, agent_ids: agentIds })
    })
    .then(function(r) {
        if (!r.ok) {
            return r.json().then(function(err) {
                throw new Error(err.detail || err.message || _t('compare-api-error'));
            }).catch(function() {
                throw new Error(_t('compare-api-error'));
            });
        }
        return r.json();
    })
    .then(function(data) {
        document.getElementById('compare-spinner').style.display = 'none';
        document.getElementById('compare-results-section').style.display = 'block';
        renderCompareResults(data);
    })
    .catch(function(err) {
        document.getElementById('compare-spinner').style.display = 'none';
        document.getElementById('compare-error').style.display = 'block';
        document.getElementById('compare-error-msg').textContent = err.message || String(err);
    });
}

function renderCompareResults(data) {
    window._lastCompareData = data;
    var agents = data.agents || [];
    var container = document.getElementById('compare-results');
    container.innerHTML = '';
    document.getElementById('compare-export').style.display = 'flex';

    // Determine consensus signal for highlighting
    var signals = agents.map(function(a) { return (a.signal || '').toLowerCase(); });
    var majoritySignal = null;
    var signalCounts = {};
    signals.forEach(function(s) { signalCounts[s] = (signalCounts[s] || 0) + 1; });
    for (var s in signalCounts) {
        if (signalCounts[s] > agents.length / 2) majoritySignal = s;
    }

    var agreeCount = 0;
    var disagreeCount = 0;

    agents.forEach(function(a) {
        var isAgree = majoritySignal && (a.signal || '').toLowerCase() === majoritySignal;
        var isDisagree = majoritySignal && (a.signal || '').toLowerCase() !== majoritySignal;
        if (isAgree) agreeCount++;
        if (isDisagree) disagreeCount++;

        var card = document.createElement('div');
        card.className = 'compare-card' + (isAgree ? ' agree' : '') + (isDisagree ? ' disagree' : '');
        var findingsHtml = '';
        if (a.key_findings && a.key_findings.length > 0) {
            findingsHtml = '<ul class="compare-findings">';
            a.key_findings.slice(0, 4).forEach(function(f) {
                findingsHtml += '<li>' + escapeHtml(f) + '</li>';
            });
            findingsHtml += '</ul>';
        }
        var dotHtml = (isAgree || isDisagree) ? '<span class="signal-dot" title="' + (isAgree ? 'Agree' : 'Disagree') + '"></span>' : '';
        var confPct = Math.round((a.confidence || 0) * 100);
        var confBarHtml = '<div class="compare-conf-bar"><div class="compare-conf-bar__fill" style="width:' + confPct + '%"></div></div>';
        card.innerHTML = dotHtml + '<div class="compare-card-header">' +
            '<span class="compare-card-name">' + escapeHtml(a.agent_name || a.agent_id) + '</span>' +
            '<span class="signal-badge ' + signalBadgeClass(a.signal) + '" style="font-size:0.7rem;">' + signalLabel(a.signal) + '</span>' +
            '</div>' +
            '<div class="flex items-center gap-12 mb-8">' +
            '<div><span class="data-label">' + escapeHtml(_t('compare-label-score')) + '</span><div class="data-value" style="font-size:1.1rem;">' + (a.score || 0).toFixed(1) + '/10</div></div>' +
            '<div><span class="data-label">' + escapeHtml(_t('compare-label-confidence')) + '</span><div class="text-mono">' + ((a.confidence || 0) * 100).toFixed(0) + '%</div></div>' +
            '</div>' +
            '<div class="compare-reasoning">' + escapeHtml((a.reasoning || '').replace(/#+\s*/g, '').replace(/\*\*/g, '').substring(0, 300)) + '</div>' +
            findingsHtml +
            confBarHtml;
        container.appendChild(card);
    });

    var consensusEl = document.getElementById('compare-consensus');
    if (majoritySignal) {
        consensusEl.innerHTML = escapeHtml(_t('compare-consensus-label')) + ' <span style="color:var(--signal-buy);">' + escapeHtml(_t('compare-consensus-agree').replace('{n}', agreeCount)) + '</span>' +
            (disagreeCount > 0 ? ' / <span style="color:var(--signal-sell);">' + escapeHtml(_t('compare-consensus-disagree').replace('{n}', disagreeCount)) + '</span>' : '');
    } else {
        consensusEl.textContent = _t('compare-consensus-none');
    }

    if (agents.length >= 2) {
        renderRadarChart(agents);
    }
}

function _cssVar(name, fallback) {
    var v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
    return v || fallback;
}

// Factor → canonical category mapping (module scope — shared by radar + breakdown)
// Factor->category mapping lives in /static/js/factor-map.js (shared with stocks.html)
var _FACTOR_MAP = AugurFactorMap.FACTOR_MAP;
var _INVERT = AugurFactorMap.INVERT;
var _catAvg = AugurFactorMap.catAvg;

var _radarChart = null;
function renderRadarChart(agents) {
    var container = document.getElementById('compare-radar-container');
    var canvas = document.getElementById('compare-radar-canvas');
    if (!container || !canvas) return;
    container.style.display = 'block';

    var PALETTE = [
        _cssVar('--accent-orange', '#ff9500'),
        _cssVar('--signal-buy',    '#30d158'),
        _cssVar('--accent-blue',   '#64d2ff'),
        _cssVar('--oracle-purple', '#bf5af2'),
        _cssVar('--signal-sell',   '#ff453a'),
    ];
    var gridColor  = _cssVar('--border-color', 'rgba(255,255,255,0.08)');
    var tickColor  = _cssVar('--text-muted',   '#636366');
    var labelColor = _cssVar('--text-secondary','#aeaeb2');
    var legendColor= _cssVar('--text-secondary','#8e8e93');

    var labels = [
        _t('compare-radar-valuation', '估值'),
        _t('compare-radar-growth',    '成长'),
        _t('compare-radar-quality',   '质量'),
        _t('compare-radar-momentum',  '动量'),
        _t('compare-radar-safety',    '安全')
    ];

    function toRadarData(a) {
        var factors = (a.metadata && a.metadata.factors) ? a.metadata.factors : null;

        if (factors && Object.keys(factors).length >= 3) {
            // Use real factor scores — fill missing categories with score/2+2.5 as neutral
            var neutral = Math.min(Math.max((a.score || 5), 0), 10);
            var sigMap  = { bullish: 8, neutral: 5, bearish: 2 };
            var sigVal  = sigMap[(a.signal || '').toLowerCase()];
            if (sigVal === undefined) sigVal = 5;
            var vals = [
                _catAvg(factors, 'valuation'),
                _catAvg(factors, 'growth'),
                _catAvg(factors, 'quality'),
                _catAvg(factors, 'momentum'),
                _catAvg(factors, 'safety')
            ];
            // Fill nulls: use signal-weighted fallback
            return vals.map(function(v, i) {
                if (v !== null) return Math.min(Math.max(v, 0), 10);
                // fallback: blend overall score with signal
                return i === 4 ? (10 - (1 - (a.confidence || 0.5)) * 6) : (neutral * 0.6 + sigVal * 0.4);
            });
        }

        // Proxy fallback (no metadata.factors)
        var score = Math.min(Math.max(a.score || 5, 0), 10);
        var conf  = Math.min(Math.max((a.confidence || 0.5) * 10, 0), 10);
        var sigMapFb = { bullish: 8, neutral: 5, bearish: 2 };
        var bull = sigMapFb[(a.signal || '').toLowerCase()];
        if (bull === undefined) bull = 5;
        var evidence = Math.min((a.key_findings || []).length * 1.5 + 3, 10);
        var safety   = Math.min(conf * 0.5 + 5 - (a.risks || []).length * 0.5, 10);
        return [score, evidence, bull, conf, safety];
    }

    var datasets = agents.map(function(a, i) {
        var color = PALETTE[i % PALETTE.length];
        return {
            label: a.agent_name || a.agent_id,
            data: toRadarData(a),
            borderColor: color,
            backgroundColor: color + '26',
            pointBackgroundColor: color,
            pointRadius: 4,
            borderWidth: 2
        };
    });

    // Update title with ticker name
    var titleEl = document.getElementById('compare-radar-title');
    var ticker = (document.getElementById('compare-ticker') || {}).value || '';
    if (titleEl && ticker) titleEl.textContent = ticker + ' — ' + _t('compare-radar-title', '评分雷达图');

    if (_radarChart) { _radarChart.destroy(); _radarChart = null; }

    _radarChart = new Chart(canvas, {
        type: 'radar',
        data: { labels: labels, datasets: datasets },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: { color: legendColor, font: { size: 11 }, padding: 12 }
                },
                tooltip: { enabled: true }
            },
            scales: {
                r: {
                    min: 0, max: 10,
                    ticks: { stepSize: 2, color: tickColor, font: { size: 10 }, backdropColor: 'transparent' },
                    pointLabels: { color: labelColor, font: { size: 11 } },
                    grid: { color: gridColor },
                    angleLines: { color: gridColor }
                }
            }
        }
    });

    // Render factor breakdown table if real factors exist
    var hasFactors = agents.some(function(a) {
        return a.metadata && a.metadata.factors && Object.keys(a.metadata.factors).length >= 3;
    });
    if (hasFactors) {
        renderFactorBreakdown(agents);
        document.getElementById('compare-factor-breakdown').style.display = 'block';
    } else {
        document.getElementById('compare-factor-breakdown').style.display = 'none';
    }
}

function renderFactorBreakdown(agents) {
    var CAT_LABELS = {
        valuation: _t('compare-radar-valuation', '估值'),
        growth:    _t('compare-radar-growth', '成长'),
        quality:   _t('compare-radar-quality', '质量'),
        momentum:  _t('compare-radar-momentum', '动量'),
        safety:    _t('compare-radar-safety', '安全')
    };
    var CATS = ['valuation', 'growth', 'quality', 'momentum', 'safety'];

    // Build header
    var thead = document.getElementById('compare-factor-thead');
    var hRow = '<tr style="border-bottom:1px solid var(--border-color);">';
    hRow += '<th style="text-align:left; padding:4px 6px; color:var(--text-muted); font-weight:500;">因子</th>';
    agents.forEach(function(a) {
        hRow += '<th style="text-align:right; padding:4px 6px; color:var(--accent-orange); font-weight:500; white-space:nowrap;">' + (a.agent_name || a.agent_id) + '</th>';
    });
    hRow += '</tr>';
    thead.innerHTML = hRow;

    // Build body grouped by category
    var tbody = document.getElementById('compare-factor-tbody');
    var html = '';
    CATS.forEach(function(cat) {
        var catKeys = _FACTOR_MAP[cat] || [];
        // Find which keys actually appear in any agent
        var usedKeys = catKeys.filter(function(k) {
            return agents.some(function(a) {
                return a.metadata && a.metadata.factors && a.metadata.factors[k] !== undefined;
            });
        });
        if (!usedKeys.length) return;

        // Category header row
        html += '<tr style="background:var(--bg-surface);">';
        html += '<td colspan="' + (agents.length + 1) + '" style="padding:5px 6px; color:var(--text-secondary); font-weight:600; letter-spacing:0.05em; font-size:0.72rem; text-transform:uppercase;">';
        html += CAT_LABELS[cat] || cat;
        // Show category average
        var catAvgs = agents.map(function(a) {
            var f = (a.metadata && a.metadata.factors) ? a.metadata.factors : {};
            var v = _catAvg(f, cat);
            return v !== null ? v.toFixed(1) : '—';
        });
        html += ' <span style="font-weight:400; opacity:0.6;">(' + catAvgs.join(' vs ') + ')</span>';
        html += '</td></tr>';

        // Individual factor rows
        usedKeys.forEach(function(k) {
            html += '<tr style="border-bottom:1px solid var(--border-subtle, #1a1f2e);">';
            html += '<td style="padding:3px 6px 3px 14px; color:var(--text-muted); white-space:nowrap;">' + k.replace(/_/g, ' ') + '</td>';
            agents.forEach(function(a) {
                var f = (a.metadata && a.metadata.factors) ? a.metadata.factors : {};
                var val = f[k] !== undefined ? parseFloat(f[k]) : null;
                var display = val !== null ? val.toFixed(1) : '—';
                var barColor = val === null ? '#333' : (val >= 7 ? 'var(--data-green,#30d158)' : (val >= 4 ? 'var(--accent-orange,#ff9500)' : 'var(--accent-red,#ff453a)'));
                var barW = val !== null ? Math.round(val * 10) : 0;
                var textColor = val === null ? 'var(--text-muted)' : (val >= 7 ? 'var(--data-green)' : (val >= 4 ? 'var(--text-primary)' : 'var(--accent-red)'));
                html += '<td style="text-align:right; padding:3px 6px; color:' + textColor + ';">';
                if (val !== null) {
                    html += '<div style="display:inline-flex;align-items:center;gap:4px;">';
                    html += '<div style="width:40px;height:4px;background:var(--bg-elevated,#2a2a3e);border-radius:2px;overflow:hidden;">';
                    html += '<div style="width:' + barW + '%;height:100%;background:' + barColor + ';border-radius:2px;"></div></div>';
                    html += '<span>' + display + '</span></div>';
                } else {
                    html += display;
                }
                html += '</td>';
            });
            html += '</tr>';
        });
    });
    tbody.innerHTML = html;
}

function toggleFactorBreakdown() {
    var inner = document.getElementById('compare-factor-inner');
    var btn = document.getElementById('compare-factor-toggle');
    if (!inner) return;
    var open = inner.style.display !== 'none';
    inner.style.display = open ? 'none' : 'block';
    if (btn) btn.textContent = open ? (_t('compare-factor-toggle','▶ 展开因子明细')) : ('▼ ' + _t('compare-factor-collapse','收起因子明细'));
}

function exportCompareJSON() {
    var data = window._lastCompareData;
    if (!data) return;
    var blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url;
    a.download = (data.ticker || 'compare') + '_compare.json';
    a.click();
    URL.revokeObjectURL(url);
    showToast(_t('compare-toast-json'));
}

function exportCompareMD() {
    var data = window._lastCompareData;
    if (!data) return;
    var md = '# ' + data.ticker + ' - ' + _t('compare-title') + '\n\n';
    (data.agents || []).forEach(function(a) {
        md += '## ' + (a.agent_name || a.agent_id) + '\n';
        md += '- ' + _t('compare-md-signal') + ': ' + signalLabel(a.signal) + '\n';
        md += '- ' + _t('compare-md-score') + ': ' + (a.score || 0).toFixed(1) + '/10\n';
        md += '- ' + _t('compare-md-analysis') + ': ' + (a.reasoning || '').substring(0, 200) + '\n\n';
    });
    var blob = new Blob([md], { type: 'text/markdown' });
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url;
    a.download = (data.ticker || 'compare') + '_compare.md';
    a.click();
    URL.revokeObjectURL(url);
    showToast(_t('compare-toast-md'));
}

function shareCompareLink() {
    var ticker = document.getElementById('compare-ticker').value.trim().toUpperCase();
    var checked = document.querySelectorAll('#agent-grid input[type="checkbox"]:checked');
    var ids = [];
    checked.forEach(function(cb) { ids.push(cb.value); });
    var url = window.location.origin + '/compare?ticker=' + ticker + '&agents=' + ids.join(',');
    navigator.clipboard.writeText(url).then(function() {
        showToast(_t('compare-toast-share'));
    }).catch(function() { showToast(_t('compare-toast-copy-failed'), 'error'); });
}

// Re-render radar chart when theme changes so colors stay in sync
document.addEventListener('augur:theme-change', function() {
    if (_radarChart && window._lastCompareData && window._lastCompareData.agents) {
        renderRadarChart(window._lastCompareData.agents);
    }
});
</script>
{% endblock %}

<!-- ============ Disagreement Map View ============ -->
<div id="disagreement-view" style="margin-top: 32px;">
  <h2>⚡ Disagreement Map</h2>
  <canvas id="disagreement-canvas" width="800" height="500" style="width:100%;max-width:800px;border:1px solid var(--border);border-radius:8px;cursor:grab;"></canvas>
  <p style="font-size:12px;color:var(--text-muted);margin-top:4px;">🖱 Drag to pan · Scroll to zoom · Double-click to reset</p>
</div>
<script>
(function(){
  var canvas = document.getElementById('disagreement-canvas');
  if (!canvas || typeof window.renderDisagreementMap !== 'function') return;
  // Fetch disagreement data from API
  var ticker = new URLSearchParams(window.location.search).get('ticker') || '';
  if (!ticker) { canvas.style.display = 'none'; return; }
  fetch('/api/disagreement?ticker=' + ticker)
    .then(function(r){ return r.json(); })
    .then(function(map){ window.renderDisagreementMap(map); })
    .catch(function(){});
})();
</script>