document.addEventListener('DOMContentLoaded', () => {
    const startChatBtn = document.getElementById('startChatBtn');
    const chatContainer = document.getElementById('chatContainer');
    const chatBox = document.getElementById('chatBox');
    const chatForm = document.getElementById('chatForm');
    const chatInput = document.getElementById('chatInput');

    // Conversation context
    let conversationState = 'initial'; // 'initial', 'asked_day', 'asked_profession', 'done'
    let userDay = '';
    let userProfession = '';

    if (startChatBtn) {
        startChatBtn.addEventListener('click', () => {
            chatContainer.scrollIntoView({ behavior: 'smooth' });
            if (conversationState === 'initial') {
                setTimeout(() => {
                    addAiMessage('Hello there! How was your day?');
                    conversationState = 'asked_day';
                }, 500);
            }
        });
    }

    chatForm.addEventListener('submit', (e) => {
        e.preventDefault();
        const userMessage = chatInput.value.trim();
        if (userMessage) {
            addUserMessage(userMessage);
            chatInput.value = '';
            handleConversation(userMessage);
        }
    });

    function handleConversation(userMessage) {
        if (conversationState === 'asked_day') {
            userDay = userMessage;
            addAiMessage('Interesting! And what is your profession?');
            conversationState = 'asked_profession';
        } else if (conversationState === 'asked_profession') {
            userProfession = userMessage;
            conversationState = 'done';
            getAiResponse();
        }
    }
    
    function getAiResponse() {
        addAiMessage('Thinking of something funny...', 'typing');
        const formData = new FormData();
        formData.append('day', userDay);
        formData.append('profession', userProfession);

        fetch('api/chat.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            removeTypingIndicator();
            if (data.success) {
                addAiMeme(data.message, data.meme.src, data.meme.photographer);
                addMoreButton();
            } else {
                addAiMessage('Oops, my wires are crossed. Please try again!');
            }
        })
        .catch(error => {
            removeTypingIndicator();
            console.error('Error:', error);
            addAiMessage('I seem to have lost my train of thought. Could you try again?');
        });
    }
    
    function addMoreButton() {
        const moreButton = document.createElement('button');
        moreButton.textContent = 'Another one!';
        moreButton.className = 'btn btn-secondary btn-sm mt-2';
        moreButton.onclick = () => {
            moreButton.remove();
            getAiResponse();
        };
        chatBox.appendChild(moreButton);
        chatBox.scrollTop = chatBox.scrollHeight;
    }

    function addUserMessage(message) {
        const bubble = document.createElement('div');
        bubble.className = 'chat-bubble user';
        bubble.textContent = message;
        chatBox.appendChild(bubble);
        chatBox.scrollTop = chatBox.scrollHeight;
    }

    function addAiMessage(message, id = null) {
        const bubble = document.createElement('div');
        bubble.className = 'chat-bubble ai';
        if (id) bubble.id = id;
        bubble.textContent = message;
        chatBox.appendChild(bubble);
        chatBox.scrollTop = chatBox.scrollHeight;
    }
    
    function removeTypingIndicator() {
        const typingBubble = document.getElementById('typing');
        if (typingBubble) {
            typingBubble.remove();
        }
    }

    function addAiMeme(text, imageUrl, photographer) {
        const bubble = document.createElement('div');
        bubble.className = 'chat-bubble ai';
        
        const textElement = document.createElement('p');
        textElement.textContent = text;
        bubble.appendChild(textElement);

        const memeElement = document.createElement('img');
        memeElement.src = imageUrl;
        memeElement.className = 'meme';
        memeElement.alt = `Meme for ${userProfession}`;
        bubble.appendChild(memeElement);
        
        const credit = document.createElement('p');
        credit.className = 'text-muted small mt-2';
        credit.innerHTML = `Photo by ${photographer} on Pexels`;
        bubble.appendChild(credit);

        chatBox.appendChild(bubble);
        chatBox.scrollTop = chatBox.scrollHeight;
    }
});