{% extends "layout.html" %}

{% block page_title %}首页{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- 总体统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- 总题目数 -->
        <div class="apple-card p-6 hover:shadow-lg transition-all duration-300 group">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white text-xl shadow-lg group-hover:scale-110 transition-transform">
                    <i class="ri-file-list-3-line"></i>
                </div>
                <div class="text-right">
                    <div class="text-3xl font-bold text-gray-800">{{ total }}</div>
                    <div class="text-sm text-gray-500 mt-1">总题目数</div>
                </div>
            </div>
            <div class="h-1 bg-gray-200 rounded-full overflow-hidden">
                <div class="h-full bg-gradient-to-r from-blue-500 to-blue-600 rounded-full" style="width: 100%"></div>
            </div>
        </div>

        <!-- 已审核题目 -->
        <div class="apple-card p-6 hover:shadow-lg transition-all duration-300 group">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center text-white text-xl shadow-lg group-hover:scale-110 transition-transform">
                    <i class="ri-checkbox-circle-line"></i>
                </div>
                <div class="text-right">
                    <div class="text-3xl font-bold text-gray-800">{{ audited_count }}</div>
                    <div class="text-sm text-gray-500 mt-1">已审核</div>
                </div>
            </div>
            <div class="h-1 bg-gray-200 rounded-full overflow-hidden">
                <div class="h-full bg-gradient-to-r from-green-500 to-green-600 rounded-full" style="width: {{ audit_rate }}%"></div>
            </div>
            <div class="text-xs text-gray-400 mt-2">审核率: {{ audit_rate }}%</div>
        </div>

        <!-- 合格题目 -->
        <div class="apple-card p-6 hover:shadow-lg transition-all duration-300 group">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-emerald-500 to-emerald-600 flex items-center justify-center text-white text-xl shadow-lg group-hover:scale-110 transition-transform">
                    <i class="ri-check-double-line"></i>
                </div>
                <div class="text-right">
                    <div class="text-3xl font-bold text-gray-800">{{ pass_count }}</div>
                    <div class="text-sm text-gray-500 mt-1">合格题目</div>
    </div>
</div>
            <div class="h-1 bg-gray-200 rounded-full overflow-hidden">
                <div class="h-full bg-gradient-to-r from-emerald-500 to-emerald-600 rounded-full" style="width: {{ pass_rate }}%"></div>
            </div>
            <div class="text-xs text-gray-400 mt-2">通过率: {{ pass_rate }}%</div>
        </div>

        <!-- 待审核题目 -->
        <div class="apple-card p-6 hover:shadow-lg transition-all duration-300 group">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center text-white text-xl shadow-lg group-hover:scale-110 transition-transform">
                    <i class="ri-time-line"></i>
                </div>
                <div class="text-right">
                    <div class="text-3xl font-bold text-gray-800">{{ pending_count }}</div>
                    <div class="text-sm text-gray-500 mt-1">待审核</div>
                </div>
                            </div>
            {% if pending_count > 0 %}
            <a href="/audit_questions" class="block mt-4 text-sm text-orange-600 hover:text-orange-700 font-medium">
                立即审核 →
            </a>
            {% else %}
            <div class="text-xs text-gray-400 mt-2">全部已审核</div>
            {% endif %}
        </div>
    </div>

    <!-- 教材和知识点统计 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- 教材统计 -->
        <div class="apple-card p-6">
            <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-2">
                <i class="ri-book-open-line text-indigo-600"></i>
                <span>教材统计</span>
            </h2>
            <div class="space-y-4">
                <!-- 教材系列 -->
                <div class="flex items-center justify-between p-4 rounded-lg bg-gradient-to-r from-indigo-50 to-purple-50">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-lg bg-gradient-to-r from-indigo-500 to-indigo-600 flex items-center justify-center text-white">
                            <i class="ri-stack-line"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-600">教材系列</div>
                            <div class="text-lg font-bold text-gray-800">{{ total_series }} 个系列</div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-xs text-gray-500">激活</div>
                        <div class="text-lg font-bold text-indigo-600">{{ active_series }}</div>
                    </div>
                </div>
                <!-- 教材总数 -->
                <div class="flex items-center justify-between p-4 rounded-lg bg-gradient-to-r from-blue-50 to-cyan-50">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-lg bg-gradient-to-r from-blue-500 to-blue-600 flex items-center justify-center text-white">
                            <i class="ri-book-2-line"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-600">教材总数</div>
                            <div class="text-lg font-bold text-gray-800">{{ total_textbooks }} 本</div>
                        </div>
                    </div>
                    <a href="/textbook_management" class="text-blue-600 hover:text-blue-700">
                        <i class="ri-arrow-right-s-line text-xl"></i>
                    </a>
                </div>
            </div>
        </div>
        
        <!-- 知识点统计 -->
        <div class="apple-card p-6">
            <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-2">
                <i class="ri-node-tree text-green-600"></i>
                <span>知识点统计</span>
            </h2>
            <div class="space-y-4">
                <!-- 知识点总数 -->
                <div class="flex items-center justify-between p-4 rounded-lg bg-gradient-to-r from-green-50 to-emerald-50">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-lg bg-gradient-to-r from-green-500 to-green-600 flex items-center justify-center text-white">
                            <i class="ri-file-list-3-line"></i>
                        </div>
                        <div>
                            <div class="text-sm text-gray-600">知识点总数</div>
                            <div class="text-lg font-bold text-gray-800">{{ total_kp }} 个</div>
                        </div>
                    </div>
                    <a href="/kp_management" class="text-green-600 hover:text-green-700">
                        <i class="ri-arrow-right-s-line text-xl"></i>
                    </a>
                </div>
                <!-- 知识点层级分布 -->
                <div class="space-y-2">
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-gray-600">一级知识点</span>
                        <span class="font-bold text-gray-800">{{ kp_level_0 }} 个</span>
                    </div>
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-gray-600">二级知识点</span>
                        <span class="font-bold text-gray-800">{{ kp_level_1 }} 个</span>
                    </div>
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-gray-600">三级及以上</span>
                        <span class="font-bold text-gray-800">{{ kp_level_2_plus }} 个</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 审核状态分布 -->
    <div class="apple-card p-6">
        <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-2">
            <i class="ri-pie-chart-line text-blue-600"></i>
            <span>审核状态分布</span>
        </h2>
        <div class="space-y-4">
            <!-- 合格 -->
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-4 h-4 rounded-full bg-gradient-to-r from-emerald-500 to-emerald-600"></div>
                    <span class="text-gray-700 font-medium">合格题目</span>
                </div>
                <div class="flex items-center gap-4">
                    <div class="w-32 h-2 bg-gray-200 rounded-full overflow-hidden">
                        <div class="h-full bg-gradient-to-r from-emerald-500 to-emerald-600 rounded-full" style="width: {% if total > 0 %}{{ (pass_count / total * 100)|round(1) }}{% else %}0{% endif %}%"></div>
                    </div>
                    <span class="text-gray-800 font-bold w-16 text-right">{{ pass_count }}</span>
                </div>
            </div>
            <!-- 不合格 -->
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-4 h-4 rounded-full bg-gradient-to-r from-red-500 to-red-600"></div>
                    <span class="text-gray-700 font-medium">不合格题目</span>
                </div>
                <div class="flex items-center gap-4">
                    <div class="w-32 h-2 bg-gray-200 rounded-full overflow-hidden">
                        <div class="h-full bg-gradient-to-r from-red-500 to-red-600 rounded-full" style="width: {% if total > 0 %}{{ (fail_count / total * 100)|round(1) }}{% else %}0{% endif %}%"></div>
                    </div>
                    <span class="text-gray-800 font-bold w-16 text-right">{{ fail_count }}</span>
                </div>
            </div>
            <!-- 待审核 -->
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="w-4 h-4 rounded-full bg-gradient-to-r from-orange-500 to-orange-600"></div>
                    <span class="text-gray-700 font-medium">待审核题目</span>
                </div>
                <div class="flex items-center gap-4">
                    <div class="w-32 h-2 bg-gray-200 rounded-full overflow-hidden">
                        <div class="h-full bg-gradient-to-r from-orange-500 to-orange-600 rounded-full" style="width: {% if total > 0 %}{{ (pending_count / total * 100)|round(1) }}{% else %}0{% endif %}%"></div>
                    </div>
                    <span class="text-gray-800 font-bold w-16 text-right">{{ pending_count }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 最近添加的题目 -->
    {% if recent_questions %}
    <div class="apple-card p-6">
        <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center gap-2">
            <i class="ri-history-line text-indigo-600"></i>
            <span>最近添加的题目</span>
        </h2>
        <div class="space-y-3">
            {% for question in recent_questions %}
            <a href="/detail/{{ question.question_code }}" class="block p-4 rounded-lg hover:bg-gray-50 transition-colors border-l-4 border-transparent hover:border-blue-500">
                <div class="flex items-start justify-between gap-4">
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2 mb-2">
                            <span class="text-xs font-mono text-gray-500 bg-gray-100 px-2 py-1 rounded">ID: {{ question.question_code }}</span>
                            {% if question.audit_reason %}
                                {% if question.audit_reason == '合格' %}
                                <span class="text-xs px-2 py-1 bg-emerald-100 text-emerald-700 rounded font-semibold">合格</span>
                                {% else %}
                                <span class="text-xs px-2 py-1 bg-red-100 text-red-700 rounded font-semibold">不合格</span>
                                {% endif %}
                            {% else %}
                                <span class="text-xs px-2 py-1 bg-orange-100 text-orange-700 rounded font-semibold">待审核</span>
                    {% endif %}
                        </div>
                        <div class="text-sm text-gray-700 line-clamp-2">
                            {{ question.stem[:100]|safe }}{% if question.stem|length > 100 %}...{% endif %}
                        </div>
                    </div>
                    <i class="ri-arrow-right-s-line text-gray-400 text-xl"></i>
                </div>
            </a>
                {% endfor %}
        </div>
    </div>
    {% endif %}
</div>

<style>
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
</style>
{% endblock %}