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

{% block title %}Support Articles - DocuPulse{% endblock %}

{% block extra_css %}
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<style>
    .article-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .article-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .category-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    .status-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    .note-editor {
        border: 1px solid var(--border-color);
        border-radius: 0.375rem;
    }
    .note-editor.note-frame {
        border-color: var(--border-color);
    }
    .note-editor .note-editing-area {
        background-color: var(--white);
    }
    .note-editor .note-toolbar {
        background-color: var(--bg-color);
        border-bottom: 1px solid var(--border-color);
        border-radius: 0.375rem 0.375rem 0 0;
    }
    .note-editor .note-btn {
        border: 1px solid var(--border-color);
        background-color: var(--white);
        color: var(--text-dark);
    }
    .note-editor .note-btn:hover {
        background-color: var(--primary-color);
        color: var(--white);
        border-color: var(--primary-color);
    }
    .note-editor .note-btn.active {
        background-color: var(--primary-color);
        color: var(--white);
        border-color: var(--primary-color);
    }
    .note-editor .note-editing-area .note-editable {
        color: var(--text-dark);
        font-family: inherit;
        line-height: 1.6;
        padding: 15px;
    }
    .note-editor .note-status-output {
        background-color: var(--bg-color);
        border-top: 1px solid var(--border-color);
        color: var(--text-muted);
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0" style="color: var(--primary-color);">
                    <i class="fas fa-life-ring me-2"></i>Support Articles
                </h1>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createArticleModal">
                    <i class="fas fa-plus me-2"></i>Create New Article
                </button>
            </div>
            
            <!-- Articles List -->
            <div class="row" id="articlesList">
                <!-- Articles will be loaded here via AJAX -->
            </div>
        </div>
    </div>
</div>

<!-- Create Article Modal -->
<div class="modal fade" id="createArticleModal" tabindex="-1" aria-labelledby="createArticleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createArticleModalLabel">Create New Help Article</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="createArticleForm">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="mb-3">
                                <label for="articleTitle" class="form-label">Title</label>
                                <input type="text" class="form-control" id="articleTitle" name="title" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="articleCategory" class="form-label">Category</label>
                                <select class="form-select" id="articleCategory" name="category" required>
                                    <option value="">Select Category</option>
                                    <option value="getting-started">Getting Started</option>
                                    <option value="user-management">User Management</option>
                                    <option value="file-management">File Management</option>
                                    <option value="communication">Communication</option>
                                    <option value="security">Security & Privacy</option>
                                    <option value="administration">Administration</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="articleBody" class="form-label">Content</label>
                        <textarea class="form-control" id="articleBody" name="body" rows="15" required></textarea>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="orderIndex" class="form-label">Order Index</label>
                                <input type="number" class="form-control" id="orderIndex" name="order_index" value="0" min="0">
                                <div class="form-text">Lower numbers appear first in the category</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="isPublished" name="is_published" checked>
                                    <label class="form-check-label" for="isPublished">
                                        Publish immediately
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Create Article</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Article Modal -->
<div class="modal fade" id="editArticleModal" tabindex="-1" aria-labelledby="editArticleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editArticleModalLabel">Edit Help Article</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editArticleForm">
                <input type="hidden" id="editArticleId" name="id">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="mb-3">
                                <label for="editArticleTitle" class="form-label">Title</label>
                                <input type="text" class="form-control" id="editArticleTitle" name="title" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="editArticleCategory" class="form-label">Category</label>
                                <select class="form-select" id="editArticleCategory" name="category" required>
                                    <option value="">Select Category</option>
                                    <option value="getting-started">Getting Started</option>
                                    <option value="user-management">User Management</option>
                                    <option value="file-management">File Management</option>
                                    <option value="communication">Communication</option>
                                    <option value="security">Security & Privacy</option>
                                    <option value="administration">Administration</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="editArticleBody" class="form-label">Content</label>
                        <textarea class="form-control" id="editArticleBody" name="body" rows="15" required></textarea>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="editOrderIndex" class="form-label">Order Index</label>
                                <input type="number" class="form-control" id="editOrderIndex" name="order_index" value="0" min="0">
                                <div class="form-text">Lower numbers appear first in the category</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="editIsPublished" name="is_published">
                                    <label class="form-check-label" for="editIsPublished">
                                        Published
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Update Article</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteArticleModal" tabindex="-1" aria-labelledby="deleteArticleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteArticleModalLabel">Delete Article</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this article? This action cannot be undone.</p>
                <p class="text-muted" id="deleteArticleTitle"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmDelete">Delete Article</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Summernote for rich text editing
    $('#articleBody, #editArticleBody').summernote({
        height: 400,
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'italic', 'strikethrough', 'clear']],
            ['fontname', ['fontname']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video', 'hr']],
            ['view', ['fullscreen', 'codeview', 'help']],
            ['undo', ['undo', 'redo']]
        ],
        styleTags: [
            'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
        ],
        fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica', 'Impact', 'Tahoma', 'Times New Roman', 'Verdana'],
        fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '24', '36'],
        callbacks: {
            onInit: function() {
                // Ensure proper styling when modal opens
                $('.note-editor').css('border-color', 'var(--border-color)');
                $('.note-editing-area').css('background-color', 'var(--white)');
            }
        }
    });

    // Load articles on page load
    loadArticles();

    // Handle create article form submission
    document.getElementById('createArticleForm').addEventListener('submit', function(e) {
        e.preventDefault();
        createArticle();
    });

    // Handle edit article form submission
    document.getElementById('editArticleForm').addEventListener('submit', function(e) {
        e.preventDefault();
        updateArticle();
    });

    // Handle delete confirmation
    document.getElementById('confirmDelete').addEventListener('click', function() {
        deleteArticle();
    });
});

