document.addEventListener('DOMContentLoaded', function () {
    const sendBtn = document.getElementById('chat-send-btn');
    const chatInput = document.getElementById('chat-input');
    const chatBody = document.getElementById('chat-body');
    const chatGreeting = document.querySelector('.chat-greeting');

    const appendMessage = (text, sender) => {
        // Remove greeting if it exists
        if (chatGreeting && chatGreeting.parentElement === chatBody) {
            chatBody.removeChild(chatGreeting);
        }

        const messageDiv = document.createElement('div');
        messageDiv.classList.add('chat-message', `message-${sender}`);

        const avatarDiv = document.createElement('div');
        avatarDiv.classList.add('avatar');

        if (sender === 'bot') {
            // Simple bot icon
            avatarDiv.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM8.5 12.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm7 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM12 16c-2.33 0-4.32-1.45-5.12-3.5h10.24c-.8 2.05-2.79 3.5-5.12 3.5z"/></svg>';
        } else {
            avatarDiv.textContent = 'U'; // Simple text avatar for user
        }

        const contentDiv = document.createElement('div');
        contentDiv.classList.add('message-content');
        contentDiv.textContent = text;

        messageDiv.appendChild(avatarDiv);
        messageDiv.appendChild(contentDiv);

        chatBody.appendChild(messageDiv);
        chatBody.scrollTop = chatBody.scrollHeight;
    };

    const handleUserMessage = () => {
        const messageText = chatInput.value.trim();
        if (messageText === '') return;

        appendMessage(messageText, 'user');
        chatInput.value = '';

        // Simulate bot response
        setTimeout(() => {
            appendMessage('...', 'bot');
        }, 500);

        setTimeout(() => {
            // remove the ... message
            if(chatBody.lastChild.textContent.includes('...')){
                chatBody.lastChild.remove();
            }
            appendMessage('This is a placeholder response. The backend is not yet connected.', 'bot');
        }, 1500);
    };

    sendBtn.addEventListener('click', handleUserMessage);
    chatInput.addEventListener('keypress', function (e) {
        if (e.key === 'Enter') {
            handleUserMessage();
        }
    });
});