const chatContainer = document.getElementById('chat-container');
const userInput = document.getElementById('user-input');
const sendButton = document.getElementById('send-button');
const clearChatButton = document.getElementById('clear-chat');

// Define the avatar URLs
const userAvatar = 'https://aws.hawaii-guide.com/files/images/user-50px.png';
const botAvatar = 'https://aws.hawaii-guide.com/images/made/john-victoria-derrick-hawaii_815_800_s.png';

// Load messages from local storage on page load
document.addEventListener('DOMContentLoaded', loadMessages);

// Add event listener for the clear chat button
clearChatButton.addEventListener('click', clearChatHistory);

// Add event listener for the send button
sendButton.addEventListener('click', () => sendMessage({ key: 'Enter' }));

function sendMessage(event) {
    if (event.key === 'Enter') {
        const userMessage = userInput.value.trim();
        if (userMessage) {
            addMessage(escapeHTML(userMessage), 'user');
            userInput.value = '';
            showLoadingDots(); // Show loading dots

            // Get the chat history
            const chatHistory = JSON.parse(localStorage.getItem('chatHistory')) || [];
            const messages = chatHistory.map(entry => {
                return { role: entry.sender === 'user' ? 'user' : 'assistant', content: entry.message };
            });

            // Prepend the role definition
            messages.unshift({
                role: 'system',
                content: '{exp:stash:block name="108-chatbox"}You are a helpful Hawaii travel assistant, trained on information at https://www.hawaii-guide.com{/exp:stash:block} You are designed to help plan the perfect Hawaii trip. You will fact-check all information prior to responding. You will say Aloha and Mahalo as necessary.'
            });

            // Add the current message
            messages.push({ role: 'user', content: userMessage });

            fetch('/files/php/gpt-2024-v19.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ messages: messages })
            })
            .then(response => response.json())
            .then(data => {
                removeLoadingDots(); // Remove loading dots
                if (data.reply) {
                    addMessage(data.reply, 'bot', true); // Allow HTML for bot messages
                } else if (data.error) {
                    addMessage(`Error: ${data.error}`, 'bot');
                }
            })
            .catch(error => {
                removeLoadingDots(); // Remove loading dots
                addMessage(`Error: ${error.message}`, 'bot');
            });
        }
    }
}

function addMessage(message, sender, allowHTML = false) {
    const messageElement = document.createElement('div');
    messageElement.classList.add('message', sender);

    const avatarElement = document.createElement('img');
    avatarElement.classList.add('avatar');
    avatarElement.src = sender === 'user' ? userAvatar : botAvatar;

    const textElement = document.createElement('div');
    textElement.classList.add('text');
    if (allowHTML) {
        textElement.innerHTML = marked.parse(message); // Convert Markdown to HTML
    } else {
        textElement.innerText = message;
    }

    messageElement.appendChild(sender === 'user' ? textElement : avatarElement);
    messageElement.appendChild(sender === 'user' ? avatarElement : textElement);

    chatContainer.appendChild(messageElement);
    chatContainer.scrollTop = chatContainer.scrollHeight;

    saveMessageToLocalStorage(message, sender); // Save message to local storage
}

function showLoadingDots() {
    const loadingElement = document.createElement('div');
    loadingElement.classList.add('message', 'bot', 'loading-dots');

    const avatarElement = document.createElement('img');
    avatarElement.classList.add('avatar');
    avatarElement.src = botAvatar;

    const dotsElement = document.createElement('div');
    dotsElement.classList.add('text');
    dotsElement.innerHTML = '<span></span><span></span><span></span>';
    dotsElement.id = 'loading-dots';

    loadingElement.appendChild(avatarElement);
    loadingElement.appendChild(dotsElement);

    chatContainer.appendChild(loadingElement);
    chatContainer.scrollTop = chatContainer.scrollHeight;
}

function removeLoadingDots() {
    const loadingElement = document.getElementById('loading-dots')?.parentElement;
    if (loadingElement) {
        chatContainer.removeChild(loadingElement);
    }
}

function saveMessageToLocalStorage(message, sender) {
    try {
        const chatHistory = JSON.parse(localStorage.getItem('chatHistory')) || [];
        chatHistory.push({ message, sender });
        localStorage.setItem('chatHistory', JSON.stringify(chatHistory));
    } catch (e) {
        console.error('Error saving to local storage', e);
    }
}

function loadMessages() {
    try {
        const chatHistory = JSON.parse(localStorage.getItem('chatHistory')) || [];
        chatHistory.forEach(entry => {
            addMessage(entry.message, entry.sender, entry.sender === 'bot'); // Allow HTML for bot messages
        });
    } catch (e) {
        console.error('Error loading from local storage', e);
    }
}

function clearChatHistory() {
    localStorage.removeItem('chatHistory');
    chatContainer.innerHTML = '';
}

function escapeHTML(str) {
    const div = document.createElement('div');
    div.innerText = str;
    return div.innerHTML;
}