{% extends "base.html" %}

{% block content %}
<div class="space-y-6 p-6">
    <div class="flex justify-between items-center">
        <h1 class="section-header">Edit Topic</h1>
    </div>

    <div class="theme-card p-6 max-w-4xl mx-auto hover-lift">
        <form method="POST" action="{{ url_for('teacher.edit_topic', topic_id=topic.id) }}" enctype="multipart/form-data">
            {{ form.hidden_tag() }}
            <div class="space-y-6">
                <div>
                    <label class="form-label">Topic Title</label>
                    {{ form.title(class="theme-input w-full", id="title", placeholder="Enter topic title") }}
                </div>
                
                <div>
                    <label class="form-label">Category</label>
                    {{ form.category(class="theme-input w-full") }}
                </div>
                
                <div>
                    <label class="form-label">Course <span class="text-red-500">*</span></label>
                    {{ form.course(class="theme-input w-full") }}
                    <!-- Show selected course for debugging -->
                    {% if topic.course_id %}
                    <div class="text-xs text-gray-500 mt-1">Current course ID: {{ topic.course_id }}</div>
                    {% endif %}
                    {% if form.course.errors %}
                    <div class="text-red-500 text-sm mt-1">{{ form.course.errors[0] }}</div>
                    {% endif %}
                </div>
                
                <!-- Reading Stage -->
                <div class="border-t border-[var(--border)] pt-4">
                    <h3 class="section-title mb-4">Reading Stage</h3>
                    <div>
                        <label class="form-label">Reading Content</label>
                        
                        <!-- Text Formatting Tools -->
                        <div class="btn-group mb-2">
                            <button type="button" class="btn btn-sm btn-outline" onclick="insertTextTag('reading_content', 'H1:')">
                                <i class="fas fa-heading"></i> H1
                            </button>
                            <button type="button" class="btn btn-sm btn-outline" onclick="insertTextTag('reading_content', 'H2:')">
                                <i class="fas fa-heading fa-xs"></i> H2
                            </button>
                            <button type="button" class="btn btn-sm btn-outline" onclick="insertTextTag('reading_content', '**', '**')">
                                <i class="fas fa-bold"></i>
                            </button>
                            <button type="button" class="btn btn-sm btn-outline" onclick="insertTextTag('reading_content', 'Note: ')">
                                <i class="fas fa-sticky-note"></i> Note
                            </button>
                        </div>
                        
                        {{ form.reading_content(class="theme-input w-full h-64", id="reading_content", placeholder="Enter the reading content for this topic...\nUse H1: and H2: for headings\nUse **text** for bold\nUse Note: for important notes") }}
                    </div>
                    
                    <!-- Image Upload Section -->
                    <div class="mt-4">
                        <label class="form-label">Topic Image (Optional)</label>
                        <div class="border-2 border-dashed border-[var(--border)] rounded-lg p-6 text-center hover:border-[var(--primary)] transition-colors">
                            {{ form.image(class="file-input file-input-bordered w-full max-w-xs", accept="image/*", onchange="previewImage(event, 'imagePreviewEdit')") }}
                            <div id="imagePreviewEdit" class="mt-4 {% if not topic.image_url %}hidden{% endif %}">
                                <img src="{% if topic.image_url %}{{ url_for('static', filename=topic.image_url) }}{% endif %}" alt="Image preview" class="max-w-md max-h-64 mx-auto rounded-lg shadow-md">
                            </div>
                            <p class="text-sm text-[var(--text-secondary)] mt-2">
                                <i class="fas fa-info-circle mr-1"></i>
                                Supported formats: JPG, PNG, GIF, WEBP (Max 5MB)
                            </p>
                            {% if topic.image_url %}
                            <p class="text-sm text-success mt-2">
                                <i class="fas fa-check-circle mr-1"></i>
                                Current image will be replaced if you upload a new one
                            </p>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Writing Stage -->
                <div class="border-t border-[var(--border)] pt-4">
                    <h3 class="section-title mb-4">Writing Stage</h3>
                    <div>
                        <label class="form-label">Writing Prompt</label>
                        {{ form.writing_prompt(class="theme-input w-full h-24", placeholder="Enter a writing prompt (optional)...") }}
                    </div>
                </div>

                <!-- Speaking Stage -->
                <div class="border-t border-[var(--border)] pt-4">
                    <h3 class="section-title mb-4">Speaking Stage</h3>
                    <div>
                        <label class="form-label">Speaking Prompt</label>
                        {{ form.speaking_prompt(class="theme-input w-full h-24", placeholder="Enter a speaking prompt (optional)...") }}
                    </div>
                </div>

                <div class="border-t border-[var(--border)] pt-4 flex space-x-4">
                    <button type="submit" class="btn-custom flex-1 hover-scale">
                        <i class="fas fa-save mr-2"></i>
                        Save Changes
                    </button>
                    <a href="{{ url_for('teacher.manage_topics') }}" class="btn-custom btn-secondary flex-1 hover-scale">
                        <i class="fas fa-times mr-2"></i>
                        Cancel
                    </a>
                </div>
            </div>
        </form>
    </div>

    <!-- Preview Card -->
    <div class="theme-card p-6 mt-6 max-w-4xl mx-auto">
        <h2 class="section-title flex items-center">
            <i class="fas fa-eye mr-2"></i>
            Preview
        </h2>
        <div class="divider"></div>
        
        <div class="prose max-w-none">
            <h3 id="preview-title" class="text-xl font-bold">{{ topic.title }}</h3>
            <p class="text-sm text-base-content/70 mb-4">
                <span id="preview-category" class="badge badge-outline">{{ form.category.data }}</span>
            </p>
            
            <div class="mt-4 p-4 border border-base-300 rounded-lg">
                <h4 class="text-lg font-semibold mb-2">Reading Content Preview</h4>
                <div id="preview-reading-content" class="whitespace-pre-line">
                    {% if topic.reading_content %}
                    {{ topic.reading_content }}
                    {% else %}
                    Your formatted reading content will appear here as you type...
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Decorative Elements -->
    <div class="absolute top-0 left-0 w-32 h-32 bg-[var(--accent-light)] rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
    <div class="absolute top-0 right-0 w-32 h-32 bg-[var(--accent-secondary)] rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
    <div class="absolute -bottom-8 left-20 w-32 h-32 bg-[var(--accent-primary)] rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>
