{% extends "base.html" %}
{% block title %}{{ ticker }} Deep Analysis Report - Augur{% endblock %}
{% block extra_head %}
<style>
.report-page-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}
.report-page-header {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 20px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-orange);
    border-radius: var(--radius-md);
}
.report-page-ticker {
    font-size: 2.2rem;
    font-weight: 700;
    font-family: var(--font-data);
    color: var(--accent-orange);
    letter-spacing: 1px;
}
.report-page-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.report-signal-badge-lg {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.report-signal-badge-lg.buy { background: rgba(0,200,83,0.15); color: var(--signal-buy); border: 1px solid rgba(0,200,83,0.4); box-shadow: 0 0 12px rgba(0,200,83,0.1); }
.report-signal-badge-lg.sell { background: rgba(255,23,68,0.12); color: var(--signal-sell); border: 1px solid rgba(255,23,68,0.4); box-shadow: 0 0 12px rgba(255,23,68,0.1); }
.report-signal-badge-lg.neutral { background: rgba(255,214,0,0.12); color: var(--signal-neutral); border: 1px solid rgba(255,214,0,0.35); box-shadow: 0 0 12px rgba(255,214,0,0.08); }
.report-gauge-container { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.report-download-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 12px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
.report-download-bar.is-sticky {
    position: sticky;
    top: 8px;
    z-index: 20;
    background: var(--glass-bg, var(--bg-card));
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-elevated, 0 4px 16px rgba(0,0,0,0.2));
}
.report-section-controls {
    display: flex;
    gap: 6px;
    margin-left: auto;
}
.report-download-bar .btn { font-size: 0.78rem; padding: 7px 16px; border-radius: 4px; transition: all 0.2s; }
.report-download-bar .btn:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.report-exec-summary {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-orange);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 24px;
}
.report-exec-summary .exec-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-orange);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}
.report-exec-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.report-exec-metrics .metric-item {
    text-align: center;
    padding: 12px 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s;
}
.report-exec-metrics .metric-item:hover { border-color: var(--accent-orange); }
.report-exec-metrics .metric-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}
.report-exec-metrics .metric-value {
    font-size: 1.2rem;
    font-weight: 700;
    font-family: var(--font-data);
    color: var(--text-primary);
}
.report-section-block {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.report-section-block:hover { border-color: rgba(255,140,0,0.3); }
.report-section-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-primary);
    border-bottom: 1px solid transparent;
    transition: background 0.2s;
}
.report-section-toggle:hover { background: var(--bg-card-hover); }
.report-section-toggle .toggle-arrow {
    transition: transform 0.3s;
    font-size: 0.7rem;
    color: var(--text-muted);
}
.report-section-toggle.open .toggle-arrow { transform: rotate(90deg); }
.report-section-toggle.open { border-bottom-color: var(--border-color); background: rgba(255,140,0,0.03); }
.report-section-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    padding: 0 18px;
}
.report-section-body.open {
    max-height: 5000px;
    padding: 18px;
}
.report-voting-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.report-voting-table th {
    text-align: left;
    padding: 10px 12px;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border-color);
    background: var(--bg-primary);
}
.report-voting-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}
.report-voting-table tr:hover td { background: rgba(255,140,0,0.03); }
.report-voting-table .sig-buy { color: var(--signal-buy); font-weight: 700; }
.report-voting-table .sig-sell { color: var(--signal-sell); font-weight: 700; }
.report-voting-table .sig-neutral { color: var(--signal-neutral); font-weight: 700; }
.report-voting-table .score-cell { font-family: var(--font-data); font-weight: 600; }
.report-voting-table .score-cell.score-high { background: rgba(0,200,83,0.12); color: var(--signal-buy); }
.report-voting-table .score-cell.score-low { background: rgba(255,23,68,0.1); color: var(--signal-sell); }
.report-voting-table .score-cell.score-mid { background: rgba(255,214,0,0.08); color: var(--signal-neutral); }

