{% extends 'base.html' %}
{% block title %}Pending Reviews{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
    .page-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        position: relative;
        overflow: hidden;
    }
    
    .page-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        animation: backgroundScroll 20s linear infinite;
    }
    
    @keyframes backgroundScroll {
        0% { transform: translate(0, 0); }
        100% { transform: translate(60px, 60px); }
    }
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
    <!-- Enhanced Page Header -->
    <div class="page-header text-white py-8 sm:py-12 mb-8">
        <div class="container mx-auto px-4 relative z-10">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <div>
                    <div class="flex items-center gap-3 mb-2">
                        <div class="w-16 h-16 bg-white/20 backdrop-blur-lg rounded-2xl flex items-center justify-center shadow-2xl">
                            <i class="fas fa-clipboard-list text-4xl"></i>
                        </div>
                        <div>
                            <h1 class="text-3xl md:text-4xl font-bold">Pending Reviews</h1>
                            <p class="text-white/90 mt-1">Review student submissions and provide feedback</p>
                        </div>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <a href="{{ url_for('teacher.dashboard') }}" class="btn btn-ghost text-white hover:bg-white/20">
                        <i class="fas fa-arrow-left mr-2"></i>
                        Back to Dashboard
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="container mx-auto px-4 pb-8">
        {% if submissions %}
            <!-- Stats Overview -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
                <div class="card bg-gradient-to-br from-yellow-50 to-orange-50 dark:from-yellow-900/20 dark:to-orange-900/20 shadow-lg border border-yellow-200 dark:border-yellow-800">
                    <div class="card-body p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-gray-600 dark:text-gray-400 font-semibold uppercase">Total Pending</p>
                                <p class="text-4xl font-bold text-yellow-600 dark:text-yellow-400 mt-2">{{ submissions|length }}</p>
                            </div>
                            <div class="w-16 h-16 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-xl flex items-center justify-center shadow-lg">
                                <i class="fas fa-clipboard-list text-white text-3xl"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card bg-gradient-to-br from-blue-50 to-cyan-50 dark:from-blue-900/20 dark:to-cyan-900/20 shadow-lg border border-blue-200 dark:border-blue-800">
                    <div class="card-body p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-gray-600 dark:text-gray-400 font-semibold uppercase">Comprehension</p>
                                <p class="text-4xl font-bold text-blue-600 dark:text-blue-400 mt-2">
                                    {{ submissions|selectattr('content_type', 'equalto', 'comprehension')|list|length }}
                                </p>
                            </div>
                            <div class="w-16 h-16 bg-gradient-to-br from-blue-400 to-cyan-500 rounded-xl flex items-center justify-center shadow-lg">
                                <i class="fas fa-brain text-white text-3xl"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 shadow-lg border border-purple-200 dark:border-purple-800">
                    <div class="card-body p-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-gray-600 dark:text-gray-400 font-semibold uppercase">Speaking</p>
                                <p class="text-4xl font-bold text-purple-600 dark:text-purple-400 mt-2">
                                    {{ submissions|selectattr('content_type', 'equalto', 'speaking')|list|length }}
                                </p>
                            </div>
                            <div class="w-16 h-16 bg-gradient-to-br from-purple-400 to-pink-500 rounded-xl flex items-center justify-center shadow-lg">
                                <i class="fas fa-microphone text-white text-3xl"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Filter and Sort Options -->
            <div class="card bg-white dark:bg-gray-800 shadow-lg mb-6">
                <div class="card-body p-4">
                    <div class="flex flex-col md:flex-row gap-4 items-center justify-between">
                        <div class="flex gap-2 flex-wrap">
                            <button onclick="filterSubmissions('all')" class="btn btn-sm btn-primary filter-btn active" data-filter="all">
                                <i class="fas fa-list mr-1"></i>All
                            </button>
                            <button onclick="filterSubmissions('comprehension')" class="btn btn-sm btn-outline filter-btn" data-filter="comprehension">
                                <i class="fas fa-brain mr-1"></i>Comprehension
                            </button>
                            <button onclick="filterSubmissions('speaking')" class="btn btn-sm btn-outline filter-btn" data-filter="speaking">
                                <i class="fas fa-microphone mr-1"></i>Speaking
                            </button>
                        </div>
                        <div class="flex gap-2 items-center">
                            <span class="text-sm text-gray-600 dark:text-gray-400">Sort by:</span>
                            <select onchange="sortSubmissions(this.value)" class="select select-sm select-bordered">
                                <option value="newest">Newest First</option>
                                <option value="oldest">Oldest First</option>
                                <option value="student">Student Name</option>
                                <option value="topic">Topic</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Submissions List -->
            <div class="space-y-4" id="submissions-container">
                {% for submission in submissions %}
                    <div class="submission-item card bg-white dark:bg-gray-800 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700" 
                         data-type="{{ submission.content_type }}" 
                         data-date="{{ submission.created_at.timestamp() }}"
                         data-student="{{ submission.progress.student.username|lower }}"
                         data-topic="{{ submission.progress.topic.title|lower }}">
                        <div class="card-body p-6">
                            <div class="flex flex-col lg:flex-row gap-6">
                                <!-- Left Side - Student Info -->
                                <div class="flex items-start gap-4 lg:w-1/3">
                                    <div class="w-16 h-16 bg-gradient-to-br from-indigo-400 to-purple-500 rounded-xl flex items-center justify-center shadow-lg flex-shrink-0">
                                        <i class="fas fa-user text-white text-2xl"></i>
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <h3 class="font-bold text-lg text-gray-800 dark:text-white truncate">
                                            {{ submission.progress.student.username }}
                                        </h3>
                                        <p class="text-sm text-gray-600 dark:text-gray-400">
                                            {{ submission.progress.student.email }}
                                        </p>
                                        <div class="mt-2 space-y-1">
                                            <div class="text-xs">
                                                <span class="font-semibold text-gray-700 dark:text-gray-300">Program:</span>
                                                <span class="text-gray-600 dark:text-gray-400">{{ submission.progress.student.program or 'N/A' }}</span>
                                            </div>
                                            <div class="text-xs">
                                                <span class="font-semibold text-gray-700 dark:text-gray-300">Department:</span>
                                                <span class="text-gray-600 dark:text-gray-400">{{ submission.progress.student.department or 'N/A' }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Middle - Submission Details -->
                                <div class="flex-1 lg:w-1/3">
                                    <div class="space-y-3">
                                        <div>
                                            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Topic</p>
                                            <p class="font-semibold text-gray-800 dark:text-white">{{ submission.progress.topic.title }}</p>
                                        </div>
                                        <div>
                                            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Category</p>
                                            <p class="text-sm text-gray-700 dark:text-gray-300">{{ submission.progress.topic.category }}</p>
                                        </div>
                                        <div class="flex gap-2 flex-wrap">
                                            <div class="badge badge-lg capitalize
                                                {{ 'badge-warning' if submission.content_type == 'comprehension' else
                                                   'badge-info' if submission.content_type == 'speaking' else 
                                                   'badge-secondary' }}">
                                                <i class="fas {{ 'fa-brain' if submission.content_type == 'comprehension' else 'fa-microphone' }} mr-2"></i>
                                                {{ submission.content_type }}
                                            </div>
                                            <div class="badge badge-lg badge-outline">
                                                <i class="fas fa-clock mr-2"></i>
                                                {{ submission.created_at.strftime('%b %d, %H:%M') }}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Right Side - Actions -->
                                <div class="flex flex-col justify-between lg:w-1/3 gap-3">
                                    <div class="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800 rounded-xl p-4">
                                        <p class="text-xs text-gray-600 dark:text-gray-400 mb-2">Waiting for Review</p>
                                        <div class="flex items-center gap-2">
                                            <div class="w-2 h-2 bg-yellow-500 rounded-full animate-pulse"></div>
                                            <span class="text-sm font-semibold text-gray-700 dark:text-gray-300">Pending</span>
                                        </div>
                                        {% if submission.created_at %}
                                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
                                                Submitted {{ submission.created_at.strftime('%A, %B %d at %I:%M %p') }}
                                            </p>
                                        {% endif %}
                                    </div>
                                    <a href="{{ url_for('teacher.review_submission', submission_id=submission.id) }}" 
                                       class="btn btn-primary w-full shadow-lg hover:shadow-xl transition-all group">
                                        <i class="fas fa-clipboard-check mr-2"></i>
                                        Review Now
                                        <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <!-- Empty State -->
            <div class="card bg-white dark:bg-gray-800 shadow-xl">
                <div class="card-body p-12 text-center">
                    <div class="w-32 h-32 bg-gradient-to-br from-green-100 to-teal-100 dark:from-green-900/30 dark:to-teal-900/30 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-check-circle text-6xl text-green-600 dark:text-green-400"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-3">All Caught Up!</h2>
                    <p class="text-gray-600 dark:text-gray-400 mb-6 max-w-md mx-auto">
                        There are no pending submissions to review at the moment. Great work staying on top of things!
                    </p>
                    <a href="{{ url_for('teacher.dashboard') }}" class="btn btn-primary">
                        <i class="fas fa-home mr-2"></i>
                        Back to Dashboard
                    </a>
                </div>
            </div>
        {% endif %}
    </div>
</div>

<script>
// Filter submissions
function filterSubmissions(type) {
    const items = document.querySelectorAll('.submission-item');
    const buttons = document.querySelectorAll('.filter-btn');
    
    // Update active button
    buttons.forEach(btn => {
        if (btn.dataset.filter === type) {
            btn.classList.add('btn-primary', 'active');
            btn.classList.remove('btn-outline');
        } else {
            btn.classList.remove('btn-primary', 'active');
            btn.classList.add('btn-outline');
        }
    });
    
    // Filter items
    items.forEach(item => {
        if (type === 'all' || item.dataset.type === type) {
            item.style.display = 'block';
        } else {
            item.style.display = 'none';
        }
    });
}

// Sort submissions
function sortSubmissions(sortBy) {
    const container = document.getElementById('submissions-container');
    const items = Array.from(container.querySelectorAll('.submission-item'));
    
    items.sort((a, b) => {
        switch(sortBy) {
            case 'newest':
                return parseFloat(b.dataset.date) - parseFloat(a.dataset.date);
            case 'oldest':
                return parseFloat(a.dataset.date) - parseFloat(b.dataset.date);
            case 'student':
                return a.dataset.student.localeCompare(b.dataset.student);
            case 'topic':
                return a.dataset.topic.localeCompare(b.dataset.topic);
            default:
                return 0;
        }
    });
    
    // Re-append in new order
    items.forEach(item => container.appendChild(item));
}
</script>
{% endblock %}