</div>

<style>
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

.form-label {
    @apply block text-sm font-medium text-[var(--text-secondary)] mb-1;
}
</style>

<!-- JavaScript for text formatting and preview functionality -->
<script>
    // Text formatting helper function
    function insertTextTag(elementId, startTag, endTag = '') {
        const textarea = document.getElementById(elementId);
        const start = textarea.selectionStart;
        const end = textarea.selectionEnd;
        const selectedText = textarea.value.substring(start, end);
        const replacement = startTag + selectedText + endTag;
        
        textarea.value = textarea.value.substring(0, start) + replacement + 
                          textarea.value.substring(end);
        
        // Restore focus and selection
        textarea.focus();
        textarea.selectionStart = start + startTag.length;
        textarea.selectionEnd = start + startTag.length + selectedText.length;
        
        // Update preview
        updatePreview();
    }
    
    // Live preview update
    function updatePreview() {
        const title = document.getElementById('title').value || '{{ topic.title }}';
        const categorySelect = document.getElementById('category');
        const category = categorySelect.options[categorySelect.selectedIndex].text;
        const readingContent = document.getElementById('reading_content').value || 'Your formatted reading content will appear here as you type...';
        
        // Update the preview elements
        document.getElementById('preview-title').textContent = title;
        document.getElementById('preview-category').textContent = category;
        
        // Process reading content with basic formatting
        let formattedContent = readingContent
            .replace(/H1:(.*?)(\n|$)/g, '<h1 class="text-2xl font-bold my-3">$1</h1>')
            .replace(/H2:(.*?)(\n|$)/g, '<h2 class="text-xl font-semibold my-2">$1</h2>')
            .replace(/Note:(.*?)(\n|$)/g, '<div class="bg-info/10 border-l-4 border-info p-3 my-3">$1</div>')
            .replace(/\*\*(.*?)\*\*/g, '<strong class="text-accent">$1</strong>')
            .replace(/\n/g, '<br>');
            
        document.getElementById('preview-reading-content').innerHTML = formattedContent;
    }
    
    // Set up event listeners when document is loaded
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize preview
        updatePreview();
        
        // Add event listeners for input changes
        document.getElementById('title').addEventListener('input', updatePreview);
        document.getElementById('category').addEventListener('change', updatePreview);
        document.getElementById('reading_content').addEventListener('input', updatePreview);
    });
    
    // Image preview functionality
    function previewImage(event, previewId) {
        const file = event.target.files[0];
        const preview = document.getElementById(previewId);
        const img = preview.querySelector('img');
        
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                img.src = e.target.result;
                preview.classList.remove('hidden');
            };
            reader.readAsDataURL(file);
        } else {
            preview.classList.add('hidden');
            img.src = '';
        }
    }
</script>
{% endblock %}