function loadArticles() {
    fetch('/api/admin/help-articles')
        .then(response => response.json())
        .then(data => {
            const articlesList = document.getElementById('articlesList');
            articlesList.innerHTML = '';
            
            if (data.articles.length === 0) {
                articlesList.innerHTML = `
                    <div class="col-12">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body text-center py-5">
                                <i class="fas fa-file-alt text-muted" style="font-size: 3rem; opacity: 0.5;"></i>
                                <h4 class="text-muted mt-3">No Articles Yet</h4>
                                <p class="text-muted">Create your first help article to get started.</p>
                            </div>
                        </div>
                    </div>
                `;
                return;
            }

            const categoryNames = {
                'getting-started': 'Getting Started',
                'user-management': 'User Management',
                'file-management': 'File Management',
                'communication': 'Communication',
                'security': 'Security & Privacy',
                'administration': 'Administration'
            };

            data.articles.forEach(article => {
                const card = document.createElement('div');
                card.className = 'col-lg-6 col-xl-4 mb-4';
                card.innerHTML = `
                    <div class="card article-card border-0 shadow-sm h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <span class="badge category-badge" style="background-color: var(--primary-color);">
                                    ${categoryNames[article.category]}
                                </span>
                                <span class="badge status-badge ${article.is_published ? 'bg-success' : 'bg-warning'}">
                                    ${article.is_published ? 'Published' : 'Draft'}
                                </span>
                            </div>
                            <h5 class="card-title mb-2">${article.title}</h5>
                            <p class="card-text text-muted small mb-3">
                                ${article.body.substring(0, 100)}${article.body.length > 100 ? '...' : ''}
                            </p>
                            <div class="d-flex justify-content-between align-items-center">
                                <small class="text-muted">
                                    Order: ${article.order_index} | Created: ${new Date(article.created_at).toLocaleDateString()}
                                </small>
                                <div class="btn-group btn-group-sm">
                                    <button class="btn btn-outline-primary" onclick="editArticle(${article.id})">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="btn btn-outline-danger" onclick="confirmDelete(${article.id}, '${article.title}')">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                articlesList.appendChild(card);
            });
        })
        .catch(error => {
            console.error('Error loading articles:', error);
            showAlert('Error loading articles: ' + error.message, 'danger');
        });
}

function createArticle() {
    const form = document.getElementById('createArticleForm');
    const formData = new FormData(form);
    formData.set('body', $('#articleBody').summernote('code'));
    formData.set('is_published', document.getElementById('isPublished').checked);

    fetch('/api/admin/help-articles', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const modal = bootstrap.Modal.getInstance(document.getElementById('createArticleModal'));
            modal.hide();
            form.reset();
            $('#articleBody').summernote('code', '');
            loadArticles();
            showAlert('Article created successfully!', 'success');
        } else {
            throw new Error(data.error || 'Unknown error');
        }
    })
    .catch(error => {
        console.error('Error creating article:', error);
        showAlert('Error creating article: ' + error.message, 'danger');
    });
}

function editArticle(articleId) {
    fetch(`/api/admin/help-articles/${articleId}`)
        .then(response => response.json())
        .then(data => {
            document.getElementById('editArticleId').value = data.article.id;
            document.getElementById('editArticleTitle').value = data.article.title;
            document.getElementById('editArticleCategory').value = data.article.category;
            $('#editArticleBody').summernote('code', data.article.body);
            document.getElementById('editOrderIndex').value = data.article.order_index;
            document.getElementById('editIsPublished').checked = data.article.is_published;
            
            const modal = new bootstrap.Modal(document.getElementById('editArticleModal'));
            modal.show();
        })
        .catch(error => {
            console.error('Error loading article:', error);
            showAlert('Error loading article: ' + error.message, 'danger');
        });
}

function updateArticle() {
    const form = document.getElementById('editArticleForm');
    const formData = new FormData(form);
    formData.set('body', $('#editArticleBody').summernote('code'));
    formData.set('is_published', document.getElementById('editIsPublished').checked);

    fetch(`/api/admin/help-articles/${document.getElementById('editArticleId').value}`, {
        method: 'PUT',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const modal = bootstrap.Modal.getInstance(document.getElementById('editArticleModal'));
            modal.hide();
            loadArticles();
            showAlert('Article updated successfully!', 'success');
        } else {
            throw new Error(data.error || 'Unknown error');
        }
    })
    .catch(error => {
        console.error('Error updating article:', error);
        showAlert('Error updating article: ' + error.message, 'danger');
    });
}

function confirmDelete(articleId, title) {
    document.getElementById('deleteArticleId').value = articleId;
    document.getElementById('deleteArticleTitle').textContent = title;
    
    const modal = new bootstrap.Modal(document.getElementById('deleteArticleModal'));
    modal.show();
}

function deleteArticle() {
    const articleId = document.getElementById('deleteArticleId').value;
    
    fetch(`/api/admin/help-articles/${articleId}`, {
        method: 'DELETE'
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const modal = bootstrap.Modal.getInstance(document.getElementById('deleteArticleModal'));
            modal.hide();
            loadArticles();
            showAlert('Article deleted successfully!', 'success');
        } else {
            throw new Error(data.error || 'Unknown error');
        }
    })
    .catch(error => {
        console.error('Error deleting article:', error);
        showAlert('Error deleting article: ' + error.message, 'danger');
    });
}

function showAlert(message, type) {
    const alertHtml = `
        <div class="alert alert-${type} alert-dismissible fade show" role="alert">
            <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-triangle'} me-2"></i>
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    `;
    const container = document.querySelector('.container-fluid');
    container.insertAdjacentHTML('afterbegin', alertHtml);
}
</script>
{% endblock %}