{% extends "base.html" %}

{% block title %}考试详情 - FlashExam{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url_for('student.dashboard') }}">主页</a></li>
                <li class="breadcrumb-item"><a href="{{ url_for('student.results') }}">我的成绩</a></li>
                <li class="breadcrumb-item active" aria-current="page">考试详情</li>
            </ol>
        </nav>
        
        <h1 class="h3 mb-0">
            <i class="bi bi-clipboard-data"></i>
            考试成绩详情
        </h1>
        <p class="text-muted">查看考试得分统计和整体表现</p>
    </div>
</div>

<!-- 安全提示 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="alert alert-info border-0 shadow-sm">
            <div class="d-flex">
                <div class="flex-shrink-0">
                    <i class="bi bi-shield-check fs-4"></i>
                </div>
                <div class="flex-grow-1 ms-3">
                    <h6 class="alert-heading mb-1">隐私保护说明</h6>
                    <p class="mb-0">为保护考试内容的安全性，此页面仅显示您的得分统计信息，不显示具体的题目内容和答案详情。</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 考试基本信息 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="bi bi-info-circle"></i>
                    考试信息
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <h6 class="text-muted mb-1">考试名称</h6>
                            <p class="mb-0 fw-semibold">{{ exam.title if exam else '未知考试' }}</p>
                        </div>
                        <div class="mb-3">
                            <h6 class="text-muted mb-1">考试时长</h6>
                            <p class="mb-0">{{ exam.duration_minutes if exam else '未知' }} 分钟</p>
                        </div>
                        <div class="mb-3">
                            <h6 class="text-muted mb-1">题目数量</h6>
                            <p class="mb-0">{{ exam.total_questions if exam else total_questions }} 题</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <h6 class="text-muted mb-1">开始时间</h6>
                            <p class="mb-0">{{ exam_result.get('start_time', '未知')[:19] if exam_result.get('start_time') else '未知' }}</p>
                        </div>
                        <div class="mb-3">
                            <h6 class="text-muted mb-1">完成时间</h6>
                            <p class="mb-0">{{ exam_result.get('end_time', '未知')[:19] if exam_result.get('end_time') else '未知' }}</p>
                        </div>
                        <div class="mb-3">
                            <h6 class="text-muted mb-1">考试状态</h6>
                            <span class="badge bg-success">已完成</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 成绩统计 -->
