{% extends "base.html" %}

{% block content %}
<div class="space-y-8 p-6 animate-fade-in">
    <!-- Header Section -->
    <div class="flex justify-between items-center p-6 bg-[var(--card-bg)] bg-opacity-80 backdrop-filter backdrop-blur-lg rounded-2xl shadow-lg">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 mb-2">My Learning Progress</h1>
            <p class="text-gray-600">Track your journey through different topics</p>
        </div>
        <div class="text-right">
            <div class="text-2xl font-bold text-primary">
                {{ (total_progress * 100)|round|int }}%
            </div>
            <div class="text-sm text-gray-500">Overall Progress</div>
        </div>
    </div>

    <!-- Progress Overview Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div class="bg-[var(--card-bg)] p-6 rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-[var(--text-primary)]">Completed Topics</h3>
                <i class="fas fa-check-circle text-green-500 text-2xl"></i>
            </div>
            <div class="text-3xl font-bold text-[var(--text-primary)]">{{ completed_topics }}</div>
            <div class="text-sm text-[var(--text-secondary)]">Out of {{ total_topics }} topics</div>
        </div>

        <div class="bg-[var(--card-bg)] p-6 rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-[var(--text-primary)]">Daily Streak</h3>
                <i class="fas fa-fire text-orange-500 text-2xl"></i>
            </div>
            <div class="text-3xl font-bold text-[var(--text-primary)]">{{ user_stats.current_streak }}</div>
            <div class="text-sm text-[var(--text-secondary)]">
                {{ user_stats.current_streak }} day{% if user_stats.current_streak != 1 %}s{% endif %} streak
                <span class="text-xs">(longest: {{ user_stats.longest_streak }})</span>
            </div>
        </div>

        <div class="bg-[var(--card-bg)] p-6 rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-[var(--text-primary)]">Vocabulary</h3>
                <i class="fas fa-book text-purple-500 text-2xl"></i>
            </div>
            <div class="text-3xl font-bold text-[var(--text-primary)]">
                {{ user_stats.vocabulary_count }}
            </div>
            <div class="text-sm text-[var(--text-secondary)]">Words learned</div>
        </div>

        <a href="{{ url_for('student.my_results') }}" class="bg-gradient-to-br from-blue-500 to-purple-600 p-6 rounded-2xl shadow-lg hover:shadow-2xl transition-all transform hover:scale-105 text-white">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold">My Results</h3>
                <i class="fas fa-clipboard-list text-2xl"></i>
            </div>
            <div class="text-3xl font-bold">View All</div>
            <div class="text-sm opacity-90">Check your submissions</div>
        </a>
    </div>
    
    <!-- Skills Overview -->
    <div class="bg-[var(--card-bg)] p-6 rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-[var(--text-primary)]">Skills Overview</h3>
            <i class="fas fa-chart-line text-blue-500 text-2xl"></i>
        </div>
            <div class="space-y-2">
                <div class="flex items-center justify-between">
                    <span class="text-sm text-gray-600">Reading</span>
                    <div class="w-2/3 bg-gray-200 rounded-full h-2.5">
                        <div class="bg-blue-600 h-2.5 rounded-full" style="width: {{ reading_progress }}%"></div>
                    </div>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-sm text-gray-600">Speaking</span>
                    <div class="w-2/3 bg-gray-200 rounded-full h-2.5">
                        <div class="bg-green-600 h-2.5 rounded-full" style="width: {{ speaking_progress }}%"></div>
                    </div>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-sm text-gray-600">Writing</span>
                    <div class="w-2/3 bg-gray-200 rounded-full h-2.5">
                        <div class="bg-purple-600 h-2.5 rounded-full" style="width: {{ writing_progress }}%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Topics Progress -->
    <div class="bg-[var(--card-bg)] rounded-2xl shadow-lg p-6">
        <h2 class="text-2xl font-bold text-[var(--text-primary)] mb-6">Topics Progress</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            {% for category, topics in topics_by_category.items() %}
            <div class="space-y-4">
                <h3 class="text-lg font-semibold text-[var(--text-primary)]">{{ category }}</h3>
                {% for topic in topics %}
                <div class="bg-[var(--bg-secondary)] p-4 rounded-lg hover:bg-[var(--bg-hover)] transition-colors">
                    <div class="flex items-center justify-between mb-2">
                        <span class="font-medium text-[var(--text-primary)]">{{ topic.title }}</span>
                        {% set progress = topic_progress.get(topic.id, 0) %}
                        <span class="text-sm text-[var(--text-secondary)]">{{ (progress * 100)|round|int }}%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div class="bg-primary h-2 rounded-full transition-all duration-500" 
                             style="width: {{ (progress * 100)|round|int }}%"></div>
                    </div>
                    {% if progress == 1 %}
                    <div class="flex items-center mt-2 text-green-500 text-sm">
                        <i class="fas fa-check-circle mr-2"></i>
                        <span>Completed</span>
                    </div>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
            {% endfor %}
        </div>
    </div>

   
</div>

<style>
@keyframes progress {
    0% { width: 0; }
}

.animate-progress {
    animation: progress 1s ease-out forwards;
}

.bg-primary {
    @apply bg-[var(--accent-primary)];
}

:root[data-theme="dark"] {
    --card-bg: #1f2937;
    --bg-secondary: #374151;
    --bg-hover: #4B5563;
    --text-primary: #F3F4F6;
    --text-secondary: #9CA3AF;
    --accent-primary: #3B82F6;
    --accent-secondary: #6366F1;
    --accent-light: #60A5FA;
}

:root[data-theme="light"] {
    --card-bg: #ffffff;
    --bg-secondary: #F3F4F6;
    --bg-hover: #E5E7EB;
    --text-primary: #1F2937;
    --text-secondary: #6B7280;
    --accent-primary: #2563EB;
    --accent-secondary: #4F46E5;
    --accent-light: #3B82F6;
}

/* Ensure smooth transitions */
* {
    transition: background-color 0.3s ease, color 0.3s ease;
}
</style>

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Animate progress bars on page load
    const progressBars = document.querySelectorAll('.bg-primary');
    progressBars.forEach(bar => {
        bar.classList.add('animate-progress');
    });
});
</script>
{% endblock %}
{% endblock %}