{% extends "base.html" %}

{% block title %}My Results{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-indigo-50 via-white to-purple-50 py-8 px-4">
    <div class="max-w-7xl mx-auto">
        <!-- Page Header -->
        <div class="mb-8">
            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                <div>
                    <h1 class="text-3xl sm:text-4xl font-bold text-gray-800 flex items-center gap-3">
                        <i class="fas fa-trophy text-yellow-500"></i>
                        My Submission Results
                    </h1>
                    <p class="text-gray-600 mt-2">View your submissions and teacher feedback</p>
                </div>
                <a href="{{ url_for('student.dashboard') }}" class="btn btn-outline gap-2">
                    <i class="fas fa-arrow-left"></i>
                    Back to Dashboard
                </a>
            </div>
        </div>

        <!-- Filters -->
        <div class="bg-white rounded-xl shadow-md p-6 mb-6">
            <div class="flex flex-col lg:flex-row gap-4">
                <!-- Status Filter -->
                <div class="flex-1">
                    <label class="text-sm font-semibold text-gray-700 mb-2 block">Filter by Status</label>
                    <div class="flex flex-wrap gap-2">
                        <a href="{{ url_for('student.my_results', status='all', type=content_type_filter) }}" 
                           class="badge badge-lg {{ 'badge-primary' if status_filter == 'all' else 'badge-outline' }} gap-2 cursor-pointer">
                            All <span class="font-bold">{{ total_count }}</span>
                        </a>
                        <a href="{{ url_for('student.my_results', status='approved', type=content_type_filter) }}" 
                           class="badge badge-lg {{ 'badge-success' if status_filter == 'approved' else 'badge-outline badge-success' }} gap-2 cursor-pointer">
                            <i class="fas fa-check-circle"></i> Approved <span class="font-bold">{{ approved_count }}</span>
                        </a>
                        <a href="{{ url_for('student.my_results', status='pending', type=content_type_filter) }}" 
                           class="badge badge-lg {{ 'badge-warning' if status_filter == 'pending' else 'badge-outline badge-warning' }} gap-2 cursor-pointer">
                            <i class="fas fa-clock"></i> Pending <span class="font-bold">{{ pending_count }}</span>
                        </a>
                        <a href="{{ url_for('student.my_results', status='needs_revision', type=content_type_filter) }}" 
                           class="badge badge-lg {{ 'badge-warning' if status_filter == 'needs_revision' else 'badge-outline badge-warning' }} gap-2 cursor-pointer">
                            <i class="fas fa-exclamation-circle"></i> Needs Revision <span class="font-bold">{{ needs_revision_count }}</span>
                        </a>
                    </div>
                </div>

                <!-- Type Filter -->
                <div class="flex-1">
                    <label class="text-sm font-semibold text-gray-700 mb-2 block">Filter by Type</label>
                    <div class="flex flex-wrap gap-2">
                        <a href="{{ url_for('student.my_results', status=status_filter, type='all') }}" 
                           class="badge badge-lg {{ 'badge-primary' if content_type_filter == 'all' else 'badge-outline' }} cursor-pointer">
                            All Types
                        </a>
                        <a href="{{ url_for('student.my_results', status=status_filter, type='comprehension') }}" 
                           class="badge badge-lg {{ 'badge-info' if content_type_filter == 'comprehension' else 'badge-outline badge-info' }} gap-2 cursor-pointer">
                            <i class="fas fa-brain"></i> Comprehension
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Results Grid -->
        {% if submissions %}
        <div class="grid grid-cols-1 gap-6">
            {% for submission in submissions %}
            <div class="bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 overflow-hidden">
                <div class="p-6">
                    <div class="flex flex-col lg:flex-row justify-between gap-4">
                        <!-- Left Side: Content Info -->
                        <div class="flex-1">
                            <div class="flex items-start gap-4">
                                <!-- Type Icon -->
                                <div class="flex-shrink-0">
                                    {% if submission.content_type == 'comprehension' %}
                                    <div class="w-12 h-12 bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl flex items-center justify-center">
                                        <i class="fas fa-brain text-white text-xl"></i>
                                    </div>
                                    {% else %}
                                    <div class="w-12 h-12 bg-gradient-to-br from-gray-400 to-gray-600 rounded-xl flex items-center justify-center">
                                        <i class="fas fa-file-alt text-white text-xl"></i>
                                    </div>
                                    {% endif %}
                                </div>

                                <!-- Details -->
                                <div class="flex-1">
                                    <h3 class="text-xl font-bold text-gray-800 mb-1">
                                        {{ submission.progress.topic.title }}
                                    </h3>
                                    <div class="flex flex-wrap items-center gap-2 mb-3">
                                        <span class="badge badge-sm {{ 'badge-success' if submission.status == 'approved' else ('badge-warning' if submission.status in ['pending', 'needs_revision'] else 'badge-error') }}">
                                            {{ submission.status|replace('_', ' ')|title }}
                                        </span>
                                        <span class="badge badge-sm badge-outline">
                                            {{ submission.content_type|capitalize }}
                                        </span>
                                        {% if submission.is_teacher_reviewed %}
                                        <span class="badge badge-sm badge-success gap-1">
                                            <i class="fas fa-user-check"></i> Teacher Reviewed
                                        </span>
                                        {% else %}
                                        <span class="badge badge-sm badge-info gap-1">
                                            <i class="fas fa-robot"></i> AI Assessed
                                        </span>
                                        {% endif %}
                                    </div>
                                    <p class="text-sm text-gray-600">
                                        <i class="fas fa-calendar-alt mr-1"></i>
                                        Submitted: {{ submission.created_at.strftime('%d %b %Y, %I:%M %p') }}
                                    </p>
                                    {% if submission.reviewed_at %}
                                    <p class="text-sm text-gray-600">
                                        <i class="fas fa-check-circle mr-1"></i>
                                        Reviewed: {{ submission.reviewed_at.strftime('%d %b %Y, %I:%M %p') }}
                                    </p>
                                    {% endif %}

                                    <!-- Teacher Feedback Preview -->
                                    {% if submission.teacher_feedback %}
                                    <div class="mt-3 p-3 bg-blue-50 rounded-lg border border-blue-200">
                                        <div class="flex items-center gap-2 mb-1">
                                            <i class="fas fa-comment-alt text-blue-600"></i>
                                            <span class="text-sm font-semibold text-blue-800">Teacher Feedback:</span>
                                        </div>
                                        <p class="text-sm text-gray-700">
                                            {{ submission.teacher_feedback[:150] }}{% if submission.teacher_feedback|length > 150 %}...{% endif %}
                                        </p>
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- Right Side: Score and Actions -->
                        <div class="flex flex-col items-center justify-between gap-4 lg:border-l lg:pl-6 border-gray-200">
                            <!-- Score Display -->
                            <div class="text-center">
                                <div class="relative inline-block">
                                    <svg class="w-24 h-24 transform -rotate-90">
                                        <circle cx="48" cy="48" r="40" stroke="#e5e7eb" stroke-width="8" fill="none"/>
                                        <circle cx="48" cy="48" r="40" 
                                                stroke="{{ 'rgb(34, 197, 94)' if submission.final_score >= 70 else ('rgb(251, 191, 36)' if submission.final_score >= 50 else 'rgb(239, 68, 68)') }}" 
                                                stroke-width="8" 
                                                fill="none"
                                                stroke-dasharray="{{ (submission.final_score or 0) * 2.51 }} 251"
                                                stroke-linecap="round"/>
                                    </svg>
                                    <div class="absolute inset-0 flex flex-col items-center justify-center">
                                        <span class="text-2xl font-bold {{ 'text-green-600' if submission.final_score >= 70 else ('text-yellow-600' if submission.final_score >= 50 else 'text-red-600') }}">
                                            {{ submission.final_score|round(1) if submission.final_score else 'N/A' }}
                                        </span>
                                        <span class="text-xs text-gray-600">Score</span>
                                    </div>
                                </div>
                                
                                <!-- Score Type Indicator -->
                                <div class="mt-2">
                                    {% if submission.teacher_score is not none %}
                                    <div class="text-xs text-green-600 font-medium">
                                        <i class="fas fa-user-tie"></i> Teacher Score
                                    </div>
                                    <div class="text-xs text-gray-500">
                                        (AI: {{ submission.score|round(1) if submission.score else 'N/A' }}%)
                                    </div>
                                    {% else %}
                                    <div class="text-xs text-blue-600 font-medium">
                                        <i class="fas fa-robot"></i> AI Score
                                    </div>
                                    {% endif %}
                                </div>
                            </div>

                            <!-- View Details Button -->
                            <a href="{{ url_for('student.view_result', submission_id=submission.id) }}" 
                               class="btn btn-primary btn-sm gap-2 w-full">
                                <i class="fas fa-eye"></i>
                                View Details
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <!-- Empty State -->
        <div class="bg-white rounded-xl shadow-md p-12 text-center">
            <div class="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-inbox text-gray-400 text-4xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-800 mb-2">No Results Found</h3>
            <p class="text-gray-600 mb-6">
                {% if status_filter != 'all' or content_type_filter != 'all' %}
                No submissions match your current filters. Try adjusting your filters.
                {% else %}
                You haven't submitted any work yet. Start learning to see your results here!
                {% endif %}
            </p>
            {% if status_filter != 'all' or content_type_filter != 'all' %}
            <a href="{{ url_for('student.my_results') }}" class="btn btn-primary">
                Clear Filters
            </a>
            {% else %}
            <a href="{{ url_for('student.dashboard') }}" class="btn btn-primary">
                Go to Dashboard
            </a>
            {% endif %}
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}