{% extends "base.html" %}

{% block title %}主观题评分 - FlashExam{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <h1 class="h3 mb-0">
            <i class="bi bi-clipboard-check"></i>
            主观题评分
        </h1>
        <p class="text-muted">AI自动评分 + 手动调整</p>
    </div>
</div>

<!-- 快速导航 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h6 class="mb-0">
                    <i class="bi bi-lightning-fill"></i>
                    快速导航
                </h6>
            </div>
            <div class="card-body py-2">
                <div class="row">
                    <div class="col-auto">
                        <a href="{{ url_for('teacher.dashboard') }}" class="btn btn-outline-secondary btn-sm me-2">
                            <i class="bi bi-speedometer2"></i> 仪表板
                        </a>
                    </div>
                    <div class="col-auto">
                        <a href="{{ url_for('teacher.students') }}" class="btn btn-outline-primary btn-sm me-2">
                            <i class="bi bi-people-fill"></i> 学生管理
                        </a>
                    </div>
                    <div class="col-auto">
                        <a href="{{ url_for('teacher.questions') }}" class="btn btn-outline-success btn-sm me-2">
                            <i class="bi bi-question-circle-fill"></i> 题目管理
                        </a>
                    </div>
                    <div class="col-auto">
                        <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">
                        <span class="btn btn-warning btn-sm me-2 disabled">
                            <i class="bi bi-pencil-square"></i> 主观题评分
                        </span>
                    </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">
        <div class="card bg-primary text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h5 class="card-title">待评分考试</h5>
                        <h2 class="mb-0">{{ exams|length }}</h2>
                    </div>
                    <div class="align-self-center">
                        <i class="bi bi-clipboard-data display-4 opacity-50"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-warning text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h5 class="card-title">主观题总数</h5>
                        <h2 class="mb-0">{{ exams|sum(attribute='total_subjective') if exams else 0 }}</h2>
                    </div>
                    <div class="align-self-center">
                        <i class="bi bi-question-circle display-4 opacity-50"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-success text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h5 class="card-title">AI已评分</h5>
                        <h2 class="mb-0">{{ exams|sum(attribute='ai_graded') if exams else 0 }}</h2>
                    </div>
                    <div class="align-self-center">
                        <i class="bi bi-robot display-4 opacity-50"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-info text-white">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <h5 class="card-title">手动调整</h5>
                        <h2 class="mb-0">{{ exams|sum(attribute='manually_graded') if exams else 0 }}</h2>
                    </div>
                    <div class="align-self-center">
                        <i class="bi bi-person-check display-4 opacity-50"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 考试列表 -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="bi bi-list-ul"></i>
                        需要评分的考试
                    </h5>
                    <div>
                        <button class="btn btn-outline-primary btn-sm" onclick="refreshGradingData()">
                            <i class="bi bi-arrow-clockwise"></i> 刷新数据
                        </button>
                    </div>
                </div>
            </div>
            <div class="card-body">
                {% if exams %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>考试名称</th>
                                    <th>描述</th>
                                    <th>主观题总数</th>
                                    <th>AI评分</th>
                                    <th>手动调整</th>
                                    <th>未评分</th>
                                    <th>覆盖率</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for exam in exams %}
                                <tr>
                                    <td>
                                        <strong>{{ exam.title }}</strong>
                                    </td>
                                    <td>
                                        <small class="text-muted">
                                            {{ exam.description[:50] + '...' if exam.description and exam.description|length > 50 else exam.description or '无描述' }}
                                        </small>
                                    </td>
                                    <td>
                                        <span class="badge bg-secondary">{{ exam.total_subjective }}</span>
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ 'success' if exam.ai_graded > 0 else 'light' }}">
                                            {{ exam.ai_graded }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ 'info' if exam.manually_graded > 0 else 'light' }}">
                                            {{ exam.manually_graded }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ 'danger' if exam.ungraded > 0 else 'success' }}">
                                            {{ exam.ungraded }}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="progress" style="height: 20px;">
                                            <div class="progress-bar bg-success" style="width: {{ exam.ai_coverage }}%">
                                                {{ "%.1f"|format(exam.ai_coverage) }}%
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            <a href="{{ url_for('teacher.grading_exam_detail', exam_id=exam.id) }}" 
                                               class="btn btn-outline-primary">
                                                <i class="bi bi-eye"></i> 详情
                                            </a>
                                            {% if exam.ungraded > 0 %}
                                            <button class="btn btn-outline-success" 
                                                    onclick="startAIGrading({{ exam.id }}, '{{ exam.title }}')">
                                                <i class="bi bi-robot"></i> AI评分
                                            </button>
                                            {% endif %}
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="text-center py-5">
                        <i class="bi bi-clipboard-check display-1 text-muted"></i>
                        <h4 class="mt-3 text-muted">暂无需要评分的考试</h4>
                        <p class="text-muted">
                            没有包含主观题的考试，或所有主观题都已完成评分。
                        </p>
                        <a href="{{ url_for('teacher.exams') }}" class="btn btn-primary">
                            <i class="bi bi-plus"></i> 创建考试
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- AI评分进度弹窗 -->
<div class="modal fade" id="aiGradingModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-robot"></i>
                    AI自动评分
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="gradingStatus">
                    <div class="text-center">
                        <div class="spinner-border text-primary mb-3" role="status">
                            <span class="visually-hidden">评分中...</span>
                        </div>
                        <h6>正在进行AI评分...</h6>
                        <p class="text-muted">请耐心等待，AI正在分析每道题的答案</p>
                    </div>
                </div>
                <div id="gradingResults" style="display: none;">
                    <!-- 评分结果将在这里显示 -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" id="viewDetailsBtn" class="btn btn-primary" style="display: none;">
                    查看详情
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// AI评分功能
function startAIGrading(examId, examTitle) {
    // 确认对话框
    if (!confirm(`确定要对考试 "${examTitle}" 进行AI自动评分吗？\n\n这将使用AI模型评分所有未评分的主观题。`)) {
        return;
    }
    
    // 显示进度弹窗
    const modal = new bootstrap.Modal(document.getElementById('aiGradingModal'));
    modal.show();
    
    // 重置弹窗状态
    document.getElementById('gradingStatus').style.display = 'block';
    document.getElementById('gradingResults').style.display = 'none';
    document.getElementById('viewDetailsBtn').style.display = 'none';
    
    // 发送AI评分请求
    fetch(`/teacher/grading/ai-auto/${examId}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            mode: 'ungraded_only'
        })
    })
    .then(response => response.json())
    .then(data => {
        // 隐藏进度状态
        document.getElementById('gradingStatus').style.display = 'none';
        
        // 显示结果
        const resultsDiv = document.getElementById('gradingResults');
        resultsDiv.style.display = 'block';
        
        if (data.success) {
            resultsDiv.innerHTML = `
                <div class="alert alert-success">
                    <h6><i class="bi bi-check-circle"></i> AI评分完成！</h6>
                    <p class="mb-1">${data.message}</p>
                    <hr>
                    <small>
                        <strong>处理统计：</strong><br>
                        • 成功处理：${data.processed || 0} 题<br>
                        • 失败：${data.failed || 0} 题
                    </small>
                </div>
            `;
            
            // 显示查看详情按钮
            document.getElementById('viewDetailsBtn').style.display = 'inline-block';
            document.getElementById('viewDetailsBtn').onclick = function() {
                modal.hide();
                window.location.href = `/teacher/grading/exam/${examId}`;
            };
            
            // 3秒后自动刷新页面数据
            setTimeout(() => {
                refreshGradingData();
            }, 3000);
            
        } else {
            resultsDiv.innerHTML = `
                <div class="alert alert-danger">
                    <h6><i class="bi bi-exclamation-triangle"></i> AI评分失败</h6>
                    <p class="mb-0">${data.message}</p>
                </div>
            `;
        }
    })
    .catch(error => {
        console.error('AI评分错误:', error);
        
        document.getElementById('gradingStatus').style.display = 'none';
        document.getElementById('gradingResults').style.display = 'block';
        document.getElementById('gradingResults').innerHTML = `
            <div class="alert alert-danger">
                <h6><i class="bi bi-exclamation-triangle"></i> 网络错误</h6>
                <p class="mb-0">无法连接到AI评分服务，请稍后重试。</p>
            </div>
        `;
    });
}

// 刷新评分数据
function refreshGradingData() {
    window.location.reload();
}

// 页面加载完成后的初始化
$(document).ready(function() {
    // 为表格添加排序功能
    $('table').addClass('table-sortable');
    
    // 工具提示
    $('[data-bs-toggle="tooltip"]').tooltip();
    
    // 每30秒自动刷新一次数据（可选）
    // setInterval(refreshGradingData, 30000);
});
</script>
{% endblock %}