{% extends "base.html" %}

{% block title %}考试结果 - FlashExam{% endblock %}

{% block head %}
<style>
    .result-container {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 20px;
        padding: 40px;
        margin-bottom: 30px;
        text-align: center;
        box-shadow: 0 15px 35px rgba(102, 126, 234, 0.3);
    }
    
    .score-circle {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 30px;
        border: 4px solid rgba(255, 255, 255, 0.3);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
    
    .score-text {
        font-size: 48px;
        font-weight: bold;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .score-label {
        font-size: 18px;
        opacity: 0.9;
        margin-top: 10px;
    }
    
    .result-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-top: 30px;
    }
    
    .stat-card {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 15px;
        padding: 25px;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .stat-number {
        font-size: 32px;
        font-weight: bold;
        margin-bottom: 5px;
    }
    
    .stat-label {
        font-size: 14px;
        opacity: 0.8;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    
    .questions-detail {
        background: white;
        border-radius: 15px;
        padding: 30px;
        margin-top: 30px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    
    .question-card {
        border: 1px solid #e9ecef;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
        transition: all 0.3s ease;
    }
    
    .question-card:hover {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }
    
    .question-card.correct {
        border-left: 5px solid #28a745;
        background: linear-gradient(to right, #d4edda, #ffffff);
    }
    
    .question-card.incorrect {
        border-left: 5px solid #dc3545;
        background: linear-gradient(to right, #f8d7da, #ffffff);
    }
    
    .question-card.partial {
        border-left: 5px solid #ffc107;
        background: linear-gradient(to right, #fff3cd, #ffffff);
    }
    
    .question-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }
    
    .question-number {
        background: #6c757d;
        color: white;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 14px;
    }
    
    .question-score {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .score-badge {
        padding: 5px 12px;
        border-radius: 20px;
        font-weight: bold;
        font-size: 14px;
    }
    
    .score-badge.full {
        background: #d4edda;
        color: #155724;
    }
    
    .score-badge.partial {
        background: #fff3cd;
        color: #856404;
    }
    
    .score-badge.none {
        background: #f8d7da;
        color: #721c24;
    }
    
    .question-type-badge {
        padding: 3px 8px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: bold;
        text-transform: uppercase;
        margin-right: 10px;
    }
    
    .type-choice { background: #e3f2fd; color: #1976d2; }
    .type-judge { background: #f3e5f5; color: #7b1fa2; }
    .type-essay { background: #fff3e0; color: #f57c00; }
    .type-short_answer { background: #e8f5e8; color: #388e3c; }
    .type-code_reading { background: #fce4ec; color: #c2185b; }
    .type-code_practice { background: #e1f5fe; color: #0277bd; }
    .type-analysis { background: #f1f8e9; color: #689f38; }
    .type-practice { background: #fff8e1; color: #ffa000; }
    .type-fill_blank { background: #f3e5f5; color: #7b1fa2; }
    .type-programming { background: #e8eaf6; color: #3f51b5; }
    
    .answer-comparison {
        margin-top: 15px;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 8px;
    }
    
    .answer-section {
        margin-bottom: 10px;
    }
    
    .answer-label {
        font-weight: bold;
        color: #495057;
        margin-bottom: 5px;
    }
    
    .answer-content {
        padding: 8px 12px;
        border-radius: 6px;
        font-family: inherit;
        line-height: 1.4;
    }
    
    .student-answer {
        background: #e3f2fd;
        border-left: 3px solid #2196f3;
    }
    
    .correct-answer {
        background: #e8f5e8;
        border-left: 3px solid #4caf50;
    }
    
    .actions {
        text-align: center;
        margin-top: 40px;
    }
    
    .btn-group {
        display: flex;
        gap: 15px;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .btn {
        padding: 12px 24px;
        border-radius: 25px;
        text-decoration: none;
        font-weight: bold;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
    }
    
    .btn-primary {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
    }
    
    .btn-secondary {
        background: #6c757d;
        color: white;
    }
    
    .btn-success {
        background: linear-gradient(135deg, #28a745, #20c997);
        color: white;
    }
    
    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }
    
    @media (max-width: 768px) {
        .result-container {
            padding: 20px;
        }
        
        .score-circle {
            width: 150px;
            height: 150px;
        }
        
        .score-text {
            font-size: 36px;
        }
        
        .result-stats {
            grid-template-columns: 1fr;
        }
        
        .btn-group {
            flex-direction: column;
            align-items: center;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 考试结果概览 -->
    <div class="result-container">
        <h1 class="mb-4">🎉 考试完成！</h1>
        <h2 class="mb-3">{{ exam_result.exam_title }}</h2>
        
        <!-- 分数圆圈 -->
        <div class="score-circle">
            <div>
                <div class="score-text">{{ "%.1f"|format(exam_result.percentage) }}%</div>
                <div class="score-label">得分率</div>
            </div>
        </div>
        
        <!-- 详细统计 -->
        <div class="result-stats">
            <div class="stat-card">
                <div class="stat-number">{{ "%.1f"|format(exam_result.score) }}</div>
                <div class="stat-label">获得分数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ "%.1f"|format(exam_result.total_score) }}</div>
                <div class="stat-label">满分</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ exam_result.correct_count }}</div>
                <div class="stat-label">正确题数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ exam_result.total_questions }}</div>
                <div class="stat-label">总题数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ "%.1f"|format(exam_result.accuracy) }}%</div>
                <div class="stat-label">正确率</div>
            </div>
        </div>
    </div>
    
    <!-- 题目详情 -->
    {% if question_scores %}
    <div class="questions-detail">
        <h3 class="mb-4">📝 题目详情分析</h3>
        
        {% for qs in question_scores %}
        <div class="question-card {% if qs[6] %}correct{% elif qs[7] > 0 %}partial{% else %}incorrect{% endif %}">
            <div class="question-header">
                <div style="display: flex; align-items: center; gap: 15px;">
                    <div class="question-number">{{ qs[3] }}</div>
                    <div>
                        <span class="question-type-badge type-{{ qs[9] }}">{{ qs[9].replace('_', ' ').title() }}</span>
                        <span style="font-weight: 500;">{{ qs[10][:100] }}{% if qs[10]|length > 100 %}...{% endif %}</span>
                    </div>
                </div>
                
                <div class="question-score">
                    <span class="score-badge {% if qs[6] %}full{% elif qs[7] > 0 %}partial{% else %}none{% endif %}">
                        {{ "%.1f"|format(qs[7]) }} / {{ "%.1f"|format(qs[8]) }}
                    </span>
                </div>
            </div>
            
            <div class="answer-comparison">
                <div class="answer-section">
                    <div class="answer-label">你的答案：</div>
                    <div class="answer-content student-answer">
                        {% if qs[4] %}
                            {{ qs[4] }}
                        {% else %}
                            <em style="color: #6c757d;">未作答</em>
                        {% endif %}
                    </div>
                </div>
                
                <div class="answer-section">
                    <div class="answer-label">正确答案：</div>
                    <div class="answer-content correct-answer">{{ qs[5] }}</div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}
    
    <!-- 操作按钮 -->
    <div class="actions">
        <div class="btn-group">
            <a href="{{ url_for('student.results') }}" class="btn btn-primary">
                <i class="bi bi-clipboard-data"></i> 查看所有成绩
            </a>
            <a href="{{ url_for('student.exams') }}" class="btn btn-secondary">
                <i class="bi bi-list"></i> 其他考试
            </a>
            <a href="{{ url_for('student.dashboard') }}" class="btn btn-success">
                <i class="bi bi-house"></i> 返回首页
            </a>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    // 添加动画效果
    $('.question-card').each(function(index) {
        $(this).css('opacity', '0').delay(index * 100).animate({
            opacity: 1
        }, 500);
    });
    
    // 分数圆圈动画
    var examPercentage = {{ exam_result.percentage }};
    var scoreCircle = $('.score-circle');
    
    if (examPercentage >= 90) {
        scoreCircle.css('background', 'linear-gradient(135deg, #28a745, #20c997)');
    } else if (examPercentage >= 80) {
        scoreCircle.css('background', 'linear-gradient(135deg, #17a2b8, #007bff)');
    } else if (examPercentage >= 70) {
        scoreCircle.css('background', 'linear-gradient(135deg, #ffc107, #fd7e14)');
    } else if (examPercentage >= 60) {
        scoreCircle.css('background', 'linear-gradient(135deg, #fd7e14, #dc3545)');
    } else {
        scoreCircle.css('background', 'linear-gradient(135deg, #dc3545, #e83e8c)');
    }
    
    // 显示成功消息
    if (typeof FlashExam !== 'undefined' && FlashExam.showMessage) {
        FlashExam.showMessage('考试结果已生成！', 'success');
    }
});
</script>
{% endblock %}