class Chatbot {
    constructor() {
        this.chatIcon = document.getElementById('chatbot-icon');
        this.chatPopup = document.getElementById('chat-popup');
        this.closeBtn = document.getElementById('close-chat');
        this.chatInput = document.getElementById('chat-input');
        this.chatMessages = document.getElementById('chat-messages');
        this.typingIndicator = document.getElementById('typing-indicator');
        this.sendButton = document.getElementById('sendButton');
        this.messageContainer = document.getElementById('messageContainer');
        this.clearButton = document.getElementById('clearButton');
        this.statusIndicator = document.getElementById('statusIndicator');
        this.statusText = document.getElementById('statusText');
        this.errorAlert = document.getElementById('errorAlert');
        this.isOpen = false;
        this.endpoint = 'http://localhost:8000/agent';
        this.isConnected = true;
        this.init();
    }

    init() {
        this.sendButton.addEventListener('click', () => this.sendMessage());
        this.chatIcon.addEventListener('click', () => this.toggleChat());
        this.closeBtn.addEventListener('click', () => this.closeChat());

        // Enable/disable send button based on input
        this.chatInput.addEventListener('input', () => {
            this.sendButton.disabled = this.chatInput.value.trim() === '';
        });

        // Auto resize textarea
        this.chatInput.addEventListener('input', () => {
            this.chatInput.style.height = 'auto';
            this.chatInput.style.height = (this.chatInput.scrollHeight) + 'px';
        });

        // Close chat when clicking outside
        document.addEventListener('click', (e) => {
            if (!e.target.closest('.chatbot-container') && this.isOpen) {
                this.closeChat();
            }
        });

        
        // Send message on Enter (but allow Shift+Enter for new line)
        this.chatInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                if (!this.sendButton.disabled) {
                    this.sendMessage();
                }
            }
        });
        
    }

    toggleChat() {
        if (this.isOpen) {
            this.closeChat();
        } else {
            this.openChat();
        }
    }

    openChat() {
        this.chatPopup.classList.add('active');
        this.isOpen = true;
        this.chatInput.focus();
        this.scrollToBottom();
    }

    closeChat() {
        this.chatPopup.classList.remove('active');
        this.isOpen = false;
    }

    async sendMessage() {
        // const message = this.chatInput.value.trim();
        let message = document.getElementById('chat-input').value.trim();
        // const message = userInput.value.trim();
        if (message === '') return;
        
        this.addMessage(message, 'user');
        this.chatInput.value = '';

        // Clear input
        this.chatInput.value = '';
        this.chatInput.style.height = 'auto';
        this.sendButton.disabled = true;
        
        // Show typing indicator
        this.showTyping();
        
        try {
            if (this.isConnected) {
                // Send to API endpoint
                const response = await fetch(this.endpoint, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Access-Control-Allow-Origin': '*',
                    },
                    body: JSON.stringify({ prompt: message }),
                    mode: 'cors'
                });
                if (response.ok) {
                    const data = await response.json();
                    // console.log(data.content)
                    this.hideTyping();
                    this.addMessage(data.content || 'No response received', 'bot');
                } else {
                    throw new Error('Server error');
                }
            } else {
                throw new Error('Not connected');
            }
        } catch (error) {
            console.error('Error sending message:', error);
            this.hideTyping();
            
            // Fallback response when API is not available
            let fallbackResponse;
            if (message.toLowerCase().includes('hello') || message.toLowerCase().includes('hi')) {
                fallbackResponse = "Hello there! I'm currently running in **offline mode**. The server connection is not available.";
            } else if (message.toLowerCase().includes('help')) {
                fallbackResponse = "I'm here to help, but I'm currently in **offline mode**. Please check if the server is running on `localhost:8000`.";
            } else if (message.toLowerCase().includes('thank')) {
                fallbackResponse = "You're welcome! Note that I'm currently in **offline mode**.";
            } else {
                fallbackResponse = "I'm currently in **offline mode** and cannot process your request. Please ensure the API server is running on `localhost:8000`.";
            }
            
            this.addMessage(fallbackResponse, 'bot');
            this.isConnected = false;
        }
    }

    addMessage(text, sender) {
        const messageDiv = document.createElement('div');
        messageDiv.className = `message ${sender}`;
        
        const contentDiv = document.createElement('div');
        contentDiv.className = 'message-content';
        contentDiv.textContent = text;
        
        messageDiv.appendChild(contentDiv);
        this.chatMessages.appendChild(messageDiv);
        
        this.scrollToBottom();
    }

    showTyping() {
        this.typingIndicator.classList.add('active');
        this.scrollToBottom();
    }

    hideTyping() {
        this.typingIndicator.classList.remove('active');
    }

    scrollToBottom() {
        setTimeout(() => {
            this.chatMessages.scrollTop = this.chatMessages.scrollHeight;
        }, 100);
    }
    }

    // Initialize chatbot when page loads
    document.addEventListener('DOMContentLoaded', () => {
    new Chatbot();
    }
);