{% extends "admin/base.html" %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <!-- Page Header with improved styling -->
    <div class="bg-white rounded-xl shadow-md p-6 mb-8">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
            <div>
                <h1 class="text-2xl md:text-3xl font-bold text-gray-900 mb-2">Topic Management</h1>
                <p class="text-gray-600">Manage all learning topics across the platform</p>
            </div>
            <div class="mt-4 md:mt-0">
                <a href="{{ url_for('admin.dashboard') }}" class="btn btn-outline btn-sm gap-2">
                    <i class="fas fa-arrow-left"></i> Back to Dashboard
                </a>
            </div>
        </div>
    </div>

    <!-- Filter and Search Controls with improved styling -->
    <div class="bg-white rounded-xl shadow-md p-6 mb-8">
        <div class="flex flex-col md:flex-row gap-4 items-center justify-between">
            <div class="flex-1">
                <div class="relative">
                    <input type="text" id="topicSearch" class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary" placeholder="Search topics...">
                    <span class="absolute left-3 top-2.5 text-gray-400">
                        <i class="fas fa-search"></i>
                    </span>
                </div>
            </div>
            <div class="flex flex-col sm:flex-row gap-3">
                <select id="categoryFilter" class="select select-bordered w-full sm:w-auto">
                    <option value="">All Categories</option>
                    {% for category in categories %}
                    <option value="{{ category }}">{{ category }}</option>
                    {% endfor %}
                </select>
                <button id="exportPdf" class="btn btn-primary gap-2">
                    <i class="fas fa-download"></i> Export All
                </button>
            </div>
        </div>
    </div>

    <!-- Topics by Category with Cards UI -->
    <div id="topicsContainer">
        {% for category, topics in categories.items() %}
        <div class="category-section mb-10" data-category="{{ category }}">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-bold text-gray-800 flex items-center">
                    <span class="w-10 h-10 rounded-md bg-primary/10 flex items-center justify-center mr-3">
                        <i class="fas fa-folder text-primary"></i>
                    </span>
                    {{ category }}
                    <span class="ml-3 badge badge-primary">{{ topics|length }}</span>
                </h2>
                <button class="btn btn-sm btn-outline gap-2 category-export-btn" data-category="{{ category }}">
                    <i class="fas fa-file-export"></i> Export
                </button>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                {% for topic in topics %}
                <div class="topic-card bg-white rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 overflow-hidden border border-gray-100" data-id="{{ topic.id }}" data-title="{{ topic.title }}">
                    <div class="p-6">
                        <div class="flex items-start justify-between mb-3">
                            <h3 class="font-semibold text-lg text-gray-900 line-clamp-2">{{ topic.title }}</h3>
                            <!-- Status Badge -->
                            <span class="badge {% if topic.is_published %}badge-success{% else %}badge-warning{% endif %} ml-2">
                                {% if topic.is_published %}Published{% else %}Draft{% endif %}
                            </span>
                        </div>
                        
                        <!-- Topic metadata -->
                        <div class="flex items-center text-sm text-gray-500 mb-4">
                            <span class="flex items-center">
                                <i class="fas fa-user-circle mr-1"></i>
                                {{ topic.teacher.username }}
                            </span>
                            <span class="mx-2">•</span>
                            <span class="flex items-center">
                                <i class="far fa-calendar-alt mr-1"></i>
                                {{ topic.created_at|timeago }}
                            </span>
                        </div>

                        <!-- Topic Statistics in a more visual way -->
                        <div class="grid grid-cols-3 gap-2 mt-4 mb-6">
                            <div class="bg-gray-50 rounded-lg p-2 text-center">
                                <div class="text-xs text-gray-500">Students</div>
                                <div class="font-semibold text-gray-700">{{ topic.student_count|default(0) }}</div>
                            </div>
                            <div class="bg-gray-50 rounded-lg p-2 text-center">
                                <div class="text-xs text-gray-500">Questions</div>
                                <div class="font-semibold text-gray-700">{{ topic.comprehension_questions|length }}</div>
                            </div>
                            <div class="bg-gray-50 rounded-lg p-2 text-center">
                                <div class="text-xs text-gray-500">Completed</div>
                                <div class="font-semibold text-gray-700">{{ topic.completion_count|default(0) }}</div>
                            </div>
                        </div>

                        <!-- Action buttons with better styling -->
                        <div class="flex flex-wrap gap-2 mt-4">
                            <button class="btn btn-sm btn-primary gap-1 view-topic-btn flex-grow" data-id="{{ topic.id }}">
                                <i class="fas fa-eye"></i> View
                            </button>
                            <a href="{{ url_for('admin.download_topic_pdf', topic_id=topic.id) }}" class="btn btn-sm btn-outline gap-1 flex-grow">
                                <i class="fas fa-file-pdf"></i> PDF
                            </a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% else %}
        <div class="bg-white rounded-xl shadow-md p-8 text-center">
            <div class="mb-4">
                <i class="fas fa-folder-open text-gray-400 text-5xl"></i>
            </div>
            <h3 class="text-xl font-semibold text-gray-700 mb-2">No Topics Available</h3>
            <p class="text-gray-500 mb-6">There are no topics available yet.</p>
        </div>
        {% endfor %}
    </div>
