{% extends "base.html" %}

{% block title %}统一评分 - FlashExam{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2>
                    <i class="bi bi-calculator"></i>
                    统一评分管理
                </h2>
                <div>
                    <button class="btn btn-success" onclick="calculateAllScores()">
                        <i class="bi bi-calculator-fill"></i> 一键评分所有考试
                    </button>
                    <button class="btn btn-outline-primary" onclick="location.reload()">
                        <i class="bi bi-arrow-clockwise"></i> 刷新数据
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 评分统计卡片 -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                    <h5 class="text-primary">总考试数</h5>
                    <h3>{{ grading_exams|length }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                    <h5 class="text-warning">需要评分</h5>
                    <h3>{{ grading_exams|sum(attribute='need_grading') }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                    <h5 class="text-success">已评分</h5>
                    <h3>{{ grading_exams|sum(attribute='graded') }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-center">
                <div class="card-body">
                    <h5 class="text-info">总提交数</h5>
                    <h3>{{ grading_exams|sum(attribute='total_submissions') }}</h3>
                </div>
            </div>
        </div>
    </div>

    <!-- 考试列表 -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="bi bi-list-ul"></i>
                        考试评分状态
                    </h5>
                </div>
                <div class="card-body">
                    {% if grading_exams %}
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead class="table-dark">
                                    <tr>
                                        <th>考试信息</th>
                                        <th>提交统计</th>
                                        <th>评分进度</th>
                                        <th>平均分</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for exam in grading_exams %}
                                    <tr>
                                        <td>
                                            <strong>{{ exam.exam_title }}</strong>
                                            <br>
                                            <small class="text-muted">ID: {{ exam.exam_id }}</small>
                                        </td>
                                        <td>
                                            <div class="d-flex flex-column">
                                                <span class="badge bg-primary mb-1">总提交: {{ exam.total_submissions }}</span>
                                                <span class="badge bg-warning mb-1">需评分: {{ exam.need_grading }}</span>
                                                <span class="badge bg-success">已评分: {{ exam.graded }}</span>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="progress mb-2" style="height: 20px;">
                                                <div class="progress-bar bg-success" 
                                                     role="progressbar" 
                                                     style="width: {{ exam.grading_progress }}%">
                                                    {{ exam.grading_progress }}%
                                                </div>
                                            </div>
                                            {% if exam.grading_progress == 100 %}
                                                <span class="badge bg-success">
                                                    <i class="bi bi-check-circle"></i> 评分完成
                                                </span>
                                            {% elif exam.grading_progress > 0 %}
                                                <span class="badge bg-warning">
                                                    <i class="bi bi-clock"></i> 部分完成
                                                </span>
                                            {% else %}
                                                <span class="badge bg-danger">
                                                    <i class="bi bi-exclamation-triangle"></i> 未开始
                                                </span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if exam.avg_score > 0 %}
                                                <span class="badge bg-primary fs-6">
                                                    {{ exam.avg_score }}分
                                                </span>
                                            {% else %}
                                                <span class="text-muted">-</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                {% if exam.need_grading > 0 %}
                                                    <button class="btn btn-primary btn-sm" 
                                                            onclick="calculateExamScores({{ exam.exam_id }})"
                                                            title="评分此考试">
                                                        <i class="bi bi-calculator"></i> 评分
                                                    </button>
                                                {% endif %}
                                                <a href="{{ url_for('teacher.results') }}?exam_id={{ exam.exam_id }}" 
                                                   class="btn btn-outline-secondary btn-sm"
                                                   title="查看成绩">
                                                    <i class="bi bi-table"></i> 成绩
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-5">
                            <i class="bi bi-inbox display-1 text-muted"></i>
                            <h4 class="text-muted mt-3">暂无需要评分的考试</h4>
                            <p class="text-muted">所有考试都已完成评分，或者还没有学生提交考试。</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 评分进度模态框 -->
<div class="modal fade" id="gradingProgressModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-calculator"></i>
                    评分进度
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <div class="text-center">
                    <div class="spinner-border text-primary mb-3" role="status">
                        <span class="visually-hidden">评分中...</span>
                    </div>
                    <h5 id="gradingStatus">正在评分中，请稍候...</h5>
                    <p id="gradingDetails" class="text-muted">正在计算分数...</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// 计算单个考试分数
function calculateExamScores(examId) {
    const modal = new bootstrap.Modal(document.getElementById('gradingProgressModal'));
    document.getElementById('gradingStatus').textContent = '正在评分考试...';
    document.getElementById('gradingDetails').textContent = '正在计算分数...';
    modal.show();
    
    fetch('/teacher/grading/unified/calculate/' + examId, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        modal.hide();
        
        if (data.success) {
            showAlert('success', data.message);
            setTimeout(() => {
                location.reload();
            }, 1500);
        } else {
            showAlert('danger', data.message || '评分失败');
        }
    })
    .catch(error => {
        modal.hide();
        console.error('评分错误:', error);
        showAlert('danger', '评分过程中发生错误');
    });
}

// 计算所有考试分数
function calculateAllScores() {
    if (!confirm('确定要对所有需要评分的考试进行统一评分吗？')) {
        return;
    }
    
    const modal = new bootstrap.Modal(document.getElementById('gradingProgressModal'));
    document.getElementById('gradingStatus').textContent = '正在批量评分所有考试';
    document.getElementById('gradingDetails').textContent = '正在处理，请耐心等待...';
    modal.show();
    
    fetch('/teacher/grading/unified/calculate-all', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        modal.hide();
        
        if (data.success) {
            showAlert('success', data.message);
            setTimeout(() => {
                location.reload();
            }, 2000);
        } else {
            showAlert('danger', data.message || '批量评分失败');
        }
    })
    .catch(error => {
        modal.hide();
        console.error('批量评分错误:', error);
        showAlert('danger', '批量评分过程中发生错误');
    });
}

// 显示提示信息
function showAlert(type, message) {
    const alertDiv = document.createElement('div');
    alertDiv.className = 'alert alert-' + type + ' alert-dismissible fade show position-fixed';
    alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
    alertDiv.innerHTML = message + '<button type="button" class="btn-close" data-bs-dismiss="alert"></button>';
    
    document.body.appendChild(alertDiv);
    
    setTimeout(() => {
        if (alertDiv.parentNode) {
            alertDiv.remove();
        }
    }, 5000);
}
</script>
{% endblock %}