{% extends "base.html" %}

{% block title %}题目管理 - FlashExam{% endblock %}

{% block head %}
<style>
    .stats-card {
        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        color: white;
    }
    
    /* 排序和筛选样式 */
    .sortable {
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
        position: relative;
        transition: background-color 0.2s;
    }
    
    .sortable:hover {
        background-color: rgba(0,0,0,0.05);
    }
    
    .sortable.sorting-asc .sort-icon:before {
        content: "\f145"; /* bi-arrow-up */
        color: #0d6efd !important;
    }
    
    .sortable.sorting-desc .sort-icon:before {
        content: "\f149"; /* bi-arrow-down */
        color: #0d6efd !important;
    }
    
    .sortable.sorting-asc .sort-icon,
    .sortable.sorting-desc .sort-icon {
        color: #0d6efd !important;
    }
    
    .filter-active {
        background-color: #e7f3ff;
        border-left: 4px solid #0d6efd;
    }
    
    .table tbody tr.filtered-out {
        display: none;
    }
    
    .badge.bg-warning {
        color: #000 !important;
    }
    
    #filterPanel {
        background-color: #f8f9fa;
    }
    
    .form-control-sm:focus,
    .form-select-sm:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    }
    
    .question-card {
        border: none;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: transform 0.2s;
    }
    .question-card:hover {
        transform: translateY(-2px);
    }
