{% extends "base.html" %}

{% block title %}学生管理 - FlashExam{% endblock %}

{% block head %}
<style>
    .student-card {
        border: none;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: transform 0.2s;
    }
    .student-card:hover {
        transform: translateY(-2px);
    }
    .stats-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 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);
    }
</style>
{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <h1 class="h3 mb-0">
            <i class="bi bi-people"></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">
                        <span class="btn btn-primary btn-sm me-2 disabled">
                            <i class="bi bi-people-fill"></i> 学生管理
                        </span>
                    </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">
                        <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">
            <div class="card-body text-center">
                <i class="bi bi-people-fill display-4 mb-2"></i>
                <h3>{{ students|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-building display-4 mb-2"></i>
                <h3>{{ college_stats|length }}</h3>
                <p class="mb-0">学院数量</p>
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card student-card">
            <div class="card-header bg-primary text-white">
                <h6 class="mb-0">学院分布</h6>
            </div>
            <div class="card-body">
                {% if college_stats %}
                    {% for college, count in college_stats.items() %}
                        <div class="d-flex justify-content-between mb-2">
                            <span>{{ college }}</span>
                            <span class="badge bg-secondary">{{ count }}人</span>
                        </div>
                    {% endfor %}
                {% else %}
                    <p class="text-muted mb-0">暂无学生数据</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 操作按钮 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card student-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="#addStudentModal">
                            <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="exportStudents('utf-8')">
                                    <i class="bi bi-file-text"></i> 导出为UTF-8编码
                                </a></li>
                                <li><a class="dropdown-item" href="#" onclick="exportStudents('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-3 mb-2">
                        <button class="btn btn-outline-secondary w-100" onclick="selectAllStudents()">
                            <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="batchDeleteStudents()" id="batchDeleteBtn" disabled>
                            <i class="bi bi-trash"></i> 批量删除
                        </button>
                    </div>
                    <div class="col-md-3 mb-2">
                        <div class="dropdown w-100">
                            <button class="btn btn-outline-info w-100 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="exportSelectedBtn" disabled>
                                <i class="bi bi-download"></i> 导出选中
                            </button>
                            <ul class="dropdown-menu w-100">
                                <li><a class="dropdown-item" href="#" onclick="exportSelectedStudents('utf-8')">
                                    <i class="bi bi-file-text"></i> 导出为UTF-8编码
                                </a></li>
                                <li><a class="dropdown-item" href="#" onclick="exportSelectedStudents('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-outline-danger w-100" onclick="confirmClearAll()">
                            <i class="bi bi-x-circle"></i> 清空全部
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 学生列表 -->
<div class="row">
    <div class="col-12">
        <div class="card student-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">总计: {{ students|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">学号</label>
                        <input type="text" class="form-control form-control-sm" id="filterStudentId" placeholder="筛选学号">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">姓名</label>
                        <input type="text" class="form-control form-control-sm" id="filterName" placeholder="筛选姓名">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">学院</label>
                        <select class="form-select form-select-sm" id="filterCollege">
                            <option value="">全部学院</option>
                            {% for college in college_stats.keys() %}
                            <option value="{{ college }}">{{ college }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">专业</label>
                        <select class="form-select form-select-sm" id="filterMajor">
                            <option value="">全部专业</option>
                            <!-- 专业选项将通过JavaScript动态生成 -->
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">班级</label>
                        <select class="form-select form-select-sm" id="filterClass">
                            <option value="">全部班级</option>
                            <!-- 班级选项将通过JavaScript动态生成 -->
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">性别</label>
                        <select class="form-select form-select-sm" id="filterGender">
                            <option value="">全部性别</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                            <option value="未设置">未设置</option>
                        </select>
                    </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 students %}
                    <div class="table-responsive">
                        <table class="table table-hover" id="studentsTable">
                            <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="student_id">
                                        学号
                                        <i class="bi bi-arrow-down-up text-muted ms-1 sort-icon" title="点击排序"></i>
                                    </th>
                                    <th class="sortable" data-column="name">
                                        姓名
                                        <i class="bi bi-arrow-down-up text-muted ms-1 sort-icon" title="点击排序"></i>
                                    </th>
                                    <th class="sortable" data-column="college">
                                        学院
                                        <i class="bi bi-arrow-down-up text-muted ms-1 sort-icon" title="点击排序"></i>
                                    </th>
                                    <th class="sortable" data-column="major">
                                        专业
                                        <i class="bi bi-arrow-down-up text-muted ms-1 sort-icon" title="点击排序"></i>
                                    </th>
                                    <th class="sortable" data-column="class_name">
                                        班级
                                        <i class="bi bi-arrow-down-up text-muted ms-1 sort-icon" title="点击排序"></i>
                                    </th>
                                    <th class="sortable" data-column="gender">
                                        性别
                                        <i class="bi bi-arrow-down-up text-muted ms-1 sort-icon" title="点击排序"></i>
                                    </th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="studentsTableBody">
                                {% for student in students %}
                                <tr data-student-id="{{ student.student_id }}" 
                                    data-name="{{ student.name }}"
                                    data-college="{{ student.college or '未设置' }}"
                                    data-major="{{ student.major or '未设置' }}"
                                    data-class="{{ student.class_name or '未设置' }}"
                                    data-gender="{{ student.gender or '未设置' }}">
                                    <td>
                                        <div class="form-check">
                                            <input class="form-check-input student-checkbox" type="checkbox" value="{{ student.student_id }}" onchange="updateSelectedCount()" title="选择此学生">
                                        </div>
                                    </td>
                                    <td><strong>{{ student.student_id }}</strong></td>
                                    <td>{{ student.name }}</td>
                                    <td>{{ student.college or '未设置' }}</td>
                                    <td>{{ student.major or '未设置' }}</td>
                                    <td>{{ student.class_name or '未设置' }}</td>
                                    <td>
                                        {% if student.gender == '男' %}
                                            <i class="bi bi-person-fill text-primary"></i> 男
                                        {% elif student.gender == '女' %}
                                            <i class="bi bi-person-fill text-danger"></i> 女
                                        {% else %}
                                            <i class="bi bi-person text-muted"></i> 未设置
                                        {% endif %}
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary" onclick="editStudent('{{ student.student_id }}')" title="编辑学生信息">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger" onclick="deleteStudent('{{ student.student_id }}')" title="删除学生">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="text-center py-5">
                        <i class="bi bi-person-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="#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">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">导入学生数据</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <form id="importForm" enctype="multipart/form-data">
                    <div class="mb-3">
                        <label for="csvFile" class="form-label">选择文件</label>
                        <input type="file" class="form-control" id="csvFile" accept=".csv,.xlsx,.xls" required>
                        <div class="form-text">
                            支持 <strong>CSV</strong> 和 <strong>Excel(XLSX)</strong> 格式<br>
                            必需列: <code>student_id</code>(学号), <code>name</code>(姓名)<br>
                            可选列: password, college, major, class_name, gender, notes
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="skipDuplicates" checked>
                            <label class="form-check-label" for="skipDuplicates">
                                跳过重复学号的学生
                            </label>
                        </div>
                    </div>
                    <div class="alert alert-info small mb-0">
                        <i class="bi bi-lightbulb"></i>
                        <strong>提示：</strong>Excel文件第一行应为表头，从第二行开始为数据
                    </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="importStudents()">
                    <i class="bi bi-upload"></i> 导入
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 添加学生模态框 -->
<div class="modal fade" id="addStudentModal" 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" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <form id="addStudentForm">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="studentId" class="form-label">学号 *</label>
                            <input type="text" class="form-control" id="studentId" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="studentName" class="form-label">姓名 *</label>
                            <input type="text" class="form-control" id="studentName" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="studentCollege" class="form-label">学院</label>
                            <input type="text" class="form-control" id="studentCollege">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="studentMajor" class="form-label">专业</label>
                            <input type="text" class="form-control" id="studentMajor">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="studentClass" class="form-label">班级</label>
                            <input type="text" class="form-control" id="studentClass">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="studentGender" class="form-label">性别</label>
                            <select class="form-select" id="studentGender">
                                <option value="">请选择</option>
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="studentPassword" class="form-label">登录密码</label>
                        <input type="password" class="form-control" id="studentPassword" placeholder="留空则使用学号作为密码">
                    </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-success" onclick="addStudent()">
                    <i class="bi bi-plus-circle"></i> 添加
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// 全局变量
let currentEditingStudentId = null;
let selectedStudents = [];
let currentSortColumn = null;
let currentSortDirection = 'asc';
let allStudentRows = [];
let isFilterPanelVisible = false;

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

function initializeEventListeners() {
    // 导入学生表单处理
    $('#importForm').on('submit', function(e) {
        e.preventDefault();
        importStudents();
    });
    
    // 添加学生表单处理
    $('#addStudentForm').on('submit', function(e) {
        e.preventDefault();
        addStudent();
    });
    
    // 编辑学生表单处理
    $('#editStudentForm').on('submit', function(e) {
        e.preventDefault();
        saveEditStudent();
    });
}

// 初始化排序和筛选功能
function initializeSortingAndFiltering() {
    // 缓存所有学生行
    allStudentRows = Array.from(document.querySelectorAll('#studentsTableBody tr'));
    
    // 动态填充专业和班级下拉选项
    populateFilterDropdowns();
    
    // 为排序列添加点击事件
    document.querySelectorAll('.sortable').forEach(header => {
        header.addEventListener('click', function() {
            const column = this.dataset.column;
            sortTable(column);
        });
    });
    
    // 为筛选输入框添加实时筛选事件
    ['filterStudentId', 'filterName'].forEach(id => {
        const element = document.getElementById(id);
        if (element) {
            element.addEventListener('input', debounce(applyFilters, 300));
        }
    });
    
    // 为筛选选择框添加change事件
    ['filterCollege', 'filterMajor', 'filterClass', 'filterGender'].forEach(id => {
        const element = document.getElementById(id);
        if (element) {
            element.addEventListener('change', applyFilters);
        }
    });
    
    console.log('🎉 排序和筛选功能初始化完成');
}

// 动态填充筛选下拉选项
function populateFilterDropdowns() {
    console.log('🔧 开始填充筛选下拉选项...');
    
    // 收集所有专业和班级的唯一值
    const majors = new Set();
    const classes = new Set();
    
    allStudentRows.forEach(row => {
        const major = row.dataset.major;
        const classValue = row.dataset.class;
        
        if (major && major !== '未设置') {
            majors.add(major);
        }
        if (classValue && classValue !== '未设置') {
            classes.add(classValue);
        }
    });
    
    // 填充专业下拉框
    const majorSelect = document.getElementById('filterMajor');
    if (majorSelect) {
        // 清空现有选项（保留"全部专业"）
        majorSelect.innerHTML = '<option value="">全部专业</option>';
        
        // 按字母顺序排序并添加选项
        Array.from(majors).sort((a, b) => a.localeCompare(b, 'zh-CN')).forEach(major => {
            const option = document.createElement('option');
            option.value = major;
            option.textContent = major;
            majorSelect.appendChild(option);
        });
        
        console.log(`✅ 专业下拉框已填充: ${majors.size} 个专业`);
    }
    
    // 填充班级下拉框
    const classSelect = document.getElementById('filterClass');
    if (classSelect) {
        // 清空现有选项（保留"全部班级"）
        classSelect.innerHTML = '<option value="">全部班级</option>';
        
        // 按字母顺序排序并添加选项
        Array.from(classes).sort((a, b) => a.localeCompare(b, 'zh-CN')).forEach(classValue => {
            const option = document.createElement('option');
            option.value = classValue;
            option.textContent = classValue;
            classSelect.appendChild(option);
        });
        
        console.log(`✅ 班级下拉框已填充: ${classes.size} 个班级`);
    }
    
    // 如果有"未设置"的数据，也可以作为选项添加
    if (allStudentRows.some(row => row.dataset.major === '未设置')) {
        const majorSelect = document.getElementById('filterMajor');
        if (majorSelect) {
            const option = document.createElement('option');
            option.value = '未设置';
            option.textContent = '未设置';
            majorSelect.appendChild(option);
        }
    }
    
    if (allStudentRows.some(row => row.dataset.class === '未设置')) {
        const classSelect = document.getElementById('filterClass');
        if (classSelect) {
            const option = document.createElement('option');
            option.value = '未设置';
            option.textContent = '未设置';
            classSelect.appendChild(option);
        }
    }
    
    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 = allStudentRows.filter(row => !row.classList.contains('filtered-out'));
    
    // 排序数据
    const sortedRows = visibleRows.sort((a, b) => {
        let aVal, bVal;
        
        if (column === 'student_id') {
            aVal = a.dataset.studentId;
            bVal = b.dataset.studentId;
        } else if (column === 'name') {
            aVal = a.dataset.name;
            bVal = b.dataset.name;
        } else if (column === 'college') {
            aVal = a.dataset.college;
            bVal = b.dataset.college;
        } else if (column === 'major') {
            aVal = a.dataset.major;
            bVal = b.dataset.major;
        } else if (column === 'class_name') {
            aVal = a.dataset.class;
            bVal = b.dataset.class;
        } else if (column === 'gender') {
            aVal = a.dataset.gender;
            bVal = b.dataset.gender;
        }
        
        // 处理"未设置"值，将其排在最后
        if (aVal === '未设置' && bVal !== '未设置') return 1;
        if (bVal === '未设置' && aVal !== '未设置') return -1;
        if (aVal === '未设置' && bVal === '未设置') return 0;
        
        // 字符串比较
        const comparison = aVal.localeCompare(bVal, 'zh-CN');
        return currentSortDirection === 'asc' ? comparison : -comparison;
    });
    
    // 重新排列表格行
    const tableBody = document.getElementById('studentsTableBody');
    
    // 先移除所有行
    allStudentRows.forEach(row => {
        if (row.parentNode) {
            row.parentNode.removeChild(row);
        }
    });
    
    // 按新顺序添加行
    allStudentRows.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 = {
        'student_id': '学号',
        'name': '姓名',
        'college': '学院',
        'major': '专业',
        'class_name': '班级',
        'gender': '性别'
    };
    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 = {
        studentId: document.getElementById('filterStudentId')?.value.toLowerCase().trim() || '',
        name: document.getElementById('filterName')?.value.toLowerCase().trim() || '',
        college: document.getElementById('filterCollege')?.value.trim() || '',
        major: document.getElementById('filterMajor')?.value.trim() || '',
        className: document.getElementById('filterClass')?.value.trim() || '',
        gender: document.getElementById('filterGender')?.value.trim() || ''
    };
    
    console.log('筛选条件:', filters);
    
    let visibleCount = 0;
    let filteredCount = 0;
    
    allStudentRows.forEach(row => {
        const rowData = {
            studentId: row.dataset.studentId.toLowerCase(),
            name: row.dataset.name.toLowerCase(),
            college: row.dataset.college,
            major: row.dataset.major,
            className: row.dataset.class,
            gender: row.dataset.gender
        };
        
        let isVisible = true;
        
        // 检查各个筛选条件
        if (filters.studentId && !rowData.studentId.includes(filters.studentId)) {
            isVisible = false;
        }
        if (filters.name && !rowData.name.includes(filters.name)) {
            isVisible = false;
        }
        if (filters.college && rowData.college !== filters.college) {
            isVisible = false;
        }
        // 专业和班级改为精确匹配
        if (filters.major && rowData.major !== filters.major) {
            isVisible = false;
        }
        if (filters.className && rowData.className !== filters.className) {
            isVisible = false;
        }
        if (filters.gender && rowData.gender !== filters.gender) {
            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');
    const totalCount = visibleCount + 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('🧹 清空所有筛选条件');
    
    // 清空所有筛选输入框
    ['filterStudentId', 'filterName'].forEach(id => {
        const element = document.getElementById(id);
        if (element) element.value = '';
    });
    
    // 重置所有筛选选择框
    ['filterCollege', 'filterMajor', 'filterClass', 'filterGender'].forEach(id => {
        const element = document.getElementById(id);
        if (element) element.value = '';
    });
    
    // 显示所有行
    allStudentRows.forEach(row => {
        row.classList.remove('filtered-out');
    });
    
    // 更新计数显示
    updateFilteredCount(allStudentRows.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('.student-checkbox'))
        .filter(cb => !cb.closest('tr').classList.contains('filtered-out'));
    const checkedVisibleCheckboxes = visibleCheckboxes.filter(cb => cb.checked);
    
    selectedStudents = checkedVisibleCheckboxes.map(cb => cb.value);
    
    const selectedCountElement = document.getElementById('selectedCount');
    if (selectedCountElement) {
        selectedCountElement.textContent = `已选择: ${selectedStudents.length}`;
    }
    
    const batchDeleteBtn = document.getElementById('batchDeleteBtn');
    const exportSelectedBtn = document.getElementById('exportSelectedBtn');
    
    if (batchDeleteBtn) batchDeleteBtn.disabled = selectedStudents.length === 0;
    if (exportSelectedBtn) exportSelectedBtn.disabled = selectedStudents.length === 0;
    
    // 更新全选checkbox状态
    const selectAllCheckbox = document.getElementById('selectAllCheckbox');
    
    if (selectAllCheckbox && visibleCheckboxes.length > 0) {
        if (selectedStudents.length === 0) {
            selectAllCheckbox.indeterminate = false;
            selectAllCheckbox.checked = false;
        } else if (selectedStudents.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('.student-checkbox'))
        .filter(cb => !cb.closest('tr').classList.contains('filtered-out'));
    
    visibleCheckboxes.forEach(checkbox => {
        checkbox.checked = selectAllCheckbox.checked;
    });
    
    updateSelectedCount();
}

// 全选学生
function selectAllStudents() {
    // 只选择可见的复选框
    const visibleCheckboxes = Array.from(document.querySelectorAll('.student-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 batchDeleteStudents() {
    if (selectedStudents.length === 0) {
        showAlert('请先选择要删除的学生', 'warning');
        return;
    }
    
    if (!confirm(`确定要删除选中的 ${selectedStudents.length} 名学生吗？此操作不可撤销！`)) {
        return;
    }
    
    fetch('/teacher/students/batch-delete', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ student_ids: selectedStudents })
    })
    .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 exportSelectedStudents(encoding) {
    if (selectedStudents.length === 0) {
        showAlert('请先选择要导出的学生', 'warning');
        return;
    }
    
    // 创建表单提交
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '/teacher/students/export-selected';
    form.style.display = 'none';
    
    selectedStudents.forEach(studentId => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'student_ids';
        input.value = studentId;
        form.appendChild(input);
    });
    
    // 添加编码参数
    const encodingInput = document.createElement('input');
    encodingInput.type = 'hidden';
    encodingInput.name = 'encoding';
    encodingInput.value = encoding || 'utf-8';
    form.appendChild(encodingInput);
    
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
    
    showAlert(`正在导出 ${selectedStudents.length} 名学生的数据...`, 'info');
}

function importStudents() {
    const fileInput = document.getElementById('csvFile');
    const skipDuplicates = document.getElementById('skipDuplicates').checked;
    
    if (!fileInput.files[0]) {
        showAlert('请选择CSV文件', 'warning');
        return;
    }
    
    const formData = new FormData();
    formData.append('file', fileInput.files[0]);
    formData.append('skip_duplicates', skipDuplicates);
    
    // 显示加载状态
    const importBtn = $('#importModal .btn-primary');
    const originalText = importBtn.html();
    importBtn.html('<i class="bi bi-loading"></i> 导入中...').prop('disabled', true);
    
    fetch('/teacher/students/import', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert(data.message, 'success');
            $('#importModal').modal('hide');
            setTimeout(() => location.reload(), 1500);
        } else {
            showAlert(data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Import error:', error);
        showAlert('导入过程中发生错误', 'error');
    })
    .finally(() => {
        importBtn.html(originalText).prop('disabled', false);
    });
}

function addStudent() {
    const formData = new FormData();
    formData.append('student_id', document.getElementById('studentId').value);
    formData.append('name', document.getElementById('studentName').value);
    formData.append('college', document.getElementById('studentCollege').value);
    formData.append('major', document.getElementById('studentMajor').value);
    formData.append('class_name', document.getElementById('studentClass').value);
    formData.append('gender', document.getElementById('studentGender').value);
    formData.append('password', document.getElementById('studentPassword').value);
    
    // 显示加载状态
    const addBtn = $('#addStudentModal .btn-success');
    const originalText = addBtn.html();
    addBtn.html('<i class="bi bi-loading"></i> 添加中...').prop('disabled', true);
    
    fetch('/teacher/students/add', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert(data.message, 'success');
            $('#addStudentModal').modal('hide');
            document.getElementById('addStudentForm').reset();
            setTimeout(() => location.reload(), 1500);
        } else {
            showAlert(data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Add student error:', error);
        showAlert('添加学生时发生错误', 'error');
    })
    .finally(() => {
        addBtn.html(originalText).prop('disabled', false);
    });
}

function editStudent(studentId) {
    currentEditingStudentId = studentId;
    
    // 获取学生信息
    fetch(`/teacher/students/get/${studentId}`)
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const student = data.student;
            
            // 填充编辑表单
            document.getElementById('editStudentId').value = student.student_id;
            document.getElementById('editStudentName').value = student.name;
            document.getElementById('editStudentCollege').value = student.college;
            document.getElementById('editStudentMajor').value = student.major;
            document.getElementById('editStudentClass').value = student.class_name;
            document.getElementById('editStudentGender').value = student.gender;
            document.getElementById('editStudentPassword').value = '';
            
            // 显示编辑模态框
            $('#editStudentModal').modal('show');
        } else {
            showAlert(data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Get student error:', error);
        showAlert('获取学生信息失败', 'error');
    });
}

function saveEditStudent() {
    if (!currentEditingStudentId) return;
    
    const formData = new FormData();
    formData.append('name', document.getElementById('editStudentName').value);
    formData.append('college', document.getElementById('editStudentCollege').value);
    formData.append('major', document.getElementById('editStudentMajor').value);
    formData.append('class_name', document.getElementById('editStudentClass').value);
    formData.append('gender', document.getElementById('editStudentGender').value);
    
    const password = document.getElementById('editStudentPassword').value;
    if (password) {
        formData.append('password', password);
    }
    
    // 显示加载状态
    const saveBtn = $('#editStudentModal .btn-primary');
    const originalText = saveBtn.html();
    saveBtn.html('<i class="bi bi-loading"></i> 保存中...').prop('disabled', true);
    
    fetch(`/teacher/students/edit/${currentEditingStudentId}`, {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert(data.message, 'success');
            $('#editStudentModal').modal('hide');
            setTimeout(() => location.reload(), 1500);
        } else {
            showAlert(data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Edit student error:', error);
        showAlert('编辑学生时发生错误', 'error');
    })
    .finally(() => {
        saveBtn.html(originalText).prop('disabled', false);
    });
}

function deleteStudent(studentId) {
    if (!confirm('确定要删除这个学生吗？删除后无法恢复！')) {
        return;
    }
    
    fetch(`/teacher/students/delete/${studentId}`, {
        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 student error:', error);
        showAlert('删除学生时发生错误', 'error');
    });
}

function confirmClearAll() {
    if (!confirm('确定要清空所有学生数据吗？此操作不可恢复！')) {
        return;
    }
    
    if (!confirm('这将删除所有学生数据，请再次确认！')) {
        return;
    }
    
    fetch('/teacher/students/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 students error:', error);
        showAlert('清空学生数据时发生错误', 'error');
    });
}

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

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>

<!-- 编辑学生模态框 -->
<div class="modal fade" id="editStudentModal" 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" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <form id="editStudentForm">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="editStudentId" class="form-label">学号</label>
                            <input type="text" class="form-control" id="editStudentId" readonly>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="editStudentName" class="form-label">姓名 *</label>
                            <input type="text" class="form-control" id="editStudentName" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="editStudentCollege" class="form-label">学院</label>
                            <input type="text" class="form-control" id="editStudentCollege">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="editStudentMajor" class="form-label">专业</label>
                            <input type="text" class="form-control" id="editStudentMajor">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="editStudentClass" class="form-label">班级</label>
                            <input type="text" class="form-control" id="editStudentClass">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="editStudentGender" class="form-label">性别</label>
                            <select class="form-select" id="editStudentGender">
                                <option value="">请选择</option>
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="editStudentPassword" class="form-label">新密码</label>
                        <input type="password" class="form-control" id="editStudentPassword" placeholder="留空则不修改密码">
                    </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="saveEditStudent()">
                    <i class="bi bi-save"></i> 保存修改
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}