// Attach the input event listener to the textarea for auto-resizing
document.getElementById('user-input').addEventListener('input', autoResizeTextarea);

async function sendPrompt() {
    const textarea = document.getElementById('user-input');
    const userInput = textarea.value;

    if (userInput.trim() === "") return;

    textarea.value = '';
    textarea.style.height = '55px';
    textarea.focus();

    appendUserMessage(userInput);

    // Add assistant typing animation before making the fetch request
    console.log("Adding assistant typing animation");
    let assistantDiv = appendAssistantMessage();  // This function adds the typing dots
    console.log("Assistant typing animation added");

    // Force a reflow/repaint to ensure the typing animation is visible
    await new Promise(resolve => requestAnimationFrame(resolve));

    try {
        // Start the fetch request
        console.log("Sending fetch request...");
        const response = await fetch('http://127.0.0.1:8000/send_prompt/', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ prompt: userInput })
        });

        console.log("Fetch request sent, awaiting response...");

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const reader = response.body.getReader();
        const decoder = new TextDecoder();

        // Read the streaming response and append it to the assistant message
        while (true) {
            const { done, value } = await reader.read();
            if (done) break;

            const chunk = decoder.decode(value);

            // Remove typing animation (dots) and display the response text
            const typingAnimation = assistantDiv.querySelector('.typing-animation');
            if (typingAnimation) {
                typingAnimation.remove();  // Remove the dots when response starts coming in
            } else {
                console.error("Typing animation element not found in assistantDiv");
            }

            console.log("Response chunk received:", chunk);
            assistantDiv.querySelector('p').textContent += chunk;

            const chatWindow = document.getElementById('chat-container');
            chatWindow.scrollTop = chatWindow.scrollHeight;  // Auto-scroll to bottom
        }
    } catch (error) {
        console.error("Error fetching response:", error);
        assistantDiv.querySelector('p').textContent = "Error getting response. Please try again.";
    }
}

// Function to append user's outgoing message to the chat window
function appendUserMessage(message) {
    const chatWindow = document.getElementById('chat-container');
    const outgoingChat = document.createElement('div');
    outgoingChat.classList.add('message-bubble', 'outgoing');

    outgoingChat.innerHTML = `
        <div class="chat-details">
            <img src="/static/male.bmp" alt="Your Avatar"> <!-- Ensure avatar is added here -->
            <div class="message-content">
                <p>${message}</p>
            </div>
        </div>
    `;

    chatWindow.appendChild(outgoingChat);
    chatWindow.scrollTop = chatWindow.scrollHeight;
}

// Function to add typing animation for the assistant
function appendAssistantMessage() {
    const chatWindow = document.getElementById('chat-container');
    const incomingChat = document.createElement('div');
    incomingChat.classList.add('message-bubble', 'incoming');  // Ensure incoming class is added

    incomingChat.innerHTML = `
        <div class="chat-details">
            <img src="/static/girl.bmp" alt="Her Avatar"> <!-- Ensure avatar is added here -->
            <div class="message-content">
                <p><span class="typing-animation">
                    <span class="typing-dot"></span>
                    <span class="typing-dot"></span>
                    <span class="typing-dot"></span>
                </span></p>
            </div>
        </div>
    `;

    chatWindow.appendChild(incomingChat);
    chatWindow.scrollTop = chatWindow.scrollHeight;

    return incomingChat;
}

// Function to automatically resize the textarea based on content
function autoResizeTextarea() {
    const textarea = document.getElementById('user-input');
    textarea.style.height = 'auto';  // Reset the height first to get the scroll height correctly
    textarea.style.height = textarea.scrollHeight + 'px';  // Adjust height based on content
}

// Attach the input event to trigger resizing when typing
document.getElementById('user-input').addEventListener('input', autoResizeTextarea);

// Handle pressing "Enter" to send the message
function handleKeyPress(event) {
    if (event.key === 'Enter') {
        sendPrompt();
    }
}

// Attach the keypress event listener for Enter key
document.getElementById('user-input').addEventListener('keypress', handleKeyPress);