{% extends 'base.html' %}
{% block title %}{{ topic.title }}{% endblock %}

{% block content %}
<div class="space-y-8 animate-fade-in">
    <!-- Back Navigation -->
    <div class="flex justify-between items-center">
        {% set category_name = topic.category if topic.category is not none else "General" %}
        <a href="{{ url_for('student.category_topics', category_name=category_name) }}" class="flex items-center text-base-content/70 hover:text-primary transition-colors">
            <i class="fas fa-arrow-left mr-2"></i>
            <span>Back to {{ category_name }} Topics</span>
        </a>
        <span class="badge badge-primary">{{ category_name }}</span>
    </div>
    
    <!-- Topic Header Card -->
    <div class="bg-gradient-to-r from-primary/80 to-secondary/80 text-primary-content rounded-2xl shadow-xl overflow-hidden">
        <div class="backdrop-blur-sm backdrop-filter p-8">
            {% set category_name = topic.category if topic.category is not none else "General" %}
            <div class="flex items-center gap-4 mb-4">
                {% if category_name == 'Conversation' %}
                    <div class="bg-white/20 p-3 rounded-full">
                        <i class="fas fa-comments text-4xl text-white"></i>
                    </div>
                {% elif category_name == 'Grammar' %}
                    <div class="bg-white/20 p-3 rounded-full">
                        <i class="fas fa-book text-4xl text-white"></i>
                    </div>
                {% elif category_name == 'Vocabulary' %}
                    <div class="bg-white/20 p-3 rounded-full">
                        <i class="fas fa-language text-4xl text-white"></i>
                    </div>
                {% else %}
                    <div class="bg-white/20 p-3 rounded-full">
                        <i class="fas fa-graduation-cap text-4xl text-white"></i>
                    </div>
                {% endif %}
                
                <div>
                    <h1 class="text-3xl md:text-4xl font-bold">{{ topic.title }}</h1>
                    <p class="text-primary-content/80 mt-2">
                        Improve your English skills with this interactive lesson
                    </p>
                </div>
            </div>
            
            <!-- Topic Progress Bar -->
            {% if progress %}
                {% set completed_stages = 0 %}
                {% if progress.reading_completed %}
                    {% set completed_stages = completed_stages + 1 %}
                {% endif %}
                {% if progress.speaking_completed %}
                    {% set completed_stages = completed_stages + 1 %}
                {% endif %}
                {% if progress.comprehension_completed %}
                    {% set completed_stages = completed_stages + 1 %}
                {% endif %}
                {% set total_stages = 3 %}
                {% set percent_complete = (completed_stages / total_stages) * 100 %}
                
                <div class="mt-6 bg-white/20 rounded-full h-3 relative overflow-hidden">
                    <div class="absolute top-0 left-0 h-full rounded-full bg-white transition-all duration-500" style="width: {{ percent_complete }}%"></div>
                </div>
                <div class="flex justify-between text-sm mt-2">
                    <span>Progress: {{ completed_stages }} of {{ total_stages }} stages complete</span>
                    <span>{{ percent_complete|int }}%</span>
                </div>
            {% endif %}
        </div>
    </div>
    
    <!-- Learning Stages -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Stage 1: Reading -->
        <div class="card bg-base-100 border-2 {% if progress and progress.reading_completed %}border-success/30{% else %}border-base-200{% endif %} shadow-xl h-full transform transition-all duration-300 hover:shadow-2xl hover:-translate-y-1">
            <div class="card-body">
                <h2 class="card-title flex items-center text-xl">
                    <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center mr-2">
                        <span class="text-primary font-bold">1</span>
                    </div>
                    Reading
                </h2>
                
                <p class="text-base-content/70 text-sm my-2">Read and understand the topic content</p>
                
                <div class="mt-2 mb-4">
                    {% if progress and progress.reading_completed %}
                        <div class="badge badge-success gap-2">
                            <i class="fas fa-check-circle"></i>
                            Completed
                        </div>
                    {% elif progress and progress.reading_started %}
                        <div class="badge badge-warning gap-2">
                            <i class="fas fa-spinner fa-spin"></i>
                            In Progress
                        </div>
                    {% else %}
                        <div class="badge badge-outline gap-2">
                            <i class="fas fa-circle"></i>
                            Not Started
                        </div>
                    {% endif %}
                </div>
                
                <div class="card-actions justify-end mt-auto">
                    <a href="{{ url_for('student.reading_stage', topic_id=topic.id) }}" class="btn btn-primary w-full">
                        {% if progress and progress.reading_completed %}
                            <i class="fas fa-sync-alt mr-2"></i> Review Again
                        {% elif progress and progress.reading_started %}
                            <i class="fas fa-arrow-right mr-2"></i> Continue
                        {% else %}
                            <i class="fas fa-play mr-2"></i> Start Reading
                        {% endif %}
                    </a>
                </div>
            </div>
        </div>
        
        <!-- Stage 2: Speaking -->
        <div class="card bg-base-100 border-2 {% if progress and progress.speaking_completed %}border-success/30{% else %}border-base-200{% endif %} shadow-xl h-full transform transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 {% if not progress or not progress.reading_completed %}opacity-70 pointer-events-none{% endif %}">
            <div class="card-body relative">
                {% if not progress or not progress.reading_completed %}
                    <div class="absolute inset-0 flex items-center justify-center backdrop-blur-sm bg-base-200/50 z-10 rounded-box">
                        <div class="text-center p-4">
                            <i class="fas fa-lock text-2xl text-base-content/50 mb-2"></i>
                            <p class="font-medium">Complete Reading First</p>
                        </div>
                    </div>
                {% endif %}
            
                <h2 class="card-title flex items-center text-xl">
                    <div class="w-8 h-8 rounded-full bg-secondary/10 flex items-center justify-center mr-2">
                        <span class="text-secondary font-bold">2</span>
                    </div>
                    Speaking
                </h2>
                
                <p class="text-base-content/70 text-sm my-2">Practice your pronunciation and speaking skills</p>
                
                <div class="mt-2 mb-4">
                    {% if progress and progress.speaking_completed %}
                        <div class="badge badge-success gap-2">
                            <i class="fas fa-check-circle"></i>
                            Completed
                        </div>
                        {% if progress.overall_speaking_score %}
                            <div class="badge badge-accent mt-2">Score: {{ progress.overall_speaking_score|round|int }}%</div>
                        {% endif %}
                    {% elif progress and progress.speaking_started %}
                        <div class="badge badge-warning gap-2">
                            <i class="fas fa-spinner fa-spin"></i>
                            In Progress
                        </div>
                    {% else %}
                        <div class="badge badge-outline gap-2">
                            <i class="fas fa-circle"></i>
                            Not Started
                        </div>
                    {% endif %}
                </div>
                
                <div class="card-actions justify-end mt-auto">
                    <a href="{{ url_for('student.speaking_stage', topic_id=topic.id) }}" class="btn btn-secondary w-full {% if not progress or not progress.reading_completed %}btn-disabled{% endif %}">
                        {% if progress and progress.speaking_completed %}
                            <i class="fas fa-sync-alt mr-2"></i> Practice Again
                        {% elif progress and progress.speaking_started %}
                            <i class="fas fa-arrow-right mr-2"></i> Continue
                        {% else %}
                            <i class="fas fa-microphone mr-2"></i> Start Speaking
                        {% endif %}
                    </a>
                </div>
            </div>
        </div>
        
        <!-- Stage 3: Comprehension -->
        <div class="card bg-base-100 border-2 {% if progress and progress.comprehension_completed %}border-success/30{% else %}border-base-200{% endif %} shadow-xl h-full transform transition-all duration-300 hover:shadow-2xl hover:-translate-y-1 {% if not progress or not progress.speaking_completed %}opacity-70 pointer-events-none{% endif %}">
            <div class="card-body relative">
                {% if not progress or not progress.speaking_completed %}
                    <div class="absolute inset-0 flex items-center justify-center backdrop-blur-sm bg-base-200/50 z-10 rounded-box">
                        <div class="text-center p-4">
                            <i class="fas fa-lock text-2xl text-base-content/50 mb-2"></i>
                            <p class="font-medium">Complete Speaking First</p>
                        </div>
                    </div>
                {% endif %}
            
                <h2 class="card-title flex items-center text-xl">
                    <div class="w-8 h-8 rounded-full bg-accent/10 flex items-center justify-center mr-2">
                        <span class="text-accent font-bold">3</span>
                    </div>
                    Comprehension
                </h2>
                
                <p class="text-base-content/70 text-sm my-2">Test your understanding of the topic</p>
                
                <div class="mt-2 mb-4">
                    {% if progress and progress.comprehension_completed %}
                        <div class="badge badge-success gap-2">
                            <i class="fas fa-check-circle"></i>
                            Completed
                        </div>
                        {% if progress.comprehension_score %}
                            <div class="badge badge-accent mt-2">Score: {{ progress.comprehension_score|round|int }}%</div>
                        {% endif %}
                    {% elif progress and progress.comprehension_started %}
                        <div class="badge badge-warning gap-2">
                            <i class="fas fa-spinner fa-spin"></i>
                            In Progress
                        </div>
                    {% else %}
                        <div class="badge badge-outline gap-2">
                            <i class="fas fa-circle"></i>
                            Not Started
                        </div>
                    {% endif %}
                </div>
                
                <div class="card-actions justify-end mt-auto">
                    <a href="{{ url_for('student.comprehension_stage', topic_id=topic.id) }}" class="btn btn-accent w-full {% if not progress or not progress.speaking_completed %}btn-disabled{% endif %}">
                        {% if progress and progress.comprehension_completed %}
                            <i class="fas fa-sync-alt mr-2"></i> Try Again
                        {% elif progress and progress.comprehension_started %}
                            <i class="fas fa-arrow-right mr-2"></i> Continue
                        {% else %}
                            <i class="fas fa-question-circle mr-2"></i> Take Quiz
                        {% endif %}
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    {% if progress and progress.completed_at %}
    <!-- Success Card - Only show if complete -->
    <div class="bg-success/10 border border-success/30 rounded-box p-6 flex items-center gap-4">
        <div class="bg-success/20 p-4 rounded-full">
            <i class="fas fa-medal text-3xl text-success"></i>
        </div>
        <div>
            <h3 class="text-xl font-bold text-success mb-1">Topic Mastered!</h3>
            <p class="text-base-content/70">Congratulations on completing this topic. Continue exploring more topics to improve your skills.</p>
        </div>
    </div>
    {% endif %}
</div>

<style>
@keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fade-in 0.5s ease-out;
}
</style>
{% endblock %}