{% 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);
    }
</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://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
<script>
$(document).ready(function() {
    // Initialize Summernote for rich text editing
    $('#articleBody, #editArticleBody').summernote({
        height: 300,
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'italic', 'clear']],
            ['fontname', ['fontname']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['table', ['table']],
            ['insert', ['link', 'picture']],
            ['view', ['fullscreen', 'codeview', 'help']]
        ],
        styleTags: [
            'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
        ]
    });

    // Load articles on page load
    loadArticles();

    // Handle create article form submission
    $('#createArticleForm').on('submit', function(e) {
        e.preventDefault();
        createArticle();
    });

    // Handle edit article form submission
    $('#editArticleForm').on('submit', function(e) {
        e.preventDefault();
        updateArticle();
    });

    // Handle delete confirmation
    $('#confirmDelete').on('click', function() {
        deleteArticle();
    });
});

function loadArticles() {
    $.get('/api/admin/help-articles', function(data) {
        const articlesList = $('#articlesList');
        articlesList.empty();
        
        if (data.articles.length === 0) {
            articlesList.html(`
                <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;
        }

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

            const card = $(`
                <div class="col-lg-6 col-xl-4 mb-4">
                    <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>
                </div>
            `);
            articlesList.append(card);
        });
    });
}

function createArticle() {
    const formData = new FormData($('#createArticleForm')[0]);
    formData.set('body', $('#articleBody').summernote('code'));
    formData.set('is_published', $('#isPublished').is(':checked'));

    $.ajax({
        url: '/api/admin/help-articles',
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            $('#createArticleModal').modal('hide');
            $('#createArticleForm')[0].reset();
            $('#articleBody').summernote('code', '');
            loadArticles();
            showAlert('Article created successfully!', 'success');
        },
        error: function(xhr) {
            showAlert('Error creating article: ' + xhr.responseJSON?.error || 'Unknown error', 'danger');
        }
    });
}

function editArticle(articleId) {
    $.get(`/api/admin/help-articles/${articleId}`, function(data) {
        $('#editArticleId').val(data.article.id);
        $('#editArticleTitle').val(data.article.title);
        $('#editArticleCategory').val(data.article.category);
        $('#editArticleBody').summernote('code', data.article.body);
        $('#editOrderIndex').val(data.article.order_index);
        $('#editIsPublished').prop('checked', data.article.is_published);
        $('#editArticleModal').modal('show');
    });
}

function updateArticle() {
    const formData = new FormData($('#editArticleForm')[0]);
    formData.set('body', $('#editArticleBody').summernote('code'));
    formData.set('is_published', $('#editIsPublished').is(':checked'));

    $.ajax({
        url: `/api/admin/help-articles/${$('#editArticleId').val()}`,
        method: 'PUT',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            $('#editArticleModal').modal('hide');
            loadArticles();
            showAlert('Article updated successfully!', 'success');
        },
        error: function(xhr) {
            showAlert('Error updating article: ' + xhr.responseJSON?.error || 'Unknown error', 'danger');
        }
    });
}

function confirmDelete(articleId, title) {
    $('#deleteArticleId').val(articleId);
    $('#deleteArticleTitle').text(title);
    $('#deleteArticleModal').modal('show');
}

function deleteArticle() {
    const articleId = $('#deleteArticleId').val();
    
    $.ajax({
        url: `/api/admin/help-articles/${articleId}`,
        method: 'DELETE',
        success: function(response) {
            $('#deleteArticleModal').modal('hide');
            loadArticles();
            showAlert('Article deleted successfully!', 'success');
        },
        error: function(xhr) {
            showAlert('Error deleting article: ' + xhr.responseJSON?.error || 'Unknown error', '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>
    `;
    $('.container-fluid').prepend(alertHtml);
}
</script>
{% endblock %}