function startConversation(openingQuestion, lc) {
    // Check if the overlay is already open
    if (document.querySelector(".aic_overlay")) {
        // show overlay
        let overlay = document.querySelector(".aic_overlay");
        overlay.style.visibility = "visible";
        overlay.style.height = "100%";
        return;
    }

    document.body.classList.add('no-scroll');

    // stop animation of floating icon
    let floating_icon = document.querySelector(".aic_floating-icon");
    if (floating_icon) {
        // save current animation style property
        animation_style = floating_icon.style.animation;
        // stop animation
        floating_icon.style.animation = "none";
    }

    const overlay = document.createElement("div");
    overlay.classList.add("aic_overlay");
    document.body.appendChild(overlay);

    // add event listener when overlay is removed
    /*  // obsolete code
    overlay.addEventListener("DOMNodeRemoved", function () {
        // start animation of floating icon
        if (floating_icon) {
            // restore animation style property
            floating_icon.style.animation = animation_style;
        }
    });
    */

    // observer instance to watch for overlay removal
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.removedNodes) {
                // Iterate over all removed nodes to find the overlay
                for (const node of mutation.removedNodes) {
                    // Check if the overlay node was removed
                    if (node === overlay) {
                        // Start animation of floating icon
                        if (floating_icon) {
                            // Restore animation style property
                            floating_icon.style.animation = animation_style;
                        }
                        // Optional: Disconnect observer if overlay is no longer needed
                        observer.disconnect();
                        break; // Exit the loop once the overlay is found among removed nodes
                    }
                }
            }
        });
    });

    // configuration of the observer
    const config = { childList: true };

    // pass in the target node and observer config
    observer.observe(overlay.parentNode, config);

    
        // Add event listeners to stop propagation of mouse events
        // Disable scrolling on the body
        document.body.style.overflow = 'hidden';
        overlay.style.pointerEvents = "auto";
        overlay.style.cursor = "pointer";

        // Add event listeners to stop propagation of mouse events
        const mouseEvents = ['mousedown', 'mouseup', 'mousemove', 'mousewheel'];
        for (const eventType of mouseEvents) {
            overlay.addEventListener(eventType, function (event) {
                event.stopPropagation();
            });
        }

        // Remove overlay and re-enable scrolling on the body when the overlay is clicked
        overlay.addEventListener("click", function () {
            
                document.body.removeChild(overlay);
                document.body.style.overflow = '';
                document.body.classList.remove('no-scroll');
            
        });
    

    const wrapper = document.createElement("div");
    wrapper.classList.add("aic_wrapper");
    wrapper.classList.add("min");
    overlay.appendChild(wrapper);

    const iframe = document.createElement("iframe");
    iframe.classList.add("aic_iframe");

    let src = "https://concierge.goodguys.ai/client/65648334c889c87babf59574/overlay";
    if (openingQuestion && openingQuestion !== "") {
        src += "?openingQuestion=" + encodeURIComponent(openingQuestion);
    }
    if (lc && lc !== "") {
        // Add an '&' if 'src' already has a query string (i.e., if 'openingQuestion' was set)
        src += (src.includes('?') ? '&' : '?') + "lc=" + encodeURIComponent(lc);
    }
    iframe.src = src;
    iframe.allowTransparency = true;

    iframe.addEventListener("load", function() {
    function adjustIframeContent() {
        if (iframe.contentWindow) {
            if (window.innerWidth < 768) {
                iframe.contentWindow.postMessage({type: 'toggleClientType', value: 'mobile'}, '*');
            } else {
                iframe.contentWindow.postMessage({type: 'toggleClientType', value: 'desktop'}, '*');
            }
        }
    }

    // Adjust once when the iframe loads
    adjustIframeContent();

    // Adjust on resize
    window.addEventListener("resize", adjustIframeContent);
});

    
        // add allow="microphone" for speech recognition
        iframe.allow = "microphone";
    

    wrapper.appendChild(iframe);

    const closeIcon = document.createElement("div");
    closeIcon.classList.add("aic_close-icon");
    wrapper.appendChild(closeIcon);

    // add event listener to close icon
    closeIcon.addEventListener("click", function () {
        
            document.body.removeChild(overlay);
            document.body.style.overflow = '';
            document.body.classList.remove('no-scroll');
        
    });

    // Add an event listener to the window object
    window.addEventListener("message", function (event) {
        // Check that the message is coming from the iframe
        if (event.origin === "https://concierge.goodguys.ai" || event.origin === "http://127.0.0.1:8000") {
            // Handle the message from the iframe
            console.log("Received message from iframe:", event.data);
            if (event.data === "hide_close_button") {
                closeIcon.style.display = "none";
            }
            else if (event.data === "show_close_button") {
                closeIcon.style.display = "block";
            }
            // set aic_wrapper width to top 20px and left 20px if the message "toggleFrameSize" is max
            else if (event.data.type === "toggleFrameSize") {
                let receivedValue = event.data.value;
                if (receivedValue === "max") {
                    wrapper.classList.remove("min");
                    wrapper.classList.add("max");
                }
                else if (receivedValue === "min") {
                    wrapper.classList.remove("max");
                    wrapper.classList.add("min");
                }
            }
            else if (event.data === "close_iframe") {
                // remove overlay
                document.body.removeChild(overlay);
            }
        }
    });
}

function openAIConcierge(openingQuestion, lc) {
    startConversation(openingQuestion, lc);
}

// store animation style property
let animation_style = "";

const closeMode = 'True';

// load css dynamically
const css_link = document.createElement("link");
css_link.rel = "stylesheet";
css_link.href = "https://concierge.goodguys.ai/static/client/css/goodguys_aic.css";
document.head.appendChild(css_link);


    // load floating image after the document is loaded
    window.onload = function() {
        let launch_icon = document.createElement("div");
        launch_icon.classList.add("aic_floating-icon");
        launch_icon.onclick = function () {
            startConversation();
        };
        document.body.appendChild(launch_icon);
    };