{% extends 'base.html' %}
{% block title %}Add New Topic{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    <!-- Page Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-primary flex items-center gap-3">
            <i class="fas fa-plus-circle"></i>
            <span>Create New Learning Topic</span>
        </h1>
        <p class="text-base-content/70 mt-2">Design a comprehensive lesson with reading content and optional speaking and writing prompts.</p>
    </div>

    <!-- Form Card -->
    <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
            <form method="POST" action="{{ url_for('teacher.add_topic') }}" id="topicForm" enctype="multipart/form-data">
                {{ form.csrf_token }}
                
                <!-- Flash Messages -->
                {% with messages = get_flashed_messages(with_categories=true) %}
                    {% if messages %}
                        {% for category, message in messages %}
                            <div class="alert {% if category == 'error' %}alert-error{% elif category == 'success' %}alert-success{% else %}alert-info{% endif %} mb-6">
                                <div>
                                    <i class="fas {% if category == 'error' %}fa-exclamation-circle{% elif category == 'success' %}fa-check-circle{% else %}fa-info-circle{% endif %}"></i>
                                    <span>{{ message }}</span>
                                </div>
                            </div>
                        {% endfor %}
                    {% endif %}
                {% endwith %}
                
                <!-- Form Errors -->
                {% if form.errors %}
                    <div class="alert alert-error mb-6">
                        <div>
                            <i class="fas fa-exclamation-circle"></i>
                            <span>Please correct the errors below</span>
                        </div>
                    </div>
                {% endif %}

                <!-- Form Sections with Tabs -->
                <div class="tabs tabs-boxed bg-base-200 mb-6">
                    <a class="tab tab-active" id="tab-basic" onclick="switchTab('basic')">Basic Info</a>
                    <a class="tab" id="tab-reading" onclick="switchTab('reading')">Reading</a>
                    <a class="tab" id="tab-speaking" onclick="switchTab('speaking')">Speaking</a>
                    <a class="tab" id="tab-writing" onclick="switchTab('writing')">Writing</a>
                </div>

                <!-- Basic Info Section -->
                <div id="section-basic" class="space-y-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Title Field -->
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text font-medium">{{ form.title.label }}</span>
                            </label>
                            {{ form.title(class="input input-bordered w-full focus:ring-2 focus:ring-primary") }}
                            {% if form.title.errors %}
                                <div class="text-error text-sm mt-1">{{ form.title.errors[0] }}</div>
                            {% endif %}
                        </div>
                        <!-- Category Field -->
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text font-medium">{{ form.category.label }}</span>
                            </label>
                            {{ form.category(class="select select-bordered w-full focus:ring-2 focus:ring-primary") }}
                            {% if form.category.errors %}
                                <div class="text-error text-sm mt-1">{{ form.category.errors[0] }}</div>
                            {% endif %}
                        </div>
                        <!-- Course Field -->
                        <div class="form-control md:col-span-2">
                            <label class="label">
                                <span class="label-text font-medium">{{ form.course.label }}</span>
                            </label>
                            {{ form.course(class="select select-bordered w-full focus:ring-2 focus:ring-primary") }}
                            {% if form.course.errors %}
                                <div class="text-error text-sm mt-1">{{ form.course.errors[0] }}</div>
                            {% endif %}
                        </div>
                    </div>
                    
                    <div class="flex justify-between items-center">
                        <div></div> <!-- Empty div for spacing -->
                        <button type="button" class="btn btn-primary" onclick="switchTab('reading')">
                            Next: Reading Content <i class="fas fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </div>

                <!-- Reading Content Section -->
                <div id="section-reading" class="space-y-6 hidden">
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text font-medium">{{ form.reading_content.label }}</span>
                            <span class="label-text-alt text-info">Required</span>
                        </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="textarea textarea-bordered h-64 font-mono text-sm focus:ring-2 focus:ring-primary", placeholder="Enter reading content here...\nUse H1: and H2: for headings\nUse **text** for bold\nUse Note: for important notes") }}
                        {% if form.reading_content.errors %}
                            <div class="text-error text-sm mt-1">{{ form.reading_content.errors[0] }}</div>
                        {% endif %}
                    </div>
                    
                    <!-- Image Upload Section -->
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text font-medium">{{ form.image.label }}</span>
                            <span class="label-text-alt text-info">Optional</span>
                        </label>
                        <div class="border-2 border-dashed border-base-300 rounded-lg p-6 text-center hover:border-primary transition-colors">
                            {{ form.image(class="file-input file-input-bordered w-full max-w-xs", accept="image/*", onchange="previewImage(event, 'imagePreview')") }}
                            <div id="imagePreview" class="mt-4 hidden">
                                <img src="" alt="Image preview" class="max-w-md max-h-64 mx-auto rounded-lg shadow-md">
                            </div>
                            <p class="text-sm text-base-content/60 mt-2">
                                <i class="fas fa-info-circle mr-1"></i>
                                Supported formats: JPG, PNG, GIF, WEBP (Max 5MB)
                            </p>
                        </div>
                        {% if form.image.errors %}
                            <div class="text-error text-sm mt-1">{{ form.image.errors[0] }}</div>
                        {% endif %}
                    </div>
                    
                    <div class="flex justify-between items-center">
                        <button type="button" class="btn btn-outline" onclick="switchTab('basic')">
                            <i class="fas fa-arrow-left mr-2"></i> Back
                        </button>
                        <button type="button" class="btn btn-primary" onclick="switchTab('speaking')">
                            Next: Speaking Prompt <i class="fas fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </div>

                <!-- Speaking Prompt Section -->
                <div id="section-speaking" class="space-y-6 hidden">
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text font-medium">{{ form.speaking_prompt.label }}</span>
                            <span class="label-text-alt text-info">Optional</span>
                        </label>
                        {{ form.speaking_prompt(class="textarea textarea-bordered h-40 focus:ring-2 focus:ring-primary", placeholder="Provide instructions for the speaking practice exercise") }}
                        {% if form.speaking_prompt.errors %}
                            <div class="text-error text-sm mt-1">{{ form.speaking_prompt.errors[0] }}</div>
                        {% endif %}
                        <p class="text-sm text-base-content/70 mt-2">
                            <i class="fas fa-info-circle mr-1"></i>
                            AI will generate speaking questions based on this prompt and the reading content.
                        </p>
                    </div>
                    
                    <div class="flex justify-between items-center">
                        <button type="button" class="btn btn-outline" onclick="switchTab('reading')">
                            <i class="fas fa-arrow-left mr-2"></i> Back
                        </button>
                        <button type="button" class="btn btn-primary" onclick="switchTab('writing')">
                            Next: Writing Prompt <i class="fas fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </div>

                <!-- Writing Prompt Section -->
                <div id="section-writing" class="space-y-6 hidden">
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text font-medium">{{ form.writing_prompt.label }}</span>
                            <span class="label-text-alt text-info">Optional</span>
                        </label>
                        {{ form.writing_prompt(class="textarea textarea-bordered h-40 focus:ring-2 focus:ring-primary", placeholder="Provide instructions for the writing assignment") }}
                        {% if form.writing_prompt.errors %}
                            <div class="text-error text-sm mt-1">{{ form.writing_prompt.errors[0] }}</div>
                        {% endif %}
                    </div>
                    
                    <div class="flex justify-between items-center">
                        <button type="button" class="btn btn-outline" onclick="switchTab('speaking')">
                            <i class="fas fa-arrow-left mr-2"></i> Back
                        </button>
                        
                        <!-- Final Submit Button -->
                        {{ form.submit(class="btn btn-primary btn-lg gap-2") }}
                    </div>
                </div>
            </form>
        </div>
    </div>
    
    <!-- Preview Card -->
    <div class="card bg-base-100 shadow-xl mt-8">
        <div class="card-body">
            <h2 class="card-title text-primary">
                <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">Sample Topic Title</h3>
                <p class="text-sm text-base-content/70 mb-4">
                    <span id="preview-category" class="badge badge-outline">Category</span>
                </p>
                
                <div id="preview-reading" 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">
                        Your formatted reading content will appear here as you type...
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- JavaScript for tab switching and preview functionality -->
<script>
    // Tab switching functionality
    function switchTab(tabName) {
        // Hide all sections
        document.querySelectorAll('[id^="section-"]').forEach(section => {
            section.classList.add('hidden');
        });
        
        // Deactivate all tabs
        document.querySelectorAll('.tab').forEach(tab => {
            tab.classList.remove('tab-active');
        });
        
        // Show selected section and activate tab
        document.getElementById(`section-${tabName}`).classList.remove('hidden');
        document.getElementById(`tab-${tabName}`).classList.add('tab-active');
    }
    
    // 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 || 'Sample Topic Title';
        const category = document.getElementById('category').options[document.getElementById('category').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;
    }
    
    // Form validation function
    function validateForm() {
        let isValid = true;
        let errorMessages = [];
        
        // Check required fields
        const title = document.getElementById('title').value;
        const category = document.getElementById('category').value;
        const course = document.getElementById('course').value;
        const readingContent = document.getElementById('reading_content').value;
        
        if (!title) {
            errorMessages.push("Title is required");
            isValid = false;
        }
        
        if (!category || category === "None") {
            errorMessages.push("Category is required");
            isValid = false;
        }
        
        if (!course || course === "None") {
            errorMessages.push("Course is required");
            isValid = false;
        }
        
        if (!readingContent) {
            errorMessages.push("Reading content is required");
            isValid = false;
        }
        
        // Display validation errors if any
        if (!isValid) {
            // Create or update error alert
            let errorAlert = document.querySelector('.alert-error');
            if (!errorAlert) {
                errorAlert = document.createElement('div');
                errorAlert.className = 'alert alert-error mb-6';
                const formStart = document.querySelector('form').firstElementChild;
                formStart.parentNode.insertBefore(errorAlert, formStart.nextSibling);
            }
            
            // Build error message HTML
            let errorHTML = '<div><i class="fas fa-exclamation-circle"></i><span>Please correct the following errors:</span></div><ul class="mt-2">';
            errorMessages.forEach(msg => {
                errorHTML += `<li>• ${msg}</li>`;
            });
            errorHTML += '</ul>';
            errorAlert.innerHTML = errorHTML;
            
            // Switch to tab with first error
            if (!title || !category || !course) {
                switchTab('basic');
            } else if (!readingContent) {
                switchTab('reading');
            }
        }
        
        return isValid;
    }
    
    // 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);
        
        // Add form submission handler
        document.getElementById('topicForm').addEventListener('submit', function(e) {
            if (!validateForm()) {
                e.preventDefault(); // Prevent form submission if validation fails
                return false;
            }
            
            // Add loading state to submit button
            const submitBtn = document.querySelector('input[type="submit"]');
            submitBtn.value = 'Creating Topic...';
            submitBtn.disabled = true;
            submitBtn.classList.add('loading');
            
            // Continue with form submission
            return true;
        });
        
        // Log form values for debugging
        console.log('Initial form values:');
        console.log('Category options:', document.getElementById('category').options.length);
        console.log('Course options:', document.getElementById('course').options.length);
    });
    
    // 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 %}