{% extends 'base.html' %}

{% block title %}{{ conversation.student_name }} 的对话 - {{ get_app_name() }}{% endblock %}

{% block content %}
<style>
.audit-msg-row { display: flex; margin-bottom: 0.875rem; gap: 0.5rem; align-items: flex-start; }
.audit-msg-row.user { flex-direction: row-reverse; }
.audit-msg-row.system { justify-content: center; }
.audit-avatar { width: 28px; height: 28px; border-radius: 50%; background: #141413; color: white; font-size: 0.825rem; font-weight: 600; display: flex; align-items: center; justify-content: center; flex: 0 0 28px; }
.audit-msg-row.user .audit-avatar { background: #5B7553; }
.audit-msg-content { max-width: calc(75% - 30px); min-width: 0; display: flex; flex-direction: column; }
.audit-msg-row.user .audit-msg-content { align-items: flex-end; }
.audit-bubble {
    max-width: 100%; padding: 0.625rem 0.875rem; border-radius: 12px;
    font-size: 0.925rem; line-height: 1.55; word-break: break-word;
    overflow-wrap: anywhere; min-width: 0;
}
.audit-msg-row.assistant .audit-bubble { background: #F7F4EC; color: #141413; border-top-left-radius: 4px; }
.audit-msg-row.user .audit-bubble { background: #141413; color: white; border-top-right-radius: 4px; }
.audit-msg-row.system .audit-bubble { background: #F5EDD8; color: #8C6A0A; max-width: 80%; text-align: center; font-size: 0.85rem; }
.audit-bubble pre { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; font-family: inherit; margin: 0; overflow: visible; min-width: 0; max-width: 100%; padding: 0; background: transparent; color: inherit; border: 0; border-radius: 0; }
.audit-time { font-size: 0.7rem; color: #94918B; margin-top: 0.2rem; }
.audit-msg-row.user .audit-time { text-align: right; }
.audit-attachments { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.4rem; }
.audit-attachments img { max-width: 180px; max-height: 180px; border-radius: 6px; cursor: pointer; }
.audit-file-link { font-size: 0.85rem; padding: 0.3rem 0.5rem; background: rgba(37,99,235,0.08); border-radius: 6px; color: #141413; text-decoration: none; }
.audit-msg-row.user .audit-file-link { background: rgba(255,255,255,0.18); color: #fff; }
.kw-badge { display: inline-block; background: #F2DCD9; color: #8B342E; padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 0.75rem; margin-bottom: 0.25rem; }
.audit-rating { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.35rem; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.78rem; font-weight: 500; }
.audit-rating.up { background: var(--om-success-soft); color: var(--om-success); }
.audit-rating.down { background: var(--om-danger-soft); color: var(--om-danger); }
.audit-rating i { font-size: 0.85rem; }
.device-switch-bar { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; padding: 0.5rem 0.75rem; background: var(--om-cream-soft); border: 1px solid var(--om-border); border-radius: var(--om-radius); margin-bottom: 0.75rem; }
.device-switch-bar .device-tab { padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--om-border-strong); background: var(--om-paper); color: var(--om-ink); font-size: 0.82rem; text-decoration: none; transition: background 0.15s ease; }
.device-switch-bar .device-tab:hover { background: var(--om-cream-warm); }
.device-switch-bar .device-tab.current { background: var(--om-ink); color: var(--om-cream-soft); border-color: var(--om-ink); }
.device-switch-bar .device-tab .small { color: inherit; opacity: 0.7; margin-left: 0.3rem; font-size: 0.72rem; }
</style>
<div class="row justify-content-center">
    <div class="col-lg-10">
        <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
            <div>
                <h2 class="mb-1" style="color: #141413; font-weight: 700;">
                    <i class="bi bi-person-circle"></i> {{ conversation.student_name }}
                    <small class="text-muted" style="font-size: 1rem; font-weight: 400;">{{ conversation.student_class }}</small>
                </h2>
                <p class="text-muted mb-0">在「{{ assistant.title }}」中的对话</p>
            </div>
            <div class="d-flex gap-2 flex-wrap">
                <a href="{{ url_for('assistant_audit', assistant_id=assistant.id) }}" class="btn btn-secondary btn-sm">
                    <i class="bi bi-arrow-left"></i> 返回审计
                </a>
                <button class="btn btn-sm btn-primary" id="btn-student-report">
                    <i class="bi bi-magic"></i> 生成 AI 学情报告
                </button>
                <button class="btn btn-sm btn-outline-primary" id="btn-student-report-history">
                    <i class="bi bi-archive"></i> 历史报告
                </button>
                <button class="btn btn-sm btn-outline-{{ 'success' if conversation.is_blocked else 'danger' }}" id="btn-block">
                    {{ '解禁该学生' if conversation.is_blocked else '封禁该学生' }}
                </button>
            </div>
        </div>

        <!-- B8: 设备切换条（多个设备会话才显示） -->
        <div id="device-switch-bar" class="device-switch-bar" style="display:none;">
            <span class="text-muted small me-2"><i class="bi bi-phone"></i> 该学生在 <strong id="device-count">--</strong> 台设备上有独立会话：</span>
            <div id="device-tabs" class="d-flex gap-2 flex-wrap" style="flex: 1 1 auto;"></div>
        </div>

        <!-- 概览 -->
        <div class="row g-2 mb-3" style="font-size: 0.875rem;">
            <div class="col-md-3 col-sm-6">
                <div class="card"><div class="card-body py-2 px-3">
                    <div class="text-muted">首次进入</div>
                    <div style="font-weight:600;" id="info-started">{{ conversation.started_at.strftime('%Y-%m-%d %H:%M') if conversation.started_at else '—' }}</div>
                </div></div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="card"><div class="card-body py-2 px-3">
                    <div class="text-muted">最近活跃</div>
                    <div style="font-weight:600;" id="info-last">--</div>
                </div></div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="card"><div class="card-body py-2 px-3">
                    <div class="text-muted">今日已用 / 上限</div>
                    <div style="font-weight:600;" id="info-quota">--</div>
                </div></div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="card"><div class="card-body py-2 px-3">
                    <div class="text-muted">状态</div>
                    <div style="font-weight:600;" id="info-status">--</div>
                </div></div>
            </div>
        </div>

        <!-- 消息流 -->
        <div class="card">
            <div class="card-header" style="background-color: #F7F4EC; border-bottom: 1px solid #E5E0D8; font-weight: 600;">
                <i class="bi bi-chat-dots"></i> 消息流（共 <span id="msg-count">--</span> 条 · 每 5 秒自动刷新）
            </div>
            <div class="card-body" id="messages-area" style="background: #fafbfc; max-height: 70vh; overflow-y: auto;">
                <div class="text-center text-muted py-4">加载中...</div>
            </div>
        </div>
    </div>
</div>

<script>
(function () {
    const ASSISTANT_ID = {{ assistant.id }};
    const CONV_ID = {{ conversation.id }};
    const apiUrl = `/api/assistant/${ASSISTANT_ID}/audit/${CONV_ID}/messages`;
    const area = document.getElementById('messages-area');
    let lastIds = '';

    function escapeHtml(s) {
        return (s || '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
    }

    function renderMessage(m) {
        const role = m.role || 'user';
        const avatar = role === 'user' ? '我' : (role === 'system' ? '!' : 'AI');
        let attachments = '';
        if ((m.image_urls && m.image_urls.length) || (m.files && m.files.length) || (m.audio_urls && m.audio_urls.length) || m.generated_image_url || m.generated_video_url) {
            const audios = (m.audio_urls || []).map(u => `<audio controls preload="metadata" src="${u}" style="max-width:240px;height:34px;" title="学生的语音"></audio>`).join('');
            const imgs = (m.image_urls || []).map(u => `<img src="${u}" loading="lazy" onclick="window.open('${u}','_blank')">`).join('');
            const files = (m.files || []).map(f => `<a href="${f.url}" target="_blank" class="audit-file-link"><i class="bi bi-paperclip"></i> ${escapeHtml(f.name)}</a>`).join('');
            const genImg = m.generated_image_url ? `<img src="${m.generated_image_url}" loading="lazy" onclick="window.open('${m.generated_image_url}','_blank')" title="AI 生成">` : '';
            const genVideo = m.generated_video_url ? `<video controls preload="metadata" src="${m.generated_video_url}" style="max-width:280px;border-radius:6px;" title="AI 生成的视频"></video>` : '';
            attachments = `<div class="audit-attachments">${audios}${imgs}${genImg}${genVideo}${files}</div>`;
        }
        const kwBadge = m.triggered_keyword ? `<div class="kw-badge"><i class="bi bi-exclamation-triangle"></i> 命中 ${escapeHtml(m.triggered_keyword)}</div>` : '';
        const content = `<pre>${escapeHtml(m.content || '')}</pre>`;
        const time = `<div class="audit-time">${escapeHtml(m.created_at_full || '')}</div>`;
        if (role === 'user') {
            return `<div class="audit-msg-row user">
                <div class="audit-avatar">${avatar}</div>
                <div class="audit-msg-content">
                    ${kwBadge}
                    <div class="audit-bubble">${content}${attachments}</div>
                    ${time}
                </div>
            </div>`;
        }
        if (role === 'system') {
            return `<div class="audit-msg-row system">
                <div class="audit-msg-content" style="align-items:center; max-width:80%;">
                    ${kwBadge}
                    <div class="audit-bubble">${content}</div>
                    ${time}
                </div>
            </div>`;
        }
        let ratingBadge = '';
        if (m.rating === 1) ratingBadge = '<div class="audit-rating up"><i class="bi bi-hand-thumbs-up-fill"></i> 学生觉得有用</div>';
        else if (m.rating === -1) ratingBadge = '<div class="audit-rating down"><i class="bi bi-hand-thumbs-down-fill"></i> 学生觉得没用</div>';
        return `<div class="audit-msg-row assistant">
            <div class="audit-avatar">${avatar}</div>
            <div class="audit-msg-content">
                <div class="audit-bubble">${content}${attachments}</div>
                ${ratingBadge}
                ${time}
            </div>
        </div>`;
    }

    async function refresh() {
        try {
            const r = await fetch(apiUrl);
            if (!r.ok) return;
            const data = await r.json();
            const conv = data.conversation;
            const messages = data.messages || [];

            document.getElementById('msg-count').textContent = messages.length;
            document.getElementById('info-last').textContent = conv.last_active_at || '—';
            document.getElementById('info-quota').textContent = `${conv.daily_used} / ${conv.daily_limit}`;
            document.getElementById('info-status').innerHTML = conv.is_blocked
                ? '<span class="badge bg-danger">已封禁</span>' : '<span class="badge bg-success">活跃</span>';

            // B8 设备切换条
            const siblings = data.sibling_sessions || [];
            const bar = document.getElementById('device-switch-bar');
            const tabsEl = document.getElementById('device-tabs');
            if (siblings.length > 1) {
                document.getElementById('device-count').textContent = siblings.length;
                tabsEl.innerHTML = siblings.map((s, i) => {
                    const cls = s.is_current ? 'device-tab current' : 'device-tab';
                    const blocked = s.is_blocked ? '<i class="bi bi-slash-circle ms-1" title="已封禁"></i>' : '';
                    const lastTime = s.last_active_at ? s.last_active_at.split(' ')[1] || s.last_active_at : '—';
                    return s.is_current
                        ? `<span class="${cls}">设备 ${i + 1}（本设备） · ${s.msg_count} 条 ${blocked}</span>`
                        : `<a class="${cls}" href="/assistant/${ASSISTANT_ID}/audit/${s.id}">设备 ${i + 1} · ${s.msg_count} 条 · <span class="small">${lastTime}</span> ${blocked}</a>`;
                }).join('');
                bar.style.display = '';
            } else {
                bar.style.display = 'none';
            }

            // 仅在 ID 列表变化时刷新（避免抖动）
            const idsKey = messages.map(m => m.id).join(',');
            if (idsKey !== lastIds) {
                lastIds = idsKey;
                if (messages.length === 0) {
                    area.innerHTML = '<div class="text-center text-muted py-4">这位学生还没有发送任何消息</div>';
                } else {
                    area.innerHTML = messages.map(renderMessage).join('');
                    // 滚动到底
                    area.scrollTop = area.scrollHeight;
                }
            }

            // 更新封禁按钮文案
            const btn = document.getElementById('btn-block');
            btn.textContent = conv.is_blocked ? '解禁该学生' : '封禁该学生';
            btn.classList.toggle('btn-outline-success', conv.is_blocked);
            btn.classList.toggle('btn-outline-danger', !conv.is_blocked);
        } catch (e) { console.error(e); }
    }

    document.getElementById('btn-block').addEventListener('click', function () {
        const btn = this;
        btn.disabled = true;
        fetch(`/assistant/${ASSISTANT_ID}/audit/${CONV_ID}/block`, {method: 'POST'})
            .then(r => r.json())
            .then(d => { btn.disabled = false; if (d.success) refresh(); else alert(d.message); });
    });

    // B12 + B19: 生成单学生 AI 学情报告（流式）
    document.getElementById('btn-student-report').addEventListener('click', function () {
        var btn = this;
        var origLabel = btn.innerHTML;
        var className = {{ conversation.student_class | tojson }};
        var studentName = {{ conversation.student_name | tojson }};
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>AI 生成中...';
        var fd = new FormData();
        fd.append('student_class', className);
        fd.append('student_name', studentName);
        fd.append('stream', '1');
        streamReport(`/assistant/${ASSISTANT_ID}/audit/student_report`, fd, {
            scope: 'student',
            buildTitle: (m) => `${className} · ${studentName} · 学情报告`,
            buildSubtitle: (m) => `AI 助教「${m.assistant_title}」 · ${m.session_count || 0} 个会话 · ${m.message_count || 0} 条消息 · 由 ${m.model_used || ''} 流式生成中...`,
            buildFilename: (m) => `${className}_${studentName}_学情报告_${new Date().toISOString().slice(0,10)}.md`,
        }).finally(() => { btn.disabled = false; btn.innerHTML = origLabel; });
    });

    // B14: 历史报告（仅过滤这位学生的）
    document.getElementById('btn-student-report-history').addEventListener('click', function () {
        var className = {{ conversation.student_class | tojson }};
        var studentName = {{ conversation.student_name | tojson }};
        showReportHistoryModal({
            student_class: className,
            student_name: studentName,
            report_type: 'student',
        });
    });

    function showReportHistoryModal(filterParams) {
        var existing = document.getElementById('om-report-history-modal');
        if (existing) existing.remove();
        var wrap = document.createElement('div');
        wrap.id = 'om-report-history-modal';
        wrap.style.cssText = 'position:fixed;inset:0;background:rgba(20,17,12,0.55);z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem;';
        wrap.innerHTML = `
            <div style="background:var(--om-paper);border-radius:14px;max-width:720px;width:100%;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--om-border);">
                <div style="display:flex;justify-content:space-between;align-items:flex-start;padding:1rem 1.25rem;border-bottom:1px solid var(--om-border);">
                    <div>
                        <h4 style="margin:0;color:var(--om-ink);font-weight:600;font-size:1.05rem;"><i class="bi bi-archive"></i> 这位学生的 AI 报告</h4>
                        <p style="margin:0.25rem 0 0;color:var(--om-muted);font-size:0.82rem;" id="om-rh-subtitle">加载中...</p>
                    </div>
                    <button type="button" id="om-rh-close" style="background:transparent;border:none;font-size:1.4rem;color:var(--om-muted);cursor:pointer;padding:0 0.4rem;line-height:1;">×</button>
                </div>
                <div id="om-rh-list" style="padding:0.5rem 0;overflow-y:auto;flex:1;"></div>
            </div>`;
        document.body.appendChild(wrap);
        document.getElementById('om-rh-close').onclick = () => wrap.remove();
        wrap.addEventListener('click', e => { if (e.target === wrap) wrap.remove(); });
        loadReportHistory(filterParams);
    }

    function loadReportHistory(filterParams) {
        var qs = '';
        if (filterParams) {
            var parts = [];
            for (var k in filterParams) {
                if (filterParams[k]) parts.push(encodeURIComponent(k) + '=' + encodeURIComponent(filterParams[k]));
            }
            if (parts.length) qs = '?' + parts.join('&');
        }
        fetch(`/assistant/${ASSISTANT_ID}/audit/reports${qs}`)
            .then(r => r.json())
            .then(function (d) {
                var listEl = document.getElementById('om-rh-list');
                var subEl = document.getElementById('om-rh-subtitle');
                if (!listEl) return;
                var items = d.reports || [];
                subEl.textContent = items.length === 0
                    ? '该学生还没有任何历史报告'
                    : `共 ${items.length} 条报告`;
                if (items.length === 0) {
                    listEl.innerHTML = '<div style="padding:2rem;text-align:center;color:var(--om-muted);">点击上方「生成 AI 学情报告」即可创建第一份</div>';
                    return;
                }
                listEl.innerHTML = items.map(function (r) {
                    return `
                    <div style="padding:0.7rem 1.25rem;border-bottom:1px solid var(--om-border);display:flex;justify-content:space-between;gap:0.75rem;align-items:center;">
                        <div style="min-width:0;flex:1;">
                            <strong style="color:var(--om-ink);">${escapeHtml(r.scope_label || '—')}</strong>
                            <div style="color:var(--om-muted);font-size:0.78rem;margin-top:0.2rem;">
                                ${escapeHtml(r.created_at || '')} · ${r.message_count || 0} 条消息 · ${escapeHtml(r.model_used || '')}
                            </div>
                        </div>
                        <div style="display:flex;gap:0.4rem;flex-shrink:0;">
                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="viewHistoryReport(${r.id})">查看</button>
                            <button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteHistoryReport(${r.id}, this)">删除</button>
                        </div>
                    </div>`;
                }).join('');
            })
            .catch(e => alert('加载失败：' + e));
    }

    window.viewHistoryReport = function (id) {
        fetch(`/assistant/${ASSISTANT_ID}/audit/reports/${id}`)
            .then(r => r.json())
            .then(function (d) {
                if (!d.success) { alert(d.message || '加载失败'); return; }
                var safeName = (d.scope_label || 'report').replace(/[\\/:*?"<>|]/g, '_');
                showReportModal({
                    title: `${d.assistant_title} · ${d.scope_label} · 学情报告`,
                    subtitle: `${d.created_at || ''} · ${d.student_count || 0} 人 / ${d.message_count || 0} 条消息 · 由 ${d.model_used || ''} 生成`,
                    markdown: d.content,
                    filename: `${safeName}_学情报告_${(d.created_at || '').slice(0,10)}.md`,
                });
            });
    };

    window.deleteHistoryReport = function (id, btn) {
        if (!confirm('确定删除这份历史报告？')) return;
        btn.disabled = true;
        fetch(`/assistant/${ASSISTANT_ID}/audit/reports/${id}/delete`, {method: 'POST'})
            .then(r => r.json())
            .then(function (d) {
                if (d.success) {
                    var className = {{ conversation.student_class | tojson }};
                    var studentName = {{ conversation.student_name | tojson }};
                    loadReportHistory({student_class: className, student_name: studentName, report_type: 'student'});
                }
                else { alert(d.message || '删除失败'); btn.disabled = false; }
            })
            .catch(e => { alert('网络异常：' + e); btn.disabled = false; });
    };

    // ============ B19 流式报告 ============
    async function streamReport(url, formData, opts) {
        var modalRefs = null;
        var fullText = '';
        var meta = null;
        var done = false;
        try {
            var resp = await fetch(url, {method: 'POST', body: formData});
            if (!resp.ok || !resp.body) {
                var errText = '';
                try { var j = await resp.json(); errText = j.message || ('HTTP ' + resp.status); }
                catch { errText = 'HTTP ' + resp.status; }
                alert('生成失败：' + errText);
                return;
            }
            var reader = resp.body.getReader();
            var decoder = new TextDecoder('utf-8');
            var buf = '';
            while (!done) {
                var { value, done: streamDone } = await reader.read();
                if (streamDone) break;
                buf += decoder.decode(value, {stream: true});
                while (true) {
                    var i = buf.indexOf('\n\n');
                    if (i < 0) break;
                    var raw = buf.slice(0, i);
                    buf = buf.slice(i + 2);
                    handleSseEvent(raw);
                }
            }
        } catch (e) {
            if (modalRefs) modalRefs.error('网络异常：' + (e.message || e));
            else alert('网络异常：' + (e.message || e));
        }

        function handleSseEvent(raw) {
            var lines = raw.split('\n');
            var event = 'message';
            var dataStr = '';
            for (var L of lines) {
                if (L.startsWith('event: ')) event = L.slice(7).trim();
                else if (L.startsWith('data: ')) dataStr += L.slice(6);
            }
            if (!dataStr) return;
            var payload = null;
            try { payload = JSON.parse(dataStr); } catch { return; }

            if (event === 'meta') {
                meta = payload;
                modalRefs = openStreamingReportModal({
                    title: opts.buildTitle(meta),
                    subtitle: opts.buildSubtitle(meta),
                });
            } else if (event === 'delta' && payload.content) {
                fullText += payload.content;
                if (modalRefs) modalRefs.updateContent(fullText);
            } else if (event === 'done') {
                done = true;
                meta = Object.assign({}, meta || {}, payload);
                if (modalRefs) {
                    modalRefs.subtitle(`AI 助教「${meta.assistant_title || ''}」 · ${meta.session_count || 0} 个会话 · ${meta.message_count || 0} 条消息 · 由 ${meta.model_used || ''} 生成 · ${meta.created_at || ''}`);
                    modalRefs.finalize(fullText, opts.buildFilename(meta));
                }
            } else if (event === 'error') {
                done = true;
                if (modalRefs) modalRefs.error(payload.message || '生成失败');
                else alert('生成失败：' + (payload.message || '未知错误'));
            }
        }
    }

    function openStreamingReportModal(opts) {
        var existing = document.getElementById('om-report-modal');
        if (existing) existing.remove();
        var wrap = document.createElement('div');
        wrap.id = 'om-report-modal';
        wrap.style.cssText = 'position:fixed;inset:0;background:rgba(20,17,12,0.55);z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem;';
        wrap.innerHTML = `
            <div style="background:var(--om-paper);border-radius:14px;max-width:780px;width:100%;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--om-border);">
                <div style="display:flex;justify-content:space-between;align-items:flex-start;padding:1rem 1.25rem;border-bottom:1px solid var(--om-border);gap:1rem;">
                    <div style="min-width:0;flex:1;">
                        <h4 id="om-report-title" style="margin:0;color:var(--om-ink);font-weight:600;font-size:1.05rem;"></h4>
                        <p id="om-report-sub" style="margin:0.25rem 0 0;color:var(--om-muted);font-size:0.82rem;"></p>
                    </div>
                    <button type="button" id="om-report-close" style="background:transparent;border:none;font-size:1.4rem;color:var(--om-muted);cursor:pointer;padding:0 0.4rem;line-height:1;">×</button>
                </div>
                <div id="om-report-body" style="padding:1rem 1.25rem;overflow-y:auto;flex:1;line-height:1.7;color:var(--om-ink);"><div style="color:var(--om-muted);"><span class="spinner-border spinner-border-sm me-2"></span>AI 正在写报告...</div></div>
                <div id="om-report-footer" style="padding:0.75rem 1.25rem;border-top:1px solid var(--om-border);display:flex;gap:0.5rem;justify-content:flex-end;">
                    <span class="text-muted small">流式生成中...</span>
                </div>
            </div>`;
        document.body.appendChild(wrap);
        var titleEl = document.getElementById('om-report-title');
        var subEl = document.getElementById('om-report-sub');
        var bodyEl = document.getElementById('om-report-body');
        var footerEl = document.getElementById('om-report-footer');
        titleEl.textContent = opts.title;
        subEl.textContent = opts.subtitle;
        document.getElementById('om-report-close').onclick = () => wrap.remove();
        wrap.addEventListener('click', e => { if (e.target === wrap) wrap.remove(); });
        return {
            updateContent(md) {
                bodyEl.innerHTML = (window.marked && window.marked.parse) ? window.marked.parse(md) : ('<pre style="white-space:pre-wrap;">' + escapeHtml(md) + '</pre>');
                window.OM_renderMath && window.OM_renderMath(bodyEl);
                bodyEl.scrollTop = bodyEl.scrollHeight;
            },
            subtitle(t) { subEl.textContent = t; },
            finalize(md, filename) {
                bodyEl.innerHTML = (window.marked && window.marked.parse) ? window.marked.parse(md) : ('<pre style="white-space:pre-wrap;">' + escapeHtml(md) + '</pre>');
                window.OM_renderMath && window.OM_renderMath(bodyEl);
                footerEl.innerHTML = '';
                var copyBtn = document.createElement('button');
                copyBtn.type = 'button'; copyBtn.className = 'btn btn-secondary btn-sm';
                copyBtn.textContent = '复制 Markdown';
                copyBtn.onclick = function() {
                    try { navigator.clipboard.writeText(md); copyBtn.textContent = '已复制 ✓'; setTimeout(() => copyBtn.textContent = '复制 Markdown', 1500); }
                    catch { alert('请手动选中复制'); }
                };
                var dlBtn = document.createElement('button');
                dlBtn.type = 'button'; dlBtn.className = 'btn btn-primary btn-sm';
                dlBtn.textContent = '下载 .md';
                dlBtn.onclick = function() {
                    var blob = new Blob([md], {type: 'text/markdown;charset=utf-8'});
                    var a = document.createElement('a');
                    a.href = URL.createObjectURL(blob); a.download = filename;
                    document.body.appendChild(a); a.click();
                    setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(a.href); }, 100);
                };
                footerEl.appendChild(copyBtn);
                footerEl.appendChild(dlBtn);
            },
            error(msg) {
                bodyEl.innerHTML = '<div style="color:var(--om-danger);background:var(--om-danger-soft);padding:0.7rem 1rem;border-radius:6px;"><i class="bi bi-exclamation-triangle"></i> ' + escapeHtml(msg) + '</div>';
                footerEl.innerHTML = '<button type="button" class="btn btn-secondary btn-sm" onclick="document.getElementById(\'om-report-modal\').remove()">关闭</button>';
            },
        };
    }

    // 报告弹窗（学生 / 班级共用，**用于回看历史**报告）
    window.showReportModal = function (opts) {
        var existing = document.getElementById('om-report-modal');
        if (existing) existing.remove();
        var wrap = document.createElement('div');
        wrap.id = 'om-report-modal';
        wrap.style.cssText = 'position:fixed;inset:0;background:rgba(20,17,12,0.55);z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem;';
        wrap.innerHTML = `
            <div style="background:var(--om-paper);border-radius:14px;max-width:780px;width:100%;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--om-border);">
                <div style="display:flex;justify-content:space-between;align-items:flex-start;padding:1rem 1.25rem;border-bottom:1px solid var(--om-border);gap:1rem;">
                    <div style="min-width:0;flex:1;">
                        <h4 style="margin:0;color:var(--om-ink);font-weight:600;font-size:1.05rem;">${opts.title}</h4>
                        <p style="margin:0.25rem 0 0;color:var(--om-muted);font-size:0.82rem;">${opts.subtitle}</p>
                    </div>
                    <button type="button" id="om-report-close" style="background:transparent;border:none;font-size:1.4rem;color:var(--om-muted);cursor:pointer;padding:0 0.4rem;line-height:1;">×</button>
                </div>
                <div id="om-report-body" style="padding:1rem 1.25rem;overflow-y:auto;flex:1;line-height:1.7;color:var(--om-ink);"></div>
                <div style="padding:0.75rem 1.25rem;border-top:1px solid var(--om-border);display:flex;gap:0.5rem;justify-content:flex-end;">
                    <button type="button" id="om-report-copy" class="btn btn-secondary btn-sm">复制 Markdown</button>
                    <button type="button" id="om-report-download" class="btn btn-primary btn-sm">下载 .md</button>
                </div>
            </div>`;
        document.body.appendChild(wrap);
        var bodyEl = document.getElementById('om-report-body');
        bodyEl.innerHTML = (window.marked && window.marked.parse) ? window.marked.parse(opts.markdown) : ('<pre style="white-space:pre-wrap;">' + escapeHtml(opts.markdown) + '</pre>');
        window.OM_renderMath && window.OM_renderMath(bodyEl);
        document.getElementById('om-report-close').onclick = function () { wrap.remove(); };
        wrap.addEventListener('click', function (e) { if (e.target === wrap) wrap.remove(); });
        document.getElementById('om-report-copy').onclick = function () {
            try {
                navigator.clipboard.writeText(opts.markdown);
                this.textContent = '已复制 ✓';
                setTimeout(() => { this.textContent = '复制 Markdown'; }, 1500);
            } catch (err) { alert('请手动选中复制'); }
        };
        document.getElementById('om-report-download').onclick = function () {
            var blob = new Blob([opts.markdown], {type: 'text/markdown;charset=utf-8'});
            var a = document.createElement('a');
            a.href = URL.createObjectURL(blob);
            a.download = opts.filename;
            document.body.appendChild(a); a.click();
            setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(a.href); }, 100);
        };
    };

    refresh();
    setInterval(refresh, 5000);
})();
</script>
<!-- 报告里渲染 Markdown 用 -->
<link rel="stylesheet" href="{{ url_for('static', filename='vendor/katex/katex.min.css') }}">
<script src="{{ url_for('static', filename='vendor/marked/marked.min.js') }}"></script>
<script defer src="{{ url_for('static', filename='vendor/katex/katex.min.js') }}"></script>
<script defer src="{{ url_for('static', filename='vendor/katex/contrib/mhchem.min.js') }}"></script>
<script defer src="{{ url_for('static', filename='vendor/katex/contrib/auto-render.min.js') }}"></script>
<script>
// 共享：md + 数学公式渲染配置（KaTeX delimiters / 不污染代码块）
window.OM_KATEX_OPTIONS = window.OM_KATEX_OPTIONS || {
    delimiters: [
        {left: '$$', right: '$$', display: true},
        {left: '$',  right: '$',  display: false},
        {left: '\\(', right: '\\)', display: false},
        {left: '\\[', right: '\\]', display: true},
    ],
    throwOnError: false,
    ignoredTags: ['pre', 'code', 'script', 'noscript', 'style', 'textarea'],
};
window.OM_renderMath = function(el){ if (window.renderMathInElement && el) { try { window.renderMathInElement(el, window.OM_KATEX_OPTIONS); } catch(e){} } };
</script>
{% endblock %}