{% extends "base.html" %}

{% block title %}考试管理 - FlashExam{% endblock %}

{% block content %}
<!-- 下拉菜单稳定性优化样式 -->
<style>
/* 防止下拉菜单闪烁的专门CSS */
.btn-group .dropdown-menu {
    position: absolute !important;
    inset: 0px auto auto 0px !important;
    margin: 0px !important;
    transform: translate3d(0px, 40px, 0px) !important;
    transition: none !important;
    animation: none !important;
    min-width: 200px !important;
    z-index: 99999 !important; /* 超高层级，确保在所有内容之上 */
}

.btn-group .dropdown-menu.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 99999 !important;
}

/* 防止表格和卡片遮盖下拉菜单 */
.card {
    z-index: 1 !important;
    position: relative;
}

.table-responsive {
    z-index: 1 !important;
    position: relative;
}

#examsTable {
    z-index: 1 !important;
    position: relative;
}

.btn-group .dropdown-toggle::after {
    transition: none !important;
}

/* 防止按钮重排导致的抖动 */
.btn-group {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

.btn-group > .btn {
    position: relative;
    flex: 1 1 auto;
}

/* 消息容器优化 */
#message-container {
    position: fixed !important;
    top: 80px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
    max-width: 600px !important;
    z-index: 9999 !important;
    pointer-events: none !important;
}

#message-container .alert {
    pointer-events: auto !important;
    margin-bottom: 0.5rem !important;
}

/* 额外的稳定性优化 */
.dropdown-toggle:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.dropdown-menu[data-bs-popper] {
    position: absolute !important;
    left: 0 !important;
    top: 100% !important;
}
</style>
<div class="row mb-4">
    <div class="col-12">
        <h1 class="h3 mb-0">
            <i class="bi bi-journal-text"></i>
            考试管理
        </h1>
        <p class="text-muted">创建和管理考试，组织考试流程</p>
    </div>
</div>

<!-- 快速导航 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h6 class="mb-0">
                    <i class="bi bi-lightning-fill"></i>
                    快速导航
                </h6>
            </div>
            <div class="card-body py-2">
                <div class="row">
                    <div class="col-auto">
                        <a href="{{ url_for('teacher.dashboard') }}" class="btn btn-outline-secondary btn-sm me-2">
                            <i class="bi bi-speedometer2"></i> 仪表板
                        </a>
                    </div>
                    <div class="col-auto">
                        <a href="{{ url_for('teacher.students') }}" class="btn btn-outline-primary btn-sm me-2">
                            <i class="bi bi-people-fill"></i> 学生管理
                        </a>
                    </div>
                    <div class="col-auto">
                        <a href="{{ url_for('teacher.questions') }}" class="btn btn-outline-success btn-sm me-2">
                            <i class="bi bi-question-circle-fill"></i> 题目管理
                        </a>
                    </div>
                    <div class="col-auto">
                        <span class="btn btn-info btn-sm me-2 disabled">
                            <i class="bi bi-journal-text"></i> 考试管理
                        </span>
                    </div>
                    <div class="col-auto">
                        <a href="{{ url_for('teacher.grading') }}" class="btn btn-outline-warning btn-sm me-2">
                            <i class="bi bi-pencil-square"></i> 主观题评分
                        </a>
                    </div>
                    <div class="col-auto">
                        <a href="{{ url_for('teacher.results') }}" class="btn btn-outline-danger btn-sm">
                            <i class="bi bi-graph-up"></i> 成绩分析
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 统计信息 -->
<div class="row mb-4">
    <div class="col-md-3 mb-3">
        <div class="card text-center stats-card">
            <div class="card-body">
                <i class="bi bi-journal-text display-4 mb-2"></i>
                <h3 id="totalExams">{{ exams|length }}</h3>
                <p class="mb-0">考试总数</p>
            </div>
        </div>
    </div>
    
    <div class="col-md-9">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h6 class="mb-0">考试状态分布</h6>
            </div>
            <div class="card-body">
                {% if exams %}
                    <div class="row" id="statusStats">
                        <div class="col-md-3 mb-2">
                            <div class="d-flex justify-content-between">
                                <span>进行中</span>
                                <span class="badge bg-success">{{ exams|selectattr('is_active')|list|length }}</span>
                            </div>
                        </div>
                        <div class="col-md-3 mb-2">
                            <div class="d-flex justify-content-between">
                                <span>已结束</span>
                                <span class="badge bg-secondary">{{ (exams|length) - (exams|selectattr('is_active')|list|length) }}</span>
                            </div>
                        </div>
                        <div class="col-md-3 mb-2">
                            <div class="d-flex justify-content-between">
                                <span>总题目数</span>
                                <span class="badge bg-info">{% set total_questions = exams|sum(attribute='total_questions') %}{{ total_questions or 0 }}</span>
                            </div>
                        </div>
                        <div class="col-md-3 mb-2">
                            <div class="d-flex justify-content-between">
                                <span>平均时长</span>
                                <span class="badge bg-warning">{% if exams %}{% set avg_duration = (exams|sum(attribute='duration_minutes') / exams|length) %}{{ avg_duration|round|int }}{% else %}0{% endif %}分钟</span>
                            </div>
                        </div>
                    </div>
                {% else %}
                    <p class="text-muted mb-0" id="noStatsMsg">暂无考试数据</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 操作工具栏 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <!-- 第一行：主要操作 -->
                <div class="row mb-3">
                    <div class="col-md-3 mb-2">
                        <!-- 创建考试按钮组 -->
                        <div class="btn-group w-100" role="group">
                            <button class="btn btn-primary dropdown-toggle w-100" type="button" data-bs-toggle="dropdown" aria-expanded="false" title="选择考试创建方式">
                                <i class="bi bi-plus-circle"></i> 创建考试
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#addExamModal">
                                    <i class="bi bi-pencil-square"></i> 传统考试创建
                                </a></li>
                                <li><a class="dropdown-item" href="/teacher/exams/new-interface" target="_blank">
                                    <i class="bi bi-magic"></i> 新版本考试创建 <span class="badge bg-success ms-1">推荐</span>
                                </a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><span class="dropdown-item-text small text-muted">
                                    <i class="bi bi-info-circle"></i> 新版本支持高级题目组管理和智能考试创建
                                </span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-3 mb-2">
                        <!-- 导入按钮组 -->
                        <div class="btn-group w-100" role="group">
                            <button class="btn btn-success dropdown-toggle w-100" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="bi bi-upload"></i> 导入考试
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#importModal">
                                    <i class="bi bi-file-earmark-plus"></i> 导入完整考试（含题目）
                                </a></li>
                                <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#importSimpleModal">
                                    <i class="bi bi-file-earmark"></i> 导入考试信息（仅基础信息）
                                </a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="#" onclick="downloadTemplate('full')">
                                    <i class="bi bi-download"></i> 下载完整模板
                                </a></li>
                                <li><a class="dropdown-item" href="#" onclick="downloadTemplate('simple')">
                                    <i class="bi bi-download"></i> 下载简单模板
                                </a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-3 mb-2">
                        <!-- 导出按钮组 -->
                        <div class="btn-group w-100" role="group">
                            <button class="btn btn-warning dropdown-toggle w-100" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="bi bi-download"></i> 导出考试
                            </button>
                            <ul class="dropdown-menu">
                                <li><h6 class="dropdown-header">完整考试（含题目）</h6></li>
                                <li><a class="dropdown-item" href="#" onclick="exportExams('utf-8')">
                                    <i class="bi bi-file-earmark-spreadsheet"></i> UTF-8编码
                                </a></li>
                                <li><a class="dropdown-item" href="#" onclick="exportExams('gbk')">
                                    <i class="bi bi-file-earmark-spreadsheet"></i> GBK编码
                                </a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><h6 class="dropdown-header">考试信息（仅基础信息）</h6></li>
                                <li><a class="dropdown-item" href="#" onclick="exportExamsSimple('utf-8')">
                                    <i class="bi bi-file-earmark-text"></i> UTF-8编码
                                </a></li>
                                <li><a class="dropdown-item" href="#" onclick="exportExamsSimple('gbk')">
                                    <i class="bi bi-file-earmark-text"></i> GBK编码
                                </a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="#" onclick="exportSelectedExams()">
                                    <i class="bi bi-check-square"></i> 导出选中考试
                                </a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><h6 class="dropdown-header">Word文档（题目+答案）</h6></li>
                                <li><a class="dropdown-item" href="#" onclick="showWordExportModal()">
                                    <i class="bi bi-file-earmark-word"></i> 批量生成Word文档
                                </a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-3 mb-2">
                        <button class="btn btn-info w-100" onclick="toggleFilter()">
                            <i class="bi bi-funnel"></i> 筛选考试
                        </button>
                    </div>
                </div>
                
                <!-- 第二行：批量操作 -->
                <div class="row">
                    <div class="col-md-3 mb-2">
                        <button class="btn btn-outline-secondary w-100" onclick="selectAllExams()">
                            <i class="bi bi-check-all"></i> 全选
                        </button>
                    </div>
                    <div class="col-md-3 mb-2">
                        <button class="btn btn-outline-warning w-100" onclick="batchToggleStatus()" id="batchToggleBtn" disabled>
                            <i class="bi bi-toggle-on"></i> 批量切换状态
                        </button>
                    </div>
                    <div class="col-md-3 mb-2">
                        <button class="btn btn-outline-danger w-100" onclick="batchDeleteExams()" id="batchDeleteBtn" disabled>
                            <i class="bi bi-trash"></i> 批量删除
                        </button>
                    </div>
                    <div class="col-md-3 mb-2">
                        <button class="btn btn-outline-danger w-100" onclick="clearAllExams()">
                            <i class="bi bi-x-circle"></i> 清空全部
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 考试列表 -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="bi bi-list"></i>
                    考试列表
                </h5>
                <span class="badge bg-light text-dark" id="selectedCount">已选择: 0</span>
            </div>
            <div class="card-body">
                {% if exams %}
                    <div class="table-responsive">
                        <table class="table table-hover" id="examsTable">
                            <thead>
                                <tr>
                                    <th width="50">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="selectAllCheckbox" onchange="toggleSelectAll()" title="全选/取消全选">
                                        </div>
                                    </th>
                                    <th width="80">ID</th>
                                    <th>考试名称</th>
                                    <th>描述</th>
                                    <th width="100">时长</th>
                                    <th width="100">题目数</th>
                                    <th width="100">状态</th>
                                    <th width="150">创建时间</th>
                                    <th width="200">操作</th>
                                </tr>
                            </thead>
                            <tbody id="examsTableBody">
                                {% for exam in exams %}
                                <tr data-exam-id="{{ exam.id }}" data-status="{{ 'active' if exam.is_active else 'inactive' }}" data-duration="{{ exam.duration_minutes }}" data-questions="{{ exam.total_questions }}">
                                    <td>
                                        <div class="form-check">
                                            <input class="form-check-input exam-checkbox" type="checkbox" value="{{ exam.id }}" onchange="updateSelectedCount()" title="选择此考试">
                                        </div>
                                    </td>
                                    <td>{{ exam.id }}</td>
                                    <td>
                                        <div style="max-width: 200px; overflow: hidden; text-overflow: ellipsis;" title="{{ exam.title }}">
                                            <strong>{{ exam.title }}</strong>
                                        </div>
                                    </td>
                                    <td>
                                        <div style="max-width: 250px; overflow: hidden; text-overflow: ellipsis;" title="{{ exam.description }}">
                                            {{ exam.description[:50] }}{% if exam.description and exam.description|length > 50 %}...{% endif %}
                                        </div>
                                    </td>
                                    <td>
                                        <i class="bi bi-clock text-primary"></i>
                                        {{ exam.duration_minutes }}分钟
                                    </td>
                                    <td>
                                        <i class="bi bi-question-circle text-info"></i>
                                        {{ exam.total_questions }}题
                                    </td>
                                    <td>
                                        {% if exam.is_active %}
                                            <span class="badge bg-success">进行中</span>
                                        {% else %}
                                            <span class="badge bg-secondary">已结束</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if exam.created_at %}
                                            {% if exam.created_at.strftime is defined %}
                                                {{ exam.created_at.strftime('%m-%d %H:%M') }}
                                            {% else %}
                                                {{ exam.created_at }}
                                            {% endif %}
                                        {% else %}
                                            <span class="text-muted">未知</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <button class="btn btn-sm btn-outline-primary" data-exam-id="{{ exam.id }}" onclick="editExam(this)" title="编辑考试">
                                                <i class="bi bi-pencil"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-info" data-exam-id="{{ exam.id }}" onclick="viewExam(this)" title="查看详情">
                                                <i class="bi bi-eye"></i>
                                            </button>
                                            <a href="/teacher/exams/{{ exam.id }}/monitoring" class="btn btn-sm btn-outline-secondary" title="监控配置">
                                                <i class="bi bi-shield-check"></i>
                                            </a>
                                            <a href="/teacher/exams/{{ exam.id }}/student-submissions-page" class="btn btn-sm btn-outline-success" title="管理学生提交状态">
                                                <i class="bi bi-people-fill"></i>
                                            </a>
                                            <!-- 导出考试下拉菜单 -->
                                            <div class="btn-group" role="group">
                                                <button class="btn btn-sm btn-outline-warning dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" title="导出考试">
                                                    <i class="bi bi-download"></i>
                                                </button>
                                                <ul class="dropdown-menu dropdown-menu-end" style="z-index: 99999 !important;">
                                                    <li><h6 class="dropdown-header">导出格式</h6></li>
                                                    <li><a class="dropdown-item" href="/teacher/exams/export?encoding=utf-8&exam_id={{ exam.id }}">
                                                        <i class="bi bi-file-earmark-spreadsheet"></i> Excel (UTF-8)
                                                    </a></li>
                                                    <li><a class="dropdown-item" href="/teacher/exams/export?encoding=gbk&exam_id={{ exam.id }}">
                                                        <i class="bi bi-file-earmark-spreadsheet"></i> Excel (GBK)
                                                    </a></li>
                                                    <li><hr class="dropdown-divider"></li>
                                                    <li><a class="dropdown-item" href="/teacher/exams/{{ exam.id }}/export-word">
                                                        <i class="bi bi-file-earmark-word"></i> Word文档
                                                    </a></li>
                                                    <li><a class="dropdown-item" href="/teacher/exams/{{ exam.id }}/export-word?answers=true">
                                                        <i class="bi bi-file-earmark-word-fill"></i> Word (含答案)
                                                    </a></li>
                                                </ul>
                                            </div>
                                            <button class="btn btn-sm btn-outline-warning" data-exam-id="{{ exam.id }}" onclick="toggleExamStatus(this)" title="切换状态">
                                                <i class="bi bi-toggle-{{ 'on' if exam.is_active else 'off' }}"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-danger" data-exam-id="{{ exam.id }}" onclick="deleteExam(this)" title="删除考试">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="text-center py-5" id="emptyState">
                        <i class="bi bi-journal-x display-1 text-muted"></i>
                        <h4 class="mt-3 text-muted">暂无考试数据</h4>
                        <p class="text-muted">点击"创建考试"开始创建第一个考试</p>
                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addExamModal">
                            <i class="bi bi-plus-circle"></i> 创建考试
                        </button>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 创建考试模态框 -->