/* Score gauge bar - CSS only horizontal bar */
.score-gauge-bar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 100px;
}
.score-gauge-track {
    flex: 1;
    height: 6px;
    background: var(--report-chart-track, rgba(255,255,255,0.06));
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.score-gauge-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}
.score-gauge-fill.gauge-high { background: linear-gradient(90deg, #00c853, #69f0ae); }
.score-gauge-fill.gauge-low { background: linear-gradient(90deg, #ff1744, #ff5252); }
.score-gauge-fill.gauge-mid { background: linear-gradient(90deg, #ffd600, #ffca28); }
.score-gauge-label {
    font-size: 0.72rem;
    font-family: var(--font-data);
    font-weight: 600;
    min-width: 28px;
    text-align: right;
}

.report-full-md {
    margin-top: 24px;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
.report-loading-state {
    text-align: center;
    padding: 60px 20px;
}
.report-loading-state .spinner {
    margin: 0 auto 16px;
}
.report-error-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--signal-sell);
}
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 16px;
    transition: color 0.2s;
}
.back-link:hover { color: var(--accent-orange); }

/* Print styles - hide all UI chrome */
@media print {
    .sidebar, #sidebar, .bottom-nav, #bottom-nav,
    .hamburger-btn, .mobile-backdrop, #backdrop,
    .report-download-bar, .back-link,
    .global-progress-bar, .toast-container { display: none !important; }
    .app-layout { display: block !important; }
    .app-main { margin-left: 0 !important; padding: 0 !important; }
    .report-section-toggle { pointer-events: none; }
    .report-section-toggle .toggle-arrow { display: none; }
    .report-section-body { max-height: none !important; padding: 16px !important; overflow: visible !important; }
    .report-page-container { max-width: 100%; padding: 0; }
    .report-page-header { border: none; background: transparent; padding: 0 0 12px 0; border-bottom: 2px solid #333; }
    .report-section-block { border: 1px solid #444; page-break-inside: avoid; }
    body { background: #fff !important; color: #222 !important; }
    .report-page-ticker { color: #222 !important; }
    .report-exec-summary { border-left-color: #ff8c00; background: #fff !important; }
    .report-verdict-strip { background: #f5f5f5 !important; color: #333 !important; border-color: #ccc !important; }
    .report-exec-metrics .metric-item { background: #fafafa !important; border-color: #ddd !important; }
    .report-exec-metrics .metric-label { color: #666 !important; }
    .report-exec-metrics .metric-value { color: #111 !important; }
    .report-section-body.open,
    .report-md-panel,
    .report-md-panel .md-report,
    .report-section-body .md-report {
        background: #fff !important;
        color: #222 !important;
    }
    .md-report th, .md-report td, .md-report strong, .md-report li, .md-report p {
        color: #222 !important;
    }
    .md-report th { background: #f0f0f0 !important; }
    .report-voting-table th { background: #f0f0f0 !important; color: #333 !important; }
    .report-voting-table td { color: #222 !important; }
    .score-chart-container { background: #fff !important; border-color: #ccc !important; }
    * { color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Score Chart Styles */
.score-chart-container {
    margin: 24px 0;
    padding: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
.score-chart-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-orange);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

/* Verdict summary strip */
.report-verdict-strip {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    margin-bottom: 20px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    color: var(--text-muted);
}
.report-verdict-strip .verdict-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.report-verdict-strip .verdict-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.report-verdict-strip .verdict-dot.dot-buy { background: var(--signal-buy); }
.report-verdict-strip .verdict-dot.dot-sell { background: var(--signal-sell); }
.report-verdict-strip .verdict-dot.dot-neutral { background: var(--signal-neutral); }

/* Provenance source badges */
.badge-source { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; }
.badge-live { background: rgba(0,200,83,0.15); color: var(--signal-buy); border: 1px solid rgba(0,200,83,0.4); }
.badge-replay { background: rgba(33,150,243,0.15); color: #42a5f5; border: 1px solid rgba(33,150,243,0.4); }
.badge-demo { background: rgba(255,152,0,0.15); color: var(--accent-orange); border: 1px solid rgba(255,152,0,0.4); }
.badge-fresh { background: rgba(0,200,83,0.12); color: var(--signal-buy); border: 1px solid rgba(0,200,83,0.3); }
.badge-stale { background: rgba(255,214,0,0.12); color: var(--signal-neutral); border: 1px solid rgba(255,214,0,0.35); }

/* Markdown report panels — parchment in light, terminal card in dark */
.report-section-body .md-report,
.report-md-panel {
    padding: 4px 2px;
}
html.light .report-section-body.open {
    background:
        repeating-linear-gradient(0deg, rgba(0,0,0,0.012) 0 2px, transparent 2px 4px),
        linear-gradient(180deg, var(--parchment, #fbf7ee) 0%, var(--parchment-deep, #ece2cc) 100%);
    color: var(--parchment-ink, #2a2118);
}
html.light .report-section-block {
    border-color: #c4bba6;
}
html.light .report-section-toggle.open {
    background: rgba(207, 111, 0, 0.06);
}
html.light .score-gauge-track {
    background: var(--report-chart-track, rgba(0,0,0,0.08));
}
html:not(.light) .score-gauge-track {
    background: var(--report-chart-track, rgba(255,255,255,0.06));
}
html.light .report-voting-table th {
    background: rgba(0, 0, 0, 0.04);
    color: #4a3e30;
}
html.light .report-exec-metrics .metric-item {
    background: rgba(255, 255, 255, 0.65);
}
html.light .report-exec-summary [style*="text-secondary"] {
    color: var(--report-text-muted, #4a3e30) !important;
}
html.light .report-verdict-strip {
    color: var(--report-text-muted, #4a3e30);
}
html.light .report-verdict-strip [style*="text-primary"] {
    color: var(--parchment-ink, #2a2118) !important;
}
.report-section-body .md-report .md-p,
.report-section-body .md-report li {
    max-width: 72ch;
}
</style>
{% endblock %}
{% block content %}
<div class="report-page-container">
    <a href="/stocks?ticker={{ ticker }}" class="back-link" data-i18n="report-back">&larr; 返回股票分析</a>

    <!-- Loading State -->
    <div id="rp-loading" class="report-loading-state" role="status" aria-live="polite" aria-busy="true">
        <div class="spinner" aria-hidden="true"></div>
        <p class="loading-pulse text-orange" id="rp-progress">Loading report for {{ ticker }}...</p>
    </div>

    <!-- Error State -->
    <div id="rp-error" class="report-error-state" style="display:none;" role="alert">
        <p id="rp-error-msg">Failed to load report.</p>
        <button type="button" class="btn btn-sm" onclick="loadReport()" data-i18n="btn-retry">重试</button>
    </div>

    <!-- Report Content (hidden until loaded) -->
    <div id="rp-content" style="display:none;">
        <!-- Header -->
        <div class="report-page-header">
            <div>
                <div class="report-page-ticker">{{ ticker }}</div>
                <div class="report-page-date" id="rp-date"></div>
            </div>
            <div id="rp-signal-badge"></div>
            <div class="report-gauge-container" id="rp-gauge"></div>
        </div>

        <!-- Download Bar -->
        <div class="report-download-bar" id="rp-download-bar">
            <button type="button" class="btn btn-sm" onclick="downloadReportMD()" data-i18n="download_report" data-i18n-title="download_report">&#x2B07; 下载报告</button>
            <button type="button" class="btn btn-sm btn-primary" onclick="downloadReportHTML()" data-i18n="report-export-html" data-i18n-title="report-export-html">&#x1F4C4; HTML</button>
            <button type="button" class="btn btn-sm" onclick="downloadReportPDF()" data-i18n="report-print-pdf" data-i18n-title="report-print-pdf">&#x1F5A8; 打印 PDF</button>
            <button type="button" class="btn btn-sm" onclick="copyReportText()" data-i18n="copy_report" data-i18n-title="copy_report">&#x1F4CB; 复制报告</button>
            <a id="rp-view-stocks-link" href="/stocks?ticker={{ ticker }}&report=1" class="btn btn-sm" style="text-decoration:none;" data-i18n="report-view-analysis">&#x1F4CA; 查看分析页</a>
            <div class="report-section-controls">
                <button type="button" class="btn btn-sm btn-ghost" onclick="expandAllReportSections()" data-i18n="report-expand-all">展开全部</button>
                <button type="button" class="btn btn-sm btn-ghost" onclick="collapseAllReportSections()" data-i18n="report-collapse-all">收起全部</button>
            </div>
        </div>

        <!-- Provenance Badges -->
        <div class="report-verdict-strip" id="rp-provenance-strip" style="display:none;">
            <span style="font-weight:600;color:var(--text-primary);">Source:</span>
            <span class="verdict-item"><span id="rp-source-badge" class="badge"></span></span>
        </div>

        <!-- Verdict Strip -->
        <div class="report-verdict-strip" id="rp-verdict-strip"></div>

        <!-- Executive Summary -->
        <div class="report-exec-summary" id="rp-exec-summary"></div>

        <!-- Agent Voting Table -->
        <div class="report-section-block">
            <div class="report-section-toggle open" onclick="toggleReportSection(this)">
                <span class="toggle-arrow">&#x25B6;</span>
                <span data-i18n="report-voting-board">大师投票板</span>
            </div>
            <div class="report-section-body open" id="rp-voting-body">
                <div class="md-table-wrap">
                <table class="report-voting-table" id="rp-voting-table">
                    <caption class="sr-only">Agent voting board for {{ ticker }}</caption>
                    <thead><tr>
                        <th scope="col">Agent</th>
                        <th scope="col">Signal</th>
                        <th scope="col">Score</th>
                        <th scope="col">Gauge</th>
                        <th scope="col">Confidence</th>
                    </tr></thead>
                    <tbody id="rp-voting-tbody"></tbody>
                </table>
                </div>
            </div>
        </div>

        <!-- Collapsible Sections (populated dynamically) -->
        <div id="rp-sections"></div>

        <!-- Full Markdown Rendered -->
        <div class="report-section-block">
            <div class="report-section-toggle" onclick="toggleReportSection(this)">
                <span class="toggle-arrow">&#x25B6;</span>
                <span data-i18n="report-full-markdown">完整报告（Markdown 渲染）</span>
            </div>
            <div class="report-section-body" id="rp-full-md-body">
                <div class="report-md-panel">
                    <div id="rp-full-md" class="md-report"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
var rpTicker = '{{ ticker }}';
var rpMarkdown = '';
var rpAnalysisData = null;

function createScoreGauge(score, maxScore) {
    maxScore = maxScore || 10;
    var pct = Math.min(Math.max(score / maxScore, 0), 1);
    var angle = pct * 180;
    var r = 40, cx = 50, cy = 50;
    // Color: red(0-3), yellow(4-6), green(7-10)
    var color;
    if (score <= 3) color = '#ff5252';
    else if (score <= 6) color = '#ffca28';
    else color = '#00c853';
    var trackStroke = reportThemeColor('--report-chart-track', 'rgba(255,255,255,0.1)');
    var subLabelFill = reportThemeColor('--report-text-muted', reportThemeColor('--text-secondary', 'rgba(255,255,255,0.5)'));
    // Arc path
    var startAngle = Math.PI;
    var endAngle = Math.PI + (angle * Math.PI / 180);
    var x1 = cx + r * Math.cos(startAngle);
    var y1 = cy + r * Math.sin(startAngle);
    var x2 = cx + r * Math.cos(endAngle);
    var y2 = cy + r * Math.sin(endAngle);
    var largeArc = angle > 180 ? 1 : 0;
    var svg = '<svg width="100" height="60" viewBox="0 0 100 60" role="img" aria-label="Score ' + score.toFixed(1) + ' out of ' + maxScore + '">';
    // Background arc (full semicircle)
    svg += '<path d="M ' + (cx - r) + ' ' + cy + ' A ' + r + ' ' + r + ' 0 0 1 ' + (cx + r) + ' ' + cy + '" fill="none" stroke="' + trackStroke + '" stroke-width="8" stroke-linecap="round"/>';
    // Score arc
    if (angle > 0.5) {
        svg += '<path d="M ' + x1.toFixed(2) + ' ' + y1.toFixed(2) + ' A ' + r + ' ' + r + ' 0 ' + largeArc + ' 1 ' + x2.toFixed(2) + ' ' + y2.toFixed(2) + '" fill="none" stroke="' + color + '" stroke-width="8" stroke-linecap="round"/>';
    }
    // Score text
    svg += '<text x="' + cx + '" y="' + (cy - 5) + '" text-anchor="middle" fill="' + color + '" font-size="16" font-weight="700" font-family="var(--font-data)">' + score.toFixed(1) + '</text>';
    svg += '<text x="' + cx + '" y="' + (cy + 8) + '" text-anchor="middle" fill="' + subLabelFill + '" font-size="8">/ ' + maxScore + '</text>';
    svg += '</svg>';
    return svg;
}

function toggleReportSection(el) {
    el.classList.toggle('open');
    var body = el.nextElementSibling;
    if (body) body.classList.toggle('open');
}

function setAllReportSections(open) {
    document.querySelectorAll('.report-section-toggle').forEach(function(el) {
        var body = el.nextElementSibling;
        if (open) {
            el.classList.add('open');
            if (body) body.classList.add('open');
        } else {
            el.classList.remove('open');
            if (body) body.classList.remove('open');
        }
    });
}
function expandAllReportSections() { setAllReportSections(true); }
function collapseAllReportSections() { setAllReportSections(false); }

function initReportStickyBar() {
    var bar = document.getElementById('rp-download-bar');
    if (!bar || bar.getAttribute('data-sticky-init') === '1' || !('IntersectionObserver' in window)) return;
    bar.setAttribute('data-sticky-init', '1');
    var sentinel = document.createElement('div');
    sentinel.style.height = '1px';
    bar.parentNode.insertBefore(sentinel, bar);
    var obs = new IntersectionObserver(function(entries) {
        bar.classList.toggle('is-sticky', !entries[0].isIntersecting);
    }, { threshold: 0, rootMargin: '-8px 0px 0px 0px' });
    obs.observe(sentinel);
}

function downloadReportMD() {
    if (!rpMarkdown) { showToast(_t('report-toast-no-report'), 'warning'); return; }
    var date = new Date().toISOString().slice(0, 10);
    var filename = rpTicker + '_report_' + date + '.md';
    var blob = new Blob([rpMarkdown], { type: 'text/markdown;charset=utf-8' });
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url; a.download = filename;
    document.body.appendChild(a); a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    showToast(_t('report-toast-md-downloaded'));
}

function downloadReportHTML() {
    if (!rpMarkdown) { showToast(_t('report-toast-no-report'), 'warning'); return; }
    var renderedBody = renderReportMarkdown(rpMarkdown);
    var date = new Date().toISOString().slice(0, 10);
    var filename = rpTicker + '_report_' + date + '.html';
    var htmlDoc = buildReportHTMLExport(rpTicker, renderedBody);
    var blob = new Blob([htmlDoc], { type: 'text/html;charset=utf-8' });
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.href = url; a.download = filename;
    document.body.appendChild(a); a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    showToast(_t('report-toast-html-downloaded'));
}

function downloadReportPDF() {
    if (!rpMarkdown) { showToast(_t('report-toast-no-report'), 'warning'); return; }
    prepareReportPrint();
}

function copyReportText() {
    if (!rpMarkdown) { showToast(_t('report-toast-no-report'), 'warning'); return; }
    navigator.clipboard.writeText(rpMarkdown).then(function() {
        showToast(_t('report-toast-copied'));
    }).catch(function() {
        showToast(_t('report-toast-copy-failed'), 'error');
    });
}

function loadReport() {
    document.getElementById('rp-loading').style.display = 'block';
    document.getElementById('rp-error').style.display = 'none';
    document.getElementById('rp-content').style.display = 'none';
    startProgress('rp-progress', { stages: [
        _t('progress-report-1'),
        _t('progress-report-2'),
        _t('progress-report-3'),
        _t('progress-report-4')
    ]});

    fetchWithTimeout('/api/report/' + rpTicker + '?auto_fetch=true', {}, 120000)
        .then(function(r) {
            if (!r.ok) {
                return r.json().then(function(e) { throw new Error(e.detail || 'HTTP ' + r.status); },
                                     function() { throw new Error('HTTP ' + r.status); });
            }
            return r.json();
        })
        .then(function(data) {
            stopProgress('rp-progress');
            if (data.status === 'ok' && data.report) {
                rpMarkdown = data.report;
                renderReportPage(data);
            } else {
                throw new Error(data.detail || 'No report returned');
            }
        })
        .catch(function(err) {
            stopProgress('rp-progress');
            document.getElementById('rp-loading').style.display = 'none';
            document.getElementById('rp-error').style.display = 'block';
            document.getElementById('rp-error-msg').textContent = 'Failed: ' + (err.message || err);
        });
}

function renderReportPage(data) {
    document.getElementById('rp-loading').style.display = 'none';
    document.getElementById('rp-content').style.display = 'block';
    initReportStickyBar();

    // Date
    document.getElementById('rp-date').textContent = _t('report-generated') + ': ' + (data.timestamp || new Date().toISOString()).slice(0, 16).replace('T', ' ') + ' UTC';

    // Parse signal and score from the markdown report (table format: | **key** | value |)
    var signal = 'neutral', score = 5.0, confidence = 0.5;
    var signalMatch = rpMarkdown.match(/综合信号[^|]*\|\s*([^|\n]+?)\s*\|/i) || rpMarkdown.match(/Signal[：:]\s*\*?\*?(\w+)/i);
    if (signalMatch) {
        var s = signalMatch[1];
        if (s.indexOf('多') >= 0 || s.toLowerCase().indexOf('bull') >= 0 || s.toLowerCase().indexOf('buy') >= 0) signal = 'bullish';
        else if (s.indexOf('空') >= 0 || s.toLowerCase().indexOf('bear') >= 0 || s.toLowerCase().indexOf('sell') >= 0) signal = 'bearish';
    }
    var scoreMatch = rpMarkdown.match(/综合评分[^|]*\|\s*([0-9.]+)/i) || rpMarkdown.match(/Score[：:]\s*\*?\*?([0-9.]+)/i);
    if (scoreMatch) score = parseFloat(scoreMatch[1]) || 5.0;

    // Signal badge
    var badgeClass = signal === 'bullish' ? 'buy' : signal === 'bearish' ? 'sell' : 'neutral';
    var badgeText = signal === 'bullish' ? 'BUY' : signal === 'bearish' ? 'SELL' : 'HOLD';
    document.getElementById('rp-signal-badge').innerHTML = '<span class="report-signal-badge-lg ' + badgeClass + '">' + badgeText + '</span>';

    // Score gauge
    document.getElementById('rp-gauge').innerHTML = createScoreGauge(score, 10);

    // Verdict strip - count bull/bear/neutral votes
    var votingAgents = parseAgentsFromMarkdown();
    var bullCount = 0, bearCount = 0, neutralCount = 0;
    votingAgents.forEach(function(a) {
        if (a.score >= 7) bullCount++;
        else if (a.score <= 4) bearCount++;
        else neutralCount++;
    });
    var verdictStrip = document.getElementById('rp-verdict-strip');
    if (votingAgents.length > 0) {
        verdictStrip.innerHTML = '<span style="font-weight:600;color:var(--text-primary);">' + _t('report-consensus') + ':</span>'
            + '<span class="verdict-item"><span class="verdict-dot dot-buy"></span> ' + _t('report-bullish') + ': ' + bullCount + '</span>'
            + '<span class="verdict-item"><span class="verdict-dot dot-neutral"></span> ' + _t('report-neutral-label') + ': ' + neutralCount + '</span>'
            + '<span class="verdict-item"><span class="verdict-dot dot-sell"></span> ' + _t('report-bearish') + ': ' + bearCount + '</span>'
            + '<span style="margin-left:auto; font-family:var(--font-data); color:var(--text-primary);">' + _t('report-agents-voted').replace('{n}', votingAgents.length) + '</span>';
    } else {
        verdictStrip.style.display = 'none';
    }

    // Executive summary
    renderExecSummary(score, signal, confidence);

    // Provenance badges
    if (data.provenance) {
        var provStrip = document.getElementById('rp-provenance-strip');
        var source = data.provenance.data_source || 'unknown';
        var freshness = data.provenance.freshness || 'unknown';
        var sourceLabel = source.charAt(0).toUpperCase() + source.slice(1);
        var freshnessLabel = freshness.charAt(0).toUpperCase() + freshness.slice(1);
        provStrip.style.display = 'flex';
        document.getElementById('rp-source-badge').innerHTML =
            '<span class="badge-source badge-' + source + '">' + sourceLabel + '</span> ' +
            '<span class="badge-source badge-' + freshness + '">' + freshnessLabel + '</span>';
    }

    // Voting table (parse from markdown)
    renderVotingTable();

    // Score chart (SVG bar chart from voting data)
    if (votingAgents.length > 0) {
        var chartContainer = document.getElementById('rp-sections');
        if (chartContainer) {
            chartContainer.insertAdjacentHTML('beforebegin', renderScoreChart(votingAgents));
        }
    }

    // Collapsible sections
    renderCollapsibleSections();

    // Full markdown
    document.getElementById('rp-full-md').innerHTML = renderReportMarkdown(rpMarkdown);
}

function renderExecSummary(score, signal, confidence) {
    var container = document.getElementById('rp-exec-summary');
    var grade = score >= 8 ? 'A+' : score >= 7 ? 'A' : score >= 6 ? 'B+' : score >= 5 ? 'B' : score >= 4 ? 'C' : 'D';
    var signalText = signal === 'bullish' ? 'BUY' : signal === 'bearish' ? 'SELL' : 'HOLD';
    var signalColor = signal === 'bullish' ? 'var(--signal-buy)' : signal === 'bearish' ? 'var(--signal-sell)' : 'var(--signal-neutral)';

    // Extract metrics from table format: | **key** | value |
    var confMatch = rpMarkdown.match(/置信度[^|]*\|\s*([0-9.]+%?)/i) || rpMarkdown.match(/Confidence[：:]\s*([0-9.]+%?)/i);
    var confText = confMatch ? confMatch[1] : '--';
    var posMatch = rpMarkdown.match(/建议仓位[^|]*\|\s*([0-9.]+%?)/i) || rpMarkdown.match(/Position[：:]\s*([0-9.]+%?)/i);
    var posText = posMatch ? posMatch[1] : '--';
    var riskMatch = rpMarkdown.match(/风险等级[^|]*\|\s*(\S+)/i) || rpMarkdown.match(/Risk[：:]\s*(\S+)/i);
    var riskText = riskMatch ? riskMatch[1] : '--';

    var html = '<div class="exec-title">' + _t('report-exec-summary') + '</div>';
    html += '<div class="report-exec-metrics">';
    html += '<div class="metric-item"><div class="metric-label">Signal</div><div class="metric-value" style="color:' + signalColor + ';">' + signalText + '</div></div>';
    html += '<div class="metric-item"><div class="metric-label">Score</div><div class="metric-value" style="color:var(--accent-orange);">' + score.toFixed(1) + '/10</div></div>';
    html += '<div class="metric-item"><div class="metric-label">Grade</div><div class="metric-value">' + grade + '</div></div>';
    html += '<div class="metric-item"><div class="metric-label">Confidence</div><div class="metric-value">' + escapeHtml(confText) + '</div></div>';
    html += '<div class="metric-item"><div class="metric-label">Position</div><div class="metric-value">' + escapeHtml(posText) + '</div></div>';
    html += '<div class="metric-item"><div class="metric-label">Risk</div><div class="metric-value">' + escapeHtml(riskText) + '</div></div>';
    html += '</div>';

    // Extract first meaningful paragraph as summary text
    var summarySection = rpMarkdown.match(/##\s*执行摘要\s*\n([\s\S]*?)(?=\n##|\n#[^#]|$)/i) ||
                         rpMarkdown.match(/##\s*Executive\s+Summary\s*\n([\s\S]*?)(?=\n##|\n#[^#]|$)/i);
    var summaryText = '';
    if (summarySection) {
        var sLines = summarySection[1].split('\n').filter(function(l) {
            return l.trim() && !l.trim().startsWith('|') && !l.trim().startsWith('---');
        });
        summaryText = sLines.slice(0, 4).join(' ').replace(/\*\*/g, '').replace(/[#*_`]/g, '').trim();
    }
    if (!summaryText) {
        var lines = rpMarkdown.split('\n').filter(function(l) { return l.trim() && !l.trim().startsWith('#') && !l.trim().startsWith('|') && !l.trim().startsWith('---'); });
        summaryText = lines.slice(0, 3).join(' ').replace(/\*\*/g, '').replace(/[#*_`]/g, '').trim();
    }
    if (summaryText) {
        html += '<div class="report-exec-blurb" style="margin-top:14px; font-size:0.82rem; color:var(--report-text-muted, var(--text-secondary)); line-height:1.7; padding: 12px; background: var(--bg-primary); border-radius: var(--radius-sm); border-left: 3px solid var(--accent-orange);">' + escapeHtml(summaryText.substring(0, 500)) + '</div>';
    }
    container.innerHTML = html;
}

function renderVotingTable() {
    var tbody = document.getElementById('rp-voting-tbody');
    tbody.innerHTML = '';
    // Match the specific voting table header: | 大师 | 流派 | 信号 | (not | **参与大师** |)
    var tableMatch = rpMarkdown.match(/\| *大师 *\| *流派 *\| *信号[^\n]*\n[^\n]*---[^\n]*\n((?:\|[^\n]+\n?)+)/i);
    if (tableMatch) {
        var rows = tableMatch[1].split('\n').filter(function(r) { return r.trim().startsWith('|') && r.indexOf('---') < 0; });
        rows.forEach(function(row) {
            var cells = row.split('|').map(function(c) { return c.trim(); }).filter(function(c) { return c; });
            if (cells.length >= 4) {
                var tr = document.createElement('tr');
                // Columns: [0]=大师 [1]=流派 [2]=信号 [3]=评分(x/10) [4]=置信度
                var sigText = cells[2] || '';
                var sigClass = '';
                if (sigText.indexOf('多') >= 0 || sigText.toLowerCase().indexOf('bull') >= 0) sigClass = 'sig-buy';
                else if (sigText.indexOf('空') >= 0 || sigText.toLowerCase().indexOf('bear') >= 0) sigClass = 'sig-sell';
                else sigClass = 'sig-neutral';

                var scoreVal = parseFloat(cells[3]) || 0;  // "7.5/10" → 7.5
                var scoreClass = 'score-mid';
                var gaugeClass = 'gauge-mid';
                var gaugeColor = 'var(--signal-neutral)';
                if (scoreVal >= 7) { scoreClass = 'score-high'; gaugeClass = 'gauge-high'; gaugeColor = 'var(--signal-buy)'; }
                else if (scoreVal <= 4) { scoreClass = 'score-low'; gaugeClass = 'gauge-low'; gaugeColor = 'var(--signal-sell)'; }

                var gaugePct = Math.min(Math.max(scoreVal / 10 * 100, 0), 100);
                var gaugeHtml = '<div class="score-gauge-bar">'
                    + '<div class="score-gauge-track"><div class="score-gauge-fill ' + gaugeClass + '" style="width:' + gaugePct + '%"></div></div>'
                    + '<span class="score-gauge-label" style="color:' + gaugeColor + '">' + scoreVal.toFixed(1) + '</span></div>';

                tr.innerHTML = '<td>' + escapeHtml(cells[0]) + '</td>'
                    + '<td class="' + sigClass + '">' + escapeHtml(sigText) + '</td>'
                    + '<td class="score-cell ' + scoreClass + '">' + scoreVal.toFixed(1) + '</td>'
                    + '<td>' + gaugeHtml + '</td>'
                    + '<td>' + escapeHtml(cells[4] || '--') + '</td>';  // cells[4]=置信度
                tbody.appendChild(tr);
            }
        });
    }
    if (tbody.children.length === 0) {
        tbody.innerHTML = '<tr><td colspan="5" style="text-align:center; color:var(--text-muted);">' + escapeHtml(_t('report-voting-empty')) + '</td></tr>';
    }
}

function parseAgentsFromMarkdown() {
    var agents = [];
    var tableMatch = rpMarkdown.match(/\| *大师 *\| *流派 *\| *信号[^\n]*\n[^\n]*---[^\n]*\n((?:\|[^\n]+\n?)+)/i);
    if (tableMatch) {
        var rows = tableMatch[1].split('\n').filter(function(r) { return r.trim().startsWith('|') && r.indexOf('---') < 0; });
        rows.forEach(function(row) {
            var cells = row.split('|').map(function(c) { return c.trim(); }).filter(function(c) { return c; });
            if (cells.length >= 4) {
                var score = parseFloat(cells[3]) || 0;  // cells[3] = "7.5/10"
                agents.push({ name: cells[0], agent_id: cells[0], score: score });
            }
        });
    }
    return agents;
}

function renderCollapsibleSections() {
    var container = document.getElementById('rp-sections');
    container.innerHTML = '';
    // Parse ## headings from markdown and create collapsible sections
    var sections = [];
    var lines = rpMarkdown.split('\n');
    var currentSection = null;
    for (var i = 0; i < lines.length; i++) {
        var match = lines[i].match(/^##\s+(.+)$/);
        if (match) {
            if (currentSection) sections.push(currentSection);
            currentSection = { title: match[1], content: [] };
        } else if (currentSection) {
            currentSection.content.push(lines[i]);
        }
    }
    if (currentSection) sections.push(currentSection);

    // Skip sections already shown (executive summary, voting table)
    var skipTitles = ['执行摘要', '评分总表', 'executive summary', 'scoring table', 'agent scores'];
    sections = sections.filter(function(sec) {
        var lower = sec.title.toLowerCase();
        for (var k = 0; k < skipTitles.length; k++) {
            if (lower.indexOf(skipTitles[k]) >= 0) return false;
        }
        return true;
    });

    sections.forEach(function(sec, idx) {
        var contentMd = sec.content.join('\n').trim();
        if (!contentMd) return;
        var isOpen = idx < 3 ? ' open' : '';
        var html = '<div class="report-section-block">';
        html += '<div class="report-section-toggle' + isOpen + '" onclick="toggleReportSection(this)">';
        html += '<span class="toggle-arrow">&#x25B6;</span>';
        html += '<span>' + escapeHtml(sec.title) + '</span>';
        html += '</div>';
        html += '<div class="report-section-body' + isOpen + '">';
        html += '<div class="report-md-panel">';
        html += renderReportMarkdown(contentMd);
        html += '</div>';
        html += '</div></div>';
        container.innerHTML += html;
    });
}

// ====== Agent Score Chart (SVG horizontal bar chart) ======
function renderScoreChart(agents) {
    if (!agents || !agents.length) return '';
    var barHeight = 24, gap = 4, labelWidth = 110, chartWidth = 300, maxScore = 10;
    var totalHeight = agents.length * (barHeight + gap) + 10;
    var labelFill = reportThemeColor('--report-chart-label', reportThemeColor('--text-primary', '#e8e8f0'));
    var trackFill = reportThemeColor('--report-chart-track', 'rgba(255,255,255,0.04)');
    var svg = '<svg width="' + (labelWidth + chartWidth + 40) + '" height="' + totalHeight + '" xmlns="http://www.w3.org/2000/svg" style="display:block; max-width:100%;" viewBox="0 0 ' + (labelWidth + chartWidth + 40) + ' ' + totalHeight + '" role="img" aria-label="Agent score distribution">';
    agents.forEach(function(agent, idx) {
        var y = idx * (barHeight + gap) + 5;
        var score = Math.min(Math.max(agent.score || 0, 0), maxScore);
        var barW = (score / maxScore) * chartWidth;
        var color;
        if (score >= 7) color = '#00c853';
        else if (score >= 4) color = '#ffd600';
        else color = '#ff5252';
        // Agent name label
        svg += '<text x="' + (labelWidth - 4) + '" y="' + (y + barHeight / 2 + 4) + '" text-anchor="end" fill="' + labelFill + '" font-size="11" font-family="var(--font-data, monospace)">' + escapeHtml(agent.name || agent.agent_id || '').substring(0, 14) + '</text>';
        // Bar background
        svg += '<rect x="' + labelWidth + '" y="' + y + '" width="' + chartWidth + '" height="' + barHeight + '" rx="3" fill="' + trackFill + '"/>';
        // Score bar
        if (barW > 0) {
            svg += '<rect x="' + labelWidth + '" y="' + y + '" width="' + barW.toFixed(1) + '" height="' + barHeight + '" rx="3" fill="' + color + '" opacity="0.8"/>';
        }
        // Score label
        svg += '<text x="' + (labelWidth + barW + 6) + '" y="' + (y + barHeight / 2 + 4) + '" fill="' + color + '" font-size="11" font-weight="600" font-family="var(--font-data, monospace)">' + score.toFixed(1) + '</text>';
    });
    svg += '</svg>';
    return '<div class="score-chart-container"><div class="score-chart-title">' + escapeHtml(_t('report-score-distribution')) + '</div>' + svg + '</div>';
}

// Auto-load on page ready
document.addEventListener('DOMContentLoaded', function() {
    loadReport();
});
</script>
{% endblock %}