(function() {
    'use strict';
    
    // Prevent duplicate widgets
    if (document.getElementById('base44-chatbot-widget')) return;
    
    // Embed configuration directly
    const widgetConfig = {"business_id":"68f0072fb3ff868b42eb02ca","greeting_message":"Hi! Welcome to KC Air Conditioning . How can I help you today?","placeholder_text":"Type your message...","primary_color":"#02caf2","position":"bottom-right","button_style":"circle","button_icon":"live-chat","button_size":"medium","window_size":"medium","animation":"fade","theme":"modern","show_badge":false,"pulse_effect":true,"custom_image_url":null,"fallback_message":"I'm not sure about that. Please contact us at {contact_email} for more help.","id":"68f0072f88172291f5ee30cf","created_date":"2025-10-15T20:42:23.823000","updated_date":"2025-10-15T21:48:07.925000","created_by_id":"68ee89252f34796ff678736e","created_by":"ramo1312@gmail.com","is_sample":false};
    const chatbotId = 'chatbot_1760560942814_2lnl93uam';
    const apiBaseUrl = 'https://chat-flow-ai-b643e540.base44.app';
    const buttonIcon = '📞';
    const customImageUrl = null;
    const companyLogoUrl = null;
    const enableContactCapture = false;
    
    console.log('Chatbot widget loaded. API Base URL:', apiBaseUrl);
    
    // Wait for DOM to be ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initChatbot);
    } else {
        initChatbot();
    }
    
    function initChatbot() {
        const primaryColor = widgetConfig.primary_color;
        let conversationId = null;
        const visitorId = 'visitor_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
        let messages = [{ role: 'assistant', content: widgetConfig.greeting_message }];
        let isOpen = false;
        let isLoading = false;
        let showContactForm = enableContactCapture; // Initialize based on config
        let visitorInfo = { email: '', phone: '' };
        
        // Function to parse markdown links
        function parseMessageLinks(text) {
            return text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer" style="color: #2563eb; text-decoration: underline; font-weight: 600;">$1</a>');
        }

        // Create widget container with maximum z-index
        const widgetContainer = document.createElement('div');
        widgetContainer.id = 'base44-chatbot-widget';
        widgetContainer.style.cssText = 'position: fixed; right: 20px; bottom: 20px; z-index: 2147483647; font-family: system-ui, -apple-system, sans-serif; pointer-events: none;';
        
        // Create toggle button
        const toggleButton = document.createElement('button');
        toggleButton.id = 'base44-chat-toggle';
        toggleButton.style.cssText = `
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: ${primaryColor};
            border: none;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s;
            color: white;
            font-size: 24px;
            pointer-events: auto;
        `;
        
        // Set button content (custom image or icon)
        if (customImageUrl) {
            toggleButton.innerHTML = '<img src="' + customImageUrl + '" style="width: 70%; height: 70%; object-fit: contain;" alt="Chat">';
        } else {
            toggleButton.innerHTML = buttonIcon;
        }
        
        toggleButton.onclick = window.toggleBase44Chat = function() {
            isOpen = !isOpen;
            const btn = document.getElementById('base44-chat-toggle');
            if (btn) {
                if (customImageUrl) {
                    // Keep image, just rotate or change opacity to show state
                    btn.style.transform = isOpen ? 'rotate(90deg)' : 'rotate(0deg)';
                } else {
                    btn.innerHTML = isOpen ? '✕' : buttonIcon;
                    btn.style.fontSize = isOpen ? '28px' : '24px';
                }
            }
            renderWidget();
        };
        
        // Create chat window
        const chatWindow = document.createElement('div');
        chatWindow.id = 'base44-chat-window';
        chatWindow.style.cssText = `
            position: absolute;
            bottom: 80px;
            right: 0;
            width: 380px;
            height: 600px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.15);
            display: none;
            flex-direction: column;
            overflow: hidden;
            pointer-events: auto;
        `;
        
        // Header with logo
        const header = document.createElement('div');
        header.style.cssText = `
            background: ${primaryColor};
            color: white;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        `;
        
        const logoHtml = companyLogoUrl 
            ? '<img src="' + companyLogoUrl + '" style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.3);" alt="Company logo" />'
            : '<div style="width: 40px; height: 40px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px;">💬</div>';
        
        header.innerHTML = `
            <div style="display: flex; align-items: center; gap: 12px;">
                ${logoHtml}
                <div>
                    <div style="font-weight: bold; font-size: 16px;">Chat Support</div>
                    <div style="font-size: 12px; opacity: 0.9;">Online</div>
                </div>
            </div>
            <button onclick="toggleBase44Chat()" style="background: none; border: none; color: white; cursor: pointer; font-size: 24px; padding: 0; width: 30px; height: 30px;">✕</button>
        `;
        
        // Messages container
        const messagesContainer = document.createElement('div');
        messagesContainer.id = 'base44-messages';
        messagesContainer.style.cssText = `
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            background: #f9fafb;
        `;
        
        // Input container
        const inputContainer = document.createElement('div');
        inputContainer.style.cssText = `
            padding: 16px;
            border-top: 1px solid #e5e7eb;
            background: white;
        `;
        inputContainer.innerHTML = `
            <div style="display: flex; gap: 8px;">
                <input 
                    type="text" 
                    id="base44-chat-input"
                    placeholder="${widgetConfig.placeholder_text}"
                    style="flex: 1; padding: 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; outline: none;"
                />
                <button 
                    id="base44-send-btn"
                    onclick="sendBase44Message()"
                    style="background: ${primaryColor}; color: white; border: none; border-radius: 8px; padding: 12px 16px; cursor: pointer; font-size: 20px;"
                >
                    ➤
                </button>
            </div>
        `;
        
        // Assemble chat window
        chatWindow.appendChild(header);
        chatWindow.appendChild(messagesContainer);
        chatWindow.appendChild(inputContainer);
        
        // Assemble widget
        widgetContainer.appendChild(chatWindow);
        widgetContainer.appendChild(toggleButton);
        document.body.appendChild(widgetContainer);
        
        // Handle Enter key
        document.addEventListener('keypress', function(e) {
            if (e.key === 'Enter' && document.activeElement.id === 'base44-chat-input') {
                sendBase44Message();
            }
        });
        
        // Render messages
        function renderMessages() {
            const container = document.getElementById('base44-messages');
            if (!container) return;
            
            let html = '';
            
            // Contact form - only show if enableContactCapture is true
            if (showContactForm) {
                html += `
                    <div style="background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 16px;">
                        <h3 style="font-size: 16px; font-weight: bold; margin-bottom: 12px; color: #374151;">
                            Let's get started! 👋
                        </h3>
                        <form id="base44-contact-form">
                            <input
                                type="email"
                                id="base44-email"
                                placeholder="Your email"
                                required
                                style="width: 100%; padding: 10px; border: 1px solid #d1d5db; border-radius: 8px; margin-bottom: 10px; font-size: 14px;"
                            />
                            <input
                                type="tel"
                                id="base44-phone"
                                placeholder="Your phone (optional)"
                                style="width: 100%; padding: 10px; border: 1px solid #d1d5db; border-radius: 8px; margin-bottom: 10px; font-size: 14px;"
                            />
                            <button
                                type="submit"
                                style="width: 100%; background: ${primaryColor}; color: white; padding: 10px; border-radius: 8px; border: none; font-size: 14px; font-weight: 600; cursor: pointer;"
                            >
                                Start Chat
                            </button>
                            <button
                                type="button"
                                id="base44-skip-contact"
                                style="width: 100%; background: transparent; color: #6b7280; padding: 8px; border: none; font-size: 12px; cursor: pointer; margin-top: 8px;"
                            >
                                Skip for now
                            </button>
                        </form>
                    </div>
                `;
            }
            
            html += messages.map(msg => `
                <div style="margin-bottom: 16px; display: flex; justify-content: ${msg.role === 'user' ? 'flex-end' : 'flex-start'};">
                    <div style="
                        background: ${msg.role === 'user' ? primaryColor : 'white'};
                        color: ${msg.role === 'user' ? 'white' : '#374151'};
                        padding: 12px 16px;
                        border-radius: 16px;
                        max-width: 75%;
                        word-wrap: break-word;
                        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
                    ">
                        ${parseMessageLinks(msg.content)}
                    </div>
                </div>
            `).join('');
            
            if (isLoading) {
                html += `
                    <div style="display: flex; gap: 8px; align-items: center; color: #6b7280;">
                        <div style="animation: spin 1s linear infinite;">⏳</div>
                        <span style="font-size: 14px;">Typing...</span>
                    </div>
                `;
            }
            
            container.innerHTML = html;
            container.scrollTop = container.scrollHeight;
            
            // Attach contact form handlers
            const contactForm = document.getElementById('base44-contact-form');
            if (contactForm) {
                contactForm.onsubmit = async function(e) {
                    e.preventDefault();
                    visitorInfo.email = document.getElementById('base44-email').value;
                    visitorInfo.phone = document.getElementById('base44-phone').value;
                    
                    if (conversationId) {
                        try {
                            await fetch(apiBaseUrl + '/functions/updateVisitorInfo', {
                                method: 'POST',
                                headers: { 'Content-Type': 'application/json' },
                                body: JSON.stringify({
                                    conversation_id: conversationId,
                                    visitor_email: visitorInfo.email,
                                    visitor_phone: visitorInfo.phone
                                })
                            });
                        } catch (err) {
                            console.error('Error saving contact:', err);
                        }
                    }
                    
                    showContactForm = false;
                    messages.push({ role: 'assistant', content: 'Thank you! How can I help you today?' });
                    renderMessages();
                };
                
                const skipBtn = document.getElementById('base44-skip-contact');
                if (skipBtn) {
                    skipBtn.onclick = function() {
                        showContactForm = false;
                        renderMessages();
                    };
                }
            }
        }
        
        // Render widget state
        function renderWidget() {
            const chatWin = document.getElementById('base44-chat-window');
            if (!chatWin) return;
            
            if (isOpen) {
                chatWin.style.display = 'flex';
                renderMessages();
            } else {
                chatWin.style.display = 'none';
            }
        }
        
        // Send message
        window.sendBase44Message = async function() {
            const input = document.getElementById('base44-chat-input');
            if (!input) return;
            
            const message = input.value.trim();
            if (!message || isLoading) return;
            
            messages.push({ role: 'user', content: message });
            input.value = '';
            isLoading = true;
            renderMessages();
            
            try {
                const fetchUrl = apiBaseUrl + '/functions/chat';
                console.log('Sending message to:', fetchUrl);
                console.log('Payload:', { chatbot_id: chatbotId, message, conversation_id: conversationId, visitor_id: visitorId });
                
                const response = await fetch(fetchUrl, {
                    method: 'POST',
                    headers: { 
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        chatbot_id: chatbotId,
                        message: message,
                        conversation_id: conversationId,
                        visitor_id: visitorId,
                        visitor_email: visitorInfo.email,
                        visitor_phone: visitorInfo.phone
                    })
                });
                
                console.log('Response status:', response.status);
                
                if (!response.ok) {
                    throw new Error('Network response was not ok: ' + response.status);
                }
                
                const data = await response.json();
                console.log('Response data:', data);
                
                conversationId = data.conversation_id;
                messages.push({ role: 'assistant', content: data.response });
            } catch (error) {
                console.error('Chat error:', error);
                messages.push({ role: 'assistant', content: 'Sorry, something went wrong. Please try again.' });
            }
            
            isLoading = false;
            renderMessages();
        };
        
        // Add spin animation
        const style = document.createElement('style');
        style.textContent = '@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }';
        document.head.appendChild(style);
        
        // Initial render
        renderMessages();
    }
})();