const AGENTLAB_AGENT_DATA = {"createdAt":"2025-04-01T20:43:47.971Z","updatedAt":"2025-04-01T20:57:51.982Z","id":3,"style":{"banner":true,"topSpace":0,"leftSpace":0,"mainColor":"#6ae93e","rightSpace":20,"bottomSpace":20,"headerImage":"https://s3.eu-central-1.amazonaws.com/agentlab-prod-public/agents/0b140882-aec6-49bb-9f10-07a389e2bd66/public/headerImage?1743716564706","dashboardImage":"https://s3.eu-central-1.amazonaws.com/agentlab-prod-public/agents/0b140882-aec6-49bb-9f10-07a389e2bd66/public/dashboardImage?1743716564706","secondaryColor":"#31672b","widgetPosition":"bottom_right","chatLaunchImage":"https://s3.eu-central-1.amazonaws.com/agentlab-prod-public/agents/0b140882-aec6-49bb-9f10-07a389e2bd66/public/chatLaunchImage?1743716564706"},"name":"Giulia | Concierge Virtuale","description":"Gran Paradiso Hotel Spa","payoff":"L'Intelligenza Artificiale per Hotel","systemPrompt":"","organizationDescription":"Concierge virtuale del Gran Paradiso Hotel Spa.","personality":null,"draftId":"0b140882-aec6-49bb-9f10-07a389e2bd66"}
    const AGENTLAB_CONFIG = {
      ANIMATION_TIMEOUTS: {},
      IFRAME_ID: "AGENTLAB_IFRAME",
      BTN_ID: "AGENTLAB_BTN",
      hideElement: (elementId, addHideClass) => {
        if (elementId && AGENTLAB_CONFIG.ANIMATION_TIMEOUTS[elementId]) {
            clearTimeout(AGENTLAB_CONFIG.ANIMATION_TIMEOUTS[elementId])
            AGENTLAB_CONFIG.ANIMATION_TIMEOUTS[elementId] = null;
        }
        let element = document.getElementById(elementId)

        if (element) {
            element.style.animation = addHideClass ? "fadeOut 0.2s ease-out forwards" : "slideFadeOut 0.2s ease-out forwards"
            AGENTLAB_CONFIG.ANIMATION_TIMEOUTS[elementId] = setTimeout(() => {
              element.setAttribute("hidden", true)
              if(addHideClass) 
                element?.classList?.add("agentlab-hide");
            }, 400);
        }
      },
      showElement: (elementId, removeHideClass) => {
        if (elementId && AGENTLAB_CONFIG.ANIMATION_TIMEOUTS[elementId]) {
            clearTimeout(AGENTLAB_CONFIG.ANIMATION_TIMEOUTS[elementId])
            AGENTLAB_CONFIG.ANIMATION_TIMEOUTS[elementId] = null;
        }
        let element = document.getElementById(elementId)
        if (element) {
            element.style.animation = removeHideClass ? "fadeIn 0.2s ease-out forwards" : "slideFadeIn 0.2s ease-out forwards"
            element?.removeAttribute("hidden");
            if(removeHideClass)
              element?.classList?.remove("agentlab-hide");
        }
      }
    }

    function addStyle() {
const style = document.createElement("style");
style.innerHTML = `
@keyframes slideFadeIn {
  0% {
    opacity: 0;
    transform: translateY(50px);
    /* transform: translateY(100%);  */
  }
  50% {
    opacity: 0.3;
    /* transform: translateY(-30px); */
  }
  99% {
    opacity: 0.8;
    transform: translateY(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideFadeOut {
  0% {
    opacity: 1;
    transform: translateY(0);
    /* transform: translateY(100%);  */
  }
  50% {
    opacity: 0.8;
    transform: translateY(2px);
    /* transform: translateY(-30px); */
  }
  99% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform: translateY(50px);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes shadow {
  0% {
    box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, 0.45);
  }
  50% {
    box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 0.45);
  }
  100% {
    box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, 0.45);
  }
}
@keyframes size-pulse {
  0% {
    transform: scale(1);
    filter: blur(10px);
  }
  50% {
    transform: scale(0.2);
  }
  100% {
    transform: scale(1);
    filter: blur(10px);
  }
}
@keyframes top-left-pulse {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-5px, -5px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes top-right-pulse {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(5px, -5px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes bottom-right-pulse {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(5px, 5px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes bottom-left-pulse {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-5px, 5px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes shrink {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.fade-in {
  animation: fadeIn 0.5s ease-in-out forwards;
}

.shrink {
  transform: scale(1);
  transition: all 0.2s ease-in-out;
}

.shrink:active {
  transform: scale(0.9);
}

#AGENTLAB_IFRAME {
  position: fixed;
  z-index: 9999999999999;
  opacity: 0;
  border-radius: 17px;
}
#AGENTLAB_IFRAME .agentlab-hide {
  display: none !important;
}
#AGENTLAB_IFRAME .loader-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 17px;
  border: 1px solid #f2f2f2;
  z-index: 1;
}
#AGENTLAB_IFRAME .loader-container #spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left: 6px solid #ffffff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}
#AGENTLAB_IFRAME iframe {
  background-color: transparent;
  height: 60vh;
  z-index: 0;
  border: none;
  overflow: hidden;
  border-radius: 17px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  aspect-ratio: 0.65;
}

#AGENTLAB_BTN {
  width: 80px;
  min-width: 80px;
  height: 80px;
  min-height: 80px;
  border-radius: 9999px;
  position: fixed;
  z-index: 9999999999999;
  transition: all 0.2s ease-in-out;
  -webkit-tap-highlight-color: transparent;
}
#AGENTLAB_BTN .glowing {
  position: relative;
  width: 100%;
  height: 100%;
}
#AGENTLAB_BTN .image,
#AGENTLAB_BTN .close-image {
  width: 85%;
  height: 85%;
  border-radius: 100%;
  background-color: white;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  z-index: 99;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
#AGENTLAB_BTN .circles-container {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: visible;
  z-index: -1;
  animation: rotate 12s linear infinite;
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 120%;
  margin-left: -10%;
  margin-top: -10%;
}
#AGENTLAB_BTN .circles-container .circle {
  width: 50%;
  height: 50%;
  position: absolute;
  filter: blur(10px);
  border-radius: 99999px;
  transition: all 0.12s ease-in-out;
}
#AGENTLAB_BTN .circles-container .top-left {
  top: 16px;
  left: 16px;
  z-index: 1;
  animation: size-pulse 12s infinite ease-in-out, top-left-pulse 12s infinite ease-in-out;
}
#AGENTLAB_BTN .circles-container .top-right {
  top: 16px;
  right: 16px;
  z-index: 2;
  animation: size-pulse 12s infinite ease-in-out, top-right-pulse 12s infinite ease-in-out;
}
#AGENTLAB_BTN .circles-container .bottom-left {
  bottom: 16px;
  left: 16px;
  z-index: 2;
  animation: size-pulse 12s infinite ease-in-out, bottom-left-pulse 12s infinite ease-in-out;
}
#AGENTLAB_BTN .circles-container .bottom-right {
  bottom: 16px;
  right: 16px;
  z-index: 1;
  animation: size-pulse 12s infinite ease-in-out, bottom-right-pulse 12s infinite ease-in-out;
}
#AGENTLAB_BTN .image {
  animation: fadeIn 0.3s ease-in-out forwards;
  z-index: 1;
}
#AGENTLAB_BTN .close-image {
  z-index: 0;
}
#AGENTLAB_BTN:not(.initialized) .close-image {
  opacity: 0;
}
#AGENTLAB_BTN.initialized .close-image {
  animation: fadeOut 0.4s ease-in-out 0.1s forwards;
}
#AGENTLAB_BTN.opened .image {
  animation: fadeOut 0.3s ease-in-out forwards;
}
#AGENTLAB_BTN.opened .close-image {
  animation: fadeIn 0.3s ease-in-out forwards;
}

#AGENTLAB_CHAT_CONTROLS {
  position: absolute;
}

@media screen and (max-width: 678px) {
  #AGENTLAB_IFRAME {
    top: 0 !important;
    left: 0 !important;
    right: unset !important;
    bottom: unset !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
  }
  #AGENTLAB_IFRAME iframe {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
  }
  #AGENTLAB_BTN {
    bottom: 10px !important;
    right: 4px !important;
    top: unset !important;
    left: unset !important;
    width: 60px !important;
    min-width: 60px !important;
    height: 60px !important;
    min-height: 60px !important;
  }
  #AGENTLAB_BTN.opened {
    bottom: 10px !important;
    right: -3px !important;
  }
  #AGENTLAB_BTN.opened .circles-container {
    display: none;
  }
}
`

document.head.appendChild(style);
}
      
    function addCircle(parentEl, className, background) {
      const circle = document.createElement("div");
      circle.className = `circle fade-in ${className || ""}`;
      circle.style.backgroundColor = background !== "undefined" ? background : "#7980D8";

      if (parentEl) parentEl.appendChild(circle);
    }

    let positions = {};
    switch (AGENTLAB_AGENT_DATA?.style?.widgetPosition) {
        case "bottom_right":
            positions = {
                bottom: `${AGENTLAB_AGENT_DATA?.style?.bottomSpace || 0}px`,
                right: `${AGENTLAB_AGENT_DATA?.style?.rightSpace || 0}px`
            }
            break;
        case "bottom_left":
            positions = {
                bottom: `${AGENTLAB_AGENT_DATA?.style?.bottomSpace || 0}px`,
                left: `${AGENTLAB_AGENT_DATA?.style?.leftSpace || 0}px`
            }
            break;
        case "top_left":
            positions = {
                top: `${AGENTLAB_AGENT_DATA?.style?.topSpace || 0}px`,
                left: `${AGENTLAB_AGENT_DATA?.style?.leftSpace || 0}px`
            }
            break;
        case "top_right":
            positions = {
                top: `${AGENTLAB_AGENT_DATA?.style?.topSpace || 0}px`,
                right: `${AGENTLAB_AGENT_DATA?.style?.rightSpace || 0}px`
            }
            break;
        default:
            positions = {
                bottom: "15px",
                right: "15px"
            }
    }

    function loadImageAsBase64(url) {
      return new Promise(async (resolve) => {
        try{
          const response = await fetch(url);
          const blob = await response.blob();
          const reader = new FileReader();
          reader.onloadend = () => resolve(reader.result);
          reader.readAsDataURL(blob);
        } catch(error){
          resolve(url);
        }
      });
    }

    async function createAgentlabBtn() {

      const bg = AGENTLAB_AGENT_DATA?.style?.mainColor || "#7980D8";
      const bg2 = `${AGENTLAB_AGENT_DATA?.style?.secondaryColor}` || "#7980D8";

      const AGENTLAB_BTN = document.createElement("div");
      AGENTLAB_BTN.id = AGENTLAB_CONFIG.BTN_ID;
      AGENTLAB_BTN.className = "shrink fade-in";
      AGENTLAB_BTN.style.top = positions?.top || "";
      AGENTLAB_BTN.style.bottom = positions?.bottom || "";
      AGENTLAB_BTN.style.left = positions?.left || "";
      AGENTLAB_BTN.style.right = positions?.right || "";
      AGENTLAB_BTN.onclick = function () {
          let iframeElement = document.getElementById(AGENTLAB_CONFIG.IFRAME_ID)
          let widgetBtn = document.getElementById(AGENTLAB_CONFIG.BTN_ID)
          if (widgetBtn) {
            widgetBtn.classList.toggle("opened");
          }
          if (iframeElement) {
              if (iframeElement?.hasAttribute("hidden")) {
                  AGENTLAB_CONFIG.showElement(AGENTLAB_CONFIG.IFRAME_ID);
                  // AGENTLAB_CONFIG.hideElement(AGENTLAB_CONFIG.BTN_ID);
              }
              else {
                  AGENTLAB_CONFIG.hideElement(AGENTLAB_CONFIG.IFRAME_ID);
                  // AGENTLAB_CONFIG.showElement(AGENTLAB_CONFIG.BTN_ID);
              }

          }
      }

      const innerDiv = document.createElement("div");
      innerDiv.className = "glowing fade-in";

      const circlesContainer = document.createElement("div");
      circlesContainer.className = "circles-container fade-in";
      addCircle(circlesContainer, "top-left", bg);
      addCircle(circlesContainer, "top-right", bg2);
      addCircle(circlesContainer, "bottom-left", bg2);
      addCircle(circlesContainer, "bottom-right", bg);
      innerDiv.appendChild(circlesContainer);

      const image = document.createElement("img");
      image.className = "image";
      const imageUrl = AGENTLAB_AGENT_DATA?.style?.chatLaunchImage || "https://app.agentlab.so/assets/images/placeholder.png"
      image.src = await loadImageAsBase64(imageUrl);
      innerDiv.appendChild(image);


      const closeImg = document.createElement("img");
      closeImg.className = "close-image";
      const closeImgUrl = "https://app.agentlab.so/assets/images/widget_close.png"
      closeImg.src = closeImgUrl;
      innerDiv.appendChild(closeImg);



      AGENTLAB_BTN.appendChild(innerDiv)
      document.body.appendChild(AGENTLAB_BTN);
      setTimeout(() => {
        AGENTLAB_BTN.classList.add("initialized")
      }, 2000)
    }

    function getAgentlabSessionId () {
      return localStorage.getItem("AGENTLAB_SESSION_ID")
    }
      
    function initLoading (parentNode) {
      if(parentNode){
        let loaderContainer = document.createElement("div");
        loaderContainer.id = "AGENTLAB-LOADER";
        loaderContainer.className = "loader-container";
        // loader
        let loader = document.createElement("div");
        loader.id = "spinner";
        loader.style = ""
        loaderContainer.appendChild(loader);
        parentNode.appendChild(loaderContainer);
      }
    }

    function showLoader () {
      const loaderEl = document.getElementById("AGENTLAB-LOADER")
      if (loaderEl) {
        AGENTLAB_CONFIG.showElement("AGENTLAB-LOADER", true);
      }
    }

    function hideLoader () {
      const loaderEl = document.getElementById("AGENTLAB-LOADER")
      if (loaderEl) {
        setTimeout(() => {
          AGENTLAB_CONFIG.hideElement("AGENTLAB-LOADER", true);
        }, 500)
      }
    }

    async function initIframe () {
      const sessionId = getAgentlabSessionId();
      
      const AGENTLAB_IFRAME_CONTAINER = document.createElement("div");
      AGENTLAB_IFRAME_CONTAINER.id = "AGENTLAB_IFRAME";
      AGENTLAB_IFRAME_CONTAINER.hidden = true;
      // initLoading(AGENTLAB_IFRAME_CONTAINER);
      const AGENTLAB_IFRAME = document.createElement("iframe");
      // AGENTLAB_IFRAME.addEventListener("load", () => {
      //   setTimeout(() => {
      //     hideLoader();
      //   }, 1000)
      // })
      
      AGENTLAB_IFRAME.setAttribute("allow", "microphone")
      if(sessionId)
        AGENTLAB_IFRAME.src = "https://app.agentlab.so/w/0b140882-aec6-49bb-9f10-07a389e2bd66/chat?session=" + sessionId
      else  
        AGENTLAB_IFRAME.src = "https://app.agentlab.so/w/0b140882-aec6-49bb-9f10-07a389e2bd66/chat"
      AGENTLAB_IFRAME_CONTAINER.style.top = positions?.top ? `${AGENTLAB_AGENT_DATA?.style?.topSpace + 80}px` : "";
      AGENTLAB_IFRAME_CONTAINER.style.bottom = positions?.bottom ? `${AGENTLAB_AGENT_DATA?.style?.bottomSpace + 80}px` : "";
      AGENTLAB_IFRAME_CONTAINER.style.left = positions?.left || "";
      AGENTLAB_IFRAME_CONTAINER.style.right = positions?.right || "";
      const iframeHeight = `${window.innerHeight - 80 - 80}px`
      AGENTLAB_IFRAME.style.height = iframeHeight;
      AGENTLAB_IFRAME_CONTAINER.appendChild(AGENTLAB_IFRAME);
      window.addEventListener("resize", () => {
        const iframeEl = document.getElementById("AGENTLAB_IFRAME");
        if(iframeEl){
          const iframeHeight = `${window.innerHeight - 80 - 80}px`
          iframeEl.style.height = iframeHeight;
        }
      })
      window.addEventListener("message", (event) => {
        if(event?.origin !== "https://app.agentlab.so") return;
        // console.log("sessionId message", event?.data)
        if (event.data?.action === "iframeSessionChange") {
          const newSessionId = event.data.newSessionId
          const sessionId = getAgentlabSessionId();
          if(newSessionId !== sessionId){
            localStorage.setItem("AGENTLAB_SESSION_ID", newSessionId)
            const iframeEl = document.querySelector("#AGENTLAB_IFRAME iframe");
            if(iframeEl){
              // showLoader();
              // iframeEl.src = "about:blank";
              // setTimeout(() => {
              //   hideLoader();
              //   // iframeEl.src = "https://app.agentlab.so/w/0b140882-aec6-49bb-9f10-07a389e2bd66/chat?session=" + newSessionId;
              // }, 1000)
            }
          }
          else {
            setTimeout(() => {
              hideLoader();
            }, 1000)
          }
        }
      }, false);
      document.body.appendChild(AGENTLAB_IFRAME_CONTAINER);
    }
    addStyle();
    createAgentlabBtn();
    
    initIframe();