{% extends "base.html" %}

{% block content %}
<div class="space-y-6 p-6">
    <div class="flex justify-between items-center">
        <h1 class="section-header">Manage Topics</h1>
        <a href="{{ url_for('teacher.add_topic') }}" class="btn-custom hover-scale">
            <i class="fas fa-plus-circle mr-2"></i>
            Create New Topic
        </a>
    </div>

    <!-- Topics List -->
    <div class="theme-card p-6 hover-lift">
        <div class="overflow-x-auto">
            <table class="theme-table">
                <thead>
                    <tr>
                        <th class="text-left">Title</th>
                        <th class="text-left">Created Date</th>
                        <th class="text-left">Student Progress</th>
                        <th class="text-left">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for topic in topics %}
                    <tr>
                        <td class="py-4">{{ topic.title }}</td>
                        <td class="py-4">{{ topic.created_at.strftime('%Y-%m-%d') }}</td>
                        <td class="py-4">
                            <div class="w-full bg-[var(--bg-secondary)] rounded-full h-2.5">
                                <div class="bg-[var(--accent-primary)] h-2.5 rounded-full" 
                                     style="width: {{ topic.completion_percentage }}%"></div>
                            </div>
                            <span class="text-sm text-[var(--text-secondary)]">
                                {{ topic.completed_students }}/{{ topic.total_students }} students completed
                            </span>
                        </td>
                        <td class="py-4">
                            <div class="flex items-center space-x-4">
                                <a href="{{ url_for('teacher.edit_topic', topic_id=topic.id) }}" 
                                   class="text-[var(--accent-primary)] hover:text-[var(--accent-hover)] transition-colors duration-300">
                                   <i class="fas fa-edit mr-1"></i>
                                   Edit
                                </a>
                                <a href="{{ url_for('teacher.view_topic_analytics', topic_id=topic.id) }}" 
                                   class="text-[var(--accent-primary)] hover:text-[var(--accent-hover)] transition-colors duration-300">
                                   <i class="fas fa-chart-bar mr-1"></i>
                                   Analytics
                                </a>
                                <button onclick="deleteTopic('{{ topic.id }}', this)" 
                                        class="text-[var(--error)] hover:text-[var(--error-hover)] transition-colors duration-300 disabled:opacity-50 disabled:cursor-not-allowed">
                                    <i class="fas fa-trash-alt mr-1"></i>
                                    Delete
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Function to get CSRF token from meta tag
function getCsrfToken() {
    return document.querySelector('meta[name="csrf-token"]').getAttribute('content');
}

function deleteTopic(topicId, button) {
    if (confirm('Are you sure you want to delete this topic? This action cannot be undone.')) {
        // Disable the button to prevent double-clicks
        button.disabled = true;
        button.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Deleting...';

        fetch(`/teacher/topics/${topicId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCsrfToken()
            },
            credentials: 'same-origin'
        })
        .then(response => {
            if (!response.ok) {
                // Try to parse JSON, but handle HTML responses too
                return response.text().then(text => {
                    try {
                        // Attempt to parse as JSON
                        const data = JSON.parse(text);
                        throw new Error(data.error || 'Failed to delete topic');
                    } catch (e) {
                        // If it's not valid JSON, it might be HTML
                        console.error('Received non-JSON response:', text.substring(0, 100) + '...');
                        throw new Error('Server returned an invalid response. Please try again.');
                    }
                });
            }
            return response.json();
        })
        .then(data => {
            // Show success message
            const flashDiv = document.createElement('div');
            flashDiv.className = 'theme-card p-4 bg-[var(--success-light)] text-[var(--success)] fixed top-4 right-4 z-50 hover-lift';
            flashDiv.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Topic deleted successfully';
            document.body.appendChild(flashDiv);
            
            // Remove the message after 3 seconds
            setTimeout(() => {
                flashDiv.remove();
                // Reload the page
                window.location.reload();
            }, 3000);
        })
        .catch(error => {
            // Re-enable the button
            button.disabled = false;
            button.innerHTML = '<i class="fas fa-trash-alt mr-1"></i> Delete';
            
            // Show error message
            const flashDiv = document.createElement('div');
            flashDiv.className = 'theme-card p-4 bg-[var(--error-light)] text-[var(--error)] fixed top-4 right-4 z-50 hover-lift';
            flashDiv.innerHTML = `<i class="fas fa-exclamation-circle mr-2"></i> ${error.message}`;
            document.body.appendChild(flashDiv);
            
            // Remove the error message after 3 seconds
            setTimeout(() => flashDiv.remove(), 3000);
        });
    }
}
</script>
{% endblock %}