document.addEventListener('DOMContentLoaded', (event) => {
    const socket = io();

    socket.on('user_online', function(data) {
        const username = data.username;
        const friendElement = document.querySelector(`[data-username="${username}"]`);
        if (friendElement) {
            friendElement.querySelector('.status-indicator').classList.remove('offline');
            friendElement.querySelector('.status-indicator').classList.add('online');
        }
    });

    socket.on('user_offline', function(data) {
        const username = data.username;
        const friendElement = document.querySelector(`[data-username="${username}"]`);
        if (friendElement) {
            friendElement.querySelector('.status-indicator').classList.remove('online');
            friendElement.querySelector('.status-indicator').classList.add('offline');
        }
    });

    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();

    const acceptButtons = document.querySelectorAll('.accept-friend-request');
    const rejectButtons = document.querySelectorAll('.reject-friend-request');

    acceptButtons.forEach(button => {
        button.addEventListener('click', function() {
            const requestId = this.dataset.requestId;
            fetch(`/accept_friend/${requestId}`, { method: 'POST' })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'Friend request accepted') {
                        this.closest('.friend-request').remove();
                        checkFriendRequests();
                    }
                });
        });
    });

    rejectButtons.forEach(button => {
        button.addEventListener('click', function() {
            const requestId = this.dataset.requestId;
            fetch(`/reject_friend/${requestId}`, { method: 'POST' })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'Friend request rejected') {
                        this.closest('.friend-request').remove();
                        checkFriendRequests();
                    }
                });
        });
    });

    const addFriendForm = document.getElementById('add-friend-form');
    if (addFriendForm) {
        addFriendForm.addEventListener('submit', function(event) {
            event.preventDefault();
            const formData = new FormData(addFriendForm);
            fetch('/add_friend', {
                method: 'POST',
                body: formData
            }).then(response => response.json())
              .then(data => {
                  if (data.status === 'Friend request sent') {
                      alert('Friend request sent');
                  } else {
                      alert('Failed to send friend request');
                  }
              });
        });
    }
});