document.addEventListener('DOMContentLoaded', (event) => {
    const socket = io();
    socket.emit('join', { username: username });

    document.title = `${friendUsername}`;

    const messagesList = document.getElementById('messages');
    const imageOverlay = document.getElementById('image-overlay');
    const overlayImage = document.getElementById('overlay-image');
    let previousSender = null;
    let previousTimestamp = 0;

    function checkFriendRequests() {
        const friendRequestsList = document.getElementById('friend-requests');
        const friendRequestsSection = document.getElementById('friend-requests-section');
        if (friendRequestsList && friendRequestsSection) {
            if (friendRequestsList.children.length === 0) {
                friendRequestsSection.style.display = 'none';
            } else {
                friendRequestsSection.style.display = 'block';
            }
        }
    }

    checkFriendRequests();

    socket.on('new_message', function (data) {
        const currentTimestamp = new Date(data.timestamp).getTime();
        const showUsername = previousSender !== data.sender || shouldShowUsername(previousTimestamp, currentTimestamp);
        previousSender = data.sender;
        previousTimestamp = currentTimestamp;

        const profilePicUrl = data.sender_profile_picture ? `${data.sender_profile_picture}` : 'default_profile_picture.png';
        appendMessage(messagesList, data, showUsername, profilePicUrl);
    });

    if (friendId) {
        fetch(`/get_messages/${friendId}`)
            .then(response => response.json())
            .then(data => {
                messagesList.innerHTML = '';
                document.getElementById('chat-with').textContent = `${friendUsername}`;
                document.getElementById('send-message-form').dataset.receiver = friendId;

                data.messages.forEach((msg, index, messages) => {
                    const currentTimestamp = new Date(msg.timestamp).getTime();
                    const previousMessage = messages[index - 1];
                    const previousTimestamp = previousMessage ? new Date(previousMessage.timestamp).getTime() : 0;
                    const showUsername = index === 0 || msg.sender !== previousMessage.sender || shouldShowUsername(previousTimestamp, currentTimestamp);

                    const profilePicUrl = msg.sender_profile_picture ? `${msg.sender_profile_picture}` : 'default_profile_picture.png';
                    appendMessage(messagesList, msg, showUsername, profilePicUrl);
                });

                scrollToBottom(messagesList);
            })
            .catch(error => console.error('Error fetching messages:', error));
    }

    const sendMessageForm = document.querySelector('.send-message-form');
    if (sendMessageForm) {
        sendMessageForm.addEventListener('submit', function (event) {
            event.preventDefault();
            const receiver = this.dataset.receiver;
            const contentInput = this.querySelector('input[name="content"]');
            const fileInput = this.querySelector('input[name="file"]');
            const content = contentInput.value;
            const timestamp = new Date().toISOString().slice(0, 19).replace('T', ' ');
            const imagePreview = document.querySelector('.file-preview-image');
            const videoPreview = document.querySelector('.file-preview-video');
            const filenamePreview = document.querySelector('.file-preview-filename');

            if (content || fileInput.files.length > 0) {
                const formData = new FormData();
                formData.append('content', content);
                formData.append('timestamp', timestamp);
                if (fileInput.files[0]) {
                    formData.append('file', fileInput.files[0]);
                }

                fetch(`/send_message/${receiver}`, {
                    method: 'POST',
                    body: formData
                }).then(response => response.json())
                    .then(data => {
                        if (data.status === 'Message sent') {
                            contentInput.value = '';
                            fileInput.value = '';
                            document.querySelector('.file-preview').style.display = 'none';
                            document.querySelector('.file-preview img').src = '';
                            document.querySelector('.file-preview video').style.display = 'none';
                            document.querySelector('.file-preview video').src = '';
                            document.querySelector('.file-preview .file-preview-filename').style.display = 'none';
                            document.querySelector('.file-preview .file-preview-filename').textContent = '';

                            // Append the message immediately for the sender
                            const profilePictureUrl = profilePicture ? `${profilePicture}` : 'default_profile_picture.png';
                            const messageData = {
                                sender: username,
                                content: content,
                                timestamp: timestamp,
                                sender_profile_picture: profilePictureUrl,
                                content_type: fileInput.files.length > 0 ? 'file' : 'text',
                                id: data.message_id
                            };

                            const currentTimestamp = new Date(messageData.timestamp).getTime();
                            const showUsername = previousSender !== username || shouldShowUsername(previousTimestamp, currentTimestamp);
                            previousSender = username;
                            previousTimestamp = currentTimestamp;

                            appendMessage(messagesList, messageData, showUsername, profilePictureUrl);
                        } else {
                            showToast('Message sending failed');
                        }
                    }).catch(error => {
                        showToast('Message sending failed');
                        console.error('Error sending message:', error);
                    });
            }
        });

        document.querySelector('input[name="file"]').addEventListener('change', handleFileInputChange);

        document.querySelector('.remove-file').addEventListener('click', handleRemoveFile);
    }

    document.addEventListener('click', function (event) {
        if (event.target.classList.contains('enhanceable-image')) {
            overlayImage.src = event.target.src;
            imageOverlay.style.display = 'flex';
        }
    });

    imageOverlay.addEventListener('click', function () {
        imageOverlay.style.display = 'none';
    });
});