<div class="row mb-4">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0">
                    <i class="bi bi-trophy"></i>
                    成绩统计
                </h5>
            </div>
            <div class="card-body">
                <!-- 总分显示 -->
                <div class="text-center mb-4">
                    {% if exam_result.get('score', 0) > 0 %}
                        {% set score = exam_result.get('score', 0) %}
                        {% set total_score = exam_result.get('total_score', 100) %}
                        {% set percentage = (score/total_score*100) if total_score > 0 else 0 %}
                        
                        <div class="display-4 fw-bold text-{{ 'success' if percentage >= 90 else 'primary' if percentage >= 80 else 'info' if percentage >= 70 else 'warning' if percentage >= 60 else 'danger' }}">
                            {{ "%.1f"|format(percentage) }}%
                        </div>
                        <h4 class="text-muted mb-3">
                            {{ "%.1f"|format(score) }} / {{ "%.1f"|format(total_score) }} 分
                        </h4>
                        
                        <!-- 等级显示 -->
                        <div class="mb-3">
                            {% if percentage >= 90 %}
                                <span class="badge bg-success fs-5 px-3 py-2">优秀</span>
                            {% elif percentage >= 80 %}
                                <span class="badge bg-primary fs-5 px-3 py-2">良好</span>
                            {% elif percentage >= 70 %}
                                <span class="badge bg-info fs-5 px-3 py-2">中等</span>
                            {% elif percentage >= 60 %}
                                <span class="badge bg-warning fs-5 px-3 py-2">及格</span>
                            {% else %}
                                <span class="badge bg-danger fs-5 px-3 py-2">不及格</span>
                            {% endif %}
                        </div>
                        
                        <!-- 进度条 -->
                        <div class="progress mb-3" style="height: 15px;">
                            <div class="progress-bar bg-{{ 'success' if percentage >= 90 else 'primary' if percentage >= 80 else 'info' if percentage >= 70 else 'warning' if percentage >= 60 else 'danger' }}" 
                                 role="progressbar" 
                                 style="width: {{ percentage }}%"
                                 aria-valuenow="{{ percentage }}" 
                                 aria-valuemin="0" 
                                 aria-valuemax="100">
                                {{ "%.1f"|format(percentage) }}%
                            </div>
                        </div>
                    {% else %}
                        <div class="display-4 fw-bold text-secondary">-</div>
                        <h4 class="text-muted mb-3">等待评分</h4>
                        <span class="badge bg-secondary fs-5 px-3 py-2">评分中</span>
                    {% endif %}
                </div>
                
                <!-- 答题统计 -->
                <div class="row text-center">
                    <div class="col-3">
                        <div class="border-end">
                            <div class="h4 text-primary mb-1">{{ total_questions }}</div>
                            <small class="text-muted">总题数</small>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="border-end">
                            <div class="h4 text-success mb-1">{{ correct_count }}</div>
                            <small class="text-muted">答对题数</small>
                        </div>
                    </div>
                    <div class="col-3">
                        <div class="border-end">
                            <div class="h4 text-info mb-1">{{ "%.1f"|format(correct_count/total_questions*100) if total_questions > 0 else 0 }}%</div>
                            <small class="text-muted">题目正确率</small>
                        </div>
                    </div>
                    <div class="col-3">
                        <div>
                            {% if exam_result.get('score', 0) > 0 and exam_result.get('total_score', 100) > 0 %}
                                {% set score_rate = (exam_result.get('score', 0)/exam_result.get('total_score', 100)*100) %}
                                <div class="h4 text-warning mb-1">{{ "%.1f"|format(score_rate) }}%</div>
                                <small class="text-muted">分数得分率</small>
                            {% else %}
                                <div class="h4 text-muted mb-1">-</div>
                                <small class="text-muted">得分率</small>
                            {% endif %}
                        </div>
                    </div>
                </div>
                
                <!-- 说明文字 -->
                <div class="mt-3">
                    <small class="text-muted">
                        💡 <strong>说明：</strong>
                        题目正确率 = 答对题数 ÷ 总题数；
                        分数得分率 = 实际得分 ÷ 考试总分。
                        主观题可能答错但仍获得部分分数。
                    </small>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 右侧统计图表区域 -->
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-info text-white">
                <h6 class="mb-0">
                    <i class="bi bi-pie-chart"></i>
                    答题分布
                </h6>
            </div>
            <div class="card-body">
                {% if question_details %}
                    <!-- 按题目类型统计 -->
                    {% set type_stats = {} %}
                    {% for detail in question_details %}
                        {% set qtype = detail.get('question_type', '未知') %}
                        {% if qtype not in type_stats %}
                            {% set _ = type_stats.update({qtype: {'total': 0, 'correct': 0}}) %}
                        {% endif %}
                        {% set _ = type_stats[qtype].update({'total': type_stats[qtype]['total'] + 1}) %}
                        {% if detail.get('is_correct', False) %}
                            {% set _ = type_stats[qtype].update({'correct': type_stats[qtype]['correct'] + 1}) %}
                        {% endif %}
                    {% endfor %}
                    
                    {% set type_names = {
                        'choice': '选择题',
                        'judge': '判断题', 
                        'essay': '论述题',
                        'short_answer': '简答题',
                        'fill_blank': '填空题',
                        'code_reading': '代码阅读题',
                        'code_practice': '编程题',
                        'programming': '编程题'
                    } %}
                    
                    {% for qtype, stats in type_stats.items() %}
                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <small class="text-muted">{{ type_names.get(qtype, qtype) }}</small>
                                <small class="text-muted">{{ stats.correct }}/{{ stats.total }}</small>
                            </div>
                            <div class="progress" style="height: 8px;">
                                <div class="progress-bar bg-success" 
                                     style="width: {{ (stats.correct/stats.total*100) if stats.total > 0 else 0 }}%">
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                {% else %}
                    <div class="text-center py-3">
                        <i class="bi bi-pie-chart display-6 text-muted"></i>
                        <p class="text-muted mb-0 mt-2">暂无统计数据</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 题目得分概览（不显示具体内容） -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-secondary text-white">
                <h5 class="mb-0">
                    <i class="bi bi-list-ol"></i>
                    题目得分概览
                </h5>
            </div>
            <div class="card-body">
                {% if question_details %}
                    <div class="row">
                        {% for detail in question_details %}
                            <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 mb-3">
                                <div class="card border-{{ 'success' if detail.get('is_correct') else 'warning' if detail.get('score', 0) > 0 else 'secondary' }} h-100">
                                    <div class="card-body text-center p-3">
                                        <div class="mb-2">
                                            <h6 class="mb-1">第{{ detail.get('question_order', loop.index) }}题</h6>
                                            <small class="text-muted">
                                                {% set type_names = {
                                                    'choice': '选择题',
                                                    'judge': '判断题', 
                                                    'essay': '论述题',
                                                    'short_answer': '简答题',
                                                    'fill_blank': '填空题',
                                                    'code_reading': '代码阅读题',
                                                    'code_practice': '编程题',
                                                    'programming': '编程题'
                                                } %}
                                                {{ type_names.get(detail.get('question_type', ''), detail.get('question_type', '未知')) }}
                                            </small>
                                        </div>
                                        
                                        <div class="mb-2">
                                            {% if detail.get('is_correct', False) %}
                                                <i class="bi bi-check-circle-fill text-success fs-4"></i>
                                            {% elif detail.get('score', 0) > 0 %}
                                                <i class="bi bi-dash-circle-fill text-warning fs-4"></i>
                                            {% else %}
                                                <i class="bi bi-x-circle-fill text-danger fs-4"></i>
                                            {% endif %}
                                        </div>
                                        
                                        <div>
                                            <span class="badge bg-{{ 'success' if detail.get('is_correct') else 'warning' if detail.get('score', 0) > 0 else 'secondary' }}">
                                                {{ "%.1f"|format(detail.get('score', 0)) }}/{{ "%.1f"|format(detail.get('max_score', 1)) }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="text-center py-5">
                        <i class="bi bi-exclamation-triangle display-1 text-muted"></i>
                        <h4 class="mt-3 text-muted">无得分详情</h4>
                        <p class="text-muted">暂时无法获取此考试的详细得分情况</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 操作按钮 -->
<div class="row mt-4">
    <div class="col-12 text-center">
        <a href="{{ url_for('student.results') }}" class="btn btn-primary me-2">
            <i class="bi bi-arrow-left"></i> 返回成绩列表
        </a>
        {% if exam_result.get('score', 0) > 0 %}
            <button class="btn btn-outline-success me-2" onclick="window.print()">
                <i class="bi bi-printer"></i> 打印成绩单
            </button>
            <button class="btn btn-outline-info" onclick="shareResult()">
                <i class="bi bi-share"></i> 分享成绩
            </button>
        {% endif %}
    </div>
</div>

<!-- 学习建议（根据成绩给出） -->
{% if exam_result.get('score', 0) > 0 %}
    {% set score = exam_result.get('score', 0) %}
    {% set total_score = exam_result.get('total_score', 100) %}
    {% set percentage = (score/total_score*100) if total_score > 0 else 0 %}
    
    <div class="row mt-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-light">
                    <h6 class="mb-0 text-dark">
                        <i class="bi bi-lightbulb"></i>
                        学习建议
                    </h6>
                </div>
                <div class="card-body">
                    {% if percentage >= 90 %}
                        <div class="alert alert-success border-0 mb-0">
                            <i class="bi bi-trophy me-2"></i>
                            <strong>优秀表现！</strong> 您的成绩非常出色，继续保持这种学习状态。建议您挑战更高难度的内容，或者帮助其他同学学习。
                        </div>
                    {% elif percentage >= 80 %}
                        <div class="alert alert-primary border-0 mb-0">
                            <i class="bi bi-star me-2"></i>
                            <strong>良好表现！</strong> 您的基础扎实，建议多练习难题，注意细节和准确性，争取达到优秀水平。
                        </div>
                    {% elif percentage >= 70 %}
                        <div class="alert alert-info border-0 mb-0">
                            <i class="bi bi-bookmark me-2"></i>
                            <strong>中等水平</strong> 您有一定基础，建议系统性复习知识点，多做练习题，重点关注薄弱环节。
                        </div>
                    {% elif percentage >= 60 %}
                        <div class="alert alert-warning border-0 mb-0">
                            <i class="bi bi-exclamation-triangle me-2"></i>
                            <strong>刚好及格</strong> 需要加强基础知识学习，建议制定学习计划，多花时间在基础概念理解上。
                        </div>
                    {% else %}
                        <div class="alert alert-danger border-0 mb-0">
                            <i class="bi bi-arrow-repeat me-2"></i>
                            <strong>需要努力</strong> 建议从基础开始系统学习，寻求老师或同学帮助，制定详细的学习计划并坚持执行。
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    // 卡片悬停效果
    $('.card').hover(
        function() {
            $(this).addClass('shadow');
        },
        function() {
            $(this).removeClass('shadow');
        }
    );
    
    // 动画效果
    $('.progress-bar').each(function() {
        const width = $(this).css('width');
        $(this).css('width', '0').animate({
            width: width
        }, 1000);
    });
});

function shareResult() {
    const score = '{{ "%.1f"|format(exam_result.get("score", 0)) }}';
    const totalScore = '{{ "%.1f"|format(exam_result.get("total_score", 100)) }}';
    const examTitle = '{{ exam.title if exam else "考试" }}';
    const percentage = '{{ "%.1f"|format((exam_result.get("score", 0)/exam_result.get("total_score", 100)*100) if exam_result.get("total_score", 100) > 0 else 0) }}';
    
    const shareText = `我在FlashExam的"${examTitle}"中获得了${score}/${totalScore}分（${percentage}%）的成绩！`;
    
    if (navigator.share) {
        navigator.share({
            title: 'FlashExam 考试成绩',
            text: shareText,
            url: window.location.href
        });
    } else {
        // 复制到剪贴板
        navigator.clipboard.writeText(shareText).then(function() {
            alert('成绩信息已复制到剪贴板！');
        });
    }
}
</script>
{% endblock %}