(function() {
    // Wait for DOM to be ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
    
    function init() {
        const widget = document.getElementById('aichatti-widget');
        if (!widget) {
            console.warn('AiChatti: Widget element not found');
            return;
        }
        
        const companyId = widget.getAttribute('data-company-id');
        const theme = widget.getAttribute('data-theme') || 'indigo';
        
        if (!companyId) {
            console.error('AiChatti: Missing company ID');
            return;
        }
        
        const themes = {
            indigo: { primary: '#6366f1', hover: '#4f46e5' },
            green: { primary: '#10b981', hover: '#059669' },
            blue: { primary: '#3b82f6', hover: '#2563eb' },
            pink: { primary: '#ec4899', hover: '#db2777' },
            orange: { primary: '#f97316', hover: '#ea580c' }
        };
        
        const currentTheme = themes[theme] || themes.indigo;
    
    // Luo chat-bubble
    const bubble = document.createElement('div');
    bubble.style.cssText = `
        position: fixed;
        bottom: 24px;
        right: 24px;
        width: 70px;
        height: 70px;
        background: linear-gradient(135deg, ${currentTheme.primary}, ${currentTheme.hover});
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 10px 40px rgba(99, 102, 241, 0.4), 0 4px 12px rgba(0,0,0,0.3), 0 0 0 0 rgba(99, 102, 241, 0.6);
        z-index: 9998;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        animation: pulse 2.5s infinite;
        border: 3px solid rgba(255, 255, 255, 0.2);
    `;
    
    const style = document.createElement('style');
    style.textContent = `
        @keyframes pulse {
            0%, 100% { 
                box-shadow: 0 10px 40px rgba(99, 102, 241, 0.4), 0 4px 12px rgba(0,0,0,0.3), 0 0 0 0 rgba(99, 102, 241, 0.6);
            }
            50% { 
                box-shadow: 0 10px 40px rgba(99, 102, 241, 0.6), 0 4px 12px rgba(0,0,0,0.3), 0 0 0 24px rgba(99, 102, 241, 0);
            }
        }
    `;
    document.head.appendChild(style);
    
    bubble.innerHTML = `
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
        </svg>
    `;
    
    bubble.addEventListener('mouseenter', () => {
        bubble.style.transform = 'scale(1.12) translateY(-2px)';
        bubble.style.boxShadow = '0 16px 50px rgba(99, 102, 241, 0.6), 0 8px 20px rgba(0,0,0,0.4)';
    });
    
    bubble.addEventListener('mouseleave', () => {
        if (!isOpen) {
            bubble.style.transform = 'scale(1)';
            bubble.style.boxShadow = '0 10px 40px rgba(99, 102, 241, 0.4), 0 4px 12px rgba(0,0,0,0.3)';
        }
    });
    
    // Taustahimmennys
    const overlay = document.createElement('div');
    overlay.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 9998;
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
        backdrop-filter: blur(4px);
    `;
    
    // Chat-kupla container
    const chatWindow = document.createElement('div');
    chatWindow.style.cssText = `
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.9);
        width: 420px;
        max-width: calc(100vw - 40px);
        height: 640px;
        max-height: calc(100vh - 80px);
        background: #0f172a;
        border-radius: 20px;
        box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.05);
        z-index: 9999;
        display: none;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        opacity: 0;
    `;
    
    // Sulkemispainike (minimalistinen)
    const closeBtn = document.createElement('div');
    closeBtn.style.cssText = `
        position: absolute;
        top: 20px;
        right: 20px;
        width: 32px;
        height: 32px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10001;
        transition: all 0.2s ease;
        opacity: 0.7;
    `;
    closeBtn.innerHTML = `
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.9)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
    `;
    
    closeBtn.addEventListener('mouseenter', () => {
        closeBtn.style.background = 'rgba(239, 68, 68, 0.15)';
        closeBtn.style.transform = 'scale(1.05)';
        closeBtn.style.opacity = '1';
    });
    
    closeBtn.addEventListener('mouseleave', () => {
        closeBtn.style.background = 'rgba(255, 255, 255, 0.08)';
        closeBtn.style.transform = 'scale(1)';
        closeBtn.style.opacity = '0.7';
    });
    
    const iframe = document.createElement('iframe');
    iframe.style.cssText = `
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 20px;
    `;
    iframe.src = 'https://aichatti.fi/Company?id=' + encodeURIComponent(companyId) + '&embed=true';
    iframe.setAttribute('allow', 'clipboard-write');
    iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox');
    
    chatWindow.appendChild(iframe);
    chatWindow.appendChild(closeBtn);
    
    // Toggle chat
    let isOpen = false;
    
    const openChat = () => {
        isOpen = true;
        overlay.style.display = 'block';
        chatWindow.style.display = 'block';
        document.body.style.overflow = 'hidden';
        setTimeout(() => {
            overlay.style.opacity = '1';
            chatWindow.style.opacity = '1';
            chatWindow.style.transform = 'translate(-50%, -50%) scale(1)';
        }, 10);
        bubble.innerHTML = `
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <line x1="18" y1="6" x2="6" y2="18"></line>
                <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
        `;
        bubble.style.transform = 'rotate(90deg) scale(1)';
    };
    
    const closeChat = () => {
        isOpen = false;
        overlay.style.opacity = '0';
        chatWindow.style.opacity = '0';
        chatWindow.style.transform = 'translate(-50%, -50%) scale(0.9)';
        document.body.style.overflow = '';
        setTimeout(() => {
            overlay.style.display = 'none';
            chatWindow.style.display = 'none';
        }, 400);
        bubble.innerHTML = `
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
            </svg>
        `;
        bubble.style.transform = 'rotate(0deg) scale(1)';
    };
    
    bubble.addEventListener('click', () => {
        if (isOpen) {
            closeChat();
        } else {
            openChat();
        }
    });
    
    closeBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        closeChat();
    });
    
    overlay.addEventListener('click', () => {
        closeChat();
    });
    
    // Responsive: mobile
    if (window.innerWidth < 640) {
        chatWindow.style.cssText = `
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            width: 92%;
            max-width: 380px;
            height: 80vh;
            max-height: 600px;
            background: #0f172a;
            border-radius: 20px;
            box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.05);
            z-index: 9999;
            display: none;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            opacity: 0;
        `;
        iframe.style.borderRadius = '20px';
        
        // Pienempi kupla mobiilissa
        bubble.style.width = '56px';
        bubble.style.height = '56px';
        bubble.style.bottom = '16px';
        bubble.style.right = '16px';
        bubble.querySelector('svg').setAttribute('width', '26');
        bubble.querySelector('svg').setAttribute('height', '26');
    }
    
        document.body.appendChild(overlay);
        document.body.appendChild(bubble);
        document.body.appendChild(chatWindow);
        
        console.log('AiChatti: Widget loaded successfully');
    }
})();