(function () {
    'use strict';

    var PIDJ_URL = "https:\/\/gopidj.com\/webtext\/pc:177d7271-7275-5995-a46c-8d4b883b9682";
    var LAUNCHER_IMG_SRC = "https:\/\/gopidj.com\/ui-imgs\/webtext\/chat.svg";

    var tmpl = document.createElement('template');
    tmpl.innerHTML = `
        <style>
            :host {
                all: initial;
                display: block;
                position: fixed;
                z-index: 2147483646;
                --primary-color: #744E89;
	            --primary-color-200: color-mix(in srgb, var(--primary-color), white 60%);
            }
            :host *,
            :host *::before,
            :host *::after {
                box-sizing: border-box;
            }
            .dock {
                position: fixed;
                bottom: 20px;
                right: 20px;
                display: flex;
                flex-direction: column;
                align-items: flex-end;
            }
            .mobile-launcher {
                display: none;
                width: 48px;
                height: 48px;
                padding: 10px;
                justify-content: center;
                align-items: center;
                gap: 10px;
                border: none;
                border-radius: 100px;
                background: var(--primary-color);
                cursor: pointer;
                opacity: 0;
                transition: opacity 2s linear;
            }
            .mobile-launcher img {
                width: 18px;
                height: 18px;
            }
            .mobile-launcher.visible {
                opacity: 1;
            }
            .desktop-launcher {
                display: flex;
                padding: 6px 20px 6px 6px;
                align-items: center;
                gap: 10px;
                border-radius: 1000px;
                border: 1px solid var(--primary-color-200);
                background: #FFFFFF;
                font-weight: 500;
                color: #181D27;
                cursor: pointer;
                opacity: 0;
                transition: opacity 2s linear;
            }
            .desktop-launcher-icon {
                display: flex;
                width: 40px;
                height: 40px;
                padding: 10px;
                justify-content: center;
                align-items: center;
                gap: 10px;
                border: none;
                border-radius: 100px;
                background: var(--primary-color);
            }
            .desktop-launcher-icon img {
                width: 18px;
                height: 18px;
            }
            .desktop-launcher.visible {
                opacity: 1;
            }
            .panel {
                position: absolute;
                bottom: calc(100% + 12px);
                right: 0;
                width: min(400px, calc(100vw - 40px));
                height: min(540px, calc(100vh - 100px));
                max-height: calc(100vh - 100px);
                background: #fff;
                border-radius: 20px;
                box-shadow: 0 12px 40px rgba(0,0,0,0.25);
                display: flex;
                flex-direction: column;
                overflow: hidden;
                opacity: 0;
                visibility: hidden;
                transform: translateY(8px);
                transition: opacity 0.2s ease, visibility 0.2s, transform 0.2s ease;
            }
            .panel.open {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }
            .close {
                position: absolute;
                top: 12px;
                right: 12px;
                display: flex;
                width: 32px;
                height: 32px;
                justify-content: center;
                align-items: center;
                gap: 10px;
                border: none;
                background: transparent;
                cursor: pointer;
            }
            .close svg {
                width: 20px;
                height: 20px;
            }
            iframe {
                flex: 1;
                width: 100%;
                min-height: 0;
                border: 0;
            }

            @media (max-width: 767px), (hover: none) and (pointer: coarse) {
                .mobile-launcher {
                    display: flex;
                }
                .desktop-launcher {
                    display: none;
                }
            }
        </style>
        <div class="dock">
            <div class="panel" part="panel" role="dialog" aria-modal="true" aria-label="Chat" hidden>
                <button type="button" class="close" aria-label="Close" title="Close chat">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                        <path
                            d="M15 5L5 15M5 5L15 15"
                            stroke="#FFFFFF"
                            stroke-width="1.5"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        />
                    </svg>
                </button>
                <iframe title="Chat" src="about:blank" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
            <button type="button" class="mobile-launcher" part="mobile-launcher" title="Open chat">
                <img alt="" decoding="async" />
            </button>
            <button type="button" class="desktop-launcher" part="desktop-launcher" title="Open chat">
                <div class="desktop-launcher-icon">
                    <img alt="" decoding="async" />
                </div>
                Start a conversation
            </button>
        </div>
    `;

    class PidjEmbedWidget extends HTMLElement {
        connectedCallback() {
            if (this.shadowRoot) {
                return;
            }

            var self = this;
            var shadow = this.attachShadow({ mode: 'open' });
            shadow.appendChild(tmpl.content.cloneNode(true));

            var panel = shadow.querySelector('.panel');
            var mobileLauncher = shadow.querySelector('.mobile-launcher');
            var desktopLauncher = shadow.querySelector('.desktop-launcher');
            var closeBtn = shadow.querySelector('.close');
            var iframe = shadow.querySelector('iframe');
            var mobileLauncherImg = mobileLauncher.querySelector('img');
            var desktopLauncherImg = desktopLauncher.querySelector('img');

            mobileLauncherImg.src = LAUNCHER_IMG_SRC;
            mobileLauncherImg.alt = 'Open chat';

            desktopLauncherImg.src = LAUNCHER_IMG_SRC;
            desktopLauncherImg.alt = 'Open chat';

            function onKeydown(e) {
                if (e.key === 'Escape') {
                    self.close();
                }
            }

            this.open = function () {
                if (panel.classList.contains('open')) {
                    return;
                }
                if (!iframe.getAttribute('src') || iframe.getAttribute('src') === 'about:blank') {
                    iframe.src = PIDJ_URL;
                }
                panel.hidden = false;
                requestAnimationFrame(function () {
                    panel.classList.add('open');
                    document.addEventListener('keydown', onKeydown);
                });
            };

            this.close = function () {
                if (!panel.classList.contains('open')) {
                    return;
                }
                panel.classList.remove('open');
                document.removeEventListener('keydown', onKeydown);

                var settled = false;
                function finish() {
                    if (settled) {
                        return;
                    }
                    settled = true;
                    panel.removeEventListener('transitionend', onTransEnd);
                    clearTimeout(fallback);
                    if (!panel.classList.contains('open')) {
                        panel.hidden = true;
                    }
                }
                function onTransEnd(e) {
                    if (e.target === panel && e.propertyName === 'opacity') {
                        finish();
                    }
                }
                var fallback = setTimeout(finish, 400);
                panel.addEventListener('transitionend', onTransEnd);
            };

            mobileLauncher.addEventListener('click', function () {
                if (!panel.classList.contains('open')) {
                    self.open();
                } else {
                    self.close();
                }
            });

            desktopLauncher.addEventListener('click', function () {
                if (!panel.classList.contains('open')) {
                    self.open();
                } else {
                    self.close();
                }
            });

            closeBtn.addEventListener('click', function () {
                self.close();
            });

            setTimeout(function () {
                mobileLauncher.classList.add('visible');
                desktopLauncher.classList.add('visible');
            }, 250);
        }
    }

    var tag = 'pidj-embed-widget';
    if (!customElements.get(tag)) {
        customElements.define(tag, PidjEmbedWidget);
    }

    if (document.body) {
        document.body.appendChild(document.createElement(tag));
    } else {
        document.appendChild(document.createElement(tag));
    }
})();