const chatMessages = document.getElementById('chat-messages');
const userInput = document.getElementById('user-input');
const sendButton = document.getElementById('send-button');

let conversationHistory = [];
let isProcessing = false;

async function checkServerConnection() {
    const statusDiv = document.getElementById('connection-status');
    try {
        const response = await fetch('http://localhost:5001/');
        if (response.ok) {
            statusDiv.style.display = 'none';
            return true;
        }
    } catch (error) {
        console.error('Server connection error:', error);
        statusDiv.style.display = 'block';
        return false;
    }
}

document.addEventListener('DOMContentLoaded', () => {
    checkServerConnection();
    setInterval(checkServerConnection, 5000);
});

function addMessage(content, isUser = false) {
    const messageDiv = document.createElement('div');
    messageDiv.className = `message ${isUser ? 'user-message' : 'bot-message'}`;
    
    if (!isUser) {
        const hasCodeBlock = content.includes('```');
        if (hasCodeBlock) {
            const blocks = content.split('```');
            blocks.forEach((block, index) => {
                if (index % 2 === 0) {
                    if (block.trim()) {
                        const textDiv = document.createElement('p');
                        textDiv.textContent = block.trim();
                        messageDiv.appendChild(textDiv);
                    }
                } else {
                    const codeContainer = document.createElement('div');
                    codeContainer.className = 'code-block-container';
                    
                    const preBlock = document.createElement('pre');
                    const codeBlock = document.createElement('code');
                    const codeText = block.trim();
                    codeBlock.textContent = codeText;
                    preBlock.appendChild(codeBlock);
                    
                    const copyButton = document.createElement('button');
                    copyButton.className = 'copy-btn';
                    copyButton.textContent = 'Copy';
                    copyButton.addEventListener('click', async () => {
                        try {
                            await navigator.clipboard.writeText(codeText);
                            copyButton.textContent = 'Copied!';
                            setTimeout(() => {
                                copyButton.textContent = 'Copy';
                            }, 2000);
                        } catch (err) {
                            console.error('Failed to copy:', err);
                            // Fallback for older browsers
                            const textarea = document.createElement('textarea');
                            textarea.value = codeText;
                            document.body.appendChild(textarea);
                            textarea.select();
                            document.execCommand('copy');
                            document.body.removeChild(textarea);
                            copyButton.textContent = 'Copied!';
                            setTimeout(() => {
                                copyButton.textContent = 'Copy';
                            }, 2000);
                        }
                    });
                    
                    codeContainer.appendChild(preBlock);
                    codeContainer.appendChild(copyButton);
                    messageDiv.appendChild(codeContainer);
                }
            });
        } else {
            messageDiv.textContent = content;
        }
    } else {
        messageDiv.textContent = content;
    }
    
    chatMessages.appendChild(messageDiv);
    chatMessages.scrollTop = chatMessages.scrollHeight;
}

async function sendMessage() {
    if (isProcessing) return;
    
    const message = userInput.value.trim();
    if (!message) return;

    isProcessing = true;
    sendButton.disabled = true;
    
    addMessage(message, true);
    userInput.value = '';

    conversationHistory.push({"role": "user", "content": message});

    try {
        const response = await fetch('http://your-docker-ip:5001/chat', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                message: message,
                history: conversationHistory
            })
        });

        const data = await response.json();
        
        if (data.error) {
            console.error('API Error:', data.error);
            addMessage('Error: ' + data.error);
            return;
        }
        
        if (!data.response) {
            throw new Error('No response from API');
        }

        addMessage(data.response);
        conversationHistory.push({"role": "assistant", "content": data.response});

    } catch (error) {
        console.error('Error:', error);
        addMessage('Error: ' + error.message);
    } finally {
        isProcessing = false;
        sendButton.disabled = false;
    }
}

// Event listeners
sendButton.addEventListener('click', sendMessage);
userInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        sendMessage();
    }
});

// Focus input on load
userInput.focus();