</div>

<!-- Topic View Modal -->
<div id="topicViewModal" class="modal">
    <div class="modal-box max-w-3xl">
        <div class="flex justify-between items-start mb-4">
            <h3 class="font-bold text-lg" id="modalTopicTitle">Topic Details</h3>
            <button class="btn btn-sm btn-circle btn-ghost" onclick="closeModal()">✕</button>
        </div>
        <div id="modalContent" class="space-y-6">
            <!-- Modal content will be loaded here dynamically -->
            <div class="flex justify-center">
                <span class="loading loading-spinner loading-lg text-primary"></span>
            </div>
        </div>
        <div class="modal-action">
            <button class="btn btn-outline" onclick="closeModal()">Close</button>
            <a id="downloadPdfBtn" href="#" class="btn btn-primary gap-2">
                <i class="fas fa-file-pdf"></i> Download PDF
            </a>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Topic search functionality
    const searchInput = document.getElementById('topicSearch');
    const categoryFilter = document.getElementById('categoryFilter');
    const topicCards = document.querySelectorAll('.topic-card');
    const categorySections = document.querySelectorAll('.category-section');
    
    // Search and filter function
    function filterTopics() {
        const searchTerm = searchInput.value.toLowerCase();
        const categoryValue = categoryFilter.value;
        
        // First hide/show category sections based on filter
        categorySections.forEach(section => {
            const sectionCategory = section.dataset.category;
            if (categoryValue && categoryValue !== sectionCategory) {
                section.classList.add('hidden');
            } else {
                section.classList.remove('hidden');
            }
        });
        
        // Then filter individual topic cards by search term
        topicCards.forEach(card => {
            const title = card.dataset.title.toLowerCase();
            const categorySection = card.closest('.category-section');
            
            // Only search within visible categories
            if (!categorySection.classList.contains('hidden')) {
                if (searchTerm && !title.includes(searchTerm)) {
                    card.classList.add('hidden');
                } else {
                    card.classList.remove('hidden');
                }
            }
        });
        
        // Check if any topics are visible in each visible category
        categorySections.forEach(section => {
            if (!section.classList.contains('hidden')) {
                const visibleCards = section.querySelectorAll('.topic-card:not(.hidden)');
                if (visibleCards.length === 0) {
                    section.classList.add('hidden');
                }
            }
        });
        
        // Show message if no results
        const visibleSections = document.querySelectorAll('.category-section:not(.hidden)');
        const noResultsDiv = document.getElementById('noResults');
        
        if (visibleSections.length === 0) {
            if (!noResultsDiv) {
                const container = document.getElementById('topicsContainer');
                const noResults = document.createElement('div');
                noResults.id = 'noResults';
                noResults.className = 'bg-white rounded-xl shadow-md p-8 text-center';
                noResults.innerHTML = `
                    <div class="mb-4">
                        <i class="fas fa-search text-gray-400 text-5xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-700 mb-2">No Topics Found</h3>
                    <p class="text-gray-500 mb-6">Try adjusting your search or filter criteria.</p>
                    <button class="btn btn-primary" onclick="resetFilters()">Reset Filters</button>
                `;
                container.appendChild(noResults);
            }
        } else if (noResultsDiv) {
            noResultsDiv.remove();
        }
    }
    
    // Add event listeners
    searchInput.addEventListener('input', filterTopics);
    categoryFilter.addEventListener('change', filterTopics);
    
    // Reset filters function
    window.resetFilters = function() {
        searchInput.value = '';
        categoryFilter.value = '';
        filterTopics();
    };
    
    // View topic modal functionality
    const viewButtons = document.querySelectorAll('.view-topic-btn');
    const modal = document.getElementById('topicViewModal');
    const modalContent = document.getElementById('modalContent');
    const modalTopicTitle = document.getElementById('modalTopicTitle');
    const downloadPdfBtn = document.getElementById('downloadPdfBtn');
    
    viewButtons.forEach(button => {
        button.addEventListener('click', function() {
            const topicId = this.getAttribute('data-id');
            
            // Show loading state
            modalContent.innerHTML = `
                <div class="flex justify-center">
                    <span class="loading loading-spinner loading-lg text-primary"></span>
                </div>
            `;
            
            // Set download button href
            downloadPdfBtn.href = `/admin/topics/${topicId}/pdf`;
            
            // Show modal
            modal.classList.add('modal-open');
            
            // Fetch topic details
            fetch(`/admin/topics/${topicId}`)
                .then(response => response.json())
                .then(topic => {
                    modalTopicTitle.textContent = topic.title;
                    
                    // Format the creation date
                    const createdDate = new Date(topic.created_at);
                    const formattedDate = createdDate.toLocaleDateString('en-US', { 
                        year: 'numeric', 
                        month: 'long', 
                        day: 'numeric' 
                    });
                    
                    // Render content with better styling
                    modalContent.innerHTML = `
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                            <div class="bg-gray-50 p-4 rounded-lg">
                                <h4 class="font-medium text-gray-700 mb-2">Basic Information</h4>
                                <div class="space-y-2">
                                    <p><span class="text-gray-500">Category:</span> ${topic.category || 'N/A'}</p>
                                    <p><span class="text-gray-500">Created by:</span> ${topic.teacher_name || 'Unknown'}</p>
                                    <p><span class="text-gray-500">Created on:</span> ${formattedDate}</p>
                                    <p><span class="text-gray-500">Status:</span> 
                                        <span class="badge ${topic.is_published ? 'badge-success' : 'badge-warning'}">
                                            ${topic.is_published ? 'Published' : 'Draft'}
                                        </span>
                                    </p>
                                </div>
                            </div>
                            
                            <div class="bg-gray-50 p-4 rounded-lg">
                                <h4 class="font-medium text-gray-700 mb-2">Statistics</h4>
                                <div class="grid grid-cols-2 gap-3">
                                    <div class="bg-white p-3 rounded-md text-center">
                                        <p class="text-xs text-gray-500">Assigned Students</p>
                                        <p class="text-xl font-bold">${topic.student_count || 0}</p>
                                    </div>
                                    <div class="bg-white p-3 rounded-md text-center">
                                        <p class="text-xs text-gray-500">Completion Rate</p>
                                        <p class="text-xl font-bold">${topic.completion_rate || '0%'}</p>
                                    </div>
                                    <div class="bg-white p-3 rounded-md text-center">
                                        <p class="text-xs text-gray-500">Questions</p>
                                        <p class="text-xl font-bold">${topic.question_count || 0}</p>
                                    </div>
                                    <div class="bg-white p-3 rounded-md text-center">
                                        <p class="text-xs text-gray-500">Avg. Score</p>
                                        <p class="text-xl font-bold">${topic.average_score || 'N/A'}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="divider">Content Preview</div>
                        
                        <div class="space-y-4">
                            <div class="collapse collapse-arrow bg-base-200">
                                <input type="checkbox" id="reading-content-toggle" name="reading-content-toggle" checked /> 
                                <div class="collapse-title font-medium">
                                    Reading Content
                                </div>
                                <div class="collapse-content bg-white"> 
                                    <div class="prose max-w-none">
                                        ${topic.reading_content ? 
                                            `<div class="max-h-64 overflow-y-auto p-4">${topic.reading_content}</div>` : 
                                            '<p class="text-gray-500">No reading content available.</p>'}
                                    </div>
                                </div>
                            </div>
                            
                            <div class="collapse collapse-arrow bg-base-200">
                                <input type="checkbox" id="questions-toggle" name="questions-toggle" /> 
                                <div class="collapse-title font-medium">
                                    Questions
                                </div>
                                <div class="collapse-content bg-white"> 
                                    ${topic.questions ? 
                                        `<div class="space-y-2 p-4">
                                            ${topic.questions.map((q, i) => 
                                                `<div class="p-3 bg-gray-50 rounded-lg">
                                                    <span class="font-medium">Q${i+1}:</span> ${q.text}
                                                </div>`
                                            ).join('')}
                                        </div>` : 
                                        '<p class="text-gray-500">No questions available.</p>'}
                                </div>
                            </div>
                            
                            <div class="collapse collapse-arrow bg-base-200">
                                <input type="checkbox" id="speaking-prompt-toggle" name="speaking-prompt-toggle" /> 
                                <div class="collapse-title font-medium">
                                    Speaking Prompt
                                </div>
                                <div class="collapse-content bg-white"> 
                                    <div class="p-4">
                                        ${topic.speaking_prompt ? 
                                            `<p>${topic.speaking_prompt}</p>` : 
                                            '<p class="text-gray-500">No speaking prompt available.</p>'}
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                })
                .catch(error => {
                    console.error('Error fetching topic:', error);
                    modalContent.innerHTML = `
                        <div class="alert alert-error">
                            <i class="fas fa-exclamation-circle"></i>
                            <span>Error loading topic details. Please try again.</span>
                        </div>
                    `;
                });
        });
    });
    
    // Close modal function
    window.closeModal = function() {
        modal.classList.remove('modal-open');
    };
    
    // Close modal when clicking outside
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            closeModal();
        }
    });
    
    // Category export buttons
    document.querySelectorAll('.category-export-btn').forEach(button => {
        button.addEventListener('click', function() {
            const category = this.getAttribute('data-category');
            const topicIds = Array.from(document.querySelectorAll(`.category-section[data-category="${category}"] .topic-card`))
                .map(card => card.getAttribute('data-id'));
                
            console.log(`Exporting topics for category: ${category}`);
            console.log('Topic IDs:', topicIds);
            
            // Here you would implement the export functionality
            // For example, you could open a new window with all PDFs for that category
            alert(`Exporting ${topicIds.length} topics from category "${category}"`);
        });
    });
    
    // Global export button
    document.getElementById('exportPdf').addEventListener('click', function() {
        const visibleTopicIds = Array.from(document.querySelectorAll('.topic-card:not(.hidden)'))
            .map(card => card.getAttribute('data-id'));
            
        console.log(`Exporting all visible topics: ${visibleTopicIds.length} total`);
        
        // Implement export functionality
        alert(`Exporting ${visibleTopicIds.length} topics`);
    });
});
</script>
{% endblock %}