{% extends "base.html" %}

{% block title %}{{ exam.title if exam else '参加考试' }} - FlashExam{% endblock %}

{% block head %}
<!-- 代码高亮CSS -->
<link rel="stylesheet" href="/static/css/libs/prism/prism.min.css">
<link rel="stylesheet" href="/static/css/libs/prism/prism-tomorrow.min.css">

<style>
    .tpo-container {
        height: calc(100vh - 200px);
        overflow: hidden;
    }
    
    .reading-panel {
        height: 100%;
        overflow-y: auto;
        border-right: 2px solid #dee2e6;
        padding-right: 15px;
        background: #f8f9fa;
    }
    
    .questions-panel {
        height: 100%;
        overflow-y: auto;
        padding-left: 15px;
    }
    
    .passage-content {
        font-size: 16px;
        line-height: 1.6;
        font-family: 'Georgia', 'Times New Roman', serif;
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        margin-bottom: 20px;
    }
    
    .passage-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 15px;
        border-radius: 8px 8px 0 0;
        margin: -20px -20px 20px -20px;
    }
    
    .question-card {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        margin-bottom: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    .question-header {
        background: #f8f9fa;
        padding: 10px 15px;
        border-bottom: 1px solid #dee2e6;
        border-radius: 8px 8px 0 0;
    }
    
    .question-body {
        padding: 15px;
    }
    
    /* 代码块样式 */
    .code-block {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        margin: 15px 0;
        overflow: hidden;
    }
    
    .code-header {
        background: #343a40;
        color: white;
        padding: 8px 15px;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .code-language {
        background: #007bff;
        color: white;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 10px;
    }
    
    .code-content {
        padding: 0;
        background: #f8f9fa;
    }
    
    .code-content pre {
        margin: 0;
        padding: 15px;
        background: transparent;
        border: none;
        font-family: 'Fira Code', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
        font-size: 14px;
        line-height: 1.5;
    }
    
    /* 选项样式 */
    .option-list {
        list-style: none;
        padding: 0;
    }
    
    .option-item {
        background: #f8f9fa;
        border: 2px solid transparent;
        border-radius: 8px;
        padding: 12px 15px;
        margin-bottom: 10px;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
    }
    
    .option-item:hover {
        background: #e9ecef;
        border-color: #dee2e6;
    }
    
    .option-item.selected {
        background: #e3f2fd;
        border-color: #2196f3;
        color: #1976d2;
    }
    
    .option-label {
        background: #6c757d;
        color: white;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        margin-right: 12px;
        font-size: 14px;
    }
    
    .option-item.selected .option-label {
        background: #2196f3;
    }

    /* 判断题样式 */
    .judge-options {
        display: flex;
        gap: 15px;
        justify-content: center;
        margin: 20px 0;
    }
    
    .judge-option {
        background: white;
        border: 2px solid #dee2e6;
        border-radius: 12px;
        padding: 15px 25px;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 120px;
        justify-content: center;
    }
    
    .judge-option:hover {
        border-color: #adb5bd;
    }
    
    .judge-option.selected {
        border-color: #28a745;
        background: #d4edda;
        color: #155724;
    }
    
    .judge-option.false.selected {
        border-color: #dc3545;
        background: #f8d7da;
        color: #721c24;
    }
    
    /* 文本输入样式 */
    .text-input, .code-editor {
        border: 2px solid #dee2e6;
        border-radius: 8px;
        padding: 15px;
        font-size: 16px;
        line-height: 1.5;
        resize: vertical;
        transition: border-color 0.2s ease;
    }
    
    .code-editor {
        font-family: 'Fira Code', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
        font-size: 14px;
        background: #f8f9fa;
        min-height: 200px;
    }
    
    .text-input:focus, .code-editor:focus {
        border-color: #007bff;
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    
    .progress-bar-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: rgba(255,255,255,0.95);
        padding: 10px;
        border-bottom: 1px solid #dee2e6;
    }
    
    .timer-display {
        background: linear-gradient(135deg, #ff6b6b, #ee5a52);
        color: white;
        padding: 8px 16px;
        border-radius: 20px;
        font-weight: bold;
    }
    
    .passage-nav {
        background: white;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .nav-item {
        padding: 8px 12px;
        margin: 2px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .nav-item:hover {
        background: #e9ecef;
    }
    
    .nav-item.active {
        background: #007bff;
        color: white;
    }
    
    .submit-section {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(255,255,255,0.95);
        padding: 15px;
        border-top: 1px solid #dee2e6;
        z-index: 1000;
    }

    /* 题目类型徽章 */
    .question-type-badge {
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: bold;
        text-transform: uppercase;
    }
    
    .type-choice { background: #e3f2fd; color: #1976d2; }
    .type-judge { background: #f3e5f5; color: #7b1fa2; }
    .type-short_answer { background: #e8f5e8; color: #388e3c; }
    .type-essay { background: #fff3e0; color: #f57c00; }
    .type-code_reading { background: #fce4ec; color: #c2185b; }
    .type-code_practice { background: #e1f5fe; color: #0277bd; }
    .type-programming { background: #f1f8e9; color: #689f38; }
    .type-fill_blank { background: #fff8e1; color: #ffa000; }
    .type-reading_comprehension { background: #e0f2f1; color: #00695c; }
</style>
{% endblock %}

{% block content %}
<!-- 进度和计时器栏 -->
<div class="progress-bar-container">
    <div class="row align-items-center">
        <div class="col-md-6">
            <h5 class="mb-0">{{ exam.title }}</h5>
            <small class="text-muted">全面考试系统 - 托福TPO风格</small>
        </div>
        <div class="col-md-3 text-center">
            <div class="timer-display">
                <i class="bi bi-clock"></i>
                <span id="timeRemaining">{{ exam.duration_minutes }}:00</span>
            </div>
        </div>
        <div class="col-md-3 text-center">
            <div class="progress mb-2">
                <div class="progress-bar" id="progressBar" style="width: 0%"></div>
            </div>
            <small>进度: <span id="progressPercent">0%</span></small>
        </div>
    </div>
</div>

<!-- 主要内容区域 -->
<div style="margin-top: 120px; margin-bottom: 80px;">
    {% if reading_passages %}
    <!-- 阅读材料导航 -->
    <div class="passage-nav">
        <h6 class="mb-2">阅读材料导航</h6>
        <div class="d-flex flex-wrap">
            {% for passage_group in reading_passages %}
            <div class="nav-item" data-passage-id="{{ loop.index0 }}" onclick="scrollToPassage({{ loop.index0 }})">
                <strong>材料 {{ loop.index }}</strong><br>
                <small>{{ passage_group.questions|length }} 道题目</small>
            </div>
            {% endfor %}
            {% if regular_questions %}
            <div class="nav-item" data-passage-id="regular" onclick="scrollToPassage('regular')">
                <strong>其他题目</strong><br>
                <small>{{ regular_questions|length }} 道题目</small>
            </div>
            {% endif %}
        </div>
    </div>

    <form id="examForm">
        <!-- 阅读理解部分 -->
        {% for passage_group in reading_passages %}
        <div class="tpo-container mb-5" id="passage-{{ loop.index0 }}">
            <div class="row h-100">
                <!-- 左侧：阅读材料 -->
                <div class="col-md-6">
                    <div class="reading-panel">
                        <div class="passage-content">
                            <div class="passage-header">
                                <h5 class="mb-1">阅读材料 {{ loop.index }}</h5>
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="badge bg-light text-dark">{{ passage_group.passage.source or '考试材料' }}</span>
                                    <small>
                                        {{ passage_group.passage.word_count or '约' + (passage_group.passage.content|length/5)|int|string }} 词
                                        | 
                                        {{ passage_group.passage.reading_time or ((passage_group.passage.content|length/1000)|int + 1) }} 分钟
                                    </small>
                                </div>
                            </div>
                            
                            <h6 class="mb-3">{{ passage_group.passage.title }}</h6>
                            
                            <div class="passage-text" id="passage-text-{{ loop.index0 }}">
                                {{ passage_group.passage.content|replace('\n', '<br>')|safe }}
                            </div>
                            
                            {% if passage_group.passage.topic %}
                            <div class="mt-3">
                                <span class="badge bg-info">主题: {{ passage_group.passage.topic }}</span>
                                {% if passage_group.passage.difficulty_level %}
                                <span class="badge bg-warning">
                                    难度: {% for i in range(passage_group.passage.difficulty_level) %}★{% endfor %}
                                </span>
                                {% endif %}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
                
                <!-- 右侧：相关题目 -->
                <div class="col-md-6">
                    <div class="questions-panel">
                        <h6 class="mb-3">
                            <i class="bi bi-question-circle"></i>
                            相关题目 ({{ passage_group.questions|length }} 道)
                        </h6>
                        
                        {% for question in passage_group.questions %}
                        <div class="question-card">
                            <div class="question-header">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h6 class="mb-0">题目 {{ loop.index }}</h6>
                                    <div>
                                        <span class="question-type-badge type-{{ question.question_type }}">{{ question.question_type.replace('_', ' ').title() }}</span>
                                        {% if question.difficulty %}
                                        {% for i in range(question.difficulty) %}
                                            <i class="bi bi-star-fill text-warning"></i>
                                        {% endfor %}
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            
                            <div class="question-body">
                                <div class="question-content" id="question-text-{{ question.id }}">
                                    {{ question.question_text|replace('\n', '<br>')|safe }}
                                </div>
                                
                                {% if question.question_type == 'choice' %}
                                    <!-- 选择题 -->
                                    {% if question.options %}
                                        {% set options_dict = question.options|from_json %}
                                        {% if options_dict %}
                                            <ul class="option-list">
                                                {% for key, value in options_dict.items() %}
                                                <li class="option-item" data-value="{{ key }}" 
                                                    onclick="selectOption(this, 'question_{{ question.id }}')">
                                                    <div class="option-label">{{ key }}</div>
                                                    <div class="option-text">{{ value }}</div>
                                                    <input type="radio" name="question_{{ question.id }}" 
                                                           value="{{ key }}" style="display: none;"
                                                           {% if saved_answers.get('question_' + question.id|string) == key %}checked{% endif %}>
                                                </li>
                                                {% endfor %}
                                            </ul>
                                        {% else %}
                                            <div class="alert alert-warning">选项解析失败</div>
                                        {% endif %}
                                    {% else %}
                                        <div class="alert alert-warning">该选择题没有选项</div>
                                    {% endif %}
                                    
                                {% elif question.question_type == 'judge' %}
                                    <!-- 判断题 -->
                                    <div class="judge-options">
                                        <div class="judge-option true" data-value="true" 
                                             onclick="selectJudge(this, 'question_{{ question.id }}')">
                                            <i class="bi bi-check-circle-fill text-success"></i>
                                            <span>正确</span>
                                            <input type="radio" name="question_{{ question.id }}" 
                                                   value="true" style="display: none;"
                                                   {% if saved_answers.get('question_' + question.id|string) == 'true' %}checked{% endif %}>
                                        </div>
                                        <div class="judge-option false" data-value="false" 
                                             onclick="selectJudge(this, 'question_{{ question.id }}')">
                                            <i class="bi bi-x-circle-fill text-danger"></i>
                                            <span>错误</span>
                                            <input type="radio" name="question_{{ question.id }}" 
                                                   value="false" style="display: none;"
                                                   {% if saved_answers.get('question_' + question.id|string) == 'false' %}checked{% endif %}>
                                        </div>
                                    </div>
                                    
                                {% elif question.question_type in ['code_reading', 'code_practice'] %}
                                    <!-- 代码阅读/练习题 -->
                                    {% if question.question_type == 'code_practice' %}
                                        <div class="mb-3">
                                            <label class="form-label fw-bold">请在下面的代码编辑器中输入您的答案：</label>
                                            <textarea class="form-control code-editor question-input" 
                                                      name="question_{{ question.id }}" 
                                                      rows="8"
                                                      placeholder="请在此输入您的代码...">{{ saved_answers.get('question_' + question.id|string, '') }}</textarea>
                                        </div>
                                    {% else %}
                                        <!-- 代码阅读题，通常是选择题格式 -->
                                        {% if question.options %}
                                            {% set options_dict = question.options|from_json %}
                                            {% if options_dict %}
                                                <ul class="option-list">
                                                    {% for key, value in options_dict.items() %}
                                                    <li class="option-item" data-value="{{ key }}" 
                                                        onclick="selectOption(this, 'question_{{ question.id }}')">
                                                        <div class="option-label">{{ key }}</div>
                                                        <div class="option-text">{{ value }}</div>
                                                        <input type="radio" name="question_{{ question.id }}" 
                                                               value="{{ key }}" style="display: none;"
                                                               {% if saved_answers.get('question_' + question.id|string) == key %}checked{% endif %}>
                                                    </li>
                                                    {% endfor %}
                                                </ul>
                                            {% endif %}
                                        {% endif %}
                                    {% endif %}
                                    
                                {% elif question.question_type == 'programming' %}
                                    <!-- 编程题 -->
                                    <div class="mb-3">
                                        <label class="form-label fw-bold">编程题解答：</label>
                                        <textarea class="form-control code-editor question-input" 
                                                  name="question_{{ question.id }}" 
                                                  rows="12"
                                                  placeholder="请在此处编写您的代码解答...">{{ saved_answers.get('question_' + question.id|string, '') }}</textarea>
                                    </div>
                                    
                                {% elif question.question_type == 'fill_blank' %}
                                    <!-- 填空题 -->
                                    <div class="mb-3">
                                        <label class="form-label fw-bold">请填写答案：</label>
                                        <input type="text" class="form-control text-input question-input" 
                                               name="question_{{ question.id }}" 
                                               placeholder="在此输入答案..."
                                               value="{{ saved_answers.get('question_' + question.id|string, '') }}">
                                    </div>
                                    
                                {% elif question.question_type == 'short_answer' %}
                                    <!-- 简答题 -->
                                    <div class="mb-3">
                                        <label class="form-label fw-bold">简答题解答：</label>
                                        <textarea class="form-control text-input question-input" 
                                                  name="question_{{ question.id }}" 
                                                  rows="4"
                                                  placeholder="请在此输入您的答案...">{{ saved_answers.get('question_' + question.id|string, '') }}</textarea>
                                    </div>
                                    
                                {% elif question.question_type == 'essay' %}
                                    <!-- 论文题 -->
                                    <label class="form-label fw-bold">答题区域：</label>
                                    <textarea class="form-control text-input question-input" 
                                              name="question_{{ question.id }}" 
                                              rows="8"
                                              placeholder="请在此输入您的论文内容...">{{ saved_answers.get('question_' + question.id|string, '') }}</textarea>
                                    <small class="form-text text-muted">建议字数：300-500字</small>
                                {% endif %}
                                
                                <!-- 题目技能标签 -->
                                {% if hasattr(question, 'skill_focus') and question.skill_focus %}
                                <div class="mt-2">
                                    <small class="text-muted">
                                        <i class="bi bi-tag"></i> 考查技能: {{ question.skill_focus }}
                                    </small>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
        
        <!-- 其他普通题目部分 -->
        {% if regular_questions %}
        <div class="mt-5" id="passage-regular">
            <h5 class="mb-4">
                <i class="bi bi-list"></i>
                其他题目
            </h5>
            
            {% for question in regular_questions %}
            <div class="question-card">
                <div class="question-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">第{{ loop.index }}题</h6>
                        <div>
                            <span class="question-type-badge type-{{ question.question_type }}">{{ question.question_type.replace('_', ' ').title() }}</span>
                            {% if question.difficulty %}
                            {% for i in range(question.difficulty) %}
                                <i class="bi bi-star-fill text-warning"></i>
                            {% endfor %}
                            {% endif %}
                        </div>
                    </div>
                </div>
                
                <div class="question-body">
                    <div class="question-content" id="question-text-regular-{{ question.id }}">
                        {{ question.question_text|replace('\n', '<br>')|safe }}
                    </div>
                    
                    {% if question.question_type == 'choice' %}
                        <!-- 选择题 -->
                        {% if question.options %}
                            {% set options_dict = question.options|from_json %}
                            {% if options_dict %}
                                <ul class="option-list">
                                    {% for key, value in options_dict.items() %}
                                    <li class="option-item" data-value="{{ key }}" 
                                        onclick="selectOption(this, 'question_{{ question.id }}')">
                                        <div class="option-label">{{ key }}</div>
                                        <div class="option-text">{{ value }}</div>
                                        <input type="radio" name="question_{{ question.id }}" 
                                               value="{{ key }}" style="display: none;"
                                               {% if saved_answers.get('question_' + question.id|string) == key %}checked{% endif %}>
                                    </li>
                                    {% endfor %}
                                </ul>
                            {% endif %}
                        {% endif %}
                        
                    {% elif question.question_type == 'judge' %}
                        <!-- 判断题 -->
                        <div class="judge-options">
                            <div class="judge-option true" data-value="true" 
                                 onclick="selectJudge(this, 'question_{{ question.id }}')">
                                <i class="bi bi-check-circle-fill text-success"></i>
                                <span>正确</span>
                                <input type="radio" name="question_{{ question.id }}" 
                                       value="true" style="display: none;"
                                       {% if saved_answers.get('question_' + question.id|string) == 'true' %}checked{% endif %}>
                            </div>
                            <div class="judge-option false" data-value="false" 
                                 onclick="selectJudge(this, 'question_{{ question.id }}')">
                                <i class="bi bi-x-circle-fill text-danger"></i>
                                <span>错误</span>
                                <input type="radio" name="question_{{ question.id }}" 
                                       value="false" style="display: none;"
                                       {% if saved_answers.get('question_' + question.id|string) == 'false' %}checked{% endif %}>
                            </div>
                        </div>
                        
                    {% else %}
                        <!-- 主观题 -->
                        <div class="form-group">
                            <textarea class="form-control text-input question-input" 
                                      name="question_{{ question.id }}" 
                                      rows="8"
                                      placeholder="请在此输入您的答案...">{{ saved_answers.get('question_' + question.id|string, '') }}</textarea>
                        </div>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
        {% endif %}
    </form>
    
    {% else %}
        <div class="text-center py-5">
            <i class="bi bi-question-square display-1 text-muted"></i>
            <h4 class="mt-3 text-muted">暂无阅读理解题目</h4>
            <p class="text-muted">该考试暂时没有阅读理解内容</p>
        </div>
    {% endif %}
</div>

<!-- 提交区域 -->
<div class="submit-section">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-md-6">
                <div class="d-flex align-items-center">
                    <span class="me-3">已答题目: <strong id="answeredCount">0</strong></span>
                    <span class="me-3">总题目: <strong id="totalQuestions">{{ (reading_passages|sum(attribute='questions')|list|length + regular_questions|length) if reading_passages else 0 }}</strong></span>
                    <span>完成度: <strong id="completionRate">0%</strong></span>
                </div>
            </div>
            <div class="col-md-6 text-end">
                <button type="button" class="btn btn-outline-secondary me-2" onclick="autoSave()">
                    <i class="bi bi-save"></i> 保存进度
                </button>
                <button type="button" class="btn btn-success btn-lg" id="submitExam">
                    <i class="bi bi-check-circle"></i> 提交考试
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 提交确认模态框 -->
<div class="modal fade" id="submitConfirmModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">确认提交考试</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" title="关闭"></button>
            </div>
            <div class="modal-body">
                <p>您确定要提交考试吗？</p>
                <div class="alert alert-warning">
                    <i class="bi bi-exclamation-triangle"></i>
                    提交后将不能修改答案，请确认所有题目都已完成！
                </div>
                <div id="submitSummary"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-success" id="confirmSubmit">确认提交</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<!-- 代码高亮JS -->
<script src="/static/js/libs/prism/prism-core.min.js"></script>
<script src="/static/js/libs/prism/plugins/autoloader/prism-autoloader.min.js"></script>

<script>
// 全局变量
let examStartTime = new Date();
let examDuration = {{ exam.duration_minutes }} * 60; // 转换为秒
let autoSaveInterval;
let currentPassageIndex = 0;

// 页面加载完成后初始化
$(document).ready(function() {
    initializeExam();
    startTimer();
    bindEvents();
    updateProgress();
    processCodeBlocks();
    
    // 自动保存
    autoSaveInterval = setInterval(autoSave, 30000); // 每30秒自动保存
});

// 初始化考试
function initializeExam() {
    console.log('TPO style exam with code support initialized');
    
    // 设置总题目数
    const totalQuestions = $('.question-input[type="radio"], .question-input[type="checkbox"], textarea.question-input').length;
    $('#totalQuestions').text(totalQuestions);
    
    // 激活第一个导航项
    $('.nav-item[data-passage-id="0"]').addClass('active');
    
    // 恢复已选择的选项
    $('input[type="radio"]:checked').each(function() {
        const questionName = $(this).attr('name');
        const value = $(this).val();
        
        // 恢复选择题状态
        $(`.option-item[data-value="${value}"]`).closest('.question-card').find(`.option-item[data-value="${value}"]`).addClass('selected');
        
        // 恢复判断题状态
        $(`.judge-option[data-value="${value}"]`).addClass('selected');
    });
}

// 处理代码块高亮
function processCodeBlocks() {
    $('[id^="question-text-"], [id^="passage-text-"]').each(function() {
        let content = $(this).html();
        
        // 替换自定义代码块标记为Prism格式
        content = content.replace(/<code-block language="([^"]+)">\s*([\s\S]*?)\s*<\/code-block>/g, function(match, language, code) {
            // 清理代码内容
            code = code.replace(/<br\s*\/?>/gi, '\n')
                      .replace(/&lt;/g, '<')
                      .replace(/&gt;/g, '>')
                      .replace(/&amp;/g, '&');
            
            return `
                <div class="code-block">
                    <div class="code-header">
                        <span>代码</span>
                        <span class="code-language">${language}</span>
                    </div>
                    <div class="code-content">
                        <pre><code class="language-${language}">${code}</code></pre>
                    </div>
                </div>
            `;
        });
        
        $(this).html(content);
    });
    
    // 应用语法高亮
    if (typeof Prism !== 'undefined') {
        Prism.highlightAll();
    }
}

// 选择题选项选择
function selectOption(element, questionName) {
    const container = $(element).closest('.question-card');
    const value = $(element).data('value');
    
    // 移除同一题目的其他选中状态
    container.find('.option-item').removeClass('selected');
    container.find('input[type="radio"]').prop('checked', false);
    
    // 设置当前选中状态
    $(element).addClass('selected');
    $(element).find('input[type="radio"]').prop('checked', true);
    
    updateProgress();
    autoSave();
}

// 判断题选择
function selectJudge(element, questionName) {
    const container = $(element).closest('.question-card');
    const value = $(element).data('value');
    
    // 移除同一题目的其他选中状态
    container.find('.judge-option').removeClass('selected');
    container.find('input[type="radio"]').prop('checked', false);
    
    // 设置当前选中状态
    $(element).addClass('selected');
    $(element).find('input[type="radio"]').prop('checked', true);
    
    updateProgress();
    autoSave();
}

// 绑定事件
function bindEvents() {
    // 题目输入事件
    $('.question-input').on('change input', function() {
        updateProgress();
        autoSave();
    });
    
    // 提交按钮事件
    $('#submitExam').click(function() {
        showSubmitConfirmation();
    });
    
    // 确认提交事件
    $('#confirmSubmit').click(function() {
        submitExam();
    });
    
    // 阻止页面刷新时丢失数据
    window.addEventListener('beforeunload', function(e) {
        autoSave();
        e.preventDefault();
        e.returnValue = '';
    });
}

// 导航到指定阅读材料
function scrollToPassage(passageId) {
    // 移除所有active类
    $('.nav-item').removeClass('active');
    
    // 激活当前导航项
    $(`.nav-item[data-passage-id="${passageId}"]`).addClass('active');
    
    // 滚动到对应位置
    const targetElement = $(`#passage-${passageId}`);
    if (targetElement.length) {
        $('html, body').animate({
            scrollTop: targetElement.offset().top - 130
        }, 500);
    }
    
    currentPassageIndex = passageId;
}

// 开始计时器
function startTimer() {
    const timerElement = document.getElementById('timeRemaining');
    let timeLeft = examDuration;
    
    const timer = setInterval(function() {
        timeLeft--;
        
        const minutes = Math.floor(timeLeft / 60);
        const seconds = timeLeft % 60;
        
        timerElement.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
        
        // 时间警告
        if (timeLeft <= 300) { // 最后5分钟
            timerElement.style.background = 'linear-gradient(135deg, #ff4757, #ff3838)';
            timerElement.style.animation = 'pulse 1s infinite';
        } else if (timeLeft <= 600) { // 最后10分钟
            timerElement.style.background = 'linear-gradient(135deg, #ffa502, #ff6b00)';
        }
        
        if (timeLeft <= 0) {
            clearInterval(timer);
            alert('考试时间结束，系统将自动提交！');
            submitExam();
        }
    }, 1000);
}

// 更新进度
function updateProgress() {
    const totalInputs = $('.question-input[type="radio"], .question-input[type="checkbox"], textarea.question-input').length;
    let answeredInputs = 0;
    
    // 统计选择题和判断题
    $('input[type="radio"]:checked, input[type="checkbox"]:checked').each(function() {
        answeredInputs++;
    });
    
    // 统计主观题
    $('textarea.question-input').each(function() {
        if ($(this).val().trim() !== '') {
            answeredInputs++;
        }
    });
    
    const progressPercent = totalInputs > 0 ? Math.round((answeredInputs / totalInputs) * 100) : 0;
    
    $('#answeredCount').text(answeredInputs);
    $('#progressPercent').text(progressPercent + '%');
    $('#completionRate').text(progressPercent + '%');
    $('#progressBar').css('width', progressPercent + '%');
    
    // 更新进度条颜色
    const progressBar = $('#progressBar');
    progressBar.removeClass('bg-danger bg-warning bg-info bg-success');
    
    if (progressPercent < 25) {
        progressBar.addClass('bg-danger');
    } else if (progressPercent < 50) {
        progressBar.addClass('bg-warning');
    } else if (progressPercent < 80) {
        progressBar.addClass('bg-info');
    } else {
        progressBar.addClass('bg-success');
    }
}

// 自动保存
function autoSave() {
    const formData = new FormData(document.getElementById('examForm'));
    
    fetch(`/student/exam/{{ exam.id }}/save`, {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            console.log('Progress saved automatically');
            // 可以添加一个小提示
            showSaveIndicator();
        }
    })
    .catch(error => {
        console.error('Auto-save error:', error);
    });
}

// 显示保存指示器
function showSaveIndicator() {
    const indicator = $('<div class="alert alert-success position-fixed" style="top: 20px; right: 20px; z-index: 9999; padding: 5px 10px; font-size: 12px;">已自动保存</div>');
    $('body').append(indicator);
    setTimeout(() => indicator.fadeOut(() => indicator.remove()), 2000);
}

// 显示提交确认
function showSubmitConfirmation() {
    updateProgress();
    
    const totalQuestions = $('.question-input[type="radio"], .question-input[type="checkbox"], textarea.question-input').length;
    const answeredInputs = $('.question-input[type="radio"]:checked, .question-input[type="checkbox"]:checked, textarea.question-input').filter(function() {
        return $(this).is(':checked') || $(this).val().trim() !== '';
    }).length;
    
    const summaryHtml = `
        <div class="row text-center">
            <div class="col-4">
                <h5>${totalQuestions}</h5>
                <small>总题目</small>
            </div>
            <div class="col-4">
                <h5>${answeredInputs}</h5>
                <small>已答题</small>
            </div>
            <div class="col-4">
                <h5>${totalQuestions - answeredInputs}</h5>
                <small>未答题</small>
            </div>
        </div>
        ${totalQuestions - answeredInputs > 0 ? '<div class="alert alert-danger mt-2">还有 ' + (totalQuestions - answeredInputs) + ' 道题目未完成！</div>' : ''}
    `;
    
    $('#submitSummary').html(summaryHtml);
    $('#submitConfirmModal').modal('show');
}

// 提交考试
function submitExam() {
    $('#submitConfirmModal').modal('hide');
    
    const formData = new FormData(document.getElementById('examForm'));
    
    // 显示提交状态
    const submitBtn = $('#submitExam');
    const originalText = submitBtn.html();
    submitBtn.html('<i class="bi bi-arrow-repeat spinner-border spinner-border-sm"></i> 提交中...').prop('disabled', true);
    
    fetch(`/student/exam/{{ exam.id }}/submit`, {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // 清除自动保存
            clearInterval(autoSaveInterval);
            
            FlashExam.showMessage('考试提交成功！', 'success');
            
            setTimeout(() => {
                window.location.href = '/student/results';
            }, 2000);
        } else {
            FlashExam.showMessage('提交失败: ' + data.message, 'error');
            submitBtn.html(originalText).prop('disabled', false);
        }
    })
    .catch(error => {
        console.error('Submit error:', error);
        FlashExam.showMessage('提交失败，请重试', 'error');
        submitBtn.html(originalText).prop('disabled', false);
    });
}

// CSS动画
const style = document.createElement('style');
style.textContent = `
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }
`;
document.head.appendChild(style);
</script>
{% endblock %}