</style>
{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <h1 class="h3 mb-0">
            <i class="bi bi-question-circle"></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">
                        <span class="btn btn-success btn-sm me-2 disabled">
                            <i class="bi bi-question-circle-fill"></i> 题目管理
                        </span>
                    </div>
                    <div class="col-auto">
                        <a href="{{ url_for('teacher.exams') }}" class="btn btn-outline-info btn-sm me-2">
                            <i class="bi bi-journal-text"></i> 考试管理
                        </a>
                    </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 stats-card text-center">
            <div class="card-body">
                <i class="bi bi-question-circle-fill display-4 mb-2"></i>
                <h3 id="totalQuestions">{{ questions|length }}</h3>
                <p class="mb-0">题目总数</p>
            </div>
        </div>
    </div>
    
    <div class="col-md-3 mb-3">
        <div class="card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white;">
            <div class="card-body text-center">
                <i class="bi bi-award display-4 mb-2"></i>
                <h3 id="totalScore">{{ total_score or 0 }}</h3>
                <p class="mb-0">总分值</p>
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card question-card">
            <div class="card-header bg-primary text-white">
                <h6 class="mb-0">题型分布</h6>
            </div>
            <div class="card-body">
                {% if type_stats %}
                    <div class="row" id="typeStats">
                        {% for q_type, count in type_stats.items() %}
                        <div class="col-md-4 mb-2">
                            <div class="d-flex justify-content-between">
                                <span>{{ q_type }}</span>
                                <span class="badge bg-secondary">{{ count }}</span>
                            </div>
                        </div>
                        {% endfor %}
                    </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 question-card">
            <div class="card-body">
                <!-- 第一行：主要操作 -->
                <div class="row mb-3">
                    <div class="col-md-3 mb-2">
                        <button class="btn btn-primary w-100" data-bs-toggle="modal" data-bs-target="#importModal">
                            <i class="bi bi-upload"></i> 导入题目
                        </button>
                    </div>
                    <div class="col-md-3 mb-2">
                        <button class="btn btn-success w-100" data-bs-toggle="modal" data-bs-target="#addQuestionModal">
                            <i class="bi bi-plus-circle"></i> 添加题目
                        </button>
                    </div>
                    <div class="col-md-3 mb-2">
                        <div class="dropdown w-100">
                            <button class="btn btn-warning w-100 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="bi bi-download"></i> 导出题目
                            </button>
                            <ul class="dropdown-menu w-100">
                                <li><a class="dropdown-item" href="#" onclick="exportQuestions('utf-8')">
                                    <i class="bi bi-file-text"></i> 导出为UTF-8编码
                                </a></li>
                                <li><a class="dropdown-item" href="#" onclick="exportQuestions('gbk')">
                                    <i class="bi bi-file-text"></i> 导出为GBK编码
                                </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-4 mb-2">
                        <button class="btn btn-outline-secondary w-100" onclick="selectAllQuestions()">
                            <i class="bi bi-check-all"></i> 全选
                        </button>
                    </div>
                    <div class="col-md-4 mb-2">
                        <button class="btn btn-outline-warning w-100" onclick="batchDeleteQuestions()" id="batchDeleteBtn" disabled>
                            <i class="bi bi-trash"></i> 批量删除
                        </button>
                    </div>
                    <div class="col-md-4 mb-2">
                        <button class="btn btn-outline-danger w-100" onclick="clearAllQuestions()">
                            <i class="bi bi-x-circle"></i> 清空全部
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 题目列表 -->
<div class="row">
    <div class="col-12">
        <div class="card question-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>
                    题目列表
                    <span class="badge bg-light text-dark ms-2" id="totalCount">总计: {{ questions|length }}</span>
                    <span class="badge bg-light text-dark ms-1" id="filteredCount"></span>
                </h5>
                <span class="badge bg-light text-dark" id="selectedCount">已选择: 0</span>
            </div>
            
            <!-- 筛选和排序控制面板 -->
            <div class="card-body border-bottom" id="filterPanel" style="display: none;">
                <div class="row g-3">
                    <div class="col-md-2">
                        <label class="form-label">题目ID</label>
                        <input type="text" class="form-control form-control-sm" id="filterQuestionId" placeholder="筛选题目ID">
                    </div>
                    <div class="col-md-2">
                            <label class="form-label">题目类型</label>
                        <select class="form-select form-select-sm" id="filterQuestionType">
                                <option value="">全部类型</option>
                            <!-- 类型选项将通过JavaScript动态生成 -->
                            </select>
                        </div>
                    <div class="col-md-2">
                        <label class="form-label">科目</label>
                        <select class="form-select form-select-sm" id="filterSubject">
                            <option value="">全部科目</option>
                            <!-- 科目选项将通过JavaScript动态生成 -->
                            </select>
                        </div>
                    <div class="col-md-2">
                        <label class="form-label">分值</label>
                        <select class="form-select form-select-sm" id="filterScore">
                            <option value="">全部分值</option>
                            <!-- 分值选项将通过JavaScript动态生成 -->
                        </select>
                        </div>
                    <div class="col-md-2">
                        <label class="form-label">导入批次</label>
                        <select class="form-select form-select-sm" id="filterImportBatch">
                            <option value="">全部批次</option>
                            {% if import_batches %}
                                {% for batch in import_batches %}
                                <option value="{{ batch }}">{{ batch }}</option>
                                {% endfor %}
                            {% endif %}
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">题目内容</label>
                        <input type="text" class="form-control form-control-sm" id="filterContent" placeholder="搜索题目内容">
                        </div>
                    </div>
                <div class="row mt-3">
                    <div class="col-12 text-end">
                        <button class="btn btn-outline-secondary btn-sm me-2" onclick="clearFilters()">
                            <i class="bi bi-x-circle"></i> 清空筛选
                            </button>
                        <button class="btn btn-primary btn-sm" onclick="applyFilters()">
                            <i class="bi bi-funnel"></i> 应用筛选
                            </button>
        </div>
    </div>
</div>

            <div class="card-body">
                {% if questions %}
                    <div class="table-responsive">
                        <table class="table table-hover" id="questionsTable">
                            <thead>
                                <tr>
                                    <th width="50">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="selectAllCheckbox" onchange="toggleSelectAll()" title="全选/取消全选">
                                        </div>
                                    </th>
                                    <th class="sortable" data-column="question_id" width="80">
                                        ID
                                        <i class="bi bi-arrow-down-up text-muted ms-1 sort-icon" title="点击排序"></i>
                                    </th>
                                    <th class="sortable" data-column="question_type" width="120">
                                        题型
                                        <i class="bi bi-arrow-down-up text-muted ms-1 sort-icon" title="点击排序"></i>
                                    </th>
                                    <th class="sortable" data-column="question_text">
                                        题目内容
                                        <i class="bi bi-arrow-down-up text-muted ms-1 sort-icon" title="点击排序"></i>
                                    </th>
                                    <th class="sortable" data-column="score" width="80">
                                        分值
                                        <i class="bi bi-arrow-down-up text-muted ms-1 sort-icon" title="点击排序"></i>
                                    </th>
                                    <th class="sortable" data-column="subject" width="120">
                                        科目
                                        <i class="bi bi-arrow-down-up text-muted ms-1 sort-icon" title="点击排序"></i>
                                    </th>
                                    <th class="sortable" data-column="import_batch" width="150">
                                        导入批次
                                        <i class="bi bi-arrow-down-up text-muted ms-1 sort-icon" title="点击排序"></i>
                                    </th>
                                    <th width="150">操作</th>
                                </tr>
                            </thead>
                            <tbody id="questionsTableBody">
                                {% for question in questions %}
                                <tr data-question-id="{{ question.id }}" 
                                    data-question-type="{{ question.question_type }}" 
                                    data-subject="{{ question.subject or '未设置' }}"
                                    data-score="{{ question.score or 5 }}"
                                    data-import-batch="{{ question.import_batch or '' }}"
                                    data-content="{{ question.question_text }}">
                                    <td>
                                        <div class="form-check">
                                            <input class="form-check-input question-checkbox" type="checkbox" value="{{ question.id }}" title="选择此题目" onchange="updateSelectedCount()">
                                        </div>
                                    </td>
                                    <td><strong>{{ question.id }}</strong></td>
                                    <td>
                                        <span class="badge bg-info">{{ question.question_type }}</span>
                                    </td>
                                    <td>
                                        <div style="max-width: 400px; overflow: hidden; text-overflow: ellipsis;" title="{{ question.question_text }}">
                                            {{ question.question_text[:100] }}{% if question.question_text|length > 100 %}...{% endif %}
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge bg-success">{{ question.score or 5 }}分</span>
                                    </td>
                                    <td>{{ question.subject or '未设置' }}</td>
                                    <td>
                                        {% if question.import_batch %}
                                        <span class="badge bg-light text-dark border">{{ question.import_batch }}</span>
                                        {% else %}
                                        <span class="text-muted">-</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <button class="btn btn-sm btn-outline-primary" onclick="editQuestion('{{ question.id }}')" title="编辑题目"></button>
                                                <i class="bi bi-pencil"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-info" onclick="viewQuestion('{{ question.id }}')" title="查看详情">
                                                <i class="bi bi-eye"></i>
                                            </button>
                                            <button class="btn btn-sm btn-outline-danger" onclick="deleteQuestion('{{ question.id }}')" title="删除题目">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- 分页信息 -->
                    <div class="text-center mt-3">
                        <p class="text-muted mb-0">共 <span id="totalCountDisplay">{{ questions|length }}</span> 道题目</p>
                    </div>
                {% else %}
                    <div class="text-center py-5" id="emptyState">
                        <i class="bi bi-question-square 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="#importModal">
                            <i class="bi bi-upload"></i> 导入题目
                        </button>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 导入题目模态框 -->
<div class="modal fade" id="importModal" 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="importForm" enctype="multipart/form-data">
                    <div class="mb-3">
                        <label for="importFile" class="form-label">选择文件</label>
                        <input type="file" class="form-control" id="importFile" accept=".csv,.xlsx" required>
                        <div class="form-text">支持CSV和XLSX格式文件，自动识别文件类型</div>
                    </div>
                    
                    <div class="alert alert-success">
                        <h6><i class="bi bi-lightbulb"></i> 智能导入说明</h6>
                        <p class="mb-2">系统会根据文件扩展名自动选择合适的导入方式：</p>
                        <ul class="mb-2">
                            <li><strong>📋 CSV文件：</strong>传统题目模式（选择题、判断题、简答题等）</li>
                            <li><strong>📚 XLSX文件：</strong>复杂阅读理解模式（托福、雅思风格）</li>
                        </ul>
                    </div>
                    
                    <div class="mt-3">
                        <button type="button" class="btn btn-outline-info btn-sm" onclick="downloadTemplate('csv')">
                            <i class="bi bi-download"></i> 下载CSV模板
                        </button>
                        <button type="button" class="btn btn-outline-success btn-sm ms-2" onclick="downloadTemplate('xlsx')">
                            <i class="bi bi-download"></i> 下载XLSX模板
                        </button>
                    </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="editQuestionModal" 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="editQuestionForm">
                    <input type="hidden" id="editQuestionId">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">题目类型</label>
                            <select class="form-select" id="editQuestionType" required onchange="toggleEditOptions()">
                                <option value="choice">选择题</option>
                                <option value="judge">判断题</option>
                                <option value="fill_blank">填空题</option>
                                <option value="short_answer">简答题</option>
                                <option value="essay">论述题</option>
                                <option value="analysis">分析题</option>
                                <option value="code_reading">代码阅读题</option>
                                <option value="code_practice">代码实践题</option>
                                <option value="programming">编程题</option>
                                <option value="design">设计题</option>
                                <option value="comprehensive">综合题</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">科目</label>
                            <input type="text" class="form-control" id="editSubject" required>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">题目内容</label>
                        <textarea class="form-control" id="editQuestionText" rows="4" required></textarea>
                    </div>

                    <div id="editOptionsSection" style="display: none;">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">选项A</label>
                                <input type="text" class="form-control" id="editOptionA">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">选项B</label>
                                <input type="text" class="form-control" id="editOptionB">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">选项C</label>
                                <input type="text" class="form-control" id="editOptionC">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">选项D</label>
                                <input type="text" class="form-control" id="editOptionD">
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">正确答案</label>
                        <textarea class="form-control" id="editCorrectAnswer" rows="2" required></textarea>
                        <div class="form-text">选择题请填写选项字母(如A)；判断题填写true/false；其他题型填写参考答案</div>
                    </div>

                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label">分值</label>
                            <input type="number" class="form-control" id="editScore" step="0.5" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">分数类型</label>
                            <select class="form-select" id="editScoreType">
                                <option value="decimal">允许小数</option>
                                <option value="integer">仅整数</option>
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">难度 (1-5)</label>
                            <input type="number" class="form-control" id="editDifficulty" min="1" max="5" required>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">阅读材料 (可选)</label>
                        <textarea class="form-control" id="editMaterial" rows="3" placeholder="如果题目属于某个材料，请在此填写材料内容或ID"></textarea>
                    </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="submitEditQuestion()">保存修改</button>
            </div>
        </div>
    </div>
</div>

<!-- 查看题目详情模态框 -->
<div class="modal fade" id="viewQuestionModal" 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">
                <table class="table table-bordered">
                    <tbody>
                        <tr>
                            <th width="120" class="bg-light">ID</th>
                            <td id="viewId"></td>
                            <th width="120" class="bg-light">类型</th>
                            <td id="viewType"></td>
                        </tr>
                        <tr>
                            <th class="bg-light">科目</th>
                            <td id="viewSubject"></td>
                            <th class="bg-light">导入批次</th>
                            <td id="viewBatch"></td>
                        </tr>
                        <tr>
                            <th class="bg-light">分值</th>
                            <td id="viewScore"></td>
                            <th class="bg-light">难度</th>
                            <td id="viewDifficulty"></td>
                        </tr>
                        <tr>
                            <th class="bg-light">题目内容</th>
                            <td colspan="3" id="viewContent" style="white-space: pre-wrap;"></td>
                        </tr>
                        <tr id="viewOptionsRow" style="display: none;">
                            <th class="bg-light">选项</th>
                            <td colspan="3">
                                <ul class="list-group list-group-flush" id="viewOptionsList"></ul>
                            </td>
                        </tr>
                        <tr>
                            <th class="bg-light">正确答案</th>
                            <td colspan="3" id="viewAnswer" class="text-success fw-bold" style="white-space: pre-wrap;"></td>
                        </tr>
                        <tr id="viewMaterialRow" style="display: none;">
                            <th class="bg-light">阅读材料</th>
                            <td colspan="3" id="viewMaterial" class="text-muted fst-italic" style="white-space: pre-wrap;"></td>
                        </tr>
                    </tbody>
                </table>
            </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="viewEditBtn">编辑</button>
            </div>
        </div>
    </div>
</div>

<!-- 添加题目模态框 -->
<div class="modal fade" id="addQuestionModal" 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="addQuestionForm">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">题目类型</label>
                            <select class="form-select" id="addQuestionType" required onchange="toggleAddOptions()">
                                <option value="choice">选择题</option>
                                <option value="judge">判断题</option>
                                <option value="fill_blank">填空题</option>
                                <option value="short_answer">简答题</option>
                                <option value="essay">论述题</option>
                                <option value="analysis">分析题</option>
                                <option value="code_reading">代码阅读题</option>
                                <option value="code_practice">代码实践题</option>
                                <option value="programming">编程题</option>
                                <option value="design">设计题</option>
                                <option value="comprehensive">综合题</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">科目</label>
                            <input type="text" class="form-control" id="addSubject" required placeholder="例如：计算机基础">
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">题目内容</label>
                        <textarea class="form-control" id="addQuestionText" rows="4" required></textarea>
                    </div>

                    <div id="addOptionsSection">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">选项A</label>
                                <input type="text" class="form-control" id="addOptionA">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">选项B</label>
                                <input type="text" class="form-control" id="addOptionB">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">选项C</label>
                                <input type="text" class="form-control" id="addOptionC">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">选项D</label>
                                <input type="text" class="form-control" id="addOptionD">
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">正确答案</label>
                        <textarea class="form-control" id="addCorrectAnswer" rows="2" required></textarea>
                        <div class="form-text">选择题请填写选项字母(如A)；判断题填写true/false；其他题型填写参考答案</div>
                    </div>

                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label">分值</label>
                            <input type="number" class="form-control" id="addScore" step="0.5" value="5" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">分数类型</label>
                            <select class="form-select" id="addScoreType">
                                <option value="decimal">允许小数</option>
                                <option value="integer">仅整数</option>
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">难度 (1-5)</label>
                            <input type="number" class="form-control" id="addDifficulty" min="1" max="5" value="3" required>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">阅读材料 (可选)</label>
                        <textarea class="form-control" id="addMaterial" rows="3" placeholder="如果题目属于某个材料，请在此填写材料内容"></textarea>
                    </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="submitAddQuestion()">保存题目</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// 全局变量
let currentEditingQuestionId = null;
let selectedQuestions = [];
let currentSortColumn = null;
let currentSortDirection = 'asc';
let allQuestionRows = [];
let isFilterPanelVisible = false;
let allQuestions = [];

// 页面加载完成后初始化
$(document).ready(function() {
    // 初始化各种事件监听
    initializeEventListeners();
    // 初始化选中数量
    updateSelectedCount();
    // 初始化排序和筛选功能
    initializeSortingAndFiltering();
    // 加载题目数据
    loadQuestionsData();
});

function initializeEventListeners() {
    // 导入题目表单处理
    $('#importForm').on('submit', function(e) {
        e.preventDefault();
        submitImport();
    });
}

// 初始化排序和筛选功能
function initializeSortingAndFiltering() {
    // 缓存所有题目行
    allQuestionRows = Array.from(document.querySelectorAll('#questionsTableBody tr'));
    
    // 动态填充筛选下拉选项
    populateFilterDropdowns();
    
    // 为排序列添加点击事件
    document.querySelectorAll('.sortable').forEach(header => {
        header.addEventListener('click', function() {
            const column = this.dataset.column;
            sortTable(column);
        });
    });
    
    // 为筛选输入框添加实时筛选事件
    ['filterQuestionId', 'filterContent'].forEach(id => {
        const element = document.getElementById(id);
        if (element) {
            element.addEventListener('input', debounce(applyFilters, 300));
        }
    });
    
    // 为筛选选择框添加change事件
    ['filterQuestionType', 'filterSubject', 'filterScore', 'filterImportBatch'].forEach(id => {
        const element = document.getElementById(id);
        if (element) {
            element.addEventListener('change', applyFilters);
        }
    });
    
    console.log('🎉 题目排序和筛选功能初始化完成');
}

// 动态填充筛选下拉选项
function populateFilterDropdowns() {
    console.log('🔧 开始填充筛选下拉选项...');
    
    // 收集所有题目类型和科目的唯一值
    const types = new Set();
    const subjects = new Set();
    const scores = new Set();
    
    allQuestionRows.forEach(row => {
        const type = row.dataset.questionType;
        const subject = row.dataset.subject;
        const score = row.dataset.score;
        
        if (type) {
            types.add(type);
        }
        if (subject && subject !== '未设置') {
            subjects.add(subject);
        }
        if (score) {
            scores.add(score);
        }
    });
    
    // 填充题目类型下拉框
    const typeSelect = document.getElementById('filterQuestionType');
    if (typeSelect) {
        // 清空现有选项（保留"全部类型"）
        typeSelect.innerHTML = '<option value="">全部类型</option>';
        
        // 按字母顺序排序并添加选项，直接使用原始类型名称
        Array.from(types).sort().forEach(type => {
            const option = document.createElement('option');
            option.value = type;
            option.textContent = type; // 直接使用原始类型名称，不转换
            typeSelect.appendChild(option);
        });
        
        console.log(`✅ 题目类型下拉框已填充: ${types.size} 个类型`, Array.from(types));
    }
    
    // 填充科目下拉框
    const subjectSelect = document.getElementById('filterSubject');
    if (subjectSelect) {
        // 清空现有选项（保留"全部科目"）
        subjectSelect.innerHTML = '<option value="">全部科目</option>';
        
        // 按字母顺序排序并添加选项
        Array.from(subjects).sort((a, b) => a.localeCompare(b, 'zh-CN')).forEach(subject => {
            const option = document.createElement('option');
            option.value = subject;
            option.textContent = subject;
            subjectSelect.appendChild(option);
        });
        
        // 如果有"未设置"的数据，也作为选项添加
        if (allQuestionRows.some(row => row.dataset.subject === '未设置')) {
            const option = document.createElement('option');
            option.value = '未设置';
            option.textContent = '未设置';
            subjectSelect.appendChild(option);
        }
        
        console.log(`✅ 科目下拉框已填充: ${subjects.size} 个科目`, Array.from(subjects));
    }
    
    // 填充分值下拉框
    const scoreSelect = document.getElementById('filterScore');
    if (scoreSelect) {
        // 清空现有选项（保留"全部分值"）
        scoreSelect.innerHTML = '<option value="">全部分值</option>';
        
        // 按数值大小排序并添加选项
        Array.from(scores).sort((a, b) => parseInt(a) - parseInt(b)).forEach(score => {
            const option = document.createElement('option');
            option.value = score;
            option.textContent = score + '分';
            scoreSelect.appendChild(option);
        });
        
        console.log(`✅ 分值下拉框已填充: ${scores.size} 个分值`, Array.from(scores));
    }
    
    console.log('🎉 所有筛选下拉选项填充完成');
}

// 表格排序功能
function sortTable(column) {
    // 确定排序方向
    if (currentSortColumn === column) {
        currentSortDirection = currentSortDirection === 'asc' ? 'desc' : 'asc';
    } else {
        currentSortColumn = column;
        currentSortDirection = 'asc';
    }
    
    console.log(`🔄 排序: ${column} ${currentSortDirection}`);
    
    // 更新排序图标
    updateSortIcons();
    
    // 获取当前可见的行（考虑筛选状态）
    const visibleRows = allQuestionRows.filter(row => !row.classList.contains('filtered-out'));
    
    // 排序数据
    const sortedRows = visibleRows.sort((a, b) => {
        let aVal, bVal;
        
        if (column === 'question_id') {
            aVal = parseInt(a.dataset.questionId);
            bVal = parseInt(b.dataset.questionId);
        } else if (column === 'question_type') {
            aVal = a.dataset.questionType;
            bVal = b.dataset.questionType;
        } else if (column === 'question_text') {
            aVal = a.dataset.content;
            bVal = b.dataset.content;
        } else if (column === 'score') {
            aVal = parseInt(a.dataset.score);
            bVal = parseInt(b.dataset.score);
        } else if (column === 'subject') {
            aVal = a.dataset.subject;
            bVal = b.dataset.subject;
        }
        
        // 处理"未设置"值，将其排在最后
        if (aVal === '未设置' && bVal !== '未设置') return 1;
        if (bVal === '未设置' && aVal !== '未设置') return -1;
        if (aVal === '未设置' && bVal === '未设置') return 0;
        
        // 数值比较或字符串比较
        let comparison;
        if (typeof aVal === 'number' && typeof bVal === 'number') {
            comparison = aVal - bVal;
    } else {
            comparison = aVal.toString().localeCompare(bVal.toString(), 'zh-CN');
        }
        
        return currentSortDirection === 'asc' ? comparison : -comparison;
    });
    
    // 重新排列表格行
    const tableBody = document.getElementById('questionsTableBody');
    
    // 先移除所有行
    allQuestionRows.forEach(row => {
        if (row.parentNode) {
            row.parentNode.removeChild(row);
        }
    });
    
    // 按新顺序添加行
    allQuestionRows.forEach(row => {
        tableBody.appendChild(row);
    });
    
    // 重新排列可见行
    sortedRows.forEach(row => {
        tableBody.appendChild(row);
    });
    
    showAlert(`已按${getColumnDisplayName(column)}${currentSortDirection === 'asc' ? '升序' : '降序'}排序`, 'info');
}

// 更新排序图标
function updateSortIcons() {
    // 重置所有图标
    document.querySelectorAll('.sortable').forEach(header => {
        header.classList.remove('sorting-asc', 'sorting-desc');
    });
    
    // 设置当前排序列的图标
    if (currentSortColumn) {
        const currentHeader = document.querySelector(`[data-column="${currentSortColumn}"]`);
        if (currentHeader) {
            currentHeader.classList.add(`sorting-${currentSortDirection}`);
        }
    }
}

// 获取列显示名称
function getColumnDisplayName(column) {
    const names = {
        'question_id': 'ID',
        'question_type': '题目类型',
        'question_text': '题目内容',
        'score': '分值',
        'subject': '科目'
    };
    return names[column] || column;
}

// 切换筛选面板显示/隐藏
function toggleFilter() {
    const filterPanel = document.getElementById('filterPanel');
    isFilterPanelVisible = !isFilterPanelVisible;
    
    if (isFilterPanelVisible) {
        filterPanel.style.display = 'block';
        filterPanel.classList.add('filter-active');
        
        // 动画显示
        setTimeout(() => {
            filterPanel.style.transition = 'all 0.3s ease';
            filterPanel.style.opacity = '1';
        }, 10);
        
        showAlert('筛选面板已打开，您可以按各个字段筛选题目', 'info');
            } else {
        filterPanel.style.display = 'none';
        filterPanel.classList.remove('filter-active');
    }
}

// 应用筛选
function applyFilters() {
    console.log('🔍 应用筛选条件...');
    
    const filters = {
        questionId: document.getElementById('filterQuestionId')?.value.toLowerCase().trim() || '',
        questionType: document.getElementById('filterQuestionType')?.value.trim() || '',
        subject: document.getElementById('filterSubject')?.value.trim() || '',
        score: document.getElementById('filterScore')?.value.trim() || '',
        importBatch: document.getElementById('filterImportBatch')?.value.trim() || '',
        content: document.getElementById('filterContent')?.value.toLowerCase().trim() || ''
    };
    
    console.log('筛选条件:', filters);
    
    let visibleCount = 0;
    let filteredCount = 0;
    
    allQuestionRows.forEach(row => {
        const rowData = {
            questionId: row.dataset.questionId.toLowerCase(),
            questionType: row.dataset.questionType,
            subject: row.dataset.subject,
            score: parseInt(row.dataset.score),
            importBatch: row.dataset.importBatch || '',
            content: row.dataset.content.toLowerCase()
        };
        
        let isVisible = true;
        
        // 检查各个筛选条件
        if (filters.questionId && !rowData.questionId.includes(filters.questionId)) {
            isVisible = false;
        }
        if (filters.questionType && rowData.questionType !== filters.questionType) {
            isVisible = false;
        }
        if (filters.subject && rowData.subject !== filters.subject) {
            isVisible = false;
        }
        if (filters.content && !rowData.content.includes(filters.content)) {
            isVisible = false;
        }
        
        // 分值筛选
        if (filters.score && rowData.score !== parseInt(filters.score)) {
            isVisible = false;
        }
        
        // 应用筛选结果
        if (isVisible) {
            row.classList.remove('filtered-out');
            visibleCount++;
            } else {
            row.classList.add('filtered-out');
            filteredCount++;
        }
    });
    
    // 更新筛选结果显示
    updateFilteredCount(visibleCount, filteredCount);
    
    // 检查是否有活动的筛选条件
    const hasActiveFilters = Object.values(filters).some(value => value !== '');
    
    if (hasActiveFilters) {
        console.log(`✅ 筛选完成: 显示 ${visibleCount} 条，隐藏 ${filteredCount} 条`);
        showAlert(`筛选完成: 显示 ${visibleCount} 道题目`, 'success');
    }
    
    // 更新选中状态
    updateSelectedCount();
}

// 更新筛选结果计数显示
function updateFilteredCount(visibleCount, filteredCount) {
    const filteredCountElement = document.getElementById('filteredCount');
    
    if (filteredCountElement) {
        if (filteredCount > 0) {
            filteredCountElement.textContent = `筛选显示: ${visibleCount}`;
            filteredCountElement.className = 'badge bg-warning text-dark ms-1';
            filteredCountElement.style.display = 'inline';
            } else {
            filteredCountElement.style.display = 'none';
        }
    }
}

// 清空筛选条件
function clearFilters() {
    console.log('🧹 清空所有筛选条件');
    
    // 清空所有筛选输入框
    ['filterQuestionId', 'filterContent'].forEach(id => {
        const element = document.getElementById(id);
        if (element) element.value = '';
    });
    
    // 重置所有筛选选择框
    ['filterQuestionType', 'filterSubject', 'filterScore', 'filterImportBatch'].forEach(id => {
        const element = document.getElementById(id);
        if (element) element.value = '';
    });
    
    // 显示所有行
    allQuestionRows.forEach(row => {
        row.classList.remove('filtered-out');
    });
    
    // 更新计数显示
    updateFilteredCount(allQuestionRows.length, 0);
    
    // 更新选中状态
    updateSelectedCount();
    
    showAlert('已清空所有筛选条件', 'info');
}

// 防抖函数
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

// 更新选中数量
function updateSelectedCount() {
    // 只统计可见行中被选中的复选框
    const visibleCheckboxes = Array.from(document.querySelectorAll('.question-checkbox'))
        .filter(cb => !cb.closest('tr').classList.contains('filtered-out'));
    const checkedVisibleCheckboxes = visibleCheckboxes.filter(cb => cb.checked);
    
    selectedQuestions = checkedVisibleCheckboxes.map(cb => cb.value);
    
    const selectedCountElement = document.getElementById('selectedCount');
    if (selectedCountElement) {
        selectedCountElement.textContent = `已选择: ${selectedQuestions.length}`;
    }
    
    const batchDeleteBtn = document.getElementById('batchDeleteBtn');
    
    if (batchDeleteBtn) batchDeleteBtn.disabled = selectedQuestions.length === 0;
    
    // 更新全选checkbox状态
    const selectAllCheckbox = document.getElementById('selectAllCheckbox');
    
    if (selectAllCheckbox && visibleCheckboxes.length > 0) {
        if (selectedQuestions.length === 0) {
            selectAllCheckbox.indeterminate = false;
            selectAllCheckbox.checked = false;
        } else if (selectedQuestions.length === visibleCheckboxes.length) {
            selectAllCheckbox.indeterminate = false;
            selectAllCheckbox.checked = true;
        } else {
            selectAllCheckbox.indeterminate = true;
        }
    }
}

// 切换全选状态
function toggleSelectAll() {
    const selectAllCheckbox = document.getElementById('selectAllCheckbox');
    // 只操作可见的复选框
    const visibleCheckboxes = Array.from(document.querySelectorAll('.question-checkbox'))
        .filter(cb => !cb.closest('tr').classList.contains('filtered-out'));
    
    visibleCheckboxes.forEach(checkbox => {
        checkbox.checked = selectAllCheckbox.checked;
    });
    
    updateSelectedCount();
}

// 全选题目
function selectAllQuestions() {
    // 只选择可见的复选框
    const visibleCheckboxes = Array.from(document.querySelectorAll('.question-checkbox'))
        .filter(cb => !cb.closest('tr').classList.contains('filtered-out'));
    const selectAllCheckbox = document.getElementById('selectAllCheckbox');
    
    visibleCheckboxes.forEach(checkbox => {
        checkbox.checked = true;
    });
    
    if (selectAllCheckbox) {
        selectAllCheckbox.checked = true;
    }
    
    updateSelectedCount();
    
    const visibleCount = visibleCheckboxes.length;
    showAlert(`已选择当前显示的 ${visibleCount} 道题目`, 'success');
}

// 加载题目数据
function loadQuestionsData() {
    // 从页面中提取题目数据
    allQuestions = [];
    allQuestionRows.forEach(row => {
        const question = {
            id: parseInt(row.dataset.questionId),
            question_type: row.dataset.questionType,
            subject: row.dataset.subject,
            score: parseInt(row.dataset.score),
            question_text: row.dataset.content
        };
        allQuestions.push(question);
    });
    
    console.log(`📚 已加载 ${allQuestions.length} 道题目数据`);
}

// 题目操作函数
function exportQuestions(encoding) {
    window.location.href = `/teacher/questions/export?encoding=${encoding}`;
}

function batchDeleteQuestions() {
    if (selectedQuestions.length === 0) {
        showAlert('请先选择要删除的题目', 'warning');
        return;
    }
    
    if (!confirm(`确定要删除选中的 ${selectedQuestions.length} 道题目吗？此操作不可撤销！`)) {
        return;
    }
    
    fetch('/teacher/questions/batch-delete', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ question_ids: selectedQuestions })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert(data.message, 'success');
            setTimeout(() => location.reload(), 1500);
            } else {
            showAlert(data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Batch delete error:', error);
        showAlert('批量删除时发生错误', 'error');
    });
}

