{% extends 'base.html.twig' %}

{% block title %}ChatGPT Integration{% endblock %}

{% block body %}
<div class="container mx-auto p-4 max-w-4xl">
    <h1 class="text-3xl font-bold mb-6 text-gray-800">ChatGPT Integration</h1>
    
    <div id="chat-container" class="bg-white rounded-lg shadow-md p-4 mb-4 min-h-80 max-h-96 overflow-y-auto flex flex-col">
        <div id="chat-messages" class="flex-grow">
            <div class="message system p-3 mb-3 bg-gray-100 rounded-lg">
                <p>Hello! How can I help you today?</p>
            </div>
        </div>
    </div>
    
    <div class="flex mt-4">
        <input 
            type="text" 
            id="user-input" 
            class="flex-grow px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500" 
            placeholder="Type your message..."
        >
        <button 
            id="send-button" 
            class="bg-blue-500 text-white px-6 py-2 rounded-r-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
        >
            Send
        </button>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const chatMessages = document.getElementById('chat-messages');
        const userInput = document.getElementById('user-input');
        const sendButton = document.getElementById('send-button');
        let conversation = [];

        function addMessage(content, role) {
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${role} p-3 mb-3 rounded-lg ${role === 'user' ? 'bg-blue-100 ml-12' : 'bg-gray-100 mr-12'}`;
            
            const messagePara = document.createElement('p');
            messagePara.textContent = content;
            
            messageDiv.appendChild(messagePara);
            chatMessages.appendChild(messageDiv);
            
            // Scroll to bottom
            const chatContainer = document.getElementById('chat-container');
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }

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

            // Add user message to chat
            addMessage(message, 'user');
            
            // Clear input
            userInput.value = '';
            
            // Show loading indicator
            const loadingDiv = document.createElement('div');
            loadingDiv.className = 'message assistant p-3 mb-3 bg-gray-100 rounded-lg mr-12';
            loadingDiv.innerHTML = '<p>Thinking...</p>';
            chatMessages.appendChild(loadingDiv);
            
            // Send to API
            fetch('/api/chat', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    message: message,
                    conversation: conversation
                })
            })
            .then(response => response.json())
            .then(data => {
                // Remove loading indicator
                chatMessages.removeChild(loadingDiv);
                
                if (data.error) {
                    // Show error
                    addMessage('Error: ' + data.error, 'system');
                } else {
                    // Show response
                    addMessage(data.response, 'assistant');
                    // Update conversation history
                    conversation = data.conversation;
                }
            })
            .catch(error => {
                // Remove loading indicator
                chatMessages.removeChild(loadingDiv);
                
                // Show error
                addMessage('Error communicating with the server. Please try again.', 'system');
                console.error('Error:', error);
            });
        }

        // Event listeners
        sendButton.addEventListener('click', sendMessage);
        
        userInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
    });
</script>
{% endblock %}