(function() {
    'use strict';
    
    // Configuration
    var config = window.mySupportConfig || {};
    var apiKey = config.apiKey || '';
    var position = config.position || 'bottom-right';
    var primaryColor = config.primaryColor || '#06b6d4';
    var buttonText = config.buttonText || 'Support';
    var welcomeMessage = config.welcomeMessage || 'Bonjour ! Comment puis-je vous aider ?';
    var baseUrl = config.baseUrl || 'http://localhost:8888/mySupport';
    
    // Styles
    var styles = '\
        #mysupport-widget-container * { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }\
        #mysupport-floating-btn {\
            position: fixed;\
            ' + (position.includes('right') ? 'right: 20px;' : 'left: 20px;') + '\
            ' + (position.includes('bottom') ? 'bottom: 20px;' : 'top: 20px;') + '\
            z-index: 999999;\
            display: flex;\
            align-items: center;\
            gap: 8px;\
            padding: 12px 20px;\
            background: linear-gradient(135deg, ' + primaryColor + ', #10b981);\
            color: white;\
            border: none;\
            border-radius: 50px;\
            cursor: pointer;\
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);\
            transition: all 0.3s ease;\
            font-size: 14px;\
            font-weight: 600;\
        }\
        #mysupport-floating-btn:hover {\
            transform: translateY(-2px);\
            box-shadow: 0 6px 25px rgba(0,0,0,0.25);\
        }\
        #mysupport-floating-btn svg { width: 20px; height: 20px; }\
        #mysupport-floating-btn .pulse {\
            position: absolute;\
            width: 100%;\
            height: 100%;\
            top: 0;\
            left: 0;\
            border-radius: 50px;\
            background: inherit;\
            animation: mysupport-pulse 2s infinite;\
            z-index: -1;\
        }\
        @keyframes mysupport-pulse {\
            0% { transform: scale(1); opacity: 0.5; }\
            100% { transform: scale(1.3); opacity: 0; }\
        }\
        #mysupport-chat-frame {\
            position: fixed;\
            ' + (position.includes('right') ? 'right: 20px;' : 'left: 20px;') + '\
            ' + (position.includes('bottom') ? 'bottom: 90px;' : 'top: 90px;') + '\
            width: 380px;\
            height: 580px;\
            max-height: calc(100vh - 120px);\
            border: none;\
            border-radius: 16px;\
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);\
            z-index: 999998;\
            display: none;\
            background: white;\
        }\
        #mysupport-chat-frame.open { display: block; animation: mysupport-slideUp 0.3s ease; }\
        @keyframes mysupport-slideUp {\
            from { opacity: 0; transform: translateY(20px); }\
            to { opacity: 1; transform: translateY(0); }\
        }\
        @media (max-width: 480px) {\
            #mysupport-chat-frame {\
                width: calc(100vw - 20px);\
                height: calc(100vh - 100px);\
                ' + (position.includes('right') ? 'right: 10px;' : 'left: 10px;') + '\
                border-radius: 12px;\
            }\
            #mysupport-floating-btn { padding: 10px 16px; font-size: 13px; }\
        }\
        #mysupport-close-btn {\
            position: absolute;\
            top: -10px;\
            right: -10px;\
            width: 28px;\
            height: 28px;\
            background: #ef4444;\
            color: white;\
            border: none;\
            border-radius: 50%;\
            cursor: pointer;\
            font-size: 16px;\
            display: flex;\
            align-items: center;\
            justify-content: center;\
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);\
            z-index: 999999;\
        }\
        #mysupport-close-btn:hover { background: #dc2626; }\
        #mysupport-frame-wrapper { position: relative; display: none; }\
        #mysupport-frame-wrapper.open { display: block; }\
    ';
    
    // Inject styles
    var styleSheet = document.createElement('style');
    styleSheet.textContent = styles;
    document.head.appendChild(styleSheet);
    
    // Create container
    var container = document.createElement('div');
    container.id = 'mysupport-widget-container';
    
    // Create floating button
    var floatingBtn = document.createElement('button');
    floatingBtn.id = 'mysupport-floating-btn';
    floatingBtn.innerHTML = '\
        <span class="pulse"></span>\
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">\
            <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>\
        <span>' + buttonText + '</span>\
    ';
    
    // Create frame wrapper
    var frameWrapper = document.createElement('div');
    frameWrapper.id = 'mysupport-frame-wrapper';
    
    // Create close button
    var closeBtn = document.createElement('button');
    closeBtn.id = 'mysupport-close-btn';
    closeBtn.innerHTML = '×';
    closeBtn.onclick = function() {
        frameWrapper.classList.remove('open');
        chatFrame.classList.remove('open');
    };
    
    // Create iframe
    var chatFrame = document.createElement('iframe');
    chatFrame.id = 'mysupport-chat-frame';
    chatFrame.allow = 'microphone; camera';
    
    frameWrapper.appendChild(closeBtn);
    frameWrapper.appendChild(chatFrame);
    container.appendChild(floatingBtn);
    container.appendChild(frameWrapper);
    document.body.appendChild(container);
    
    // Toggle chat
    var isOpen = false;
    var isLoaded = false;
    
    floatingBtn.onclick = function() {
        isOpen = !isOpen;
        
        if (isOpen) {
            if (!isLoaded) {
                var widgetUrl = baseUrl + '/widget/chat?api_key=' + encodeURIComponent(apiKey);
                chatFrame.src = widgetUrl;
                isLoaded = true;
            }
            frameWrapper.classList.add('open');
            chatFrame.classList.add('open');
        } else {
            frameWrapper.classList.remove('open');
            chatFrame.classList.remove('open');
        }
    };
    
    // Listen for messages from iframe
    window.addEventListener('message', function(event) {
        if (event.data && event.data.type === 'mysupport-close') {
            frameWrapper.classList.remove('open');
            chatFrame.classList.remove('open');
            isOpen = false;
        }
    });
    
    // Auto-open after delay (optional)
    if (config.autoOpen && config.autoOpenDelay) {
        setTimeout(function() {
            if (!isOpen) {
                floatingBtn.click();
            }
        }, config.autoOpenDelay);
    }
    
})();
