{# Modal for Editing Suggestions #}
<div class="modal fade" id="suggestEditModal" tabindex="-1" role="dialog" aria-labelledby="suggestEditModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <form method="post" action="#" id="suggestEditForm">
                <div class="modal-header">
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="suggestEditModalLabel">
                        <i class="fa fa-edit"></i> Suggest an Edit
                    </h4>
                </div>

                <div class="modal-body">
                    <input type="hidden" name="articleId" value="{{ article.id }}" />
                    <textarea id="suggestEditOriginalContent" style="display:none;">{{ article.contentMd|e }}</textarea>

                    <div class="alert alert-info">
                        <i class="fa fa-info-circle"></i>
                        <strong>Help us improve this article!</strong>
                        Make your suggested changes below and explain what you're updating. Our team will review your suggestion.
                    </div>

                    {# Identity Section #}
                    <div class="suggest-edit-identity mb-4 p-3 bg-light rounded">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <label for="suggestEditName" class="form-label mb-1">
                                    <i class="fa fa-user me-1"></i> Your Name
                                </label>
                                <input
                                    type="text"
                                    class="form-control"
                                    id="suggestEditName"
                                    name="name"
                                    value="{{ user.display_name|default('') }}"
                                    placeholder="Your name (optional)"
                                />
                            </div>
                            <div class="col-md-6">
                                <div class="form-check mt-md-4">
                                    <input
                                        class="form-check-input"
                                        type="checkbox"
                                        id="suggestEditAnonymous"
                                        name="isAnonymous"
                                    />
                                    <label class="form-check-label" for="suggestEditAnonymous">
                                        <i class="fa fa-eye-slash me-1"></i> Submit anonymously
                                    </label>
                                    <small class="d-block text-muted mt-1">
                                        Your name will be hidden, but {{ store.typeNum|upper }} - {{ store.city|default('your store') }} will still be shown.
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="suggestEditContent">Suggested Content: <span class="text-danger">*</span></label>
                        <div id="suggestEditEditor"></div>
                    </div>

                    <div class="mb-3">
                        <label for="suggestEditNote">What are you changing? <span class="text-danger">*</span></label>
                        <textarea
                            class="form-control"
                            rows="3"
                            id="suggestEditNote"
                            name="note"
                            placeholder="Briefly explain your changes (e.g., 'Fixed typo in step 3', 'Added missing information about X', etc.)"
                            required
                        ></textarea>
                        <small class="text-muted">This helps our team understand and review your suggestion faster.</small>
                    </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" id="submitSuggestEditBtn">
                        <i class="fa fa-paper-plane"></i> Submit Suggestion
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
    #suggestEditModal .modal-dialog {
        max-width: 900px;
    }

    #suggestEditEditor {
        border: 1px solid #ddd;
        border-radius: 4px;
        min-height: 400px;
    }

    #suggestEditModal .alert-info {
        margin-bottom: 20px;
        border-left: 4px solid #5bc0de;
    }
</style>

<script>
(function() {
    var editor = null;
    var articleId = {{ article.id }};
    var typeNum = '{{ typeNum }}';
    var csrfToken = $('meta[name="csrf_token"]').attr('content');

    // Get content from hidden textarea (safer for escaping special characters)
    function getOriginalContent() {
        var textarea = document.getElementById('suggestEditOriginalContent');
        return textarea ? textarea.value : '';
    }

    // Initialize TOAST UI Editor when modal is shown
    $('#suggestEditModal').on('shown.bs.modal', function() {
        if (editor) return; // Already initialized

        // Check if TOAST UI Editor is loaded
        if (typeof toastui === 'undefined' || !toastui.Editor) {
            console.error('TOAST UI Editor not loaded');
            alert('Editor failed to load. Please refresh the page and try again.');
            return;
        }

        var originalContent = getOriginalContent();
        editor = new toastui.Editor({
            el: document.querySelector('#suggestEditEditor'),
            height: '400px',
            initialEditType: 'wysiwyg',
            previewStyle: 'vertical',
            initialValue: originalContent,
            usageStatistics: false,
            toolbarItems: [
                ['heading', 'bold', 'italic', 'strike'],
                ['hr', 'quote'],
                ['ul', 'ol', 'task', 'indent', 'outdent'],
                ['table', 'link'],
                ['code', 'codeblock']
            ]
        });
    });

    // Clean up editor when modal is hidden
    $('#suggestEditModal').on('hidden.bs.modal', function() {
        if (editor) {
            editor.destroy();
            editor = null;
        }
        $('#suggestEditForm')[0].reset();
    });

    // Handle form submission
    $('#suggestEditForm').on('submit', function(e) {
        e.preventDefault();

        if (!editor) {
            alert('Editor not initialized. Please try again.');
            return;
        }

        var suggestedContent = editor.getMarkdown();
        var note = $('#suggestEditNote').val().trim();
        var originalContent = getOriginalContent();

        if (!suggestedContent || suggestedContent === originalContent) {
            if (typeof swal === 'function') {
                swal('Error', 'Please make some changes to the content before submitting.', 'error');
            } else {
                alert('Please make some changes to the content before submitting.');
            }
            return;
        }

        if (!note) {
            if (typeof swal === 'function') {
                swal('Error', 'Please explain what you are changing.', 'error');
            } else {
                alert('Please explain what you are changing.');
            }
            return;
        }

        var $btn = $('#submitSuggestEditBtn');
        var originalText = $btn.html();
        $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Submitting...');

        // Gather identity fields
        var submitterName = $('#suggestEditName').val().trim();
        var isAnonymous = $('#suggestEditAnonymous').is(':checked');

        $.ajax({
            type: 'POST',
            url: '/api/' + typeNum + '/support/articles/' + articleId + '/suggest-edit',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-Token': csrfToken
            },
            data: JSON.stringify({
                suggestion: suggestedContent,
                notes: note,
                name: submitterName,
                isAnonymous: isAnonymous
            }),
            xhrFields: {
                withCredentials: true
            },
            success: function(response) {
                $('#suggestEditModal').modal('hide');

                if (typeof swal === 'function') {
                    swal('Success!', 'Thank you for your suggestion! Our team will review it shortly.', 'success');
                } else {
                    alert('Thank you for your suggestion! Our team will review it shortly.');
                }

                $('#suggestEditForm')[0].reset();
            },
            error: function(xhr, status, error) {
                console.error('Suggestion submission failed:', error);

                var errorMsg = 'Failed to submit suggestion. Please try again.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMsg = xhr.responseJSON.message;
                }

                if (typeof swal === 'function') {
                    swal('Error', errorMsg, 'error');
                } else {
                    alert(errorMsg);
                }

                $btn.prop('disabled', false).html(originalText);
            }
        });
    });
})();
</script>