/**
 * Multi-language Chatbot JavaScript
 * Author: RSK World (https://rskworld.in)
 * Founder: Molla Samser
 * Designer & Tester: Rima Khatun
 * Contact: help@rskworld.in, +91 93305 39277
 * Year: 2026
 * Description: Interactive JavaScript for multi-language chatbot interface
 */

class MultiLanguageChatbot {
    constructor() {
        this.messageCount = 0;
        this.languageCount = new Set();
        this.currentLanguage = 'en';
        this.isProcessing = false;
        this.conversationHistory = [];
        
        this.init();
    }
    
    init() {
        this.setupEventListeners();
        this.loadStoredConversation();
        this.updateStats();
    }
    
    setupEventListeners() {
        // Message input
        const messageInput = document.getElementById('messageInput');
        if (messageInput) {
            messageInput.addEventListener('keypress', (e) => this.handleKeyPress(e));
            messageInput.focus();
        }
        
        // Language selector
        const languageSelect = document.getElementById('languageSelect');
        if (languageSelect) {
            languageSelect.addEventListener('change', (e) => this.handleLanguageChange(e));
        }
        
        // Auto-save conversation
        setInterval(() => this.saveConversation(), 30000); // Save every 30 seconds
    }
    
    async sendMessage() {
        if (this.isProcessing) return;
        
        const messageInput = document.getElementById('messageInput');
        const message = messageInput.value.trim();
        
        if (!message) return;
        
        this.isProcessing = true;
        this.showLoading();
        
        // Add user message to chat
        this.addMessage(message, 'user');
        messageInput.value = '';
        
        try {
            const response = await fetch('/chat', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    message: message,
                    language: this.getSelectedLanguage()
                })
            });
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            const data = await response.json();
            
            if (data.error) {
                throw new Error(data.error);
            }
            
            // Add bot response
            this.addMessage(data.response, 'bot', {
                language: data.language_name,
                confidence: data.confidence
            });
            
            // Update current language display
            this.updateCurrentLanguage(data.language_name);
            
            // Track language
            this.languageCount.add(data.detected_language);
            
        } catch (error) {
            console.error('Error sending message:', error);
            this.addMessage('Sorry, I encountered an error. Please try again.', 'bot', {
                error: true
            });
        } finally {
            this.hideLoading();
            this.isProcessing = false;
            this.updateStats();
            this.saveConversation();
        }
    }
    
    addMessage(text, sender, metadata = {}) {
        const chatMessages = document.getElementById('chatMessages');
        const messageDiv = document.createElement('div');
        messageDiv.className = `message message-${sender} fade-in`;
        
        const timestamp = new Date().toLocaleTimeString();
        let languageBadge = '';
        
        if (metadata.language && sender === 'bot') {
            languageBadge = `<span class="language-badge bg-info text-white">${metadata.language}</span>`;
        }
        
        const confidenceInfo = metadata.confidence ? 
            `<small class="text-muted">(Confidence: ${(metadata.confidence * 100).toFixed(1)}%)</small>` : '';
        
        messageDiv.innerHTML = `
            <div class="message-bubble">
                ${this.escapeHtml(text)}
                ${languageBadge}
            </div>
            <div class="message-meta">
                ${timestamp} ${confidenceInfo}
            </div>
        `;
        
        // Remove welcome message if it exists
        const welcomeMessage = chatMessages.querySelector('.text-center');
        if (welcomeMessage) {
            welcomeMessage.remove();
        }
        
        chatMessages.appendChild(messageDiv);
        chatMessages.scrollTop = chatMessages.scrollHeight;
        
        // Update message count
        if (sender === 'user') {
            this.messageCount++;
        }
        
        // Add to conversation history
        this.conversationHistory.push({
            text: text,
            sender: sender,
            timestamp: new Date().toISOString(),
            metadata: metadata
        });
    }
    
    async detectLanguage() {
        const messageInput = document.getElementById('messageInput');
        const text = messageInput.value.trim();
        
        if (!text) {
            this.showNotification('Please enter some text to detect language', 'warning');
            return;
        }
        
        try {
            const response = await fetch('/detect_language', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ text: text })
            });
            
            const data = await response.json();
            
            if (data.error) {
                throw new Error(data.error);
            }
            
            this.showNotification(
                `Detected language: ${data.language_name} (Confidence: ${(data.confidence * 100).toFixed(1)}%)`,
                'success'
            );
            
        } catch (error) {
            console.error('Error detecting language:', error);
            this.showNotification('Language detection failed', 'error');
        }
    }
    
    handleKeyPress(event) {
        if (event.key === 'Enter' && !event.shiftKey) {
            event.preventDefault();
            this.sendMessage();
        }
    }
    
    handleLanguageChange(event) {
        this.currentLanguage = event.target.value;
        this.saveConversation();
    }
    
    getSelectedLanguage() {
        const languageSelect = document.getElementById('languageSelect');
        return languageSelect ? languageSelect.value : 'auto';
    }
    
    updateCurrentLanguage(languageName) {
        const currentLanguageElement = document.getElementById('currentLanguage');
        if (currentLanguageElement) {
            currentLanguageElement.textContent = languageName;
        }
    }
    
    updateStats() {
        const messageCountElement = document.getElementById('messageCount');
        const languageCountElement = document.getElementById('languageCount');
        
        if (messageCountElement) {
            messageCountElement.textContent = this.messageCount;
        }
        
        if (languageCountElement) {
            languageCountElement.textContent = this.languageCount.size;
        }
    }
    
    showLoading() {
        const modal = new bootstrap.Modal(document.getElementById('loadingModal'));
        modal.show();
    }
    
    hideLoading() {
        const modal = bootstrap.Modal.getInstance(document.getElementById('loadingModal'));
        if (modal) {
            modal.hide();
        }
    }
    
    showNotification(message, type = 'info') {
        // Create toast notification
        const toastHtml = `
            <div class="toast align-items-center text-white bg-${type === 'error' ? 'danger' : type === 'warning' ? 'warning' : 'success'} border-0" role="alert">
                <div class="d-flex">
                    <div class="toast-body">
                        ${message}
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                </div>
            </div>
        `;
        
        const toastContainer = this.getOrCreateToastContainer();
        const toastElement = document.createElement('div');
        toastElement.innerHTML = toastHtml;
        toastContainer.appendChild(toastElement.firstElementChild);
        
        const toast = new bootstrap.Toast(toastContainer.lastElementChild);
        toast.show();
        
        // Remove toast after it's hidden
        toastContainer.lastElementChild.addEventListener('hidden.bs.toast', () => {
            toastContainer.lastElementChild.remove();
        });
    }
    
    getOrCreateToastContainer() {
        let container = document.getElementById('toastContainer');
        if (!container) {
            container = document.createElement('div');
            container.id = 'toastContainer';
            container.className = 'toast-container position-fixed bottom-0 end-0 p-3';
            document.body.appendChild(container);
        }
        return container;
    }
    
    clearChat() {
        if (confirm('Are you sure you want to clear the chat history?')) {
            const chatMessages = document.getElementById('chatMessages');
            chatMessages.innerHTML = `
                <div class="text-center text-muted py-5">
                    <i class="fas fa-robot fa-3x mb-3 opacity-50"></i>
                    <p class="mb-0">Start a conversation in any language!</p>
                    <small>I'll detect your language and respond accordingly.</small>
                </div>
            `;
            
            this.messageCount = 0;
            this.languageCount.clear();
            this.conversationHistory = [];
            this.updateStats();
            this.saveConversation();
            
            this.showNotification('Chat history cleared', 'success');
        }
    }
    
    exportChat() {
        if (this.conversationHistory.length === 0) {
            this.showNotification('No conversation to export', 'warning');
            return;
        }
        
        const exportData = {
            timestamp: new Date().toISOString(),
            messageCount: this.messageCount,
            languages: Array.from(this.languageCount),
            conversation: this.conversationHistory
        };
        
        const dataStr = JSON.stringify(exportData, null, 2);
        const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
        
        const exportFileDefaultName = `chatbot-conversation-${new Date().toISOString().split('T')[0]}.json`;
        
        const linkElement = document.createElement('a');
        linkElement.setAttribute('href', dataUri);
        linkElement.setAttribute('download', exportFileDefaultName);
        linkElement.click();
        
        this.showNotification('Conversation exported successfully', 'success');
    }
    
    saveConversation() {
        try {
            const data = {
                messageCount: this.messageCount,
                languageCount: Array.from(this.languageCount),
                conversationHistory: this.conversationHistory,
                currentLanguage: this.getSelectedLanguage()
            };
            localStorage.setItem('chatbotConversation', JSON.stringify(data));
        } catch (error) {
            console.error('Error saving conversation:', error);
        }
    }
    
    loadStoredConversation() {
        try {
            const stored = localStorage.getItem('chatbotConversation');
            if (stored) {
                const data = JSON.parse(stored);
                this.messageCount = data.messageCount || 0;
                this.languageCount = new Set(data.languageCount || []);
                this.conversationHistory = data.conversationHistory || [];
                
                // Restore language selection
                const languageSelect = document.getElementById('languageSelect');
                if (languageSelect && data.currentLanguage) {
                    languageSelect.value = data.currentLanguage;
                }
                
                // Restore messages
                if (this.conversationHistory.length > 0) {
                    const chatMessages = document.getElementById('chatMessages');
                    chatMessages.innerHTML = '';
                    
                    this.conversationHistory.forEach(msg => {
                        this.addMessage(msg.text, msg.sender, msg.metadata);
                    });
                }
            }
        } catch (error) {
            console.error('Error loading conversation:', error);
        }
    }
    
    escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
}

// Global functions for HTML onclick handlers
let chatbot;

function sendMessage() {
    chatbot.sendMessage();
}

function handleKeyPress(event) {
    chatbot.handleKeyPress(event);
}

function insertText(text) {
    const messageInput = document.getElementById('messageInput');
    messageInput.value = text;
    messageInput.focus();
}

function detectLanguage() {
    chatbot.detectLanguage();
}

function clearChat() {
    chatbot.clearChat();
}

function exportChat() {
    chatbot.exportChat();
}

// Initialize chatbot when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    chatbot = new MultiLanguageChatbot();
    
    // Add some keyboard shortcuts
    document.addEventListener('keydown', (e) => {
        // Ctrl/Cmd + K to clear chat
        if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
            e.preventDefault();
            clearChat();
        }
        // Ctrl/Cmd + E to export chat
        if ((e.ctrlKey || e.metaKey) && e.key === 'e') {
            e.preventDefault();
            exportChat();
        }
        // Ctrl/Cmd + L to detect language
        if ((e.ctrlKey || e.metaKey) && e.key === 'l') {
            e.preventDefault();
            detectLanguage();
        }
    });
});