<div class="modal fade" id="addExamModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <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">
                <form id="addExamForm">
                    <div class="row">
                        <div class="col-md-8 mb-3">
                            <label for="addExamTitle" class="form-label">考试名称</label>
                            <input type="text" class="form-control" id="addExamTitle" placeholder="输入考试名称" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="addExamDuration" class="form-label">考试时长（分钟）</label>
                            <input type="number" class="form-control" id="addExamDuration" value="60" min="1" max="480" required>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="addExamDescription" class="form-label">考试描述</label>
                        <textarea class="form-control" id="addExamDescription" rows="3" placeholder="输入考试描述（可选）"></textarea>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">选择题目</label>
                        <div class="card">
                            <div class="card-header bg-light">
                                <div class="row align-items-center">
                                    <div class="col-md-6">
                                        <button type="button" class="btn btn-sm btn-outline-primary" onclick="loadAvailableQuestions()">
                                            <i class="bi bi-arrow-clockwise"></i> 刷新题目列表
                                        </button>
                                    </div>
                                    <div class="col-md-6 text-end">
                                        <div>
                                            <span class="text-muted">已选择: <span id="selectedQuestionsCount">0</span> 项</span>
                                        </div>
                                        <div>
                                            <small class="text-muted" id="selectedQuestionsDetail">简单题目: 0, 题目组: 0</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body" style="max-height: 400px; overflow-y: auto;">
                                <div id="availableQuestions">
                                    <div class="text-center py-4">
                                        <i class="bi bi-info-circle text-muted mb-2" style="font-size: 2rem;"></i>
                                        <p class="text-muted mb-2">点击"刷新题目列表"加载可用题目</p>
                                        <small class="text-muted">支持选择简单题目和复杂题目组</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="addExamActive" checked>
                            <label class="form-check-label" for="addExamActive">
                                立即激活考试
                            </label>
                        </div>
                    </div>
                </form>
            </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="submitAddExam()">
                    <i class="bi bi-plus-circle"></i> 创建考试
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 导入考试模态框 -->
<div class="modal fade" id="importModal" 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">
                <form id="importForm" enctype="multipart/form-data">
                    <div class="mb-3">
                        <label for="importFile" class="form-label">选择CSV文件</label>
                        <input type="file" class="form-control" id="importFile" name="file" accept=".csv" required>
                        <div class="form-text">
                            支持CSV格式，包含考试信息和关联题目
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="skipDuplicates" name="skip_duplicates" checked>
                            <label class="form-check-label" for="skipDuplicates">
                                跳过重复考试
                            </label>
                        </div>
                    </div>
                    
                    <div class="alert alert-info">
                        <strong>CSV格式示例：</strong><br>
                        title,description,duration_minutes,question_ids<br>
                        "期末考试","综合测试",120,"1,2,3,4,5"
                    </div>
                </form>
            </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="submitImport()">
                    <i class="bi bi-upload"></i> 导入考试
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 简单导入模态框 -->
<div class="modal fade" id="importSimpleModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-file-earmark"></i>
                    导入考试信息（仅基础信息）
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" title="关闭"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i>
                    <strong>说明：</strong>此功能仅导入考试的基础信息（标题、描述、时长等），不包含题目内容。如需导入完整考试，请使用"导入完整考试"功能。
                </div>
                
                <div class="mb-3">
                    <label for="simpleImportFile" class="form-label">选择CSV文件</label>
                    <input type="file" class="form-control" id="simpleImportFile" accept=".csv">
                    <div class="form-text">
                        支持的格式：CSV文件（UTF-8编码）<br>
                        必需字段：title（考试标题）<br>
                        可选字段：description, duration_minutes, total_questions, is_active, created_at
                    </div>
                </div>
                
                <div class="mb-3">
                    <p class="mb-2"><strong>CSV格式示例：</strong></p>
                    <div class="border p-2 bg-light" style="font-family: monospace; font-size: 0.9em;">
                        title,description,duration_minutes,total_questions,is_active,created_at<br>
                        考试1,描述1,60,10,true,2025-05-31 21:00:00<br>
                        考试2,描述2,90,15,false,2025-05-31 21:00:00
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="simpleImportSubmitBtn" onclick="handleSimpleImport()">
                    <i class="bi bi-upload"></i> 开始导入
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Word文档导出模态框 -->
<div class="modal fade" id="wordExportModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-file-earmark-word text-primary"></i>
                    导出Word文档
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- 选中考试列表 -->
                <div class="mb-3">
                    <label class="form-label"><strong>选中的考试：</strong></label>
                    <ul id="selectedExamsForWord" class="list-unstyled border rounded p-2 bg-light">
                        <!-- 动态填充 -->
                    </ul>
                </div>
                
                <!-- 导出选项 -->
                <div class="mb-3">
                    <label class="form-label"><strong>导出选项：</strong></label>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="wordIncludeAnswers" checked>
                        <label class="form-check-label" for="wordIncludeAnswers">
                            包含参考答案
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="wordIncludeGrading">
                        <label class="form-check-label" for="wordIncludeGrading">
                            包含评分细则（仅在包含答案时有效）
                        </label>
                    </div>
                </div>
                
                <!-- 说明信息 -->
                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i>
                    <strong>说明：</strong>
                    <ul class="mb-0 mt-2">
                        <li>题目将按照选择题、判断题、简答题、其他题型的顺序排列</li>
                        <li>纯题目版本适合供学生答题使用</li>
                        <li>带答案版本适合教师参考和阅卷使用</li>
                        <li>评分细则包含各题型的详细评分标准</li>
                    </ul>
                </div>
            </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="confirmWordExport()">
                    <i class="bi bi-download"></i> 开始导出
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 考试详情查看模态框 -->
<div class="modal fade" id="examDetailsModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title">
                    <i class="bi bi-eye-fill"></i>
                    考试详情监控
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" title="关闭"></button>
            </div>
            <div class="modal-body">
                <!-- 考试基本信息 -->
                <div id="examDetailsCard" class="card mb-3">
                    <div class="card-header bg-light">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <h6 class="mb-0">
                                    <i class="bi bi-info-circle"></i>
                                    考试信息
                                </h6>
                            </div>
                            <div class="col-md-4 text-end">
                                <button class="btn btn-sm btn-outline-primary" onclick="refreshExamDetails()">
                                    <i class="bi bi-arrow-repeat"></i> 刷新数据
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <h5 id="examDetailTitle" class="text-primary">加载中...</h5>
                                <p id="examDetailDescription" class="text-muted mb-1"></p>
                                <div class="mt-2">
                                    <span class="badge bg-info me-2" id="examDetailStatus">状态</span>
                                    <span class="badge bg-primary me-2">时长: <span id="examDetailDuration">0</span>分钟</span>
                                    <span class="badge bg-success me-2">题目: <span id="examDetailQuestions">0</span>题</span>
                                    <span class="badge bg-warning">总分: <span id="examDetailTotalScore">0</span>分</span>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="text-end">
                                    <div class="mb-2">
                                        <small class="text-muted">创建时间:</small><br>
                                        <span id="examDetailCreatedAt" class="fw-bold">-</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 统计信息面板 -->
                <div class="row mb-3">
                    <div class="col-md-3 mb-2">
                        <div class="card text-center bg-primary text-white">
                            <div class="card-body py-2">
                                <h4 id="statTotalStudents" class="mb-1">0</h4>
                                <small>总学生数</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 mb-2">
                        <div class="card text-center bg-success text-white">
                            <div class="card-body py-2">
                                <h4 id="statCompletedCount" class="mb-1">0</h4>
                                <small>已完成</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 mb-2">
                        <div class="card text-center bg-warning text-dark">
                            <div class="card-body py-2">
                                <h4 id="statInProgressCount" class="mb-1">0</h4>
                                <small>进行中</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 mb-2">
                        <div class="card text-center bg-danger text-white">
                            <div class="card-body py-2">
                                <h4 id="statOnlineCount" class="mb-1">0</h4>
                                <small>在线人数</small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 学生详情列表 -->
                <div class="card">
                    <div class="card-header bg-success text-white">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <h6 class="mb-0">
                                    <i class="bi bi-people-fill"></i>
                                    学生状态详情
                                </h6>
                            </div>
                            <div class="col-md-4 text-end">
                                <span class="badge bg-light text-dark" id="detailsSelectedCount">已选择: 0 名学生</span>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div id="examDetailsLoadingMessage" class="text-center py-4">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">加载中...</span>
                            </div>
                            <p class="mt-2 text-muted">正在加载考试详情...</p>
                        </div>
                        <div id="examDetailsTableContainer" style="display: none;">
                            <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                                <table class="table table-hover table-sm mb-0" id="examDetailsTable">
                                    <thead class="table-dark sticky-top">
                                        <tr>
                                            <th width="40">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="selectAllDetailsCheckbox" onchange="toggleSelectAllDetails()">
                                                </div>
                                            </th>
                                            <th width="80">学号</th>
                                            <th width="100">姓名</th>
                                            <th width="70">状态</th>
                                            <th width="80">进度</th>
                                            <th width="70">用时</th>
                                            <th width="70">分数</th>
                                            <th width="100">IP地址</th>
                                            <th width="110">开始时间</th>
                                            <th width="110">最后活动</th>
                                            <th width="60">在线</th>
                                            <th width="80">学院</th>
                                            <th width="80">专业</th>
                                        </tr>
                                    </thead>
                                    <tbody id="examDetailsTableBody">
                                        <!-- 学生详情数据将通过JavaScript动态填充 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </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="exportExamDetails()" id="exportDetailsBtn">
                    <i class="bi bi-download"></i> 导出详情
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 学生提交状态管理模态框 -->
<div class="modal fade" id="studentSubmissionsModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">
                    <i class="bi bi-people-fill"></i>
                    学生提交状态管理
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" title="关闭"></button>
            </div>
            <div class="modal-body">
                <!-- 考试信息 -->
                <div id="examInfoCard" class="card mb-3">
                    <div class="card-header bg-light">
                        <h6 class="mb-0">考试信息</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <h6 id="examTitle" class="text-primary">加载中...</h6>
                                <p id="examDescription" class="text-muted mb-1"></p>
                            </div>
                            <div class="col-md-4 text-end">
                                <div class="d-flex justify-content-end">
                                    <div class="me-3">
                                        <small class="text-muted">时长:</small>
                                        <span id="examDuration" class="fw-bold">0</span>分钟
                                    </div>
                                    <div class="me-3">
                                        <small class="text-muted">题目:</small>
                                        <span id="examQuestions" class="fw-bold">0</span>题
                                    </div>
                                    <div>
                                        <small class="text-muted">总分:</small>
                                        <span id="examTotalScore" class="fw-bold">0</span>分
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 操作工具栏 -->
                <div class="card mb-3">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="btn-group me-2" role="group">
                                    <button class="btn btn-outline-primary" onclick="selectAllStudents()">
                                        <i class="bi bi-check-all"></i> 全选
                                    </button>
                                    <button class="btn btn-outline-secondary" onclick="clearStudentSelection()">
                                        <i class="bi bi-x-square"></i> 清除选择
                                    </button>
                                </div>
                                <div class="btn-group me-2" role="group">
                                    <button class="btn btn-outline-warning" onclick="forceSubmitSelected()" id="forceSubmitBtn" disabled>
                                        <i class="bi bi-upload"></i> 强制提交
                                    </button>
                                    <button class="btn btn-outline-success" onclick="allowContinueSelected()" id="allowContinueBtn" disabled>
                                        <i class="bi bi-arrow-clockwise"></i> 允许继续
                                    </button>
                                    <button class="btn btn-outline-danger" onclick="clearProgressSelected()" id="clearProgressBtn" disabled>
                                        <i class="bi bi-trash"></i> 清除记录
                                    </button>
                                </div>
                                <button class="btn btn-info" onclick="refreshStudentSubmissions()">
                                    <i class="bi bi-arrow-repeat"></i> 刷新状态
                                </button>
                            </div>
                            <div class="col-md-4 text-end">
                                <span class="badge bg-light text-dark" id="selectedStudentsCount">已选择: 0 名学生</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 学生列表 -->
                <div class="card">
                    <div class="card-header bg-success text-white">
                        <h6 class="mb-0">
                            <i class="bi bi-list"></i>
                            学生提交状态列表
                        </h6>
                    </div>
                    <div class="card-body p-0">
                        <div id="studentsLoadingMessage" class="text-center py-4">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">加载中...</span>
                            </div>
                            <p class="mt-2 text-muted">正在加载学生提交状态...</p>
                        </div>
                        <div id="studentsTableContainer" style="display: none;">
                            <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                                <table class="table table-hover mb-0" id="studentsTable">
                                    <thead class="table-dark sticky-top">
                                        <tr>
                                            <th width="50">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="selectAllStudentsCheckbox" onchange="toggleSelectAllStudents()">
                                                </div>
                                            </th>
                                            <th width="100">学号</th>
                                            <th width="120">姓名</th>
                                            <th width="100">状态</th>
                                            <th width="80">分数</th>
                                            <th width="120">开始时间</th>
                                            <th width="120">结束时间</th>
                                            <th width="100">学院</th>
                                            <th width="100">专业</th>
                                            <th width="80">班级</th>
                                        </tr>
                                    </thead>
                                    <tbody id="studentsTableBody">
                                        <!-- 学生数据将通过JavaScript动态填充 -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// 全局变量
