document.addEventListener('DOMContentLoaded', function() {
    const chatForm = document.getElementById('chat-form');
    const messageInput = document.getElementById('message-input');
    const userSearchForm = document.getElementById('user-search-form');
    const userSearchInput = document.getElementById('user-search-input');
    const searchResultsContainer = document.getElementById('search-results');
    const conversationListContainer = document.getElementById('conversation-list-container');
    const chatBody = document.querySelector('.chat-body');
    const chatHeaderName = document.querySelector('.chat-header .name');
    const chatHeaderStatus = document.querySelector('.chat-header .status');

    let currentConversationId = null;

    if (chatForm) {
        chatForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const message = messageInput.value.trim();
            if (message && currentConversationId) {
                sendMessage(currentConversationId, message);
            }
        });
    }

    if (userSearchForm) {
        userSearchForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const searchTerm = userSearchInput.value.trim();
            if (searchTerm) {
                searchUsers(searchTerm);
            }
        });
    }

    function searchUsers(term) {
        fetch(`api.php?action=search_users&term=${term}`)
            .then(response => response.json())
            .then(users => {
                displaySearchResults(users);
            })
            .catch(error => console.error('Error searching users:', error));
    }

    function displaySearchResults(users) {
        searchResultsContainer.innerHTML = '';
        if (users.length === 0) {
            searchResultsContainer.innerHTML = '<p class="text-center text-muted p-4">No users found.</p>';
            return;
        }

        users.forEach(user => {
            const userElement = document.createElement('div');
            userElement.classList.add('conversation-item');
            userElement.dataset.userId = user.id;
            userElement.innerHTML = `
                <div class="avatar-placeholder me-3">
                    <i class="bi bi-person-fill"></i>
                </div>
                <div class="conversation-info">
                    <h6 class="name mb-0">${user.username}</h6>
                </div>
            `;
            userElement.addEventListener('click', () => {
                startConversation(user.id);
            });
            searchResultsContainer.appendChild(userElement);
        });
    }

    function startConversation(recipientId) {
        const formData = new FormData();
        formData.append('recipient_id', recipientId);

        fetch('api.php?action=start_conversation', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.conversation_id) {
                loadMessages(data.conversation_id);
                userSearchInput.value = '';
                searchResultsContainer.innerHTML = '';
                loadConversations();
            } else {
                console.error('Failed to start conversation:', data.error);
            }
        })
        .catch(error => console.error('Error starting conversation:', error));
    }

    function loadConversations() {
        fetch('api.php?action=get_conversations')
            .then(response => response.json())
            .then(conversations => {
                displayConversations(conversations);
            })
            .catch(error => console.error('Error loading conversations:', error));
    }

    function displayConversations(conversations) {
        conversationListContainer.innerHTML = '';
        if (conversations.length === 0) {
            conversationListContainer.innerHTML = '<p class="text-center text-muted p-4">No conversations yet.</p>';
            return;
        }

        conversations.forEach(conversation => {
            const conversationElement = document.createElement('div');
            conversationElement.classList.add('conversation-item');
            conversationElement.dataset.conversationId = conversation.id;
            conversationElement.dataset.recipientId = conversation.user_id;
            conversationElement.innerHTML = `
                <div class="avatar-placeholder me-3">
                    <i class="bi bi-person-fill"></i>
                </div>
                <div class="conversation-info">
                    <h6 class="name mb-0">${conversation.username}</h6>
                </div>
            `;
            conversationElement.addEventListener('click', () => {
                loadMessages(conversation.id, conversation.username);
            });
            conversationListContainer.appendChild(conversationElement);
        });
    }

    function loadMessages(conversationId, username) {
        currentConversationId = conversationId;
        chatHeaderName.textContent = username;
        chatHeaderStatus.textContent = 'Online'; // Placeholder

        fetch(`api.php?action=get_messages&conversation_id=${conversationId}`)
            .then(response => response.json())
            .then(messages => {
                displayMessages(messages);
            })
            .catch(error => console.error('Error loading messages:', error));
    }

    function displayMessages(messages) {
        chatBody.innerHTML = '';
        if (messages.length === 0) {
            chatBody.innerHTML = '<div class="text-center text-muted" style="margin-top: auto; margin-bottom: auto;"><p>No messages yet. Say hi!</p></div>';
            return;
        }

        messages.forEach(message => {
            const messageElement = document.createElement('div');
            const isSent = message.sender_id == window.userId;
            messageElement.classList.add('message', isSent ? 'sent' : 'received');
            messageElement.innerHTML = `
                <div class="message-bubble">${message.message_text}</div>
                <div class="message-time">${new Date(message.created_at).toLocaleTimeString()}</div>
            `;
            chatBody.appendChild(messageElement);
        });
        chatBody.scrollTop = chatBody.scrollHeight;
    }

    function sendMessage(conversationId, messageText) {
        const formData = new FormData();
        formData.append('conversation_id', conversationId);
        formData.append('message_text', messageText);

        fetch('api.php?action=send_message', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                messageInput.value = '';
                // Add message to UI immediately
                const messageElement = document.createElement('div');
                messageElement.classList.add('message', 'sent');
                messageElement.innerHTML = `
                    <div class="message-bubble">${messageText}</div>
                    <div class="message-time">Just now</div>
                `;
                chatBody.appendChild(messageElement);
                chatBody.scrollTop = chatBody.scrollHeight;
            } else {
                console.error('Failed to send message:', data.error);
            }
        })
        .catch(error => console.error('Error sending message:', error));
    }

    // Load conversations on page load
    loadConversations();
});