{% extends 'grades/base.html' %}
{% block title %}我的成绩{% endblock %}
{% block breadcrumb %}<li class="breadcrumb-item active">我的成绩</li>{% endblock %}

{% block content %}
<h4 class="mb-3"><i class="bi bi-journal-check"></i> 我的成绩</h4>

<!-- 筛选 -->
<div class="card mb-3">
    <div class="card-body py-2">
        <form method="get" class="row g-2 align-items-end">
            <div class="col-md-4">
                <select name="semester" class="form-select form-select-sm">
                    <option value="">-- 学期 --</option>
                    {% for s in semesters %}
                    <option value="{{ s }}" {% if f_semester == s %}selected{% endif %}>{{ s }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-4">
                <select name="course" class="form-select form-select-sm">
                    <option value="">-- 课程 --</option>
                    {% for c in courses %}
                    <option value="{{ c.course_id }}" {% if f_course == c.course_id %}selected{% endif %}>{{ c.course_name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-4">
                <button type="submit" class="btn btn-primary btn-sm"><i class="bi bi-search"></i> 查询</button>
                <a href="{% url 'my_grades' %}" class="btn btn-outline-secondary btn-sm">重置</a>
            </div>
        </form>
    </div>
</div>

<!-- 统计 -->
<div class="row g-3 mb-3">
    <div class="col-6 col-md-3">
        <div class="stat-card"><div class="stat-value">{{ stats.avg }}</div><div class="stat-label">平均分</div></div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card green"><div class="stat-value">{{ stats.max }}</div><div class="stat-label">最高分</div></div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card red"><div class="stat-value">{{ stats.min }}</div><div class="stat-label">最低分</div></div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card cyan">
            <div class="stat-value">{% if rank %}{{ rank.position }}/{{ rank.total }}{% else %}-{% endif %}</div>
            <div class="stat-label">班级排名</div>
        </div>
    </div>
</div>

<!-- 图表区域 -->
<div class="row g-3 mb-3">
    <div class="col-md-6">
        <div class="card"><div class="card-header">学期成绩趋势</div><div class="card-body"><div id="trendChart" style="height:280px;"></div></div></div>
    </div>
    <div class="col-md-6">
        <div class="card"><div class="card-header">成绩分布</div><div class="card-body"><div id="distChart" style="height:280px;"></div></div></div>
    </div>
</div>

<!-- 成绩列表 -->
<div class="card">
    <div class="card-body p-0">
        <table class="table table-hover mb-0">
            <thead>
                <tr><th>#</th><th>课程号</th><th>课程名称</th><th>学分</th><th>成绩</th><th>等级</th><th>学期</th></tr>
            </thead>
            <tbody>
                {% for g in grades %}
                <tr>
                    <td>{{ forloop.counter }}</td>
                    <td>{{ g.course.course_id }}</td>
                    <td>{{ g.course.course_name }}</td>
                    <td>{{ g.course.credit }}</td>
                    <td>
                        <span class="badge {% if g.score >= 90 %}bg-success{% elif g.score >= 80 %}bg-primary{% elif g.score >= 70 %}bg-info{% elif g.score >= 60 %}bg-warning text-dark{% else %}bg-danger{% endif %}">
                            {{ g.score }}
                        </span>
                    </td>
                    <td>{{ g.level }}</td>
                    <td>{{ g.semester }}</td>
                </tr>
                {% empty %}
                <tr><td colspan="7" class="text-center text-muted py-3">暂无成绩数据</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<div class="mt-2 text-muted small">共 {{ grades|length }} 条记录</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
<script>
(function() {
    const trendChart = echarts.init(document.getElementById('trendChart'));
    const distChart = echarts.init(document.getElementById('distChart'));

    fetch('{% url "my_chart_data" %}')
        .then(r => r.json())
        .then(data => {
            // 学期趋势折线图
            trendChart.setOption({
                tooltip: { trigger: 'axis' },
                xAxis: { type: 'category', data: data.trend.semesters },
                yAxis: { type: 'value', min: 0, max: 100 },
                series: [{
                    type: 'line', data: data.trend.values,
                    smooth: true, lineStyle: { color: '#4e73df', width: 3 },
                    itemStyle: { color: '#4e73df' },
                    areaStyle: { color: 'rgba(78,115,223,0.1)' },
                    label: { show: true, position: 'top' }
                }]
            });

            // 分数段分布饼图
            const distData = data.distribution;
            distChart.setOption({
                tooltip: { trigger: 'item' },
                series: [{
                    type: 'pie', radius: ['40%', '70%'],
                    data: distData.categories.map((name, i) => ({
                        name, value: distData.values[i],
                        itemStyle: { color: distData.colors[i] }
                    })),
                    label: { formatter: '{b}: {c}' }
                }]
            });
        });

    window.addEventListener('resize', () => { trendChart.resize(); distChart.resize(); });
})();
</script>
{% endblock %}