(function () {
    function initChat(agentId, baseUrl, media) {
        const style = document.createElement("style");
        style.textContent = `
            .chat-button-container {
                position: fixed;
                bottom: 20px;
                right: 20px;
                z-index: 1000;
            }
            .chat-button {
                width: 100px;
                height: 100px;
                border: none;
                border-radius: 50%;
                cursor: pointer;
                padding: 0;
                background-color: transparent;
                position: relative;
                box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
                text-transform: none!important;
                margin:0!important;
            }

            .chat-button video, .chat-button img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 50%;
            }
            .online-indicator {
                position: absolute;
                bottom: 5px;
                right: 8px;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                border: 2px solid transparent;
                z-index: 1001;
            }
            .online-indicator svg {
                display: block;
                width: 20px;
                height: 20px;
                fill: orange;
                stroke: white;
            }
            .chat-iframe-container {
                position: fixed;
                bottom: 20px;
                right: 20px;
                width: 350px;
                height: min(640px, 94vh);
                z-index: 1001;
                display: none;
                border-radius: 10px;
                box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
            }
            .chat-iframe {
                width: 100%;
                height: 100%;
                border: none;
                border-radius: 10px;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            }
            @media (max-width: 500px) {
                .chat-iframe-container {
                    height: min(800px, 94vh);
                    width: 100vw;
                    bottom: 0;
                    right: 0;
                }
                .chat-iframe {
                    border-radius: 0;
                }
            }
            .chat-timeout-modal-bg {
                position: fixed;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                background: rgba(0,0,0,0.3);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 10000;
            }

            .chat-timeout-modal {
                display: flex;
                flex-direction: column;
                max-width: 95%;
                width: 340px;
                background: white;
                border-radius: 10px;
                text-align: center;
                padding: 15px;
                font-family: Nunito, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            }
            .chat-timeout-question {
                margin: 0 0 1rem 0;
                font-size: 1.3rem;
                font-weight: bold;
            }
            .chat-timeout-buttons {
                display: flex;
                justify-content: center;
                padding: 0.5rem;
            }
            .chat-timeout-button {
                display: block;
                background: none;
                color: inherit;
                border: none;
                padding: 0.5rem 1.5rem;
                font: inherit;
                cursor: pointer;
                outline: inherit;
                border: 2px solid gray;
                border-radius: 20px;
                font-weight: bold;
                text-transform: uppercase;
                margin: 0 10px;
                transition: all 0.2s ease-in
            }

            .chat-timeout-button-no {
                border-color: white;
            }
            .chat-timeout-button-yes {
                color: #3490dc;
                border-color: #3490dc;
                box-shadow: 0 0 0px 0px white;
            }
            .chat-timeout-button-yes:hover {
                color: #3490dc;
                border-color: #3490dc;
                box-shadow: 0 0 2px 2px #3490dc;
            }
            .chat-button:before {
                content: 'How can we help you?';
                position: absolute;
                right: calc(100% + 10px);
                top: 50%;
                transform: translateY(-50%);
                background: #ffffff;
                /* border: 1px solid black; */
                color: black;
                width: auto;
                white-space: nowrap;
                /* height: 10px; */
                padding: 6px 10px;
                border-radius: 10px;
                font-size: 14px!important;
                font-weight: normal;
                line-height: 2;
                box-shadow: -1px 1px 4px 2px #00000070;
            }

            .chat-button::after {
                content: ' ';
                position: absolute;
                right: calc(100% + 6px);
                top: 50%;
                transform: translateY(-50%) rotate(45deg);
                background: #ffffff;
                color: black;
                width: 12px;
                height:12px;
            }
        `;
        document.head.appendChild(style);

        // Create button container
        const buttonContainer = document.createElement("div");
        buttonContainer.className = "chat-button-container";
        document.body.appendChild(buttonContainer);

        // Create button with video
        const button = document.createElement("button");
        button.className = "chat-button";
        const video = document.createElement(media == 'video' ? "video" : 'img');
        video.src = `${baseUrl}/render/agents/${agentId}/${media}-preview`;
        video.autoplay = true;
        video.loop = true;
        video.muted = true;
        video.playsInline = true;
        button.appendChild(video);

        // Add online indicator
        const onlineIndicator = document.createElement("div");
        onlineIndicator.className = "online-indicator";
        onlineIndicator.innerHTML = '<svg><path  d="\n' +
            'M 10.000 15.000\n' +
            'L 15.878 18.090\n' +
            'L 14.755 11.545\n' +
            'L 19.511 6.910\n' +
            'L 12.939 5.955\n' +
            'L 10.000 0.000\n' +
            'L 7.061 5.955\n' +
            'L 0.489 6.910\n' +
            'L 5.245 11.545\n' +
            'L 4.122 18.090\n' +
            'L 10.000 15.000\n' +
            '"/></svg>'
        buttonContainer.appendChild(onlineIndicator);

        buttonContainer.appendChild(button);

        // Create iframe container
        const iframeContainer = document.createElement("div");
        iframeContainer.className = "chat-iframe-container";
        document.body.appendChild(iframeContainer);

        // Create iframe
        const iframe = document.createElement("iframe");
        iframe.src = `${baseUrl}/render/agents/${agentId}/chat`;
        iframe.className = "chat-iframe";
        iframeContainer.appendChild(iframe);

        // Toggle functionality
        let isChatOpen = false;
        let closeTimeout = false;
        let savePageData = () => {
            let storage = localStorage.getItem('bot_data');
            if (storage) {
                storage = JSON.parse(storage)
            } else {
                storage = {}
            }

            if (!storage.pages) {
                storage.pages = [
                    {
                        page: window.location.pathname,
                        times: 1,
                    }
                ];
            } else {
                let page_index = storage.pages.findIndex(p => p.page === window.location.pathname);
                if (page_index !== -1) {
                    storage.pages[page_index].times += 1;
                } else {
                    storage.pages.push(
                        {
                            page: window.location.pathname,
                            times: 1,
                        })
                }
            }
            storage.time = (new Date).toISOString();
            localStorage.setItem('bot_data', JSON.stringify(storage));
        }
        const checkConfig = (config) => {
            let storage = localStorage.getItem('bot_data');
            if (!storage) {
                return true;
            }
            storage = JSON.parse(storage)


            if(config.type === 'not_display') {
                return false;
            }

            if (config.type === 'index_page' && window.location.pathname !== '/') {
                return false;
            }

            if (config.reset_period !== 0) {
                let last_date = new Date(storage.time)
                let hours = Math.abs((new Date) - last_date) / 36e5;
                if (hours > config.reset_period) {
                    localStorage.removeItem('bot_data');
                    return true;
                }
            }

            if (config.max_times === 0) {
                return true;
            }

            let page_total = 0;
            switch (config.type) {
                case 'per_page':
                    page_total = storage.pages.find(p => p.page === window.location.pathname)?.times ?? 0;
                    return config.max_times > page_total;
                case 'every_page':
                    page_total = storage.pages.reduce(function (a, b) {
                        return a + b.times;
                    }, 0);
                    return config.max_times > page_total;
            }

            return true;

        }
        const timeoutExit = async () => {
            if (!closeTimeout) {
                let data = await fetch(`${baseUrl}/render/agents/${agentId}/modal`)
                let config = await data.json();
                if (checkConfig(config)) {
                    openTimeoutModal();
                }
            }
        }
        const toggleView = () => {
            if (isChatOpen) {
                iframeContainer.style.display = "none";
            } else {
                iframeContainer.style.display = "block";
            }
            closeTimeout = true;
            isChatOpen = !isChatOpen;
        };

        window.addEventListener('click', (event) => {
            const withinBoundaries =
                event.composedPath().includes(document.querySelector('.chat-iframe-container'))
                || event.composedPath().includes(document.querySelector('.chat-button-container'))
                || event.composedPath().includes(document.querySelector('.chat-timeout-modal-bg'))
            if (!withinBoundaries && isChatOpen) {
                toggleView();
            }
        })

        button.addEventListener("click", toggleView);


        window.addEventListener("message", function (event) {
            if (event.data === "closeChatIframe") {
                iframeContainer.style.display = "none";
                isChatOpen = false;
            }
        });

        const openTimeoutModal = () => {
            savePageData();
            let modalBg = document.createElement('div');
            modalBg.classList.add('chat-timeout-modal-bg');

            let modal = document.createElement('div');
            modal.classList.add('chat-timeout-modal');

            let question = 'Is there something we can assist you with today?';
            let q = document.createElement('p');
            q.innerText = question;
            q.classList.add('chat-timeout-question');

            let buttons = document.createElement('div');
            buttons.classList.add('chat-timeout-buttons');
            let buttonYes = document.createElement('button');
            buttonYes.innerText = 'Yes';
            buttonYes.classList.add('chat-timeout-button', 'chat-timeout-button-yes');
            let buttonNo = document.createElement('button');
            buttonNo.innerText = 'No';
            buttonNo.classList.add('chat-timeout-button', 'chat-timeout-button-no');
            buttons.appendChild(buttonNo);
            buttons.appendChild(buttonYes);

            modal.appendChild(q);
            modal.appendChild(buttons);
            modalBg.appendChild(modal);
            document.body.appendChild(modalBg);
            buttonNo.addEventListener('click', () => {
                modalBg.remove();
            })
            buttonYes.addEventListener('click', (event) => {
                event.stopPropagation();
                toggleView();
                modalBg.remove();
            })
        }
        setTimeout(timeoutExit, 12000);
    }

    window.initChat = function (agentId, baseUrl, media = 'video') {
        if (document.readyState === "loading") {
            document.addEventListener("DOMContentLoaded", function () {
                initChat(agentId, baseUrl, media);
            });
        } else {
            initChat(agentId, baseUrl, media);
        }
    };
})();