function clearAllQuestions() {
    if (!confirm('确定要清空所有题目吗？此操作不可撤销！')) {
        return;
    }
    
    if (!confirm('这将删除所有题目数据，请再次确认！')) {
        return;
    }
    
    fetch('/teacher/questions/clear', {
        method: 'POST'
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert(data.message, 'success');
            setTimeout(() => location.reload(), 2000);
            } else {
            showAlert(data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Clear questions error:', error);
        showAlert('清空题目数据时发生错误', 'error');
    });
}

function deleteQuestion(questionId) {
    if (!confirm('确定要删除这道题目吗？删除后无法恢复！')) {
        return;
    }
    
    fetch(`/teacher/questions/delete/${questionId}`, {
        method: 'POST'
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert(data.message, 'success');
            setTimeout(() => location.reload(), 1500);
        } else {
            showAlert(data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Delete question error:', error);
        showAlert('删除题目时发生错误', 'error');
    });
}

function editQuestion(questionId) {
    // 获取题目详情
    fetch(`/teacher/questions/${questionId}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const q = data.question;
                
                // 填充表单
                document.getElementById('editQuestionId').value = q.id;
                document.getElementById('editQuestionType').value = q.question_type;
                document.getElementById('editSubject').value = q.subject;
                document.getElementById('editQuestionText').value = q.question_text;
                document.getElementById('editCorrectAnswer').value = q.correct_answer;
                document.getElementById('editScore').value = q.score;
                document.getElementById('editScoreType').value = q.score_type || 'decimal';
                document.getElementById('editDifficulty').value = q.difficulty;
                document.getElementById('editMaterial').value = q.material || '';
                
                // 处理选项
                toggleEditOptions();
                if (q.question_type === 'choice' && q.options) {
                    document.getElementById('editOptionA').value = q.options.A || '';
                    document.getElementById('editOptionB').value = q.options.B || '';
                    document.getElementById('editOptionC').value = q.options.C || '';
                    document.getElementById('editOptionD').value = q.options.D || '';
                }
                
                // 显示模态框
                new bootstrap.Modal(document.getElementById('editQuestionModal')).show();
            } else {
                showAlert('获取题目详情失败: ' + data.message, 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('获取题目详情时发生错误', 'error');
        });
}

function toggleEditOptions() {
    const type = document.getElementById('editQuestionType').value;
    const optionsSection = document.getElementById('editOptionsSection');
    if (type === 'choice') {
        optionsSection.style.display = 'block';
    } else {
        optionsSection.style.display = 'none';
    }
}

function toggleAddOptions() {
    const type = document.getElementById('addQuestionType').value;
    const optionsSection = document.getElementById('addOptionsSection');
    if (type === 'choice') {
        optionsSection.style.display = 'block';
    } else {
        optionsSection.style.display = 'none';
    }
}

function submitAddQuestion() {
    const formData = new FormData();
    
    formData.append('question_type', document.getElementById('addQuestionType').value);
    formData.append('subject', document.getElementById('addSubject').value);
    formData.append('question_text', document.getElementById('addQuestionText').value);
    formData.append('correct_answer', document.getElementById('addCorrectAnswer').value);
    formData.append('score', document.getElementById('addScore').value);
    formData.append('score_type', document.getElementById('addScoreType').value);
    formData.append('difficulty', document.getElementById('addDifficulty').value);
    formData.append('material', document.getElementById('addMaterial').value);
    
    if (document.getElementById('addQuestionType').value === 'choice') {
        formData.append('option_A', document.getElementById('addOptionA').value);
        formData.append('option_B', document.getElementById('addOptionB').value);
        formData.append('option_C', document.getElementById('addOptionC').value);
        formData.append('option_D', document.getElementById('addOptionD').value);
    }
    
    fetch('/teacher/questions/add', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('题目添加成功', 'success');
            bootstrap.Modal.getInstance(document.getElementById('addQuestionModal')).hide();
            setTimeout(() => location.reload(), 1000);
        } else {
            showAlert('添加失败: ' + data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('添加题目时发生错误', 'error');
    });
}

function submitEditQuestion() {
    const questionId = document.getElementById('editQuestionId').value;
    const formData = new FormData();
    
    formData.append('question_type', document.getElementById('editQuestionType').value);
    formData.append('subject', document.getElementById('editSubject').value);
    formData.append('question_text', document.getElementById('editQuestionText').value);
    formData.append('correct_answer', document.getElementById('editCorrectAnswer').value);
    formData.append('score', document.getElementById('editScore').value);
    formData.append('score_type', document.getElementById('editScoreType').value);
    formData.append('difficulty', document.getElementById('editDifficulty').value);
    formData.append('material', document.getElementById('editMaterial').value);
    
    if (document.getElementById('editQuestionType').value === 'choice') {
        formData.append('option_A', document.getElementById('editOptionA').value);
        formData.append('option_B', document.getElementById('editOptionB').value);
        formData.append('option_C', document.getElementById('editOptionC').value);
        formData.append('option_D', document.getElementById('editOptionD').value);
    }
    
    fetch(`/teacher/questions/edit/${questionId}`, {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('题目更新成功', 'success');
            bootstrap.Modal.getInstance(document.getElementById('editQuestionModal')).hide();
            setTimeout(() => location.reload(), 1000);
        } else {
            showAlert('更新失败: ' + data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('更新题目时发生错误', 'error');
    });
}

function viewQuestion(questionId) {
    fetch(`/teacher/questions/${questionId}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const q = data.question;
                
                document.getElementById('viewId').textContent = q.id;
                document.getElementById('viewType').innerHTML = `<span class="badge bg-info">${q.question_type}</span>`;
                document.getElementById('viewSubject').textContent = q.subject;
                document.getElementById('viewBatch').textContent = q.import_batch || '-';
                document.getElementById('viewScore').textContent = q.score + '分';
                document.getElementById('viewDifficulty').textContent = '⭐'.repeat(q.difficulty);
                document.getElementById('viewContent').textContent = q.question_text;
                document.getElementById('viewAnswer').textContent = q.correct_answer;
                
                // 选项
                const optionsRow = document.getElementById('viewOptionsRow');
                const optionsList = document.getElementById('viewOptionsList');
                optionsList.innerHTML = '';
                
                if (q.question_type === 'choice' && q.options) {
                    optionsRow.style.display = 'table-row';
                    ['A', 'B', 'C', 'D'].forEach(key => {
                        if (q.options[key]) {
                            const li = document.createElement('li');
                            li.className = 'list-group-item p-1 border-0';
                            li.textContent = `${key}. ${q.options[key]}`;
                            if (q.correct_answer.includes(key)) {
                                li.className += ' text-success fw-bold';
                            }
                            optionsList.appendChild(li);
                        }
                    });
                } else {
                    optionsRow.style.display = 'none';
                }
                
                // 材料
                const materialRow = document.getElementById('viewMaterialRow');
                if (q.material) {
                    materialRow.style.display = 'table-row';
                    document.getElementById('viewMaterial').textContent = q.material;
                } else {
                    materialRow.style.display = 'none';
                }
                
                // 绑定编辑按钮
                document.getElementById('viewEditBtn').onclick = function() {
                    bootstrap.Modal.getInstance(document.getElementById('viewQuestionModal')).hide();
                    editQuestion(q.id);
                };
                
                new bootstrap.Modal(document.getElementById('viewQuestionModal')).show();
            } else {
                showAlert('获取题目详情失败: ' + data.message, 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('获取题目详情时发生错误', 'error');
        });
}

// 导入题目
function submitImport() {
    const fileInput = document.getElementById('importFile');
    
    if (!fileInput.files[0]) {
        showAlert('请选择要导入的文件', 'warning');
        return;
    }
    
    const formData = new FormData();
    formData.append('file', fileInput.files[0]);
    
    // 显示加载状态
    const importBtn = event.target;
    const originalText = importBtn.innerHTML;
    importBtn.innerHTML = '<i class="bi bi-spinner bi-spin"></i> 导入中...';
    importBtn.disabled = true;
    
    $.ajax({
        url: '{{ url_for("teacher.import_questions") }}',
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            if (response.success) {
                showAlert(response.message, 'success');
                $('#importModal').modal('hide');
                setTimeout(() => location.reload(), 1000);
            } else {
                showAlert(response.message, 'error');
            }
        },
        error: function(xhr) {
            showAlert('导入失败：' + (xhr.responseJSON?.message || '网络错误'), 'error');
        },
        complete: function() {
            importBtn.innerHTML = originalText;
            importBtn.disabled = false;
        }
    });
}

// 下载模板文件
function downloadTemplate(templateType) {
    try {
        // 动态创建下载链接
        const link = document.createElement('a');
        
        if (templateType === 'csv') {
            // CSV模板内容
            const csvContent = `题目类型,题目文本,正确答案,选项,分值,科目
choice,Python中用于定义函数的关键字是？,def,def|class|import|return,5,计算机
judge,Python是一种编译型语言,false,,3,计算机
short_answer,解释Python中列表和元组的区别,列表可变，元组不可变,,10,计算机
choice,下列哪个不是Python的数据类型？,char,int|float|char|str,5,计算机
essay,描述面向对象编程的三大特性,封装、继承、多态,,15,计算机`;
            
            const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
            link.href = URL.createObjectURL(blob);
            link.download = 'questions_template.csv';
            link.click();
            
            showAlert('CSV模板下载完成', 'success');
            
        } else if (templateType === 'xlsx') {
            // 使用智能导入管理器创建Excel模板
            fetch('/teacher/questions/download-template/xlsx', {
                method: 'GET'
            })
            .then(response => response.blob())
            .then(blob => {
                link.href = URL.createObjectURL(blob);
                link.download = 'reading_comprehension_template.xlsx';
                link.click();
                
                showAlert('XLSX模板下载完成', 'success');
            })
            .catch(error => {
                console.error('模板下载失败:', error);
                showAlert('XLSX模板下载失败', 'error');
            });
        }
        
    } catch (error) {
        console.error('模板下载失败:', error);
        showAlert('模板下载失败', 'error');
    }
}

function showAlert(message, type) {
    // 创建Bootstrap警告框
    const alertClass = {
        'success': 'alert-success',
        'error': 'alert-danger',
        'warning': 'alert-warning',
        'info': 'alert-info'
    }[type] || 'alert-info';
    
    const alertHtml = `
        <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
            <i class="bi bi-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-triangle' : 'info-circle'}"></i>
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;
    
    // 插入到页面顶部
    $('main .container-fluid').prepend(alertHtml);
    
    // 3秒后自动消失
    setTimeout(() => {
        $('.alert').fadeOut();
    }, 3000);
}
</script>
{% endblock %}