// Example: Crisp or Intercom-style integration
window.$crisp = [];
window.CRISP_WEBSITE_ID = "your-website-id";
(function() {
    d = document;
    s = d.createElement("script");
    s.src = "https://client.crisp.chat/l.js";
    s.async = 1;
    d.getElementsByTagName("head")[0].appendChild(s);
})();

// Custom chatbot with OpenAI integration
class JekyllAIChatbot {
    constructor(config) {
        this.apiKey = config.apiKey;
        this.apiEndpoint = config.apiEndpoint || 'https://api.openai.com/v1/chat/completions';
        this.model = config.model || 'gpt-3.5-turbo';
        this.systemPrompt = config.systemPrompt || this.getDefaultSystemPrompt();
        this.init();
    }
    
    getDefaultSystemPrompt() {
        return `You are a helpful assistant for the IT-Journey learning platform. 
        Help users understand technical concepts, troubleshoot issues, and navigate the learning materials. 
        Always provide practical, actionable advice and encourage hands-on learning.`;
    }
}

// assets/js/chatbot.js
class ITJourneyChatbot {
    constructor(config = {}) {
        this.config = {
            apiEndpoint: config.apiEndpoint || '/api/chat',
            apiKey: config.apiKey || null,
            model: config.model || 'gpt-3.5-turbo',
            maxTokens: config.maxTokens || 500,
            temperature: config.temperature || 0.7,
            systemPrompt: config.systemPrompt || this.getDefaultSystemPrompt(),
            enableTypingIndicator: config.enableTypingIndicator !== false,
            enableLocalStorage: config.enableLocalStorage !== false,
            maxHistoryLength: config.maxHistoryLength || 10,
            ...config
        };
        
        this.isOpen = false;
        this.isLoading = false;
        this.conversationHistory = [];
        this.siteContext = this.extractSiteContext();
        
        this.init();
    }
    
    getDefaultSystemPrompt() {
        const currentPage = this.getCurrentPageContext();
        return `You are an AI assistant for the IT-Journey learning platform, a comprehensive resource for technology education and development skills.

Current context:
- Page: ${currentPage.title || 'IT-Journey'}
- Section: ${currentPage.category || 'General'}
- Topics: ${currentPage.tags ? currentPage.tags.join(', ') : 'Various IT topics'}

Your role:
- Help users understand technical concepts and tutorials
- Provide practical coding examples and solutions
- Guide users to relevant learning resources on the site
- Answer questions about web development, programming, and IT topics
- Encourage hands-on learning and experimentation

Guidelines:
- Keep responses concise but informative (under 200 words)
- Include code examples when helpful
- Reference specific IT-Journey articles when relevant
- Always encourage practical application
- Maintain a supportive, educational tone
- If you don't know something, recommend checking the site's documentation or latest posts`;
    }
    
    getCurrentPageContext() {
        return {
            title: document.title,
            category: this.extractMetaContent('category') || this.extractFromPath(),
            tags: this.extractMetaContent('keywords')?.split(',').map(tag => tag.trim()),
            description: this.extractMetaContent('description'),
            url: window.location.pathname
        };
    }
    
    extractMetaContent(name) {
        const meta = document.querySelector(`meta[name="${name}"], meta[property="og:${name}"]`);
        return meta ? meta.getAttribute('content') : null;
    }
    
    extractFromPath() {
        const pathParts = window.location.pathname.split('/').filter(Boolean);
        return pathParts.length > 0 ? pathParts[0] : 'general';
    }
    
    extractSiteContext() {
        return {
            url: window.location.href,
            title: document.title,
            description: this.extractMetaContent('description'),
            category: this.extractMetaContent('category'),
            tags: this.extractMetaContent('keywords'),
            headings: Array.from(document.querySelectorAll('h1, h2, h3')).map(h => h.textContent.trim()).slice(0, 10)
        };
    }
    
