{% extends "base.html" %} {% block title %}QuizTrainer - 答题历史{% endblock %}
{% block content %}
<!-- 页面头部 -->
<div class="page-header animate-fade-in">
    <h1>答题历史</h1>
    <div class="meta">
        <span>
            <svg
                viewBox="0 0 24 24"
                width="16"
                height="16"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <circle cx="12" cy="12" r="10" />
                <polyline points="12 6 12 12 16 14" />
            </svg>
            共 {{ user_data.total_questions }} 条记录
        </span>
        <span>
            <svg
                viewBox="0 0 24 24"
                width="16"
                height="16"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <line x1="18" y1="20" x2="18" y2="10" />
                <line x1="12" y1="20" x2="12" y2="4" />
                <line x1="6" y1="20" x2="6" y2="14" />
            </svg>
            正确率 {{ user_data.accuracy }}%
        </span>
    </div>
</div>

<!-- 统计概览 -->
<div class="stats-grid mb-5 animate-fade-in" style="animation-delay: 0.1s">
    <div class="stat-card">
        <div class="value" style="color: var(--accent)">
            {{ user_data.total_questions }}
        </div>
        <div class="label">总答题数</div>
    </div>
    <div class="stat-card">
        <div class="value" style="color: var(--success)">
            {{ user_data.correct_count }}
        </div>
        <div class="label">答对题目</div>
    </div>
    <div class="stat-card">
        <div class="value" style="color: var(--error)">
            {{ user_data.total_questions - user_data.correct_count }}
        </div>
        <div class="label">答错题目</div>
    </div>
    <div class="stat-card">
        <div class="value">{{ user_data.accuracy }}%</div>
        <div class="label">正确率</div>
    </div>
</div>

<!-- 分类统计 -->
{% if stats.category_stats %}
<div class="card mb-5 animate-fade-in" style="animation-delay: 0.15s">
    <div class="card-header">
        <h3 class="card-title">
            <svg
                viewBox="0 0 24 24"
                width="18"
                height="18"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <line x1="18" y1="20" x2="18" y2="10" />
                <line x1="12" y1="20" x2="12" y2="4" />
                <line x1="6" y1="20" x2="6" y2="14" />
            </svg>
            分类统计
        </h3>
    </div>
    <div class="card-body">
        <div class="bar-chart">
            {% for category, stat in stats.category_stats.items() %}
            <div class="bar-item">
                <span class="bar-label" style="width: 120px"
                    >{{ category }}</span
                >
                <div class="bar-track">
                    <div
                        class="bar-fill"
                        style="width: {{ (stat.correct / stat.total * 100) if stat.total > 0 else 0 }}%;"
                    ></div>
                </div>
                <span class="bar-value"
                    >{{ stat.correct }}/{{ stat.total }}</span
                >
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}

<!-- 历史记录列表 -->
<div class="card animate-fade-in" style="animation-delay: 0.2s">
    <div class="card-header">
        <h3 class="card-title">
            <svg
                viewBox="0 0 24 24"
                width="18"
                height="18"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <circle cx="12" cy="12" r="10" />
                <polyline points="12 6 12 12 16 14" />
            </svg>
            最近答题记录
        </h3>
    </div>
    <div class="card-body" style="padding: 0">
        {% if history %}
        <div class="history-list" style="padding: 16px">
            {% for item in history %}
            <div class="history-item">
                <div
                    class="history-result {% if item.record.is_correct %}correct{% else %}wrong{% endif %}"
                >
                    {% if item.record.is_correct %}
                    <svg
                        viewBox="0 0 24 24"
                        width="18"
                        height="18"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <polyline points="20 6 9 17 4 12" />
                    </svg>
                    {% else %}
                    <svg
                        viewBox="0 0 24 24"
                        width="18"
                        height="18"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                    >
                        <line x1="18" y1="6" x2="6" y2="18" />
                        <line x1="6" y1="6" x2="18" y2="18" />
                    </svg>
                    {% endif %}
                </div>
                <div class="history-content">
                    <div class="history-question">
                        {{ item.question.question[:100] }}{% if
                        item.question.question | length > 100 %}...{% endif %}
                    </div>
                    <div class="history-meta">
                        <span class="tag tag-{{ item.question.type }}"
                            >{{ item.question.type_display }}</span
                        >
                        <span
                            class="tag tag-{{ item.question.difficulty.value }}"
                            >{{ item.question.difficulty_display }}</span
                        >
                        <span>{{ item.question.category }}</span>
                        <span>{{ item.record.timestamp[:19] }}</span>
                    </div>
                </div>
                {% if not item.record.is_correct %}
                <div style="margin-left: auto; flex-shrink: 0">
                    <span
                        class="tag"
                        style="background: var(--error-bg); color: var(--error)"
                    >
                        正确答案: {{ item.question.answer }}
                    </span>
                </div>
                {% endif %}
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div style="padding: 48px; text-align: center">
            <svg
                viewBox="0 0 24 24"
                width="48"
                height="48"
                fill="none"
                stroke="var(--text-muted)"
                stroke-width="1.5"
                style="margin-bottom: 16px; opacity: 0.5"
            >
                <circle cx="12" cy="12" r="10" />
                <polyline points="12 6 12 12 16 14" />
            </svg>
            <h3
                style="
                    font-size: 16px;
                    color: var(--text-secondary);
                    margin-bottom: 8px;
                "
            >
                暂无答题记录
            </h3>
            <p
                style="
                    font-size: 14px;
                    color: var(--text-muted);
                    margin-bottom: 16px;
                "
            >
                开始答题来积累你的学习记录吧
            </p>
            <a href="{{ url_for('quiz') }}" class="btn btn-primary">
                <svg
                    viewBox="0 0 24 24"
                    width="16"
                    height="16"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <polygon points="5 3 19 12 5 21 5 3" />
                </svg>
                开始答题
            </a>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}