document.addEventListener('DOMContentLoaded', function() {
    try {
        const postId = document.querySelector('input[name="post-id"]').value;
        loadComments(postId);
        
        // Attach submit event listener to the form
        const form = document.getElementById('comment-form');
        if (!form) {
            throw new Error('Comment form not found');
        }
        form.addEventListener('submit', submitComment);
        console.log('Comment form submit listener attached');
    } catch (error) {
        console.error('Error initializing comments:', error);
    }

    // Add event delegation for reply buttons
    document.getElementById('comments-list').addEventListener('click', function(e) {
        if (e.target.classList.contains('reply-btn')) {
            const parentId = e.target.dataset.commentId;
            document.querySelector('input[name="parent-id"]').value = parentId;
            document.getElementById('comment-form').scrollIntoView();
            
            // Get parent comment content
            const parentComment = e.target.closest('.comment');
            const parentContent = parentComment.querySelector('.comment-text').textContent;
            const parentName = parentComment.querySelector('strong').textContent;
            
            // Format and display ancestry content
            const commentBox = document.querySelector('textarea[name="comment"]');
            commentBox.value = `> ${parentName}: ${parentContent}\n\n`;
        }
    });
});

function loadComments(postId) {
    fetch(`/get_comments/${postId}`)
            .then(response => response.json())
            .then(comments => {
                const commentListDiv = document.getElementById('comments-list');
                commentListDiv.innerHTML = ''; // Clear existing comments
                renderComments(comments, commentListDiv);
                if (typeof renderMathInElement === 'function') {
                    renderMathInElement(commentListDiv, {
                        delimiters: [
                            {left: '$$', right: '$$', display: true},
                            {left: '$', right: '$', display: false}
                        ]
                    });
                }
            })
            .catch(error => {
                console.error('Error loading comments:', error);
                document.getElementById('comments-list').innerHTML = '<p>Error loading comments. Please try again later.</p>';
            });
}

function renderComments(comments, container, level = 0) {
    comments.forEach(comment => {
        const commentDiv = document.createElement('div');
        commentDiv.className = `comment level-${level}`;
        commentDiv.setAttribute('data-level', level);
        commentDiv.innerHTML = `
            <p>
                <strong>${comment.name}</strong>
                <span class="separator">•</span>
                <small class="timestamp">${new Date(comment.created_at).toLocaleString()}</small>
                <br>
                <span class="comment-text">${comment.comment}</span>
                <button class="reply-btn" data-comment-id="${comment.id}">Reply</button>
            </p>`;
        commentDiv.style.marginLeft = `${level * 40}px`;
        container.appendChild(commentDiv);

        // Render child comments if they exist
        if (comment.replies && comment.replies.length > 0) {
            renderComments(comment.replies, container, level + 1);
        }
    });
}

// Intercept fetch requests to prevent get_config calls
const originalFetch = window.fetch;
window.fetch = function(url, options) {
    if (typeof url === 'string' && url.includes('/get_config')) {
        return Promise.reject(new Error('get_config requests are blocked'));
    }
    return originalFetch(url, options);
};

function submitComment(event) {
    console.log('Submit comment triggered');
    event.preventDefault();
    const form = document.getElementById('comment-form');
    if (!form) {
        console.error('Comment form not found');
        return;
    }
    console.log('Form found, creating FormData');
    const formData = new FormData(form);
    const postId = document.querySelector('input[name="post-id"]').value;
    const parentId = document.querySelector('input[name="parent-id"]').value;
    console.log('Form data prepared:', { postId, parentId });
    
    // Remove citation lines matching "> Author: Content" pattern
    const commentText = formData.get('comment');
    const cleanedComment = commentText.split('\n')
        .filter(line => !/^\s*> [^:]+: .+$/.test(line))
        .join('\n')
        .trim();
    formData.set('comment', cleanedComment);
    
    if (parentId) {
        formData.append('parent_id', parentId);
    }
    
    fetch('/submit_comment', {
            method: 'POST',
            body: formData
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Failed to submit comment');
            }
            return response.json();
        })
        .then(newComment => {
            loadComments(postId); // Reload all comments to show the new nested structure
            form.reset(); // Clear the form
            document.querySelector('input[name="parent-id"]').value = ''; // Clear parent ID
        })
        .catch(error => {
            console.error('Error submitting comment:', error);
            alert('Failed to submit comment. Please try again.');
        });
}