{% 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 }}</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>
    </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;

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 %}
];

onload = function() {
    setInterval(tick, 1000);
    loadMat();
    loadServerAnswers();
    loadSaved();
    upd();
    setInterval(autoSave, 30000);
    setupAutoSave();
    setupQuestionObserver();
};

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 === 'error') {
        indicator.innerHTML = '<i class="bi bi-cloud-x text-danger"></i> 保存失败';
    }
}

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

function saveToServer() {
    if (done) return;
    
    const now = Date.now();
    if (now - lastSaveTime < 3000) return;
    
    showSaveIndicator('saving');
    
    const fd = new FormData(document.getElementById('examForm'));
    const d = {};
    fd.forEach((v,k) => d[k]=v);
    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 {
            showSaveIndicator('error');
        }
    })
    .catch(() => {
        showSaveIndicator('error');
    });
}

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':'');
}

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'));
    
    doSubmitWithRetry(fd, 0, btn);
}

function doSubmitWithRetry(fd, attempt, btn) {
    const maxAttempts = 3;
    
    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);
            alert('提交成功！');
            location.href = '/student/results';
        } else {
            if (d.redirect) {
                alert('登录已过期，请重新登录');
                location.href = d.redirect;
            } else if (attempt < maxAttempts - 1) {
                if (confirm('提交失败: ' + (d.message || '未知错误') + '\n\n是否重试？')) {
                    done = false;
                    btn.innerHTML = '<i class="bi bi-arrow-clockwise"></i> 重试提交';
                    btn.disabled = false;
                }
            } else {
                done = false;
                btn.innerHTML = '<i class="bi bi-send"></i> 提交考试';
                btn.disabled = false;
                alert('提交失败: ' + (d.message || '未知错误') + '\n\n请联系监考老师处理');
            }
        }
    })
    .catch(e => {
        console.error('Submit error:', e);
        if (attempt < maxAttempts - 1) {
            const retryDelay = 1000 * (attempt + 1);
            btn.innerHTML = '<i class="bi bi-arrow-clockwise"></i> 重试中...';
            setTimeout(() => {
                doSubmitWithRetry(fd, attempt + 1, btn);
            }, retryDelay);
        } else {
            done = false;
            btn.innerHTML = '<i class="bi bi-send"></i> 提交考试';
            btn.disabled = false;
            alert('提交失败: 网络错误\n\n请检查网络连接后重试，或联系监考老师');
        }
    });
}

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));
    navigator.sendBeacon('/student/exam/'+examId+'/save', fd);
};
</script>
{% endblock %}