// Get the user input element from the DOM
const chatbox = document.getElementById('chatbox');
const userInput = document.getElementById('userInput');

// Define a function to send the user's message to the AI
function sendMessage() {
  // Get the user's input message and trim any whitespace
    const message = userInput.value.trim();

    // Check if the message is not empty
    if (message !== '') {
        // Send a POST request to the /api/chat endpoint with the message
        fetch('http://localhost:5000/api/chat', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ message }),
        })
        .then(response => response.json())
        .then(data => {
            // Get the AI's response from the API data
            const aiResponse = data.response;

            // Render the user's original message in the chatbox
            renderMessage(message, 'user-message');

            // Render the AI's response in the chatbox
            renderMessage(aiResponse, 'ai-response');

            // Clear the user input field for the next message
            userInput.value = '';
        })
        .catch(error => console.error('Error sending message:', error));
    }
}

// function sendMessage() {
//   const message = userInput.value.trim();
//   if (message !== '') {
//     // Create a new XMLHttpRequest object
//     const xhr = new XMLHttpRequest();

//     // Configure the request
//     xhr.open('POST', 'http://localhost:5000/api/chat'); // Set method to POST and URL
//     xhr.setRequestHeader('Content-Type', 'application/json'); // Essential for sending JSON

//     // Handle response data 
//     xhr.onload = function() {
//       if (xhr.status >= 200 && xhr.status < 300) { // Successful response
//         const data = JSON.parse(xhr.responseText);
//         renderMessage(data.response, 'ai-response');

//       } else {
//         console.error('Request failed. Status:', xhr.status);
//       }
//     };

//     // Send the request
//     xhr.send(JSON.stringify({ message })); 
//   }
// }


// Define a function to render a message in the chatbox with a specific class name
function renderMessage(text, className) {
    // Create a new div element to hold the message
    const messageElement = document.createElement('div');

    // Add the specified class name to the element
    messageElement.className = className;

    // Set the text content of the element to the message text
    messageElement.textContent = text;

    // Append the message element to the chatbox
    chatbox.appendChild(messageElement);
}