<%- include('partials/header') %>

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow-lg border-0 chat">
                <div class="card-header bg-primary text-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="mb-0"><i class="fas fa-comments me-2"></i>Chat with EduCat AI</h3>
                        <button type="button" id="clear-chat-btn" class="btn btn-outline-light btn-sm" title="Clear Chat History">
                            <i class="fas fa-trash-alt me-1"></i>Clear
                        </button>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div id="chat-container" class="p-4" style="height: 500px; overflow-y: auto;">
                        <!-- Initial bot message will be added here if no history exists -->
                    </div>
                    <div class="border-top bg-light p-3">
                        <div class="input-group">
                            <input type="text" id="chat-input" class="form-control border-0 bg-white shadow-sm" placeholder="Type your message here..." style="border-radius: 25px 0 0 25px; padding: 12px 20px;">
                            <button type="button" id="send-btn" class="btn btn-primary px-4 border-0" style="border-radius: 0 25px 25px 0;">
                                <i class="fas fa-paper-plane"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row mt-4">
                <div class="col-md-6">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body text-center">
                            <i class="fas fa-question-circle fa-2x text-primary mb-3"></i>
                            <h6>Ask Questions</h6>
                            <p class="text-muted small">Get answers about your study materials</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body text-center">
                            <i class="fas fa-graduation-cap fa-2x text-success mb-3"></i>
                            <h6>Study Help</h6>
                            <p class="text-muted small">Get study tips and techniques</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Get chat history from server-side rendered data
const serverChatHistory = <%- JSON.stringify(chatHistory || []) %>;

document.addEventListener('DOMContentLoaded', function() {
    const chatContainer = document.getElementById('chat-container');
    const chatInput = document.getElementById('chat-input');
    const sendBtn = document.getElementById('send-btn');
    const clearChatBtn = document.getElementById('clear-chat-btn');
    
    // Load existing chat history from server
    loadChatHistory();
    
    sendBtn.addEventListener('click', sendMessage);
    chatInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            sendMessage();
        }
    });
    
    clearChatBtn.addEventListener('click', clearChatHistory);
    
    function loadChatHistory() {
        // Clear the container first
        chatContainer.innerHTML = '';
        
        if (serverChatHistory.length === 0) {
            // Show initial welcome message if no history exists
            addWelcomeMessage();
        } else {
            // Load all previous messages
            serverChatHistory.forEach(conversation => {
                addMessageToChat('user', conversation.human, false);
                addMessageToChat('bot', conversation.ai, false);
            });
        }
        
        chatContainer.scrollTop = chatContainer.scrollHeight;
    }
    
    function addWelcomeMessage() {
        const messageDiv = document.createElement('div');
        messageDiv.className = 'chat-message bot-message mb-3';
        messageDiv.innerHTML = `
            <div class="d-flex align-items-start">
                <div class="avatar bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3 flex-shrink-0" style="width: 45px; height: 45px; min-width: 45px;">
                    <i class="fas fa-cat" style="font-size: 1.2rem;"></i>
                </div>
                <div class="message-content flex-grow-1">
                    <div class="message-bubble bg-light p-3 rounded-3 shadow-sm border">
                        <p class="mb-0">Hello! I'm EduCat AI, your study assistant. I can help you with questions about your notes, study techniques, and academic topics. How can I assist you today?</p>
                    </div>
                    <small class="text-muted d-block mt-1">Just now</small>
                </div>
            </div>
        `;
        chatContainer.appendChild(messageDiv);
    }
    
    function sendMessage() {
        const message = chatInput.value.trim();
        if (!message) return;
        
        // Add user message to chat
        addMessageToChat('user', message);
        chatInput.value = '';
        
        // Add typing indicator
        addTypingIndicator();
        
        // Send message to AI
        sendToAI(message);
    }
    
    function addMessageToChat(sender, message, withScroll = true) {
        const messageDiv = document.createElement('div');
        messageDiv.className = `chat-message ${sender}-message mb-3`;
        
        const time = new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
        
        if (sender === 'user') {
            messageDiv.innerHTML = `
                <div class="d-flex align-items-start justify-content-end">
                    <div class="message-content me-3 flex-grow-1" style="max-width: 70%;">
                        <div class="message-bubble bg-primary text-white p-3 rounded-3 shadow-sm">
                            <p class="mb-0">${message}</p>
                        </div>
                        <small class="text-muted d-block text-end mt-1">${time}</small>
                    </div>
                    <div class="avatar bg-secondary text-white rounded-circle d-flex align-items-center justify-content-center flex-shrink-0" style="width: 45px; height: 45px; min-width: 45px;">
                        <i class="fas fa-user" style="font-size: 1.1rem;"></i>
                    </div>
                </div>
            `;
        } else {
            messageDiv.innerHTML = `
                <div class="d-flex align-items-start">
                    <div class="avatar bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3 flex-shrink-0" style="width: 45px; height: 45px; min-width: 45px;">
                        <i class="fas fa-cat" style="font-size: 1.2rem;"></i>
                    </div>
                    <div class="message-content flex-grow-1" style="max-width: 70%;">
                        <div class="message-bubble bg-light p-3 rounded-3 shadow-sm border">
                            <p class="mb-0">${message}</p>
                        </div>
                        <small class="text-muted d-block mt-1">${time}</small>
                    </div>
                </div>
            `;
        }
        
        chatContainer.appendChild(messageDiv);
        if (withScroll) {
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }
    }
    
    function addTypingIndicator() {
        const typingDiv = document.createElement('div');
        typingDiv.id = 'typing-indicator';
        typingDiv.className = 'chat-message bot-message mb-3';
        typingDiv.innerHTML = `
            <div class="d-flex align-items-start">
                <div class="avatar bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3 flex-shrink-0" style="width: 45px; height: 45px; min-width: 45px;">
                    <i class="fas fa-cat" style="font-size: 1.2rem;"></i>
                </div>
                <div class="message-content flex-grow-1">
                    <div class="message-bubble bg-light p-3 rounded-3 shadow-sm border">
                        <div class="typing-dots">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        chatContainer.appendChild(typingDiv);
        chatContainer.scrollTop = chatContainer.scrollHeight;
    }
    
    function removeTypingIndicator() {
        const typingIndicator = document.getElementById('typing-indicator');
        if (typingIndicator) {
            typingIndicator.remove();
        }
    }
    
    async function sendToAI(message) {
        try {
            const response = await fetch('/api/chat', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    message: message
                })
            });
            
            const result = await response.json();
            
            removeTypingIndicator();
            
            if (result.success) {
                addMessageToChat('bot', result.response);
            } else {
                addMessageToChat('bot', 'Sorry, I encountered an error. Please try again.');
            }
        } catch (error) {
            removeTypingIndicator();
            addMessageToChat('bot', 'Sorry, I\'m having trouble connecting right now. Please try again.');
        }
    }
    
    async function clearChatHistory() {
        if (!confirm('Are you sure you want to clear the chat history? This action cannot be undone.')) {
            return;
        }
        
        try {
            const response = await fetch('/api/chat/history', {
                method: 'DELETE'
            });
            
            const result = await response.json();
            
            if (result.success) {
                // Clear the chat container and show welcome message
                chatContainer.innerHTML = '';
                addWelcomeMessage();
                chatContainer.scrollTop = chatContainer.scrollHeight;
            } else {
                alert('Failed to clear chat history. Please try again.');
            }
        } catch (error) {
            alert('Error clearing chat history. Please try again.');
        }
    }
});
</script>

<%- include('partials/footer') %>