let selectedExams = [];
let allExams = [];
let currentViewExamId = null;
let availableQuestions = {
    simple_questions: [],
    complex_question_groups: []
};

// 初始化考试数据
function initializeExamData() {
    try {
        const examData = '{{ exams | tojson | safe }}';
        allExams = JSON.parse(examData);
        console.log('考试数据初始化成功:', allExams.length, '个考试');
    } catch (e) {
        console.error('初始化考试数据失败:', e);
        allExams = [];
    }
}

// 消息显示函数 - 优化版本，减少DOM操作引起的闪烁
function showMessage(message, type = 'info') {
    console.log(`[${type.toUpperCase()}] ${message}`);
    
    // 创建Bootstrap Alert
    const alertClass = type === 'error' ? 'danger' : type;
    const alertHtml = `
        <div class="alert alert-${alertClass} alert-dismissible fade show" role="alert" style="margin-bottom: 1rem; z-index: 9999; position: relative;">
            <strong>${type === 'error' ? '错误' : type === 'success' ? '成功' : '提示'}:</strong> ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;
    
    // 查找或创建消息容器，避免影响页面布局
    let messageContainer = document.getElementById('message-container');
    if (!messageContainer) {
        messageContainer = document.createElement('div');
        messageContainer.id = 'message-container';
        messageContainer.style.cssText = `
            position: fixed;
            top: 80px;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            max-width: 600px;
            z-index: 9999;
            pointer-events: none;
        `;
        document.body.appendChild(messageContainer);
    }
    
    // 创建alert元素
    const alertDiv = document.createElement('div');
    alertDiv.innerHTML = alertHtml;
    const alertElement = alertDiv.firstElementChild;
    alertElement.style.pointerEvents = 'auto';
    
    // 移除旧的消息（防止堆积）
    const existingAlerts = messageContainer.querySelectorAll('.alert');
    existingAlerts.forEach(alert => alert.remove());
    
    // 添加新消息
    messageContainer.appendChild(alertElement);
    
    // 5秒后自动消失
    setTimeout(() => {
        if (alertElement && alertElement.parentElement) {
            try {
                const bsAlert = new bootstrap.Alert(alertElement);
            bsAlert.close();
            } catch (e) {
                // 如果bootstrap未正确初始化，直接移除元素
                alertElement.remove();
            }
        }
    }, 5000);
}

// 页面加载完成后初始化 - 优化版本，防止重复初始化
document.addEventListener('DOMContentLoaded', function() {
    console.log('考试管理页面加载完成');
    
    // 防止重复初始化
    if (window.examPageInitialized) {
        return;
    }
    window.examPageInitialized = true;
    
    // 延迟初始化，确保DOM完全渲染
    setTimeout(() => {
    initializeExamData();
    updateSelectedCount();
        
        // 确保下拉菜单正确初始化
        const dropdownElements = document.querySelectorAll('[data-bs-toggle="dropdown"]');
        dropdownElements.forEach(element => {
            if (!element._bsDropdown) {
                try {
                    new bootstrap.Dropdown(element);
                } catch (e) {
                    console.warn('初始化下拉菜单失败:', e);
                }
            }
        });
    }, 100);
});

// 切换筛选区域显示/隐藏
function toggleFilter() {
    console.log('切换筛选功能暂未实现');
    showMessage('筛选功能开发中', 'info');
}

// 更新选中数量
function updateSelectedCount() {
    const checkboxes = document.querySelectorAll('.exam-checkbox:checked');
    selectedExams = Array.from(checkboxes).map(cb => parseInt(cb.value));
    
    const selectedCountElement = document.getElementById('selectedCount');
    if (selectedCountElement) {
        selectedCountElement.textContent = '已选择: ' + selectedExams.length;
    }
    
    const batchDeleteBtn = document.getElementById('batchDeleteBtn');
    const batchToggleBtn = document.getElementById('batchToggleBtn');
    
    if (batchDeleteBtn) batchDeleteBtn.disabled = selectedExams.length === 0;
    if (batchToggleBtn) batchToggleBtn.disabled = selectedExams.length === 0;
}

// 切换全选状态
function toggleSelectAll() {
    const selectAllCheckbox = document.getElementById('selectAllCheckbox');
    const examCheckboxes = document.querySelectorAll('.exam-checkbox');
    
    examCheckboxes.forEach(checkbox => {
        checkbox.checked = selectAllCheckbox.checked;
    });
    
    updateSelectedCount();
}

// 全选考试
function selectAllExams() {
    const examCheckboxes = document.querySelectorAll('.exam-checkbox');
    const selectAllCheckbox = document.getElementById('selectAllCheckbox');
    
    examCheckboxes.forEach(checkbox => {
        checkbox.checked = true;
    });
    
    if (selectAllCheckbox) {
        selectAllCheckbox.checked = true;
    }
    
    updateSelectedCount();
}

// 加载可用题目 - 重构支持简单题目和复杂题目组
function loadAvailableQuestions() {
    console.log('开始加载可用题目（支持分组）');
    showMessage('正在加载题目列表...', 'info');
    
    fetch('/teacher/questions/available', {
        method: 'GET',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
        }
    })
    .then(response => {
        console.log('题目API响应状态:', response.status);
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        return response.json();
    })
    .then(data => {
        console.log('题目加载响应:', data);
        if (data.success) {
            availableQuestions = {
                simple_questions: data.simple_questions || [],
                complex_question_groups: data.complex_question_groups || []
            };
            displayAvailableQuestions();
            showMessage(`成功加载 ${data.total_simple} 道简单题目和 ${data.total_complex_groups} 个复杂题目组`, 'success');
        } else {
            throw new Error(data.message || '加载题目失败');
        }
    })
    .catch(error => {
        console.error('加载题目失败:', error);
        document.getElementById('availableQuestions').innerHTML = 
            `<p class="text-danger">加载失败: ${error.message}</p>`;
        showMessage(`加载题目失败: ${error.message}`, 'error');
    });
}

// 显示可用题目 - 重构支持简单题目和复杂题目组
function displayAvailableQuestions() {
    const container = document.getElementById('availableQuestions');
    
    if ((!availableQuestions.simple_questions || availableQuestions.simple_questions.length === 0) &&
        (!availableQuestions.complex_question_groups || availableQuestions.complex_question_groups.length === 0)) {
        container.innerHTML = '<p class="text-muted">暂无可用题目，请先添加题目</p>';
        return;
    }
    
    let html = '';
    
    // 显示简单题目部分
    if (availableQuestions.simple_questions && availableQuestions.simple_questions.length > 0) {
        html += `
            <div class="mb-4">
                <h6 class="text-primary mb-3">
                    <i class="bi bi-list-ul"></i> 
                    简单题目 (${availableQuestions.simple_questions.length}道)
                    <button type="button" class="btn btn-sm btn-outline-primary ms-2" onclick="toggleAllSimpleQuestions()">
                        全选/取消
                    </button>
                </h6>
                <div class="row">
        `;
        
        availableQuestions.simple_questions.forEach((question, index) => {
            const questionText = question.question_text || '';
            const truncatedText = questionText.length > 60 ? questionText.substring(0, 60) + '...' : questionText;
            const typeText = question.question_type || '未知';
            
            html += `
                <div class="col-12 mb-2">
                    <div class="form-check border rounded p-2 simple-question-item">
                        <input class="form-check-input simple-question-select" type="checkbox" 
                               value="${question.id}" id="simple_q${question.id}"
                               onchange="updateSelectedQuestionsCount()">
                        <label class="form-check-label w-100" for="simple_q${question.id}">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <span class="badge bg-primary me-2">${typeText}</span>
                                    <span>${truncatedText}</span>
                                </div>
                                <small class="text-muted">
                                    ID:${question.id} | ${question.score}分
                                </small>
                            </div>
                        </label>
                    </div>
                </div>
            `;
        });
        
        html += `
                </div>
            </div>
        `;
    }
    
    // 显示复杂题目组部分
    if (availableQuestions.complex_question_groups && availableQuestions.complex_question_groups.length > 0) {
        html += `
            <div class="mb-4">
                <h6 class="text-success mb-3">
                    <i class="bi bi-collection"></i> 
                    复杂题目组 (${availableQuestions.complex_question_groups.length}组)
                    <button type="button" class="btn btn-sm btn-outline-success ms-2" onclick="toggleAllComplexGroups()">
                        全选/取消
                    </button>
                </h6>
                <div class="row">
        `;
        
        availableQuestions.complex_question_groups.forEach((group, index) => {
            const material = group.material || '';
            const truncatedMaterial = material.length > 80 ? material.substring(0, 80) + '...' : material;
            const typeList = group.question_types ? group.question_types.join(', ') : '未知';
            
            html += `
                <div class="col-12 mb-3">
                    <div class="form-check border rounded p-3 complex-group-item bg-light">
                        <input class="form-check-input complex-group-select" type="checkbox" 
                               value="${encodeURIComponent(material)}" id="complex_group_${index}"
                               onchange="updateSelectedQuestionsCount()">
                        <label class="form-check-label w-100" for="complex_group_${index}">
                            <div class="mb-2">
                                <span class="badge bg-success me-2">题目组</span>
                                <strong>共${group.question_count}道题目，总分${group.total_score}分</strong>
                            </div>
                            <div class="mb-2">
                                <small class="text-muted">包含题型: ${typeList}</small>
                            </div>
                            <div class="text-truncate">
                                <small><strong>阅读材料:</strong> ${truncatedMaterial}</small>
                            </div>
                            <div class="mt-2">
                                <button type="button" class="btn btn-sm btn-outline-info" 
                                        onclick="toggleGroupDetails(${index})" 
                                        data-group-index="${index}">
                                    查看详情
                                </button>
                            </div>
                            <div id="group_details_${index}" class="mt-2" style="display: none;">
                                <div class="border-top pt-2">
                                    <strong>包含题目:</strong>
                                    <div class="ms-3 mt-1">
            `;
            
            group.questions.forEach((q, qIndex) => {
                const qText = q.question_text || '';
                const qTruncated = qText.length > 50 ? qText.substring(0, 50) + '...' : qText;
                html += `
                                        <div class="mb-1">
                                            <span class="badge bg-secondary me-1">${q.question_type}</span>
                                            <small>ID:${q.id} | ${q.score}分 | ${qTruncated}</small>
                                        </div>
                `;
            });
            
            html += `
                                    </div>
                                </div>
                            </div>
                        </label>
                    </div>
                </div>
            `;
        });
        
        html += `
                </div>
            </div>
        `;
    }
    
    container.innerHTML = html;
}

// 切换复杂题目组详情显示
function toggleGroupDetails(groupIndex) {
    const detailsDiv = document.getElementById(`group_details_${groupIndex}`);
    const toggleBtn = document.querySelector(`button[data-group-index="${groupIndex}"]`);
    
    if (detailsDiv.style.display === 'none') {
        detailsDiv.style.display = 'block';
        toggleBtn.textContent = '隐藏详情';
    } else {
        detailsDiv.style.display = 'none';
        toggleBtn.textContent = '查看详情';
    }
}

// 全选/取消全选简单题目
function toggleAllSimpleQuestions() {
    const checkboxes = document.querySelectorAll('.simple-question-select');
    const allChecked = Array.from(checkboxes).every(cb => cb.checked);
    
    checkboxes.forEach(cb => {
        cb.checked = !allChecked;
    });
    
    updateSelectedQuestionsCount();
}

// 全选/取消全选复杂题目组
function toggleAllComplexGroups() {
    const checkboxes = document.querySelectorAll('.complex-group-select');
    const allChecked = Array.from(checkboxes).every(cb => cb.checked);
    
    checkboxes.forEach(cb => {
        cb.checked = !allChecked;
    });
    
    updateSelectedQuestionsCount();
}

// 更新选中题目数量统计
function updateSelectedQuestionsCount() {
    const simpleSelected = document.querySelectorAll('.simple-question-select:checked').length;
    const complexSelected = document.querySelectorAll('.complex-group-select:checked').length;
    const totalSelected = simpleSelected + complexSelected;
    
    const countElement = document.getElementById('selectedQuestionsCount');
    if (countElement) {
        countElement.textContent = totalSelected;
    }
    
    // 更新详细统计
    const detailElement = document.getElementById('selectedQuestionsDetail');
    if (detailElement) {
        detailElement.textContent = `简单题目: ${simpleSelected}, 题目组: ${complexSelected}`;
    }
}

// 创建考试 - 重构支持简单题目和复杂题目组
function submitAddExam() {
    console.log('开始创建考试（支持分组）');
    
    const selectedSimpleQuestions = Array.from(document.querySelectorAll('.simple-question-select:checked'))
        .map(cb => cb.value);
    const selectedComplexGroups = Array.from(document.querySelectorAll('.complex-group-select:checked'))
        .map(cb => cb.value);  // 不要在这里解码，让后端处理
    
    console.log('选中的简单题目:', selectedSimpleQuestions);
    console.log('选中的复杂题目组:', selectedComplexGroups);
    console.log('复杂题目组原始值:', selectedComplexGroups.map(v => v.substring(0, 100)));
    
    if (selectedSimpleQuestions.length === 0 && selectedComplexGroups.length === 0) {
        showMessage('请至少选择一道题目或一个题目组', 'error');
        return;
    }
    
    const title = document.getElementById('addExamTitle').value.trim();
    const description = document.getElementById('addExamDescription').value.trim();
    const duration = parseInt(document.getElementById('addExamDuration').value) || 60;
    const isActive = document.getElementById('addExamActive').checked;
    
    if (!title) {
        showMessage('请输入考试名称', 'error');
        return;
    }
    
    // 构建表单数据
    const formData = new FormData();
    formData.append('title', title);
    formData.append('description', description);
    formData.append('duration_minutes', duration.toString());
    formData.append('is_active', isActive.toString());
    
    // 添加简单题目ID
    selectedSimpleQuestions.forEach(qid => {
        formData.append('simple_question_ids', qid);
    });
    
    // 添加复杂题目组材料 - 直接传递，不进行额外编码
    selectedComplexGroups.forEach(material => {
        // 从前端存储的值中解码（因为前端使用了encodeURIComponent存储）
        const decodedMaterial = decodeURIComponent(material);
        formData.append('complex_group_materials', decodedMaterial);
        console.log('提交材料:', material.substring(0, 50), '->', decodedMaterial.substring(0, 50));
    });
    
    console.log('提交的表单数据:');
    for (let pair of formData.entries()) {
        if (pair[0] === 'complex_group_materials') {
            console.log(pair[0] + ': ' + pair[1].substring(0, 100) + '...');
        } else {
            console.log(pair[0] + ': ' + pair[1]);
        }
    }
    
    // 显示加载状态
    const submitBtn = document.querySelector('button[onclick="submitAddExam()"]');
    const originalText = submitBtn.innerHTML;
    submitBtn.innerHTML = '<i class="spinner-border spinner-border-sm me-2"></i>创建中...';
    submitBtn.disabled = true;
    
    fetch('/teacher/exams/add', {
        method: 'POST',
        credentials: 'same-origin',
        body: formData
    })
    .then(response => {
        console.log('创建考试响应状态:', response.status);
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        return response.json();
    })
    .then(data => {
        console.log('创建考试响应:', data);
        if (data.success) {
            showMessage(data.message || '考试创建成功', 'success');
            
            // 关闭模态框
            const modal = bootstrap.Modal.getInstance(document.getElementById('addExamModal'));
            if (modal) {
                modal.hide();
            }
            
            // 重置表单
            document.getElementById('addExamForm').reset();
            document.getElementById('selectedQuestionsCount').textContent = '0';
            document.getElementById('availableQuestions').innerHTML = 
                '<p class="text-muted">点击"刷新题目列表"加载可用题目</p>';
            
            // 2秒后刷新页面
            setTimeout(() => {
                window.location.reload();
            }, 2000);
        } else {
            throw new Error(data.message || '创建失败');
        }
    })
    .catch(error => {
        console.error('创建考试失败:', error);
        showMessage(`创建考试失败: ${error.message}`, 'error');
    })
    .finally(() => {
        // 恢复按钮状态
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
    });
}

// 编辑考试
function editExam(element) {
    const examId = parseInt(element.getAttribute('data-exam-id'));
    console.log('编辑考试:', examId);
    // 跳转到考试编辑页面
    window.location.href = `/teacher/exams/edit/${examId}`;
}

// 查看考试详情
function viewExam(element) {
    const examId = parseInt(element.getAttribute('data-exam-id'));
    console.log('查看考试详情:', examId);
    
    // 设置当前查看的考试ID
    currentViewExamId = examId;
    
    // 打开模态框
    const modal = new bootstrap.Modal(document.getElementById('examDetailsModal'));
    modal.show();
    
    // 加载考试详情
    loadExamDetails();
}

// 加载考试详情和学生状态
function loadExamDetails() {
    if (!currentViewExamId) return;
    
    // 显示加载状态
    document.getElementById('examDetailsLoadingMessage').style.display = 'block';
    document.getElementById('examDetailsTableContainer').style.display = 'none';
    
    fetch(`/teacher/exams/${currentViewExamId}/details`)
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            // 更新考试信息
            updateExamDetailsInfo(data.exam);
            
            // 更新统计信息
            updateExamStatistics(data.statistics);
            
            // 更新学生详情列表
            displayExamDetailsTable(data.students);
            
            // 隐藏加载状态，显示表格
            document.getElementById('examDetailsLoadingMessage').style.display = 'none';
            document.getElementById('examDetailsTableContainer').style.display = 'block';
            
            console.log('考试详情加载成功:', data.students.length, '名学生');
        } else {
            throw new Error(data.message || '加载考试详情失败');
        }
    })
    .catch(error => {
        console.error('加载考试详情失败:', error);
        document.getElementById('examDetailsLoadingMessage').innerHTML = 
            `<div class="text-center py-4 text-danger">
                <i class="bi bi-exclamation-triangle" style="font-size: 2rem;"></i>
                <p class="mt-2">加载失败: ${error.message}</p>
                <button class="btn btn-outline-primary" onclick="loadExamDetails()">重试</button>
            </div>`;
    });
}

// 更新考试详情信息
function updateExamDetailsInfo(exam) {
    document.getElementById('examDetailTitle').textContent = exam.title;
    document.getElementById('examDetailDescription').textContent = exam.description || '暂无描述';
    document.getElementById('examDetailDuration').textContent = exam.duration_minutes;
    document.getElementById('examDetailQuestions').textContent = exam.total_questions;
    document.getElementById('examDetailTotalScore').textContent = exam.total_score?.toFixed(1) || '0';
    
    // 状态标签
    const statusElement = document.getElementById('examDetailStatus');
    if (exam.is_active) {
        statusElement.textContent = '进行中';
        statusElement.className = 'badge bg-success me-2';
    } else {
        statusElement.textContent = '已结束';
        statusElement.className = 'badge bg-secondary me-2';
    }
    
    // 创建时间
    const createdAt = exam.created_at ? formatDateTime(exam.created_at) : '未知';
    document.getElementById('examDetailCreatedAt').textContent = createdAt;
}

// 更新考试统计信息
function updateExamStatistics(statistics) {
    document.getElementById('statTotalStudents').textContent = statistics.total_students || 0;
    document.getElementById('statCompletedCount').textContent = statistics.completed_count || 0;
    document.getElementById('statInProgressCount').textContent = statistics.in_progress_count || 0;
    document.getElementById('statOnlineCount').textContent = statistics.online_count || 0;
}

// 显示考试详情表格
function displayExamDetailsTable(students) {
    const tbody = document.getElementById('examDetailsTableBody');
    
    if (!students || students.length === 0) {
        tbody.innerHTML = '<tr><td colspan="13" class="text-center text-muted py-4">暂无学生数据</td></tr>';
        return;
    }
    
    let html = '';
    students.forEach((student, index) => {
        const statusInfo = getDetailedStatusInfo(student.status, student.is_online);
        const startTime = student.start_time ? formatDateTime(student.start_time) : '-';
        const lastActivity = student.last_activity ? formatDateTime(student.last_activity) : '-';
        const score = student.score > 0 ? `${student.score}/${student.total_score}` : '-';
        const progress = `${student.answered_count}/${student.total_questions} (${student.progress_percent}%)`;
        const elapsedTime = formatElapsedTime(student.elapsed_minutes);
        const ipAddress = student.ip_address || '-';
        const userAgent = student.user_agent ? getSimplifiedUserAgent(student.user_agent) : '-';
        
        html += `
            <tr data-student-id="${student.student_id}" class="${student.is_online ? 'table-success' : ''}">
                <td>
                    <div class="form-check">
                        <input class="form-check-input details-student-checkbox" type="checkbox" 
                               value="${student.student_id}" onchange="updateDetailsSelectedCount()">
                    </div>
                </td>
                <td><code class="small">${student.student_number}</code></td>
                <td><strong class="small">${student.student_name}</strong></td>
                <td>
                    <span class="badge ${statusInfo.class} small">${statusInfo.text}</span>
                </td>
                <td><small class="text-primary">${progress}</small></td>
                <td><small class="text-info">${elapsedTime}</small></td>
                <td><small class="text-success">${score}</small></td>
                <td>
                    <small class="text-muted" title="${student.user_agent || ''}">${ipAddress}</small>
                </td>
                <td><small class="text-muted">${startTime}</small></td>
                <td><small class="text-muted">${lastActivity}</small></td>
                <td>
                    <span class="badge ${student.is_online ? 'bg-success' : 'bg-secondary'} small">
                        ${student.is_online ? '在线' : '离线'}
                    </span>
                </td>
                <td><small class="text-muted">${student.college || '-'}</small></td>
                <td><small class="text-muted">${student.major || '-'}</small></td>
            </tr>
        `;
    });
    
    tbody.innerHTML = html;
    updateDetailsSelectedCount();
}

// 获取详细状态信息
function getDetailedStatusInfo(status, isOnline) {
    switch (status) {
        case 'completed':
            return { text: '已完成', class: 'bg-success' };
        case 'in_progress':
            return { 
                text: isOnline ? '进行中' : '暂停中', 
                class: isOnline ? 'bg-warning text-dark' : 'bg-info text-white'
            };
        case 'not_started':
            return { text: '未开始', class: 'bg-secondary' };
        default:
            return { text: '未知', class: 'bg-light text-dark' };
    }
}

// 格式化已用时间
function formatElapsedTime(minutes) {
    if (!minutes || minutes <= 0) return '0分钟';
    
    const hours = Math.floor(minutes / 60);
    const mins = Math.floor(minutes % 60);
    
    if (hours > 0) {
        return `${hours}小时${mins}分钟`;
    }
    return `${mins}分钟`;
}

// 简化UserAgent显示
function getSimplifiedUserAgent(userAgent) {
    if (!userAgent) return '-';
    
    // 检测浏览器类型
    if (userAgent.includes('Chrome')) return 'Chrome';
    if (userAgent.includes('Firefox')) return 'Firefox';
    if (userAgent.includes('Safari') && !userAgent.includes('Chrome')) return 'Safari';
    if (userAgent.includes('Edge')) return 'Edge';
    if (userAgent.includes('Opera')) return 'Opera';
    
    return 'Other';
}

// 切换全选详情学生
function toggleSelectAllDetails() {
    const selectAllCheckbox = document.getElementById('selectAllDetailsCheckbox');
    const studentCheckboxes = document.querySelectorAll('.details-student-checkbox');
    
    studentCheckboxes.forEach(checkbox => {
        checkbox.checked = selectAllCheckbox.checked;
    });
    
    updateDetailsSelectedCount();
}

// 更新选中学生数量
function updateDetailsSelectedCount() {
    const checkboxes = document.querySelectorAll('.details-student-checkbox:checked');
    const selectedCount = checkboxes.length;
    
    const selectedCountElement = document.getElementById('detailsSelectedCount');
    if (selectedCountElement) {
        selectedCountElement.textContent = `已选择: ${selectedCount} 名学生`;
    }
}

// 刷新考试详情
function refreshExamDetails() {
    console.log('刷新考试详情');
    loadExamDetails();
}

// 导出考试详情
function exportExamDetails() {
    if (!currentViewExamId) {
        showMessage('无法获取考试ID', 'error');
        return;
    }
    
    showMessage('正在导出考试详情...', 'info');
    
    // 构建导出URL
    window.open(`/teacher/exams/${currentViewExamId}/export-details`, '_blank');
}

// 切换考试状态
function toggleExamStatus(element) {
    const examId = parseInt(element.getAttribute('data-exam-id'));
    
    if (!confirm('确定要切换考试状态吗？')) {
        return;
    }
    
    console.log('切换考试状态:', examId);
    
    fetch(`/teacher/exams/toggle/${examId}`, {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showMessage(data.message, 'success');
            setTimeout(() => window.location.reload(), 1000);
        } else {
            showMessage(data.message, 'error');
        }
    })
    .catch(error => {
        console.error('切换状态失败:', error);
        showMessage('切换状态失败', 'error');
    });
}

// 删除考试
function deleteExam(element) {
    const examId = parseInt(element.getAttribute('data-exam-id'));
    
    if (!confirm('确定要删除这个考试吗？此操作不可撤销。')) {
        return;
    }
    
    console.log('删除考试:', examId);
    
    fetch(`/teacher/exams/delete/${examId}`, {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showMessage(data.message, 'success');
            setTimeout(() => window.location.reload(), 1000);
        } else {
            showMessage(data.message, 'error');
        }
    })
    .catch(error => {
        console.error('删除考试失败:', error);
        showMessage('删除考试失败', 'error');
    });
}

// 批量操作函数
function batchToggleStatus() {
    if (selectedExams.length === 0) {
        showMessage('请先选择要操作的考试', 'error');
        return;
    }
    
    if (!confirm(`确定要批量切换 ${selectedExams.length} 个考试的状态吗？`)) {
        return;
    }
    
    fetch('/teacher/exams/batch-toggle', {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ exam_ids: selectedExams })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showMessage(data.message, 'success');
            setTimeout(() => window.location.reload(), 1000);
        } else {
            showMessage(data.message, 'error');
        }
    })
    .catch(error => {
        console.error('批量切换状态失败:', error);
        showMessage('批量切换状态失败', 'error');
    });
}

function batchDeleteExams() {
    if (selectedExams.length === 0) {
        showMessage('请先选择要删除的考试', 'error');
        return;
    }
    
    if (!confirm(`确定要删除选中的 ${selectedExams.length} 个考试吗？此操作不可撤销。`)) {
        return;
    }
    
    fetch('/teacher/exams/batch-delete', {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ exam_ids: selectedExams })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showMessage(data.message, 'success');
            setTimeout(() => window.location.reload(), 1000);
        } else {
            showMessage(data.message, 'error');
        }
    })
    .catch(error => {
        console.error('批量删除失败:', error);
        showMessage('批量删除失败', 'error');
    });
}

function clearAllExams() {
    if (!confirm('确定要清空所有考试吗？此操作不可撤销。')) {
        return;
    }
    
    fetch('/teacher/exams/clear', {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showMessage(data.message, 'success');
            setTimeout(() => window.location.reload(), 1000);
        } else {
            showMessage(data.message, 'error');
        }
    })
    .catch(error => {
        console.error('清空考试失败:', error);
        showMessage('清空考试失败', 'error');
    });
}

function exportExams(encoding) {
    window.location.href = `/teacher/exams/export?encoding=${encoding}`;
}

// 新增：导出简单考试信息
function exportExamsSimple(encoding) {
    window.location.href = `/teacher/exams/export-simple?encoding=${encoding}`;
}

// 新增：导出选中考试
function exportSelectedExams() {
    if (selectedExams.length === 0) {
        showMessage('请先选择要导出的考试', 'error');
        return;
    }
    
    showMessage(`导出选中的 ${selectedExams.length} 个考试功能开发中`, 'info');
    // TODO: 实现选中考试导出
}

// 新增：下载模板文件
function downloadTemplate(type) {
    if (type === 'full') {
        // 创建完整模板
        const headers = [
            'exam_title', 'exam_description', 'duration_minutes', 'is_active', 'created_at',
            'question_type', 'question_text', 'option_A', 'option_B', 'option_C', 'option_D',
            'correct_answer', 'difficulty', 'subject'
        ];
        
        const sampleData = [
            [
                '示例考试', '这是一个示例考试描述', '90', 'true', '2025-05-31 21:00:00',
                'choice', '以下哪个是Python的关键字？', 'def', 'function', 'method', 'procedure',
                'A', '1', 'Python编程'
            ],
            [
                '示例考试', '这是一个示例考试描述', '90', 'true', '2025-05-31 21:00:00',
                'essay', '请解释Python中的列表推导式的工作原理。', '', '', '', '',
                '列表推导式是Python中创建列表的简洁方式，它可以在一行代码中完成循环和条件判断。', '2', 'Python编程'
            ]
        ];
        
        downloadCSV(headers, sampleData, 'exam_import_template_full.csv');
    } else if (type === 'simple') {
        // 创建简单模板
        const headers = ['title', 'description', 'duration_minutes', 'total_questions', 'is_active', 'created_at'];
        const sampleData = [
            ['示例考试1', '这是第一个示例考试', '60', '10', 'true', '2025-05-31 21:00:00'],
            ['示例考试2', '这是第二个示例考试', '120', '20', 'false', '2025-05-31 21:00:00']
        ];
        
        downloadCSV(headers, sampleData, 'exam_import_template_simple.csv');
    }
}

// 辅助函数：下载CSV文件
function downloadCSV(headers, data, filename) {
    let csvContent = headers.join(',') + '\n';
    data.forEach(row => {
        csvContent += row.map(field => `"${field}"`).join(',') + '\n';
    });
    
    const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    const url = URL.createObjectURL(blob);
    link.setAttribute('href', url);
    link.setAttribute('download', filename);
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    
    showMessage(`模板文件 ${filename} 下载成功`, 'success');
}

// 简单导入处理
function handleSimpleImport() {
    const fileInput = document.getElementById('simpleImportFile');
    const file = fileInput.files[0];
    
    if (!file) {
        showMessage('请选择要导入的文件', 'error');
        return;
    }
    
    if (!file.name.toLowerCase().endsWith('.csv')) {
        showMessage('只支持CSV文件格式', 'error');
        return;
    }
    
    const formData = new FormData();
    formData.append('file', file);
    
    const submitBtn = document.getElementById('simpleImportSubmitBtn');
    const originalText = submitBtn.innerHTML;
    submitBtn.innerHTML = '<i class="spinner-border spinner-border-sm me-2"></i>导入中...';
    submitBtn.disabled = true;
    
    fetch('/teacher/exams/import-simple', {
        method: 'POST',
        credentials: 'same-origin',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showMessage(data.message, 'success');
            
            // 关闭模态框
            const modal = bootstrap.Modal.getInstance(document.getElementById('importSimpleModal'));
            modal.hide();
            
            // 清空文件输入
            fileInput.value = '';
            
            // 刷新页面
            setTimeout(() => window.location.reload(), 1000);
        } else {
            showMessage(data.message, 'error');
        }
    })
    .catch(error => {
        console.error('简单导入失败:', error);
        showMessage('导入失败: ' + error.message, 'error');
    })
    .finally(() => {
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
    });
}

// ===============================
// 学生提交状态管理功能
// ===============================

let currentExamId = null;
let selectedStudents = [];
let studentsData = [];

// 管理学生提交状态
function manageStudentSubmissions(element) {
    currentExamId = parseInt(element.getAttribute('data-exam-id'));
    console.log('管理学生提交状态，考试ID:', currentExamId);
    
    // 打开模态框
    const modal = new bootstrap.Modal(document.getElementById('studentSubmissionsModal'));
    modal.show();
    
    // 加载学生提交状态
    loadStudentSubmissions();
}

// 加载学生提交状态
function loadStudentSubmissions() {
    if (!currentExamId) return;
    
    // 显示加载状态
    document.getElementById('studentsLoadingMessage').style.display = 'block';
    document.getElementById('studentsTableContainer').style.display = 'none';
    
    fetch(`/teacher/exams/${currentExamId}/student-submissions`)
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        return response.json();
    })
    .then(data => {
        if (data.success) {
            // 更新考试信息
            updateExamInfo(data.exam);
            
            // 更新学生列表
            studentsData = data.students;
            displayStudentsTable(studentsData);
            
            // 隐藏加载状态，显示表格
            document.getElementById('studentsLoadingMessage').style.display = 'none';
            document.getElementById('studentsTableContainer').style.display = 'block';
            
            console.log('学生提交状态加载成功:', studentsData.length, '名学生');
        } else {
            throw new Error(data.message || '加载学生提交状态失败');
        }
    })
    .catch(error => {
        console.error('加载学生提交状态失败:', error);
        document.getElementById('studentsLoadingMessage').innerHTML = 
            `<div class="text-center py-4 text-danger">
                <i class="bi bi-exclamation-triangle" style="font-size: 2rem;"></i>
                <p class="mt-2">加载失败: ${error.message}</p>
                <button class="btn btn-outline-primary" onclick="loadStudentSubmissions()">重试</button>
            </div>`;
    });
}

// 更新考试信息显示
function updateExamInfo(exam) {
    document.getElementById('examTitle').textContent = exam.title;
    document.getElementById('examDescription').textContent = exam.description || '暂无描述';
    document.getElementById('examDuration').textContent = exam.duration_minutes;
    document.getElementById('examQuestions').textContent = exam.total_questions;
    document.getElementById('examTotalScore').textContent = exam.total_score.toFixed(1);
}

// 显示学生表格
function displayStudentsTable(students) {
    const tbody = document.getElementById('studentsTableBody');
    
    if (!students || students.length === 0) {
        tbody.innerHTML = '<tr><td colspan="10" class="text-center text-muted py-4">暂无学生数据</td></tr>';
        return;
    }
    
    let html = '';
    students.forEach((student, index) => {
        const statusInfo = getStatusInfo(student.status);
        const startTime = student.start_time ? formatDateTime(student.start_time) : '-';
        const endTime = student.end_time ? formatDateTime(student.end_time) : '-';
        const score = student.score > 0 ? `${student.score}/${student.total_score}` : '-';
        
        html += `
            <tr data-student-id="${student.student_id}">
                <td>
                    <div class="form-check">
                        <input class="form-check-input student-checkbox" type="checkbox" 
                               value="${student.student_id}" onchange="updateSelectedStudentsCount()">
                    </div>
                </td>
                <td><code>${student.student_number}</code></td>
                <td><strong>${student.student_name}</strong></td>
                <td>
                    <span class="badge ${statusInfo.class}">${statusInfo.text}</span>
                </td>
                <td>${score}</td>
                <td><small>${startTime}</small></td>
                <td><small>${endTime}</small></td>
                <td><small>${student.college || '-'}</small></td>
                <td><small>${student.major || '-'}</small></td>
                <td><small>${student.class_name || '-'}</small></td>
            </tr>
        `;
    });
    
    tbody.innerHTML = html;
    updateSelectedStudentsCount();
}

// 获取状态信息
function getStatusInfo(status) {
    switch (status) {
        case 'completed':
            return { text: '已提交', class: 'bg-success' };
        case 'in_progress':
            return { text: '进行中', class: 'bg-warning text-dark' };
        case 'not_started':
            return { text: '未开始', class: 'bg-secondary' };
        default:
            return { text: '未知', class: 'bg-light text-dark' };
    }
}

// 格式化日期时间
function formatDateTime(dateString) {
    if (!dateString) return '-';
    try {
        const date = new Date(dateString);
        return date.toLocaleString('zh-CN', {
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
        });
    } catch (e) {
        return dateString;
    }
}

// 切换全选学生
function toggleSelectAllStudents() {
    const selectAllCheckbox = document.getElementById('selectAllStudentsCheckbox');
    const studentCheckboxes = document.querySelectorAll('.student-checkbox');
    
    studentCheckboxes.forEach(checkbox => {
        checkbox.checked = selectAllCheckbox.checked;
    });
    
    updateSelectedStudentsCount();
}

// 选择所有学生
function selectAllStudents() {
    const studentCheckboxes = document.querySelectorAll('.student-checkbox');
    const selectAllCheckbox = document.getElementById('selectAllStudentsCheckbox');
    
    studentCheckboxes.forEach(checkbox => {
        checkbox.checked = true;
    });
    
    if (selectAllCheckbox) {
        selectAllCheckbox.checked = true;
    }
    
    updateSelectedStudentsCount();
}

// 清除学生选择
function clearStudentSelection() {
    const studentCheckboxes = document.querySelectorAll('.student-checkbox');
    const selectAllCheckbox = document.getElementById('selectAllStudentsCheckbox');
    
    studentCheckboxes.forEach(checkbox => {
        checkbox.checked = false;
    });
    
    if (selectAllCheckbox) {
        selectAllCheckbox.checked = false;
    }
    
    updateSelectedStudentsCount();
}

// 更新选中学生数量
function updateSelectedStudentsCount() {
    const checkboxes = document.querySelectorAll('.student-checkbox:checked');
    selectedStudents = Array.from(checkboxes).map(cb => parseInt(cb.value));
    
    const selectedCountElement = document.getElementById('selectedStudentsCount');
    if (selectedCountElement) {
        selectedCountElement.textContent = `已选择: ${selectedStudents.length} 名学生`;
    }
    
    // 更新批量操作按钮状态
    const forceSubmitBtn = document.getElementById('forceSubmitBtn');
    const allowContinueBtn = document.getElementById('allowContinueBtn');
    const clearProgressBtn = document.getElementById('clearProgressBtn');
    
    const hasSelection = selectedStudents.length > 0;
    if (forceSubmitBtn) forceSubmitBtn.disabled = !hasSelection;
    if (allowContinueBtn) allowContinueBtn.disabled = !hasSelection;
    if (clearProgressBtn) clearProgressBtn.disabled = !hasSelection;
}

// 强制提交选中学生
function forceSubmitSelected() {
    if (selectedStudents.length === 0) {
        showMessage('请先选择要强制提交的学生', 'error');
        return;
    }
    
    if (!confirm(`确定要强制提交选中的 ${selectedStudents.length} 名学生的考试吗？`)) {
        return;
    }
    
    const forceSubmitBtn = document.getElementById('forceSubmitBtn');
    const originalText = forceSubmitBtn.innerHTML;
    forceSubmitBtn.innerHTML = '<i class="spinner-border spinner-border-sm me-2"></i>提交中...';
    forceSubmitBtn.disabled = true;
    
    fetch(`/teacher/exams/${currentExamId}/force-submit-students`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ student_ids: selectedStudents })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showMessage(data.message, 'success');
            // 刷新学生列表
            setTimeout(() => {
                loadStudentSubmissions();
                clearStudentSelection();
            }, 1000);
        } else {
            showMessage(data.message, 'error');
        }
    })
    .catch(error => {
        console.error('强制提交失败:', error);
        showMessage('强制提交失败: ' + error.message, 'error');
    })
    .finally(() => {
        forceSubmitBtn.innerHTML = originalText;
        forceSubmitBtn.disabled = selectedStudents.length === 0;
    });
}

// 允许选中学生继续考试
function allowContinueSelected() {
    if (selectedStudents.length === 0) {
        showMessage('请先选择要允许继续考试的学生', 'error');
        return;
    }
    
    if (!confirm(`确定要允许选中的 ${selectedStudents.length} 名学生继续考试吗？`)) {
        return;
    }
    
    const allowContinueBtn = document.getElementById('allowContinueBtn');
    const originalText = allowContinueBtn.innerHTML;
    allowContinueBtn.innerHTML = '<i class="spinner-border spinner-border-sm me-2"></i>处理中...';
    allowContinueBtn.disabled = true;
    
    fetch(`/teacher/exams/${currentExamId}/allow-continue-students`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ student_ids: selectedStudents })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showMessage(data.message, 'success');
            // 刷新学生列表
            setTimeout(() => {
                loadStudentSubmissions();
                clearStudentSelection();
            }, 1000);
        } else {
            showMessage(data.message, 'error');
        }
    })
    .catch(error => {
        console.error('允许继续失败:', error);
        showMessage('允许继续失败: ' + error.message, 'error');
    })
    .finally(() => {
        allowContinueBtn.innerHTML = originalText;
        allowContinueBtn.disabled = selectedStudents.length === 0;
    });
}

// 清除选中学生的考试记录
function clearProgressSelected() {
    if (selectedStudents.length === 0) {
        showMessage('请先选择要清除记录的学生', 'error');
        return;
    }
    
    if (!confirm(`确定要清除选中的 ${selectedStudents.length} 名学生的考试记录吗？此操作不可撤销！`)) {
        return;
    }
    
    const clearProgressBtn = document.getElementById('clearProgressBtn');
    const originalText = clearProgressBtn.innerHTML;
    clearProgressBtn.innerHTML = '<i class="spinner-border spinner-border-sm me-2"></i>清除中...';
    clearProgressBtn.disabled = true;
    
    fetch(`/teacher/exams/${currentExamId}/clear-student-progress`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ student_ids: selectedStudents })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showMessage(data.message, 'success');
            // 刷新学生列表
            setTimeout(() => {
                loadStudentSubmissions();
                clearStudentSelection();
            }, 1000);
        } else {
            showMessage(data.message, 'error');
        }
    })
    .catch(error => {
        console.error('清除记录失败:', error);
        showMessage('清除记录失败: ' + error.message, 'error');
    })
    .finally(() => {
        clearProgressBtn.innerHTML = originalText;
        clearProgressBtn.disabled = selectedStudents.length === 0;
    });
}

// 刷新学生提交状态
function refreshStudentSubmissions() {
    console.log('刷新学生提交状态');
    loadStudentSubmissions();
}

// ===============================
// Word文档导出功能
// ===============================

// 显示Word导出模态框
function showWordExportModal() {
    if (selectedExams.length === 0) {
        showMessage('请先选择要导出Word文档的考试', 'error');
        return;
    }
    
    // 更新选中考试信息
    const selectedExamTitles = selectedExams.map(examId => {
        const examRow = document.querySelector(`tr[data-exam-id="${examId}"]`);
        return examRow ? examRow.querySelector('td:nth-child(2)').textContent.trim() : `考试${examId}`;
    });
    
    document.getElementById('selectedExamsForWord').innerHTML = 
        selectedExamTitles.map(title => `<li>${title}</li>`).join('');
    
    // 显示模态框
    const modal = new bootstrap.Modal(document.getElementById('wordExportModal'));
    modal.show();
}

// 确认导出Word文档
function confirmWordExport() {
    const includeAnswers = document.getElementById('wordIncludeAnswers').checked;
    const includeGrading = document.getElementById('wordIncludeGrading').checked;
    
    let exportType = '纯题目';
    if (includeAnswers && includeGrading) {
        exportType = '带答案和评分细则';
    } else if (includeAnswers) {
        exportType = '带参考答案';
    }
    
    showMessage(`开始批量生成${exportType}版本的Word文档...`, 'info');
    
    // 关闭模态框
    bootstrap.Modal.getInstance(document.getElementById('wordExportModal')).hide();
    
    // 逐个导出选中的考试
    exportExamsAsWord(selectedExams, includeAnswers, includeGrading, 0);
}

// 批量导出考试为Word文档
function exportExamsAsWord(examIds, includeAnswers, includeGrading, currentIndex) {
    if (currentIndex >= examIds.length) {
        showMessage(`批量导出完成！共生成 ${examIds.length} 个Word文档`, 'success');
        return;
    }
    
    const examId = examIds[currentIndex];
    
    // 构建导出URL
    let exportUrl = `/teacher/exams/${examId}/export-word`;
    const params = new URLSearchParams();
    
    if (includeAnswers) {
        params.append('answers', 'true');
    }
    
    if (includeGrading) {
        params.append('grading', 'true');
    }
    
    if (params.toString()) {
        exportUrl += '?' + params.toString();
    }
    
    // 打开导出链接
    window.open(exportUrl, '_blank');
    
    // 延迟1秒后导出下一个
    setTimeout(() => {
        exportExamsAsWord(examIds, includeAnswers, includeGrading, currentIndex + 1);
    }, 1000);
}

// ===============================
// 下拉菜单稳定性优化
// ===============================

// 防止下拉菜单闪烁的额外处理
function stabilizeDropdowns() {
    const dropdownElements = document.querySelectorAll('[data-bs-toggle="dropdown"]');
    
    dropdownElements.forEach(element => {
        // 移除可能导致闪烁的事件监听器
        element.removeEventListener('mouseover', null);
        element.removeEventListener('mouseout', null);
        
        // 添加稳定的事件处理
        element.addEventListener('click', function(e) {
            e.stopPropagation();
            
            // 确保其他下拉菜单关闭
            const otherDropdowns = document.querySelectorAll('.dropdown-menu.show');
            otherDropdowns.forEach(menu => {
                if (menu !== this.nextElementSibling) {
                    menu.classList.remove('show');
                }
            });
        });
        
        // 防止快速点击造成的状态不一致
        let clickTimeout;
        element.addEventListener('click', function() {
            if (clickTimeout) {
                clearTimeout(clickTimeout);
            }
            clickTimeout = setTimeout(() => {
                clickTimeout = null;
            }, 100);
        });
    });
}

// 页面完全加载后额外调用稳定化函数
window.addEventListener('load', function() {
    setTimeout(stabilizeDropdowns, 200);
});

// 监听Bootstrap下拉菜单事件，确保状态一致
document.addEventListener('show.bs.dropdown', function (e) {
    // 确保菜单显示状态正确
    const menu = e.target.querySelector('.dropdown-menu');
    if (menu) {
        menu.style.display = 'block';
        menu.style.opacity = '1';
        menu.style.visibility = 'visible';
        menu.style.zIndex = '99999';
        
        // 确保菜单位置正确
        menu.style.position = 'absolute';
        menu.style.transform = 'translate3d(0px, 40px, 0px)';
    }
});

document.addEventListener('hide.bs.dropdown', function (e) {
    // 确保菜单隐藏状态正确
    const menu = e.target.querySelector('.dropdown-menu');
    if (menu) {
        setTimeout(() => {
            if (!menu.classList.contains('show')) {
                menu.style.display = '';
                menu.style.opacity = '';
                menu.style.visibility = '';
                menu.style.zIndex = '';
                menu.style.position = '';
                menu.style.transform = '';
            }
        }, 150);
    }
});

// 处理表格内下拉菜单的特殊情况
document.addEventListener('DOMContentLoaded', function() {
    // 为表格内的下拉菜单添加特殊处理
    const tableDropdowns = document.querySelectorAll('#examsTable .dropdown-menu');
    tableDropdowns.forEach(menu => {
        menu.style.zIndex = '99999';
        menu.addEventListener('click', function(e) {
            e.stopPropagation();
        });
    });
});
</script>
{% endblock %}