document.addEventListener('DOMContentLoaded', (event) => {
    const chatMessages = document.getElementById('chat-messages');
    const userInput = document.getElementById('user-input');
    const sendButton = document.getElementById('send-button');

    function addMessage(message, isUser = false) {
        const messageElement = document.createElement('p');
        messageElement.textContent = message;
        messageElement.style.backgroundColor = isUser ? '#e6f2ff' : '#f0f0f0';
        messageElement.style.padding = '10px';
        messageElement.style.borderRadius = '5px';
        messageElement.style.marginBottom = '10px';
        chatMessages.appendChild(messageElement);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    function sendMessage() {
        const message = userInput.value.trim();
        if (message) {
            addMessage(You: ${message}, true);
            userInput.value = '';

            fetch('/chatbot', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ text: message }),
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    addMessage(Error: ${data.error});
                } else {
                    addMessage(Chatbot: ${data.response});
                }
            })
            .catch((error) => {
                console.error('Error:', error);
                addMessage('Error: Unable to get response from the server.');
            });
        }
    }

    sendButton.addEventListener('click', sendMessage);
    userInput.addEventListener('keypress', function (e) {
        if (e.key === 'Enter') {
            sendMessage();
        }
    });
});