/**
 * Facility status (comments) manager for adding, removing and editing user comments.
 */

// Create a namespace to avoid global scope conflicts with facilityData.js
const CommentsManager = {
    // Initialization states
    state: {
        isInitializing: false,
        isInitialised: false,
        isDomReady: false,
        isAuthReady: false
    },

    /**
     * initialise status functionality
     */
    initialise() {
        if (this.state.isInitialised) return;
        
        console.log('Initializing comments...');
        
        // initialise comment modal handlers
        this.initialiseCommentModals();
        
        // Set up form handlers
        this.setupCommentFormHandlers();
        
        console.log('Comments initialised with auth state:', {
            isAuthenticated: this.isAuthenticated(),
            user: window.auth.getUser()
        });
        
        this.state.isInitialised = true;
    },

    /**
     * Check if initialisation possible
     */
    checkinitialise() {
        if (this.state.isDomReady && this.state.isAuthReady && !this.state.isInitializing) {
            this.state.isInitializing = true;
            this.initialise();
            this.state.isInitializing = false;
        }
    },

    /**
     * Check if user is authenticated
     */
    isAuthenticated() {
        return window.auth && window.auth.isAuthenticated();
    },

    /**
     * initialise comment modals
     */
    initialiseCommentModals() {
        // Status modal (comments view)
        const statusModal = document.getElementById('statusModal');
        if (statusModal) {
            statusModal.addEventListener('show.bs.modal', (event) => {
                // Get facility ID from either the button or the modal's data attribute
                let facilityId;
                
                // First try to get it from the button that triggered the modal
                if (event.relatedTarget) {
                    facilityId = event.relatedTarget.getAttribute('data-facility-id');
                }
                
                // If not found in button, try the modal's data attribute
                if (!facilityId && statusModal.hasAttribute('data-facility-id')) {
                    facilityId = statusModal.getAttribute('data-facility-id');
                }
                
                if (!facilityId) {
                    console.error('No facility ID found for comments');
                    return;
                }

                // Store the facility ID on the modal for later use
                statusModal.setAttribute('data-facility-id', facilityId);

                // Load facility comments
                this.loadFacilityComments(facilityId);
            });
        }

        // Edit comment modal
        const editCommentModal = document.getElementById('editCommentModal');
        if (editCommentModal) {
            editCommentModal.addEventListener('show.bs.modal', (event) => {
                const button = event.relatedTarget;
                const commentId = button.getAttribute('data-comment-id');
                const commentText = button.getAttribute('data-comment-text');
                
                // Set the comment ID and text in the form
                const editForm = document.getElementById('editCommentForm');
                if (editForm) {
                    const commentIdInput = editForm.querySelector('#editCommentId');
                    const commentTextArea = editForm.querySelector('#editCommentText');
                    
                    if (commentIdInput && commentTextArea) {
                        commentIdInput.value = commentId;
                        commentTextArea.value = commentText;
                    }
                }
            });
        }
    },

    /**
     * Set up comment form handlers
     */
    setupCommentFormHandlers() {
        // Comment form handler
        const commentForm = document.getElementById('commentForm');
        if (commentForm) {
            this.setupCommentFormHandler(commentForm);
        }

        // Edit comment form handler
        const editCommentForm = document.getElementById('editCommentForm');
        if (editCommentForm) {
            this.setupEditCommentFormHandler(editCommentForm);
        }
    },

    /**
     * Set up a single comment form handler
     */
    setupCommentFormHandler(commentForm) {
        commentForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            
            // Prevent duplicate submissions
            if (commentForm.submitting) {
                return;
            }
            commentForm.submitting = true;
            
            // Check if user is authenticated
            if (!this.isAuthenticated()) {
                alert('You must be logged in to add comments');
                commentForm.submitting = false;
                return;
            }

            const formData = new FormData(commentForm);
            
            // Get form data and ensure proper types
            const statusComment = formData.get('commentText');
            const facilityId = formData.get('facilityId');
            
            // Validate form data
            if (!facilityId) {
                console.error('No facility ID found in form');
                alert('Error: No facility ID found');
                commentForm.submitting = false;
                return;
            }

            if (!statusComment) {
                alert('Please enter a comment');
                commentForm.submitting = false;
                return;
            }

            try {
                // Use the API client to add a status comment
                const data = await window.api.addFacilityStatus(facilityId.toString(), statusComment);
                
                if (data.success) {
                    // Reset the form
                    commentForm.reset();
                    
                    // Reload comments to show the new one
                    this.loadFacilityComments(facilityId.toString());
                } else {
                    console.error('Comment failed:', data.error);
                    alert(data.error || 'Failed to add comment');
                }
            } catch (error) {
                console.error('Error adding comment:', error);
                alert('Failed to add comment: ' + error.message);
            } finally {
                commentForm.submitting = false;
            }
        });
    },

    /**
     * Set up a single edit comment form handler
     */
    setupEditCommentFormHandler(editCommentForm) {
        editCommentForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            
            // Prevent duplicate submissions
            if (editCommentForm.submitting) {
                return;
            }
            editCommentForm.submitting = true;
            
            // Check if user is authenticated
            if (!this.isAuthenticated()) {
                alert('You must be logged in to edit comments');
                editCommentForm.submitting = false;
                return;
            }

            const formData = new FormData(editCommentForm);
            
            // Get form data
            const commentText = formData.get('editCommentText');
            const commentId = formData.get('commentId');
            const facilityId = document.getElementById('commentFacilityId').value;
            
            console.log('Edit comment form data:', { commentId, facilityId, commentText });

            try {
                console.log('Sending edit comment request...');
                // Use the API client to update a status comment
                const data = await window.api.updateFacilityStatus(commentId, commentText, facilityId);
                
                console.log('Edit comment response:', data);
                
                if (data.success) {
                    console.log('Comment edited successfully');
                    
                    // Close the edit modal
                    const editModal = bootstrap.Modal.getInstance(document.getElementById('editCommentModal'));
                    if (editModal) {
                        editModal.hide();
                    }
                    
                    // Reload comments to show the updated one
                    this.loadFacilityComments(facilityId);
                } else {
                    console.error('Edit comment failed:', data.error);
                    alert(data.error || 'Failed to edit comment');
                }
            } catch (error) {
                console.error('Error editing comment:', error);
                alert('Failed to edit comment: ' + error.message);
            } finally {
                editCommentForm.submitting = false;
            }
        });
    },

    /**
     * Creates a comment form dynamically for authenticated users
     */
    createCommentFormForAuthenticatedUser(facilityId) {
        // First check if auth is available
        if (!window.auth) {
            return `
                <div class="alert alert-warning mb-0">
                    <i class="bi bi-hourglass-split me-2"></i>
                    Loading authentication status...
                </div>
            `;
        }

        // Validate authentication state
        try {
            const token = window.auth.getToken();
            const user = window.auth.getUser();
            const isAuthenticated = window.auth.isAuthenticated();

            if (!isAuthenticated || !token || !user) {
                return `
                    <div class="alert alert-info mb-0">
                        <i class="bi bi-info-circle me-2"></i>
                        Please <a href="#" data-bs-toggle="modal" data-bs-target="#loginModal">login</a> to add comments.
                    </div>
                `;
            }

            // User is authenticated, create the comment form
            return `
                <form id="commentForm" class="mt-3">
                    <input type="hidden" id="commentFacilityId" name="facilityId" value="${this.escapeHtml(facilityId)}">
                    <div class="mb-3">
                        <label for="commentText" class="form-label">Add a Comment</label>
                        <textarea class="form-control" id="commentText" name="commentText" rows="3" required></textarea>
                    </div>
                    <div class="d-flex justify-content-end">
                        <button type="submit" class="btn btn-success">
                            <i class="bi bi-chat-dots-fill me-1"></i>
                            Add Comment
                        </button>
                    </div>
                </form>
            `;
        } catch (error) {
            console.error('Error checking authentication:', error);
            return `
                <div class="alert alert-danger mb-0">
                    <i class="bi bi-exclamation-triangle me-2"></i>
                    Error checking authentication status. Please try refreshing the page.
                </div>
            `;
        }
    },

    /**
     * Loads facility comments from the server
     */
    async loadFacilityComments(facilityId) {
        try {
            if (!facilityId) {
                throw new Error('No facility ID provided');
            }

            // Ensure facilityId is a string
            facilityId = facilityId.toString();
            
            // Show loading indicator
            const commentsContainer = document.getElementById('commentsContainer');
            if (!commentsContainer) {
                throw new Error('Comments container not found');
            }

            commentsContainer.innerHTML = `
                <div class="text-center py-4">
                    <div class="spinner-border text-success" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p class="mt-2 text-muted">Loading comments...</p>
                </div>
            `;
            
            // Use the API client to get facility statuses
            const data = await window.api.getFacilityStatuses(facilityId);
            
            // Validate the response
            if (!data || typeof data !== 'object') {
                throw new Error('Invalid response from server');
            }
            
            if (!data.success) {
                throw new Error(data.error || 'Failed to load comments');
            }
            
            if (!Array.isArray(data.statuses)) {
                throw new Error('Invalid comments data format');
            }
            
            // Render the comments
            this.renderComments(data.statuses, facilityId);
            
        } catch (error) {
            console.error('Error loading comments:', error);
            
            const commentsContainer = document.getElementById('commentsContainer');
            if (commentsContainer) {
                commentsContainer.innerHTML = `
                    <div class="alert alert-danger">
                        <i class="bi bi-exclamation-triangle me-2"></i>
                        ${error.message}
                    </div>
                `;
            }
        }
    },

    /**
     * Renders comments in the comments container
     */
    renderComments(comments, facilityId) {
        const commentsContainer = document.getElementById('commentsContainer');
        if (!commentsContainer) {
            console.error('Comments container not found');
            return;
        }
        
        // Clear the container
        commentsContainer.innerHTML = '';
        
        // Add the comment form for authenticated users
        commentsContainer.innerHTML = this.createCommentFormForAuthenticatedUser(facilityId);
        
        // Re-initialise the comment form handler immediately after creating the form
        const commentForm = document.getElementById('commentForm');
        if (commentForm) {
            this.setupCommentFormHandler(commentForm);
        }
        
        // If no comments, show a message
        if (!comments || comments.length === 0) {
            const noCommentsDiv = document.createElement('div');
            noCommentsDiv.className = 'alert alert-light mt-3';
            noCommentsDiv.innerHTML = `
                <i class="bi bi-chat-dots me-2"></i>
                No comments yet. Be the first to add a comment!
            `;
            commentsContainer.appendChild(noCommentsDiv);
            return;
        }
        
        // Create the comments list
        const commentsList = document.createElement('div');
        commentsList.className = 'comments-list mt-4';
        
        // Add each comment
        comments.forEach(comment => {
            const commentElement = document.createElement('div');
            commentElement.className = 'comment-item card mb-3 border-0 shadow-sm';
            
            // Check if the current user is the comment author or an admin
            const canEdit = this.isAdmin() || this.isCurrentUser(comment.username);
            
            commentElement.innerHTML = `
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <div class="d-flex align-items-center">
                            <div class="comment-avatar bg-light rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 32px; height: 32px;">
                                <i class="bi bi-person-fill text-secondary"></i>
                            </div>
                            <div>
                                <h6 class="mb-0 fw-bold">${this.escapeHtml(comment.username)}</h6>
                            </div>
                        </div>
                        ${canEdit ? `
                        <div class="dropdown">
                            <button class="btn btn-sm btn-light" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="bi bi-three-dots-vertical"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li>
                                    <button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#editCommentModal" data-comment-id="${comment.id}" data-comment-text="${this.escapeHtml(comment.statusComment)}">
                                        <i class="bi bi-pencil me-2"></i>Edit
                                    </button>
                                </li>
                                <li>
                                    <button class="dropdown-item text-danger" type="button" onclick="CommentsManager.deleteComment('${comment.id}', '${facilityId}')">
                                        <i class="bi bi-trash me-2"></i>Delete
                                    </button>
                                </li>
                            </ul>
                        </div>
                        ` : ''}
                    </div>
                    <p class="mb-0">${this.escapeHtml(comment.statusComment)}</p>
                </div>
            `;
            
            commentsList.appendChild(commentElement);
        });
        
        commentsContainer.appendChild(commentsList);
    },

    /**
     * Deletes a comment
     */
    async deleteComment(commentId, facilityId) {
        // Confirm deletion
        if (!confirm('Are you sure you want to delete this comment?')) {
            return;
        }
        
        try {
            // Use the API client to delete a status comment
            const data = await window.api.deleteFacilityStatus(commentId, facilityId);
            
            if (data.success) {
                // Reload comments to reflect the deletion
                this.loadFacilityComments(facilityId);
            } else {
                console.error('Delete comment failed:', data.error);
                alert(data.error || 'Failed to delete comment');
            }
        } catch (error) {
            console.error('Error deleting comment:', error);
            alert('Failed to delete comment: ' + error.message);
        }
    },

    /**
     * Checks if the current user is an admin
     */
    isAdmin() {
        return window.auth && window.auth.isAdmin();
    },

    /**
     * Checks if the given username matches the current user
     */
    isCurrentUser(username) {
        const user = window.auth && window.auth.getUser();
        return user && user.username === username;
    },

    /**
     * Safely escapes HTML special characters to prevent XSS attacks
     */
    escapeHtml(unsafe) {
        if (unsafe === null || unsafe === undefined) {
            return '';
        }
        return unsafe
            .toString()
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;");
    }
};

// Listen for DOM ready
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => {
        CommentsManager.state.isDomReady = true;
        CommentsManager.checkinitialise();
    });
} else {
    CommentsManager.state.isDomReady = true;
    CommentsManager.checkinitialise();
}

// Listen for auth ready
if (window.auth) {
    CommentsManager.state.isAuthReady = true;
    CommentsManager.checkinitialise();
} else {
    window.addEventListener('authReady', () => {
        console.log('auth is now ready');
        CommentsManager.state.isAuthReady = true;
        CommentsManager.checkinitialise();
    });
    
    // Fallback timeout in case the event doesn't fire
    setTimeout(() => {
        if (!CommentsManager.state.isAuthReady && window.auth) {
            console.log('auth found via timeout check');
            CommentsManager.state.isAuthReady = true;
            CommentsManager.checkinitialise();
        }
    }, 1000);
}

// Export the CommentsManager to the window
window.CommentsManager = CommentsManager;