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

    const addMessage = (role, content) => {
        const messageElement = document.createElement('div');
        messageElement.classList.add('message', role);

        const avatarElement = document.createElement('img');
        avatarElement.classList.add('avatar');
        avatarElement.src = role === 'user' ? 'https://picsum.photos/seed/user-avatar/100/100' : 'https://picsum.photos/seed/companion-avatar/100/100';

        const textElement = document.createElement('div');
        textElement.classList.add('text');
        textElement.textContent = content;

        if (role === 'user') {
            messageElement.appendChild(textElement);
            messageElement.appendChild(avatarElement);
        } else {
            messageElement.appendChild(avatarElement);
            messageElement.appendChild(textElement);
        }

        chatMessages.appendChild(messageElement);
        chatMessages.scrollTop = chatMessages.scrollHeight;
    };

    const sendMessage = async () => {
        const message = messageInput.value.trim();
        if (message === '') return;

        addMessage('user', message);
        messageInput.value = '';

        try {
            const response = await fetch('/api/chat.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ message })
            });

            const data = await response.json();
            addMessage('assistant', data.reply);
        } catch (error) {
            console.error('Error:', error);
            addMessage('assistant', 'Sorry, something went wrong. Please try again later.');
        }
    };

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

    // Initial greeting
    addMessage('assistant', 'Hello! I am your Companion. How can I help you today?');
});