    init() {
        this.bindEvents();
        this.loadChatHistory();
        
        // Initialize after DOM is ready
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', () => this.setupElements());
        } else {
            this.setupElements();
        }
    }
    
    setupElements() {
        this.elements = {
            container: document.getElementById('ai-chatbot-container'),
            toggle: document.getElementById('chatbot-toggle'),
            widget: document.getElementById('chatbot-widget'),
            close: document.getElementById('chatbot-close'),
            messages: document.getElementById('chatbot-messages'),
            form: document.getElementById('chatbot-form'),
            input: document.getElementById('chatbot-input'),
            send: document.querySelector('.chatbot-send'),
            status: document.getElementById('chatbot-status')
        };
        
        // Verify all elements exist
        const missingElements = Object.entries(this.elements)
            .filter(([key, element]) => !element)
            .map(([key]) => key);
            
        if (missingElements.length > 0) {
            console.warn('Chatbot: Missing elements:', missingElements);
            return;
        }
        
        this.bindElementEvents();
    }
    
    bindEvents() {
        document.addEventListener('keydown', (e) => {
            // Close chatbot with Escape key
            if (e.key === 'Escape' && this.isOpen) {
                this.closeChatbot();
            }
        });
    }
    
    bindElementEvents() {
        this.elements.toggle.addEventListener('click', () => this.toggleChatbot());
        this.elements.close.addEventListener('click', () => this.closeChatbot());
        this.elements.form.addEventListener('submit', (e) => this.handleSubmit(e));
        
        // Auto-resize input
        this.elements.input.addEventListener('input', () => this.adjustInputHeight());
        
        // Click outside to close
        document.addEventListener('click', (e) => {
            if (this.isOpen && !this.elements.container.contains(e.target)) {
                this.closeChatbot();
            }
        });
    }
    
    toggleChatbot() {
        if (this.isOpen) {
            this.closeChatbot();
        } else {
            this.openChatbot();
        }
    }
    
    openChatbot() {
        this.isOpen = true;
        this.elements.widget.classList.add('active');
        this.elements.widget.setAttribute('aria-hidden', 'false');
        this.elements.input.focus();
        
        // Track opening for analytics
        this.trackEvent('chatbot_opened');
    }
    
    closeChatbot() {
        this.isOpen = false;
        this.elements.widget.classList.remove('active');
        this.elements.widget.setAttribute('aria-hidden', 'true');
        
        // Track closing for analytics
        this.trackEvent('chatbot_closed');
    }
    
    async handleSubmit(e) {
        e.preventDefault();
        
        const message = this.elements.input.value.trim();
        if (!message || this.isLoading) return;
        
        this.addMessage('user', message);
        this.elements.input.value = '';
        this.adjustInputHeight();
        
        try {
            this.setLoading(true);
            const response = await this.sendMessage(message);
            this.addMessage('bot', response);
        } catch (error) {
            console.error('Chatbot error:', error);
            this.addMessage('bot', this.getErrorMessage(error));
        } finally {
            this.setLoading(false);
        }
    }
    
    async sendMessage(message) {
        // Add message to conversation history
        this.conversationHistory.push({
            role: 'user',
            content: message,
            timestamp: new Date().toISOString()
        });
        
        // Prepare the payload
        const payload = {
            messages: [
                {
                    role: 'system',
                    content: this.config.systemPrompt
                },
                ...this.conversationHistory.slice(-this.config.maxHistoryLength).map(msg => ({
                    role: msg.role,
                    content: msg.content
                }))
            ],
            model: this.config.model,
            max_tokens: this.config.maxTokens,
            temperature: this.config.temperature,
            site_context: this.siteContext
        };
        
        // Send to API
        const response = await this.callAPI(payload);
        
        // Add response to history
        this.conversationHistory.push({
            role: 'assistant',
            content: response,
            timestamp: new Date().toISOString()
        });
        
        // Save to localStorage
        if (this.config.enableLocalStorage) {
            this.saveChatHistory();
        }
        
        this.trackEvent('message_sent', { message_length: message.length });
        
        return response;
    }
    
    async callAPI(payload) {
        const options = {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(payload)
        };
        
        // Add API key if configured
        if (this.config.apiKey) {
            options.headers['Authorization'] = `Bearer ${this.config.apiKey}`;
        }
        
        const response = await fetch(this.config.apiEndpoint, options);
        
        if (!response.ok) {
            throw new Error(`API request failed: ${response.status} ${response.statusText}`);
        }
        
        const data = await response.json();
        
        // Handle different API response formats
        if (data.choices && data.choices[0] && data.choices[0].message) {
            return data.choices[0].message.content;
        } else if (data.response) {
            return data.response;
        } else if (data.message) {
            return data.message;
        } else {
            throw new Error('Unexpected API response format');
        }
    }
    
    addMessage(type, content) {
        const messageDiv = document.createElement('div');
        messageDiv.className = `message ${type}-message`;
        messageDiv.innerHTML = `
            <div class="message-content">
                ${this.formatMessageContent(content)}
            </div>
            <div class="message-timestamp">${this.formatTimestamp(new Date())}</div>
        `;
        
        this.elements.messages.appendChild(messageDiv);
        this.scrollToBottom();
        
        // Announce to screen readers
        messageDiv.setAttribute('aria-live', 'polite');
    }
    
    formatMessageContent(content) {
        // Basic markdown-like formatting
        return content
            .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
            .replace(/\*(.*?)\*/g, '<em>$1</em>')
            .replace(/`([^`]+)`/g, '<code>$1</code>')
            .replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
            .replace(/\n/g, '<br>')
            .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
    }
    
    formatTimestamp(date) {
        return date.toLocaleTimeString('en-US', { 
            hour: '2-digit', 
            minute: '2-digit',
            hour12: false 
        });
    }
    
    scrollToBottom() {
        this.elements.messages.scrollTop = this.elements.messages.scrollHeight;
    }
    
    adjustInputHeight() {
        const input = this.elements.input;
        input.style.height = 'auto';
        input.style.height = Math.min(input.scrollHeight, 100) + 'px';
    }
    
    setLoading(loading) {
        this.isLoading = loading;
        this.elements.send.disabled = loading;
        this.elements.input.disabled = loading;
        
        if (loading) {
            this.elements.status.textContent = 'AI is thinking...';
            this.elements.status.className = 'chatbot-status typing';
        } else {
            this.elements.status.textContent = '';
            this.elements.status.className = 'chatbot-status';
        }
    }
    
    getErrorMessage(error) {
        const errorMessages = {
            'Failed to fetch': 'Unable to connect to the AI service. Please check your internet connection and try again.',
            'API request failed: 401': 'Authentication failed. Please refresh the page and try again.',
            'API request failed: 429': 'Too many requests. Please wait a moment before trying again.',
            'API request failed: 500': 'The AI service is temporarily unavailable. Please try again later.'
        };
        
        const errorKey = Object.keys(errorMessages).find(key => error.message.includes(key));
        return errorKey ? errorMessages[errorKey] : 'Sorry, I encountered an error. Please try again.';
    }
    
    saveChatHistory() {
        try {
            localStorage.setItem('itjourney_chat_history', JSON.stringify(this.conversationHistory));
        } catch (error) {
            console.warn('Failed to save chat history:', error);
        }
    }
    
    loadChatHistory() {
        if (!this.config.enableLocalStorage) return;
        
        try {
            const saved = localStorage.getItem('itjourney_chat_history');
            if (saved) {
                this.conversationHistory = JSON.parse(saved);
                
                // Restore messages to UI
                this.conversationHistory.forEach(msg => {
                    if (msg.role === 'user') {
                        this.addMessage('user', msg.content);
                    } else if (msg.role === 'assistant') {
                        this.addMessage('bot', msg.content);
                    }
                });
            }
        } catch (error) {
            console.warn('Failed to load chat history:', error);
        }
    }
    
    clearHistory() {
        this.conversationHistory = [];
        this.elements.messages.innerHTML = `
            <div class="message bot-message">
                <div class="message-content">
                    <p>👋 Hi! I'm your IT-Journey AI assistant. How can I help you learn something new today?</p>
                </div>
                <div class="message-timestamp">${this.formatTimestamp(new Date())}</div>
            </div>
        `;
        
        if (this.config.enableLocalStorage) {
            localStorage.removeItem('itjourney_chat_history');
        }
        
        this.trackEvent('chat_history_cleared');
    }
    
    trackEvent(eventName, data = {}) {
        // Integration with analytics (Google Analytics, etc.)
        if (typeof gtag !== 'undefined') {
            gtag('event', eventName, {
                event_category: 'chatbot',
                ...data
            });
        }
        
        // Console logging for development
        console.log('Chatbot event:', eventName, data);
    }
}

// Initialize chatbot when DOM is ready
document.addEventListener('DOMContentLoaded', function() {
    if (document.getElementById('ai-chatbot-container')) {
        // Configuration can be customized via Jekyll config
        const chatbotConfig = {
            apiEndpoint: window.chatbotConfig?.apiEndpoint || '/api/chat',
            apiKey: window.chatbotConfig?.apiKey || null,
            enableLocalStorage: true,
            enableTypingIndicator: true,
            maxHistoryLength: 10
        };
        
        window.itJourneyChatbot = new ITJourneyChatbot(chatbotConfig);
    }
});

// netlify/functions/chat.js or api/chat.js
const { Configuration, OpenAIApi } = require('openai');

const configuration = new Configuration({
    apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

exports.handler = async (event, context) => {
    // Handle CORS
    const headers = {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
        'Access-Control-Allow-Methods': 'POST, OPTIONS',
        'Content-Type': 'application/json',
    };
    
    if (event.httpMethod === 'OPTIONS') {
        return { statusCode: 200, headers, body: '' };
    }
    
    if (event.httpMethod !== 'POST') {
        return {
            statusCode: 405,
            headers,
            body: JSON.stringify({ error: 'Method not allowed' })
        };
    }
    
    try {
        const { messages, model = 'gpt-3.5-turbo', max_tokens = 500, temperature = 0.7, site_context } = JSON.parse(event.body);
        
        // Enhance system message with site context
        const enhancedMessages = messages.map((message, index) => {
            if (index === 0 && message.role === 'system') {
                return {
                    ...message,
                    content: `${message.content}

