{% extends 'base.html' %}

{% block title %}Analytics for {{ topic.title }}{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="flex items-center justify-between mb-8">
        <h1 class="text-3xl font-bold text-gray-900">
            Analytics: {{ topic.title }}
        </h1>
        <a href="{{ url_for('teacher.manage_topics') }}" class="flex items-center text-primary hover:text-primary-dark">
            <i class="fas fa-arrow-left mr-2"></i> Back to Topics
        </a>
    </div>

    <!-- Analytics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <!-- Completion Rate Card -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-700">Completion Rate</h3>
                <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">Overview</span>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-2">{{ analytics.completion_rate }}%</div>
            <p class="text-gray-600 text-sm">Of students have completed this topic</p>
        </div>

        <!-- Comprehension Score Card -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-700">Avg. Comprehension</h3>
                <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">Score</span>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-2">{{ analytics.average_scores.comprehension }}</div>
            <p class="text-gray-600 text-sm">Average student comprehension score</p>
        </div>

        <!-- Speaking Score Card -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-700">Avg. Speaking</h3>
                <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm font-medium">Score</span>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-2">{{ analytics.average_scores.speaking }}</div>
            <p class="text-gray-600 text-sm">Average student speaking assessment</p>
        </div>

        <!-- Overall Score Card -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-700">Overall Score</h3>
                <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-medium">Combined</span>
            </div>
            <div class="text-3xl font-bold text-gray-900 mb-2">{{ analytics.average_scores.overall }}</div>
            <p class="text-gray-600 text-sm">Combined performance on all assessments</p>
        </div>
    </div>

    <!-- Stage Completion Chart -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <h3 class="text-xl font-semibold text-gray-800 mb-6">Stage Completion Breakdown</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {% for stage, data in analytics.stage_breakdown.items() %}
            <div class="flex flex-col">
                <div class="flex justify-between items-center mb-2">
                    <span class="text-gray-700 font-medium capitalize">{{ stage }}</span>
                    <span class="text-sm text-gray-500">{{ data.count }} students</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2.5">
                    <div class="h-2.5 rounded-full 
                        {% if stage == 'reading' %}bg-blue-500
                        {% elif stage == 'comprehension' %}bg-green-500
                        {% elif stage == 'writing' %}bg-yellow-500
                        {% else %}bg-purple-500{% endif %}" 
                        style="width: {{ data.percentage }}%"></div>
                </div>
                <span class="text-sm text-gray-500 mt-1">{{ data.percentage }}%</span>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- Student Progress Table - Optional if needed -->
</div>
{% endblock %}