{% extends 'base.html' %}
{% block title %}Topic Scores | Teacher Dashboard{% endblock %}

{% block extra_css %}
<style>
    .scores-table {
        font-size: 0.875rem;
    }
    
    .score-badge {
        padding: 0.25rem 0.5rem;
        border-radius: 0.375rem;
        font-weight: 600;
        font-size: 0.75rem;
    }
    
    .score-excellent { background-color: #dcfce7; color: #166534; }
    .score-good { background-color: #dbeafe; color: #1d4ed8; }
    .score-average { background-color: #fef3c7; color: #92400e; }
    .score-poor { background-color: #fee2e2; color: #dc2626; }
    
    @media (max-width: 768px) {
        .scores-table {
            font-size: 0.75rem;
        }
        
        .mobile-scroll {
            overflow-x: auto;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Page Header -->
    <div class="bg-[var(--card-bg)] rounded-2xl shadow-lg p-4 sm:p-6">
        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4">
            <div>
                <h1 class="text-2xl sm:text-3xl font-bold text-[var(--text-primary)]">
                    <i class="fas fa-chart-line text-[var(--accent-primary)] mr-3"></i>
                    Topic Scores Overview
                </h1>
                <p class="text-[var(--text-secondary)] mt-2">
                    View student performance across all topics
                </p>
            </div>
            <div class="flex flex-col sm:flex-row gap-2">
                <button onclick="exportToPDF()" class="btn btn-primary btn-sm sm:btn-md">
                    <i class="fas fa-file-pdf mr-2"></i> Export PDF
                </button>
                <a href="{{ url_for('teacher.dashboard') }}" class="btn btn-outline btn-sm sm:btn-md">
                    <i class="fas fa-arrow-left mr-2"></i> Back to Dashboard
                </a>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-[var(--card-bg)] rounded-xl shadow-md p-4 sm:p-6">
        <h2 class="text-lg font-semibold text-[var(--text-primary)] mb-4">
            <i class="fas fa-filter text-[var(--accent-primary)] mr-2"></i>
            Filters
        </h2>
        
        <form method="GET" class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div>
                <label class="block text-sm font-medium text-[var(--text-secondary)] mb-1">Topic</label>
                <select name="topic_id" class="select select-bordered w-full text-sm">
                    <option value="">All Topics</option>
                    {% for topic in topics %}
                        <option value="{{ topic.id }}" 
                                {% if selected_topic_id == topic.id %}selected{% endif %}>
                            {{ topic.title }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-[var(--text-secondary)] mb-1">Content Type</label>
                <select name="content_type" class="select select-bordered w-full text-sm">
                    <option value="all" {% if selected_content_type == 'all' %}selected{% endif %}>All Types</option>
                    <option value="comprehension" {% if selected_content_type == 'comprehension' %}selected{% endif %}>Comprehension</option>
                    <option value="speaking" {% if selected_content_type == 'speaking' %}selected{% endif %}>Speaking</option>
                    <option value="writing" {% if selected_content_type == 'writing' %}selected{% endif %}>Writing</option>
                </select>
            </div>
            
            <div class="flex items-end">
                <button type="submit" class="btn btn-primary w-full">
                    <i class="fas fa-search mr-2"></i> Apply Filters
                </button>
            </div>
        </form>
    </div>

    <!-- Scores Table -->
    <div class="bg-[var(--card-bg)] rounded-xl shadow-md overflow-hidden">
        <div class="p-4 sm:p-6 border-b border-[var(--border)]">
            <h2 class="text-lg font-semibold text-[var(--text-primary)]">
                <i class="fas fa-table text-[var(--accent-primary)] mr-2"></i>
                Student Scores
            </h2>
        </div>
        
        {% if student_scores %}
            <div class="mobile-scroll">
                <table class="table w-full scores-table">
                    <thead class="bg-[var(--bg-secondary)]">
                        <tr>
                            <th class="text-[var(--text-primary)]">Student</th>
                            <th class="text-[var(--text-primary)]">Total Submissions</th>
                            <th class="text-[var(--text-primary)]">Average Score</th>
                            {% if not selected_topic_id %}
                                <th class="text-[var(--text-primary)]">Topics Completed</th>
                            {% endif %}
                            <th class="text-[var(--text-primary)]">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for student_id, student_data in student_scores.items() %}
                            <tr class="hover:bg-[var(--bg-hover)] transition-colors">
                                <td>
                                    <div class="flex items-center">
                                        <div class="avatar placeholder mr-3">
                                            <div class="bg-[var(--accent-primary)] text-white rounded-full w-8 h-8 text-xs">
                                                <span>{{ student_data.student.username[:2].upper() }}</span>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="font-bold text-sm text-[var(--text-primary)]">
                                                {{ student_data.student.username }}
                                            </div>
                                            <div class="text-xs text-[var(--text-secondary)]">
                                                {{ student_data.student.email }}
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="text-center">
                                    <span class="badge badge-outline">
                                        {{ student_data.total_submissions }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    {% set score = student_data.total_score %}
                                    <span class="score-badge 
                                        {% if score >= 85 %}score-excellent
                                        {% elif score >= 70 %}score-good
                                        {% elif score >= 50 %}score-average
                                        {% else %}score-poor{% endif %}">
                                        {{ score }}%
                                    </span>
                                </td>
                                {% if not selected_topic_id %}
                                    <td class="text-center">
                                        <span class="badge badge-info">
                                            {{ student_data.topics|length }}
                                        </span>
                                    </td>
                                {% endif %}
                                <td>
                                    <div class="flex gap-1">
                                        <button onclick="viewStudentDetails('{{ student_id }}')" 
                                                class="btn btn-ghost btn-xs">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button onclick="exportStudentReport('{{ student_id }}')" 
                                                class="btn btn-ghost btn-xs">
                                            <i class="fas fa-download"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="p-8 text-center">
                <i class="fas fa-inbox text-4xl text-[var(--text-secondary)] mb-4"></i>
                <h3 class="text-lg font-semibold text-[var(--text-primary)] mb-2">No Data Available</h3>
                <p class="text-[var(--text-secondary)]">
                    No reviewed submissions found for the selected criteria.
                </p>
            </div>
        {% endif %}
    </div>

    <!-- Student Details Modal -->
    <div id="studentModal" class="modal">
        <div class="modal-box max-w-4xl">
            <h3 class="font-bold text-lg mb-4">Student Performance Details</h3>
            <div id="studentDetails">
                <!-- Content will be loaded dynamically -->
            </div>
            <div class="modal-action">
                <button class="btn" onclick="closeModal()">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
    function exportToPDF() {
        // Show loading state
        const btn = event.target.closest('button');
        const originalText = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Generating...';
        btn.disabled = true;
        
        // Get current filters
        const urlParams = new URLSearchParams(window.location.search);
        const topicId = urlParams.get('topic_id') || '';
        const contentType = urlParams.get('content_type') || 'all';
        
        // Create download URL
        const downloadUrl = `{{ url_for('teacher.export_scores_pdf') }}?topic_id=${topicId}&content_type=${contentType}`;
        
        // Create hidden link and trigger download
        const link = document.createElement('a');
        link.href = downloadUrl;
        link.download = 'topic_scores_report.pdf';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        
        // Reset button
        setTimeout(() => {
            btn.innerHTML = originalText;
            btn.disabled = false;
        }, 2000);
    }
    
    function viewStudentDetails(studentId) {
        // Load student details via AJAX
        fetch(`/teacher/student-details/${studentId}`)
            .then(response => response.json())
            .then(data => {
                document.getElementById('studentDetails').innerHTML = data.html;
                document.getElementById('studentModal').checked = true;
            })
            .catch(error => {
                console.error('Error loading student details:', error);
                alert('Error loading student details');
            });
    }
    
    function exportStudentReport(studentId) {
        const link = document.createElement('a');
        link.href = `/teacher/export-student-pdf/${studentId}`;
        link.download = `student_${studentId}_report.pdf`;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
    
    function closeModal() {
        document.getElementById('studentModal').checked = false;
    }
</script>
{% endblock %}