Current page context:
- URL: ${site_context?.url || 'Unknown'}
- Title: ${site_context?.title || 'Unknown'}
- Description: ${site_context?.description || 'None'}
- Main headings: ${site_context?.headings?.join(', ') || 'None'}`
                };
            }
            return message;
        });
        
        const completion = await openai.createChatCompletion({
            model,
            messages: enhancedMessages,
            max_tokens,
            temperature,
            presence_penalty: 0.6,
            frequency_penalty: 0.5,
        });
        
        return {
            statusCode: 200,
            headers,
            body: JSON.stringify({
                message: completion.data.choices[0].message.content,
                usage: completion.data.usage
            })
        };
        
    } catch (error) {
        console.error('Chat API error:', error);
        
        return {
            statusCode: 500,
            headers,
            body: JSON.stringify({ 
                error: 'Internal server error',
                message: 'Sorry, I encountered an error processing your request.'
            })
        };
    }
};

// Enhanced system prompt generation
getContextAwareSystemPrompt() {
    const pageData = this.extractPageData();
    const relatedPosts = this.findRelatedPosts();
    
    return `You are an AI assistant for IT-Journey. Current context:

Page Information:
- Title: ${pageData.title}
- Category: ${pageData.category}
- Tags: ${pageData.tags.join(', ')}
- Description: ${pageData.description}

