{% extends "base.html" %}

{% block content %}
<div class="max-w-7xl mx-auto space-y-8 px-4 sm:px-6 lg:px-8 py-8 animate-fade-in">
    <!-- Category Header -->
    <div class="flex justify-between items-center p-8 md:p-10 bg-gradient-to-br from-[var(--card-bg)] to-[var(--bg-hover)] rounded-3xl shadow-2xl border-l-[6px] border-[var(--accent-primary)] backdrop-blur-sm">
        <div>
            <h1 class="text-4xl md:text-5xl font-extrabold text-[var(--text-primary)] mb-4 tracking-tight">{{ category }}</h1>
            <p class="text-lg text-[var(--text-secondary)] flex items-center font-medium">
                <i class="fas fa-book mr-3 text-[var(--accent-primary)] text-xl"></i>
                <span>{{ topics|length }} {{ 'topics' if topics|length != 1 else 'topic' }} available</span>
            </p>
        </div>
        <div class="hidden md:block">
            <div class="w-20 h-20 bg-gradient-to-br from-[var(--accent-primary)] to-[var(--accent-secondary)] rounded-2xl flex items-center justify-center shadow-xl transform hover:scale-110 transition-transform duration-300">
                <i class="fas fa-comments text-4xl text-white"></i>
            </div>
        </div>
    </div>

    <!-- Topics List -->
    <div class="space-y-6">
        {% for topic in topics %}
        {% set prog = progress.get(topic.id) %}
        <div class="bg-gradient-to-br from-[var(--card-bg)] to-[var(--bg-secondary)] rounded-3xl shadow-xl p-8 border border-gray-200/50 dark:border-gray-700/50 {% if topic.is_locked %}opacity-70{% else %}hover:shadow-2xl transition-all duration-300 hover:translate-y-[-4px] hover:scale-[1.01]{% endif %}">
            <div class="flex flex-col md:flex-row justify-between gap-6">
                <!-- Topic Info -->
                <div class="flex-1">
                    <div class="flex items-center gap-4 mb-6">
                        <h2 class="text-2xl md:text-3xl font-bold text-[var(--text-primary)] tracking-tight">{{ topic.title }}</h2>
                        {% set prog = progress.get(topic.id) %}
                        {% if topic.is_locked %}
                            <span class="badge bg-gradient-to-r from-gray-500 to-gray-600 text-white px-4 py-2 rounded-full text-sm font-semibold shadow-md">
                                <i class="fas fa-lock mr-2"></i> Locked
                            </span>
                        {% elif prog %}
                            {% if prog.reading_completed and prog.speaking_completed and prog.comprehension_completed %}
                                <span class="badge bg-gradient-to-r from-green-500 to-green-600 text-white px-4 py-2 rounded-full text-sm font-semibold shadow-lg animate-pulse-subtle">
                                    <i class="fas fa-check-circle mr-2"></i> Completed
                                </span>
                            {% elif prog.status == "In Progress" %}
                                <span class="badge bg-gradient-to-r from-blue-500 to-blue-600 text-white px-4 py-2 rounded-full text-sm font-semibold shadow-lg">
                                    <i class="fas fa-clock mr-1"></i> 
                                    {% if prog.current_stage == "reading" %}
                                        Reading in Progress
                                    {% elif prog.current_stage == "speaking" %}
                                        Speaking Practice
                                    {% elif prog.current_stage == "comprehension" %}
                                        Comprehension Quiz
                                    {% endif %}
                                </span>
                            {% else %}
                                <span class="badge bg-gradient-to-r from-yellow-500 to-orange-500 text-white px-4 py-2 rounded-full text-sm font-semibold shadow-lg">
                                    <i class="fas fa-star mr-2"></i> Ready to Start
                                </span>
                            {% endif %}
                        {% else %}
                            <span class="badge bg-gradient-to-r from-yellow-500 to-orange-500 text-white px-4 py-2 rounded-full text-sm font-semibold shadow-lg">
                                <i class="fas fa-star mr-2"></i> Not Started
                            </span>
                        {% endif %}
                    </div>
                    
                    <!-- Stage Progress -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-5 mb-6">
                        <!-- Reading Progress -->
                        <div class="bg-[var(--bg-secondary)] p-4 rounded-xl hover:bg-[var(--bg-hover)] transition-all duration-300 hover:shadow-md border border-transparent hover:border-blue-300/30">
                            <div class="flex items-center justify-between mb-3">
                                <span class="font-semibold text-[var(--text-primary)] flex items-center text-base">
                                    <i class="fas fa-book-open mr-2 text-blue-500 text-lg"></i> Reading
                                </span>
                                {% if prog and prog.reading_completed %}
                                    <span class="text-sm text-blue-500 font-bold">
                                        <i class="fas fa-check-circle text-lg"></i>
                                    </span>
                                {% endif %}
                            </div>
                            {% if prog and prog.reading_completed %}
                                <p class="text-sm text-[var(--text-secondary)] font-medium">Completed {{ prog.reading_completed|timeago }}</p>
                            {% else %}
                                <p class="text-sm text-[var(--text-secondary)]">Not started</p>
                            {% endif %}
                        </div>                        <!-- Speaking Progress -->
                        <div class="bg-[var(--bg-secondary)] p-4 rounded-xl hover:bg-[var(--bg-hover)] transition-all duration-300 hover:shadow-md border border-transparent hover:border-blue-300/30">
                            <div class="flex items-center justify-between mb-3">
                                <span class="font-semibold text-[var(--text-primary)] flex items-center text-base">
                                    <i class="fas fa-microphone mr-2 text-green-500 text-lg"></i> Speaking
                                </span>
                                {% if prog and prog.speaking_completed %}
                                    <span class="text-sm font-medium text-green-500">
                                        {% if prog.speaking_scores and prog.speaking_scores.get('overall', 0) > 0 %}
                                            {{ "%.0f"|format(prog.speaking_scores.get('overall', 0)) }}%
                                        {% else %}
                                            100%
                                        {% endif %}
                                    </span>
                                {% endif %}
                            </div>
                            {% if prog and prog.speaking_completed %}
                                <div class="flex items-center justify-between">
                                    <p class="text-sm text-[var(--text-secondary)] font-medium">Completed {{ prog.speaking_completed|timeago }}</p>
                                    <span class="text-sm font-bold text-green-600">{{ "%.0f"|format(prog.speaking_accuracy) }}%</span>
                                </div>
                            {% else %}
                                <p class="text-sm text-[var(--text-secondary)]">
                                    {% if not prog or not prog.reading_completed %}Locked{% else %}Ready to start{% endif %}
                                </p>
                            {% endif %}
                        </div>

                        <!-- Comprehension Progress -->
                        <div class="bg-[var(--bg-secondary)] p-4 rounded-xl hover:bg-[var(--bg-hover)] transition-all duration-300 hover:shadow-md border border-transparent hover:border-blue-300/30">
                            <div class="flex items-center justify-between mb-3">
                                <span class="font-semibold text-[var(--text-primary)] flex items-center text-base">
                                    <i class="fas fa-brain mr-2 text-purple-500 text-lg"></i> Comprehension
                                </span>
                                {% if prog and prog.comprehension_completed %}
                                    <span class="text-sm font-bold text-purple-500">
                                        <i class="fas fa-check-circle text-lg"></i>
                                    </span>
                                {% endif %}
                            </div>
                            {% if prog and prog.comprehension_completed %}
                                <div class="flex items-center justify-between">
                                    <p class="text-xs text-[var(--text-secondary)]">Completed {{ prog.comprehension_completed|timeago }}</p>
                                    <span class="text-sm font-bold text-purple-600">{{ "%.0f"|format(prog.comprehension_score) }}%</span>
                                </div>
                            {% else %}
                                <p class="text-xs text-[var(--text-secondary)]">
                                    {% if not prog or not prog.speaking_completed %}Locked{% else %}Ready to start{% endif %}
                                </p>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Action Button -->
                <div class="flex items-center">
                    {% if topic.is_locked %}
                        <button disabled class="btn bg-gradient-to-r from-gray-400 to-gray-500 text-white opacity-75 cursor-not-allowed px-6 py-3 rounded-xl shadow-md font-semibold">
                            <i class="fas fa-lock mr-2"></i>Complete Previous Topic
                        </button>
                    {% else %}
                        <a href="{{ url_for('student.topic_view', topic_id=topic.id) }}" 
                           class="btn bg-gradient-to-r from-[var(--accent-primary)] to-[var(--accent-secondary)] text-white hover:shadow-2xl hover:scale-105 transition-all duration-300 px-8 py-4 rounded-xl font-bold text-lg">
                            {% if prog and prog.completed_at %}
                                <i class="fas fa-redo mr-2"></i>Review Topic
                            {% elif prog and (prog.reading_completed or prog.speaking_completed or prog.comprehension_completed) %}
                                <i class="fas fa-running mr-2"></i>Continue Learning
                            {% else %}
                                <i class="fas fa-play mr-2"></i>Start Topic
                            {% endif %}
                        </a>
                    {% endif %}
                </div>
            </div>

            <!-- Overall Progress Bar -->
            {% if prog %}
            <div class="mt-6 pt-6 border-t border-gray-200/50 dark:border-gray-700/50">
                <div class="flex justify-between items-center mb-2">
                    <span class="text-sm font-medium text-[var(--text-secondary)]">
                        {% if prog.status == "Completed" %}
                            All Stages Completed
                        {% elif prog.status == "In Progress" %}
                            {% if prog.current_stage == "reading" %}
                                Reading Stage In Progress
                            {% elif prog.current_stage == "speaking" %}
                                Speaking Practice In Progress
                            {% elif prog.current_stage == "comprehension" %}
                                Taking Comprehension Quiz
                            {% endif %}
                        {% else %}
                            Not Started Yet
                        {% endif %}
                    </span>
                    <span class="text-sm font-bold text-[var(--accent-primary)]">
                        {{ prog.completion_percentage|round|int }}%
                    </span>
                </div>
                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3 shadow-inner">
                    <div class="bg-gradient-to-r from-[var(--accent-primary)] to-[var(--accent-secondary)] h-3 rounded-full transition-all duration-500 shadow-md"
                         style="width: {{ prog.completion_percentage }}%"></div>
                </div>
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
</div>

<style>
.animate-fade-in {
    animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-pulse-subtle {
    animation: pulseSubtle 2s ease-in-out infinite;
}

@keyframes pulseSubtle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.9; }
}

/* Enhanced scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--accent-primary);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-secondary);
}
</style>
{% endblock %}