{% extends "base.html" %}

{% block title %}{{ exam.title }} - FlashExam{% endblock %}

{% block head %}
<!-- Highlight.js for code syntax highlighting -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/java.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/cpp.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/sql.min.js"></script>
<style>
.exam-page { padding: 0; }
.exam-topbar { position: sticky; top: 56px; z-index: 100; background: #1e293b; color: white; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #3b82f6; }
.exam-topbar h1 { font-size: 1.1rem; margin: 0; display: flex; align-items: center; gap: 8px; }
.exam-info { display: flex; gap: 20px; align-items: center; }
.timer { background: #3b82f6; padding: 6px 14px; border-radius: 20px; font-weight: bold; font-family: monospace; font-size: 1.1rem; }
.timer.warn { background: #f59e0b; color: #1a1a1a; }
.timer.danger { background: #ef4444; }
.progress-text { font-size: 0.95rem; }

.exam-container { display: flex; min-height: calc(100vh - 120px); }
.materials-panel { width: 38%; min-width: 300px; max-width: 500px; background: var(--card-bg); border-right: 2px solid var(--border-color); overflow-y: auto; height: calc(100vh - 120px); position: sticky; top: 120px; }
.materials-header { background: var(--bg-tertiary); padding: 12px 16px; font-weight: bold; border-bottom: 2px solid var(--border-color); display: flex; align-items: center; gap: 8px; }
.materials-body { padding: 12px; }
.material-item { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
.material-title { background: var(--bg-tertiary); padding: 8px 12px; font-size: 0.9rem; font-weight: 600; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
.material-nums { font-size: 0.8rem; color: var(--text-muted); font-weight: normal; }
.material-content { padding: 12px; font-size: 0.9rem; line-height: 1.6; white-space: pre-wrap; color: var(--text-primary); }
.material-code { background: #282c34; border-radius: 6px; margin: 8px; overflow: hidden; }
.material-code pre { margin: 0; padding: 12px; overflow-x: auto; font-size: 0.85rem; line-height: 1.5; }
.material-code code { font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace; }

.questions-panel { flex: 1; padding: 16px 20px; padding-bottom: 80px; overflow-y: auto; }
.question-card { background: var(--card-bg); border: 2px solid var(--border-color); border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
.question-head { background: var(--bg-tertiary); padding: 10px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 2px solid var(--border-color); }
.q-num { background: #3b82f6; color: white; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9rem; }
.q-type { background: #dbeafe; color: #1e40af; padding: 3px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: 600; }
.q-score { margin-left: auto; color: var(--text-secondary); font-weight: 600; }
.question-body { padding: 14px; }
.q-text { line-height: 1.7; margin-bottom: 12px; color: var(--text-primary); }
.q-text pre { background: #282c34; border-radius: 6px; padding: 12px; overflow-x: auto; margin: 8px 0; }
.q-text code { font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace; font-size: 0.9rem; }

.opts { display: flex; flex-direction: column; gap: 6px; }
.opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--bg-secondary); border: 2px solid var(--border-color); border-radius: 8px; cursor: pointer; transition: all 0.15s; }
.opt:hover { border-color: #3b82f6; background: #eff6ff; }
.opt input { display: none; }
.opt-mark { width: 24px; height: 24px; border-radius: 50%; background: #94a3b8; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.85rem; flex-shrink: 0; }
.opt input:checked + .opt-mark { background: #3b82f6; }
.opt-txt { padding-top: 2px; color: var(--text-primary); }

.judge-opts { display: flex; gap: 12px; justify-content: center; }
.judge-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 24px; background: var(--bg-secondary); border: 2px solid var(--border-color); border-radius: 10px; cursor: pointer; min-width: 100px; transition: all 0.15s; }
.judge-opt:hover { border-color: #3b82f6; }
.judge-opt input { display: none; }
.judge-mark { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-tertiary); border: 2px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--text-secondary); transition: all 0.15s; }
.judge-opt input:checked ~ .judge-mark { background: #3b82f6; border-color: #3b82f6; color: white; }
.judge-label { font-weight: 600; color: var(--text-primary); }

.answer-input { width: 100%; padding: 10px 12px; border: 2px solid var(--border-color); border-radius: 8px; font-size: 1rem; color: var(--text-primary); background: var(--input-bg); transition: border-color 0.15s; }
.answer-input:focus { outline: none; border-color: #3b82f6; }
.answer-textarea { min-height: 100px; resize: vertical; line-height: 1.6; }
.code-input { font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace; font-size: 0.9rem; background: #1e293b; color: #e2e8f0; border-color: #334155; }

.submit-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--card-bg); border-top: 2px solid var(--border-color); padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; z-index: 100; }
.submit-stat { color: var(--text-secondary); }
.submit-stat strong { color: var(--text-primary); }
.submit-btn { background: linear-gradient(135deg, #3b82f6, #6366f1); color: white; border: none; padding: 10px 24px; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.submit-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); }
.submit-btn:disabled { background: #94a3b8; cursor: not-allowed; transform: none; box-shadow: none; }

.no-materials { display: none; }
#saveIndicator { transition: all 0.3s ease; }
#saveIndicator i { animation: none; }
#saveIndicator.saving i { animation: pulse 1s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

[data-theme="dark"] .opt:hover { background: #1e3a5f; }
</style>
{% endblock %}

{% block content %}
<div class="exam-page">
    <div class="exam-topbar">
        <h1><i class="bi bi-file-text"></i> {{ exam.title }}</h1>
        <div class="exam-info">
            <div class="timer" id="timer">{{ exam.duration_minutes }}:00</div>
            <div class="progress-text">已答 <strong id="ans">0</strong>/{{ questions|length }}</div>
        </div>
    </div>

    <div class="exam-container">
        <div class="materials-panel" id="matPanel">
            <div class="materials-header"><i class="bi bi-journal-text"></i> 考试材料</div>
            <div class="materials-body" id="matBody"></div>
        </div>

        <div class="questions-panel">
            <form id="examForm">
                {% for q in questions %}
                <div class="question-card" id="q{{ q.id }}">
                    <div class="question-head">
                        <span class="q-num">{{ loop.index }}</span>
                        <span class="q-type">{{ q.question_type }}</span>
                        <span class="q-score">{{ q.score }}分</span>
                    </div>
                    <div class="question-body">
                        <div class="q-text">{{ q.question_text | safe_markdown }}</div>
                        
                        {% set has_mat = q.material and q.material|length > 50 %}
                        {% set is_code = has_mat and ('{' in q.material or 'def ' in q.material or '#include' in q.material) %}
                        
                        {% if q.question_type == 'choice' and q.options is mapping and q.options and not has_mat %}
                        <div class="opts">
                            {% for k, v in q.options.items() %}
                            <label class="opt">
                                <input type="radio" name="question_{{ q.id }}" value="{{ k }}" onchange="upd()">
                                <span class="opt-mark">{{ k }}</span>
                                <span class="opt-txt">{{ v }}</span>
                            </label>
                            {% endfor %}
                        </div>
                        
                        {% elif q.question_type == 'judge' and not has_mat %}
                        <div class="judge-opts">
                            <label class="judge-opt">
                                <input type="radio" name="question_{{ q.id }}" value="True" onchange="upd()">
                                <span class="judge-mark"><i class="bi bi-check"></i></span>
                                <span class="judge-label">正确</span>
                            </label>
                            <label class="judge-opt">
                                <input type="radio" name="question_{{ q.id }}" value="False" onchange="upd()">
                                <span class="judge-mark"><i class="bi bi-x"></i></span>
                                <span class="judge-label">错误</span>
                            </label>
                        </div>
                        
                        {% elif is_code %}
                        <textarea class="answer-input code-input answer-textarea" name="question_{{ q.id }}" placeholder="输入代码答案..." oninput="upd()"></textarea>
                        
                        {% else %}
                        <textarea class="answer-input answer-textarea" name="question_{{ q.id }}" placeholder="输入答案..." oninput="upd()"></textarea>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </form>
        </div>
    </div>

    <div class="submit-bar">
        <div class="submit-stat">
            已答 <strong id="ans2">0</strong> 题，未答 <strong id="unans">{{ questions|length }}</strong> 题
            <span id="saveIndicator" class="ms-3 text-muted" style="font-size: 0.85rem;">
                <i class="bi bi-cloud-check"></i> 已保存
            </span>
        </div>
        <button type="button" class="submit-btn" id="subBtn" onclick="doSubmit()"><i class="bi bi-send"></i> 提交考试</button>
        <button type="button" class="btn btn-outline-secondary btn-sm ms-2" id="dlBtn" onclick="downloadPaper()" title="下载试卷和答案备份到本地"><i class="bi bi-download"></i> 备份到本地</button>
    </div>
</div>

<div class="modal fade" id="confModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header"><h5 class="modal-title">确认提交</h5></div>
            <div class="modal-body">
                <p>已答 <strong id="mAns">0</strong>/{{ questions|length }} 题</p>
                <p class="text-muted">提交后无法修改</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">继续答题</button>
                <button type="button" class="btn btn-primary" onclick="submitForm()">确认提交</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const examId = {{ exam.id }};
const total = {{ questions|length }};
{% if remaining_seconds %}
let sec = {{ remaining_seconds }};
{% else %}
let sec = {{ exam.duration_minutes * 60 }};
{% endif %}
let done = false;
let lastSaveTime = 0;
let saveTimeout = null;
let currentQuestionId = null;
let online = navigator.onLine;
let pendingSubmit = false;   // 标记有待补交的提交
let submitAttempts = 0;

// ===== 离线接力：下载试卷+答案到本地 =====
function downloadPaper() {
    const btn = document.getElementById('dlBtn');
    btn.innerHTML = '<i class="bi bi-hourglass"></i> 导出中...';
    btn.disabled = true;
    const url = '/student/exam/' + examId + '/export-paper';
    fetch(url).then(r => {
        if (!r.ok) throw new Error('导出失败');
        const disposition = r.headers.get('Content-Disposition') || '';
        const m = disposition.match(/filename="?(.+?)"?$/);
        const filename = m ? m[1] : 'exam_' + examId + '_backup.json';
        return r.blob().then(blob => ({ blob, filename }));
    }).then(({ blob, filename }) => {
        const a = document.createElement('a');
        a.href = URL.createObjectURL(blob);
        a.download = filename;
        a.click();
        URL.revokeObjectURL(a.href);
        btn.innerHTML = '<i class="bi bi-download"></i> 备份到本地';
        btn.disabled = false;
    }).catch(e => {
        alert('导出失败: ' + e.message + '\n请检查网络后重试');
        btn.innerHTML = '<i class="bi bi-download"></i> 备份到本地';
        btn.disabled = false;
    });
}

const serverAnswers = {{ saved_answers | tojson if saved_answers else '{}' }};

const qdata = [
    {% for q in questions %}
    {id:{{ q.id }}, mat:"{{ q.material | replace('\\','\\\\') | replace('"','\\"') | replace('\n','\\n') if q.material else '' }}"}{% if not loop.last %},{% endif %}
    {% endfor %}
];

// ===== 离线队列：保存失败时入队，恢复后补发 =====
function getOfflineQueue() {
    try { return JSON.parse(localStorage.getItem('exQ'+examId) || '[]'); }
    catch(e) { return []; }
}
function pushOfflineQueue(payload) {
    const q = getOfflineQueue();
    q.push({t: Date.now(), d: payload});
    // 最多保留 20 条，避免无限增长
    if (q.length > 20) q.shift();
    localStorage.setItem('exQ'+examId, JSON.stringify(q));
}
function clearOfflineQueue() {
    localStorage.removeItem('exQ'+examId);
}
function flushOfflineQueue() {
    if (!navigator.onLine) return;
    const q = getOfflineQueue();
    if (q.length === 0) return;
    clearOfflineQueue();
    q.forEach(item => saveToServer(true, item.d));
}

// 收集表单数据为对象
function collectAnswers() {
    const fd = new FormData(document.getElementById('examForm'));
    const d = {};
    fd.forEach((v,k) => d[k]=v);
    return d;
}

onload = function() {
    setInterval(tick, 1000);
    loadMat();
    loadServerAnswers();
    loadSaved();
    upd();
    setInterval(autoSave, 30000);
    setupAutoSave();
    setupQuestionObserver();
    // 网络状态监听：恢复后自动补发队列
    window.addEventListener('online', function() {
        online = true;
        console.log('[EXAM] 网络恢复，补发离线队列');
        flushOfflineQueue();
        if (pendingSubmit) {
            pendingSubmit = false;
            const fd = new FormData(document.getElementById('examForm'));
            doSubmitWithRetry(fd, 0, document.getElementById('subBtn'));
        }
    });
    window.addEventListener('offline', function() {
        online = false;
        console.log('[EXAM] 网络断开，启用离线模式');
    });
    // 启动时尝试补发
    flushOfflineQueue();
};

function setupAutoSave() {
    document.querySelectorAll('input[type="radio"]').forEach(r => {
        r.addEventListener('change', function() {
            upd();
            debouncedSave();
        });
    });
    
    document.querySelectorAll('textarea').forEach(t => {
        t.addEventListener('input', function() {
            upd();
            debouncedSave();
        });
        
        t.addEventListener('blur', function() {
            saveToServer();
        });
    });
}

function setupQuestionObserver() {
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting && entry.intersectionRatio > 0.5) {
                const qId = entry.target.id.replace('q', '');
                if (currentQuestionId !== qId) {
                    if (currentQuestionId !== null) {
                        debouncedSave();
                    }
                    currentQuestionId = qId;
                }
            }
        });
    }, { threshold: 0.5 });
    
    document.querySelectorAll('.question-card').forEach(card => {
        observer.observe(card);
    });
}

function debouncedSave() {
    if (saveTimeout) clearTimeout(saveTimeout);
    saveTimeout = setTimeout(saveToServer, 2000);
}

function showSaveIndicator(status) {
    const indicator = document.getElementById('saveIndicator');
    if (!indicator) return;
    
    if (status === 'saving') {
        indicator.innerHTML = '<i class="bi bi-cloud-arrow-up text-warning"></i> 保存中...';
    } else if (status === 'saved') {
        indicator.innerHTML = '<i class="bi bi-cloud-check text-success"></i> 已保存';
    } else if (status === 'offline') {
        indicator.innerHTML = '<i class="bi bi-cloud-slash text-secondary"></i> 离线已暂存';
    } else if (status === 'error') {
        indicator.innerHTML = '<i class="bi bi-cloud-x text-danger"></i> 保存失败';
    }
}

function autoSave() {
    if (done) return;
    saveToServer();
}

function saveToServer(force, prebuiltData) {
    if (done) return;
    
    const now = Date.now();
    if (!force && now - lastSaveTime < 3000) return;
    
    // 离线：写入本地队列，等恢复后补发
    if (!navigator.onLine) {
        const d = prebuiltData || collectAnswers();
        localStorage.setItem('ex'+examId, JSON.stringify(d));
        pushOfflineQueue(d);
        showSaveIndicator('offline');
        return;
    }
    
    showSaveIndicator('saving');
    
    let fd;
    if (prebuiltData) {
        fd = new FormData();
        Object.keys(prebuiltData).forEach(k => fd.append(k, prebuiltData[k]));
    } else {
        fd = new FormData(document.getElementById('examForm'));
    }
    const d = prebuiltData || collectAnswers();
    localStorage.setItem('ex'+examId, JSON.stringify(d));
    
    fetch('/student/exam/'+examId+'/save', {
        method: 'POST', 
        body: fd
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            showSaveIndicator('saved');
            lastSaveTime = Date.now();
        } else {
            // 服务器返回失败：入队稍后重试
            pushOfflineQueue(d);
            showSaveIndicator('error');
        }
    })
    .catch(() => {
        // 网络错误：入队，等恢复后补发
        pushOfflineQueue(d);
        showSaveIndicator(navigator.onLine ? 'error' : 'offline');
    });
}

function tick() {
    if (sec <= 0) { if (!done) submitForm(); return; }
    sec--;
    let m = Math.floor(sec/60), s = sec%60;
    document.getElementById('timer').textContent = m + ':' + (s<10?'0':'') + s;
    document.getElementById('timer').className = 'timer' + (sec<=300?' danger':sec<=600?' warn':'');
    // 时间过半时加速自动保存
    if (sec > 0 && sec % 60 === 0) autoSave();
}

function loadMat() {
    const map = new Map();
    qdata.forEach((q,i) => {
        if (q.mat && q.mat.length > 50) {
            const k = q.mat.substring(0,50);
            if (!map.has(k)) map.set(k, {txt:q.mat, qs:[]});
            map.get(k).qs.push(i+1);
        }
    });
    
    const body = document.getElementById('matBody');
    if (map.size === 0) {
        document.getElementById('matPanel').classList.add('no-materials');
        return;
    }
    
    let idx = 0;
    map.forEach(m => {
        idx++;
        const isCode = detectCode(m.txt);
        const div = document.createElement('div');
        div.className = 'material-item';
        
        if (isCode) {
            const lang = detectLang(m.txt);
            div.innerHTML = '<div class="material-title"><span>代码片段 '+idx+' ('+lang+')</span><span class="material-nums">题 '+m.qs.join(',')+'</span></div>'+
                '<div class="material-code"><pre><code class="language-'+lang+'">'+esc(m.txt)+'</code></pre></div>';
        } else {
            div.innerHTML = '<div class="material-title"><span>材料 '+idx+'</span><span class="material-nums">题 '+m.qs.join(',')+'</span></div>'+
                '<div class="material-content">'+esc(m.txt)+'</div>';
        }
        body.appendChild(div);
    });
    
    document.querySelectorAll('pre code').forEach((block) => {
        hljs.highlightElement(block);
    });
}

function detectCode(txt) {
    if (!txt) return false;
    const codeIndicators = [
        '{', '}', '()', '[]', 'def ', 'class ', 'import ', 'from ', 'return ',
        '#include', '#define', 'public ', 'private ', 'void ', 'int ', 'string ',
        'function ', 'const ', 'let ', 'var ', 'if (', 'for (', 'while (',
        'SELECT ', 'INSERT ', 'UPDATE ', 'CREATE TABLE', 'print(', 'console.log',
        'System.out', 'printf', 'scanf', 'cout', 'cin'
    ];
    let count = 0;
    for (const indicator of codeIndicators) {
        if (txt.includes(indicator)) count++;
    }
    return count >= 2;
}

function detectLang(txt) {
    if (!txt) return 'plaintext';
    if (/def\s+\w+\s*\(|import\s+\w+|from\s+\w+\s+import|class\s+\w+\s*:|print\s*\(/i.test(txt)) return 'python';
    if (/public\s+class|private\s+void|System\.out\.print|import\s+java\./i.test(txt)) return 'java';
    if (/#include|using\s+namespace|int\s+main\s*\(|cout\s*<<|cin\s*>>/i.test(txt)) return 'cpp';
    if (/function\s+\w+|const\s+\w+\s*=|let\s+\w+\s*=|var\s+\w+\s*=|=>\s*\{|console\.log/i.test(txt)) return 'javascript';
    if (/SELECT\s+|INSERT\s+INTO|UPDATE\s+|CREATE\s+TABLE|FROM\s+\w+\s+WHERE/i.test(txt)) return 'sql';
    return 'plaintext';
}

function esc(t) {
    const d = document.createElement('div');
    d.textContent = t;
    return d.innerHTML;
}

function upd() {
    let n = 0;
    document.querySelectorAll('.question-card').forEach(c => {
        if (c.querySelectorAll('input[type="radio"]:checked').length) n++;
        else c.querySelectorAll('textarea').forEach(t => { if(t.value.trim()) n++; });
    });
    document.getElementById('ans').textContent = n;
    document.getElementById('ans2').textContent = n;
    document.getElementById('unans').textContent = total - n;
    document.getElementById('mAns').textContent = n;
}

function loadServerAnswers() {
    if (!serverAnswers || Object.keys(serverAnswers).length === 0) return;
    
    Object.keys(serverAnswers).forEach(k => {
        let key = k;
        if (!key.startsWith('question_') && !key.startsWith('q')) {
            key = 'question_' + key;
        } else if (key.startsWith('q') && !key.startsWith('question_')) {
            key = 'question_' + key.substring(1);
        }
        
        const el = document.querySelector('[name="'+key+'"]');
        if (el) {
            if (el.type === 'radio') {
                const r = document.querySelector('[name="'+key+'"][value="'+serverAnswers[k]+'"]');
                if (r) r.checked = true;
            } else {
                el.value = serverAnswers[k];
            }
        }
    });
    
    const fd = new FormData(document.getElementById('examForm'));
    const d = {};
    fd.forEach((v,k) => d[k]=v);
    localStorage.setItem('ex'+examId, JSON.stringify(d));
}

function loadSaved() {
    const s = localStorage.getItem('ex'+examId);
    if (!s) return;
    try {
        const d = JSON.parse(s);
        Object.keys(d).forEach(k => {
            const el = document.querySelector('[name="'+k+'"]');
            if (el) {
                if (el.type === 'radio') {
                    const r = document.querySelector('[name="'+k+'"][value="'+d[k]+'"]');
                    if (r) r.checked = true;
                } else {
                    el.value = d[k];
                }
            }
        });
        upd();
    } catch(e) {}
}

function doSubmit() {
    upd();
    new bootstrap.Modal(document.getElementById('confModal')).show();
}

function submitForm() {
    if (done) return;
    done = true;
    bootstrap.Modal.getInstance(document.getElementById('confModal'))?.hide();
    
    const btn = document.getElementById('subBtn');
    btn.innerHTML = '<i class="bi bi-hourglass"></i> 提交中...';
    btn.disabled = true;
    
    // 提交前强制最后一次保存（即便离线也写入本地）
    const fd = new FormData(document.getElementById('examForm'));
    const d = collectAnswers();
    localStorage.setItem('ex'+examId, JSON.stringify(d));
    
    // 离线时：暂存并等待恢复后自动补交
    if (!navigator.onLine) {
        pendingSubmit = true;
        btn.innerHTML = '<i class="bi bi-wifi-off"></i> 等待网络...';
        btn.disabled = false;
        alert('当前网络不可用，答案已暂存到本地。网络恢复后将自动提交。请保持页面打开。');
        return;
    }
    
    doSubmitWithRetry(fd, 0, btn);
}

function doSubmitWithRetry(fd, attempt, btn) {
    const maxAttempts = 5;
    submitAttempts = attempt + 1;
    
    if (btn) {
        btn.innerHTML = '<i class="bi bi-arrow-clockwise"></i> 提交中(' + submitAttempts + '/' + maxAttempts + ')';
    }
    
    fetch('/student/exam/'+examId+'/submit', {method:'POST', body:fd})
    .then(r => {
        if (!r.ok) throw new Error('网络错误: ' + r.status);
        return r.json();
    })
    .then(d => {
        if (d.success) {
            // 清理所有本地缓存
            localStorage.removeItem('ex'+examId);
            clearOfflineQueue();
            alert('提交成功！');
            location.href = '/student/results';
        } else if (d.redirect) {
            alert('登录已过期，请重新登录');
            location.href = d.redirect;
        } else if (d.backup_saved) {
            // DB失败但答案已备份：告知用户可联系监考
            done = false;
            if (btn) {
                btn.innerHTML = '<i class="bi bi-send"></i> 重新提交';
                btn.disabled = false;
            }
            alert('提交遇到问题，但您的答案已安全备份。\n\n' + (d.message || '') + '\n\n可点击重新提交，或联系监考老师处理。');
        } else if (attempt < maxAttempts - 1) {
            // 指数退避重试
            const retryDelay = 1000 * Math.pow(2, attempt);
            if (btn) btn.innerHTML = '<i class="bi bi-arrow-clockwise"></i> ' + (retryDelay/1000) + '秒后重试';
            setTimeout(() => doSubmitWithRetry(fd, attempt + 1, btn), retryDelay);
        } else {
            done = false;
            if (btn) {
                btn.innerHTML = '<i class="bi bi-send"></i> 提交考试';
                btn.disabled = false;
            }
            // 答案已在本地，可手动重试
            alert('提交失败: ' + (d.message || '未知错误') + '\n\n答案已保存在本地，请检查网络后重试，或联系监考老师处理。');
        }
    })
    .catch(e => {
        console.error('Submit error:', e);
        if (!navigator.onLine) {
            // 网络中断：等待恢复后自动补交
            pendingSubmit = true;
            if (btn) {
                btn.innerHTML = '<i class="bi bi-wifi-off"></i> 等待网络...';
                btn.disabled = false;
            }
            alert('网络已断开，答案已暂存到本地。网络恢复后将自动提交。请保持页面打开。');
        } else if (attempt < maxAttempts - 1) {
            const retryDelay = 1000 * Math.pow(2, attempt);
            if (btn) btn.innerHTML = '<i class="bi bi-arrow-clockwise"></i> ' + (retryDelay/1000) + '秒后重试';
            setTimeout(() => doSubmitWithRetry(fd, attempt + 1, btn), retryDelay);
        } else {
            done = false;
            if (btn) {
                btn.innerHTML = '<i class="bi bi-send"></i> 提交考试';
                btn.disabled = false;
            }
            alert('提交失败: 网络错误\n\n答案已保存在本地，请检查网络连接后重试，或联系监考老师。');
        }
    });
}

// 页面卸载/隐藏时：用 sendBeacon 兜底保存
onbeforeunload = function() {
    if (done) return;
    const fd = new FormData(document.getElementById('examForm'));
    const d = {};
    fd.forEach((v,k) => d[k]=v);
    localStorage.setItem('ex'+examId, JSON.stringify(d));
    try {
        navigator.sendBeacon('/student/exam/'+examId+'/save', fd);
    } catch(e) {}
};

// 页面重新可见时补发离线队列
document.addEventListener('visibilitychange', function() {
    if (!document.hidden && navigator.onLine) {
        flushOfflineQueue();
    }
});
</script>
{% endblock %}