Related Resources Available:
${relatedPosts.map(post => `- ${post.title} (${post.url})`).join('\n')}

Instructions:
1. Reference specific IT-Journey articles when helpful
2. Provide practical, hands-on guidance
3. Include relevant code examples
4. Suggest next learning steps
5. Keep responses under 200 words`;
}

findRelatedPosts() {
    // This would use the knowledge base generated by Jekyll plugin
    const currentTags = this.getCurrentPageContext().tags || [];
    return window.chatbotConfig?.knowledge_base?.filter(post => 
        post.tags.some(tag => currentTags.includes(tag))
    ).slice(0, 3) || [];
}

// Accessibility improvements
enhanceAccessibility() {
    // Add ARIA labels and descriptions
    this.elements.widget.setAttribute('aria-label', 'AI Assistant Chat Interface');
    this.elements.messages.setAttribute('aria-label', 'Chat conversation');
    
    // Keyboard navigation
    this.elements.widget.addEventListener('keydown', (e) => {
        if (e.key === 'Tab' && e.shiftKey && e.target === this.elements.input) {
            // Focus should cycle properly within modal
            e.preventDefault();
            this.elements.close.focus();
        }
    });
    
    // Screen reader announcements
    this.announceToScreenReader = (message) => {
        const announcement = document.createElement('div');
        announcement.setAttribute('aria-live', 'assertive');
        announcement.setAttribute('aria-atomic', 'true');
        announcement.className = 'sr-only';
        announcement.textContent = message;
        document.body.appendChild(announcement);
        
        setTimeout(() => document.body.removeChild(announcement), 1000);
    };
}

// Lazy load chatbot functionality
class ChatbotLoader {
    static async loadChatbot() {
        if (window.itJourneyChatbot) return window.itJourneyChatbot;
        
        // Load CSS if not already loaded
        if (!document.querySelector('link[href*="chatbot.css"]')) {
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = '/assets/css/chatbot.css';
            document.head.appendChild(link);
        }
        
        // Initialize chatbot
        const { ITJourneyChatbot } = await import('./chatbot.js');
        window.itJourneyChatbot = new ITJourneyChatbot();
        
        return window.itJourneyChatbot;
    }
}

// Load on first interaction
document.getElementById('chatbot-toggle')?.addEventListener('click', async () => {
    const chatbot = await ChatbotLoader.loadChatbot();
    chatbot.openChatbot();
}, { once: true });

// Debug API connectivity
async debugAPIConnection() {
    try {
        const response = await fetch(this.config.apiEndpoint, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ test: true })
        });
        
        console.log('API Status:', response.status);
        console.log('API Headers:', response.headers);
        
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        
        const data = await response.json();
        console.log('API Response:', data);
        
    } catch (error) {
        console.error('API Debug Error:', error);
        this.addMessage('bot', `Debug info: ${error.message}`);
    }
}

// Prevent memory leaks
cleanup() {
    // Remove event listeners
    this.elements.toggle?.removeEventListener('click', this.toggleHandler);
    this.elements.form?.removeEventListener('submit', this.submitHandler);
    
    // Clear conversation history
    this.conversationHistory = [];
    
    // Clear any running timers
    if (this.typingTimer) {
        clearTimeout(this.typingTimer);
    }
}

// Cleanup on page unload
window.addEventListener('beforeunload', () => {
    window.itJourneyChatbot?.cleanup();
});