(function () {
  function initWidget(){
    // Find the script tag that loaded this file
    const scripts = document.querySelectorAll('script[src*="gptassistant/widget"]');
    const thisScript = scripts[scripts.length - 1]; // last one
    const module = thisScript.getAttribute("data-module");
    const service = thisScript.getAttribute("data-service");
    
    const wrapper = document.createElement("div");
    wrapper.id = "gpt-widget-wrapper";
    wrapper.style.position = "fixed";
    wrapper.style.width = "630px";
    wrapper.style.height = "90vh";
    wrapper.style.zIndex = "9999";
    wrapper.style.cursor = "move";
    wrapper.style.display = "none"; // Hidden by default
    wrapper.style.top = "auto"; // Add this to initialize safely
    wrapper.style.left = "auto";
    wrapper.style.bottom = "auto";
    wrapper.style.right = "auto";

    const iframe = document.createElement("iframe");
    iframe.src = `https://dev.assistant.jogaapp.com/gptassistant`;
    iframe.src = `https://dev.assistant.jogaapp.com/gptassistant?module=${encodeURIComponent(module)}&service=${encodeURIComponent(service)}`;

    iframe.style.width = "100%";
    iframe.style.height = "100%";
    iframe.style.border = "1px solid #ccc";
    iframe.style.borderRadius = "20px";
    iframe.style.background = "#fff";
    iframe.style.boxShadow = "0 8px 30px rgba(0,0,0,0.3)";
    iframe.allow = "microphone";

    wrapper.appendChild(iframe);
    document.body.appendChild(wrapper);

    // Make the wrapper draggable
    makeDraggable(wrapper);

    // Create the toggle button
    const button = document.createElement("div");
    button.innerHTML = `
      <div class="ai-button-wrapper">
        <div class="ai-button-inner">
          <div class="ai-icon">
            <div class="sparkle"></div>
            Ai
          </div>
          <div class="ai-text">Assistant</div>
        </div>
      </div>
    `;

      makeDraggable(button);

    button.style.position = "fixed";
    button.style.bottom = "20px";
    button.style.right = "30px";
    button.style.zIndex = "10000";
    button.style.cursor = "pointer";
    document.body.appendChild(button);

    button.addEventListener("click", () => {
      const isHidden = wrapper.style.display === "none";

      if (isHidden) {
        // Responsive width/height
        const screenWidth = window.innerWidth;
        if (screenWidth <= 480) {
          wrapper.style.width = "95vw";
          wrapper.style.height = "85vh";
        } else if (screenWidth <= 768) {
          wrapper.style.width = "90vw";
          wrapper.style.height = "85vh";
        } else {
          wrapper.style.width = "630px"; // default desktop
          wrapper.style.height = "90vh";
        }

        // TEMPORARILY show to measure height
        wrapper.style.visibility = "hidden";
        wrapper.style.display = "block";

        const rect = button.getBoundingClientRect();
        const iframeHeight = wrapper.offsetHeight;
        const iframeWidth = wrapper.offsetWidth;
        const spaceAbove = rect.top;
        const spaceBelow = window.innerHeight - rect.bottom;

        // Decide whether to show above or below
        let top;
        if (spaceBelow >= iframeHeight) {
          top = rect.bottom;
        } else if (spaceAbove >= iframeHeight) {
          top = rect.top - iframeHeight;
        } else {
          top = (window.innerHeight - iframeHeight) / 2; // Center
        }

        let left = rect.left;
        if (left + iframeWidth > window.innerWidth) {
          left = window.innerWidth - iframeWidth - 10;
        }

        wrapper.style.top = `${top}px`;
        wrapper.style.left = `${left}px`;
        wrapper.style.bottom = "auto";
        wrapper.style.right = "auto";

        wrapper.style.visibility = "visible";
      } else {
        wrapper.style.display = "none";
      }
    });

    // Styles
    const style = document.createElement("style");
    style.textContent = `
      .ai-button-wrapper {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: linear-gradient(45deg, cyan, magenta, blue, lime, cyan);
        background-size: 300% 300%;
        animation: gradientRotate 4s linear infinite;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
      }
      .ai-button-inner {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: #f5f7fa;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff;
      }
      .ai-icon {
        font-size: 16px;
        font-weight: bold;
        background: linear-gradient(to right, #00c3ff, #a200ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        display: flex;
        align-items: center;
        gap: 4px;
      }
      .ai-text {
        font-size: 12px;
        font-weight: 600;
        color: #a200ff;
      }
      .sparkle {
        width: 12px;
        height: 12px;
        background: #00c3ff;
        clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
        animation: twinkle 2s ease-in-out infinite;
      }
      @keyframes gradientRotate {
        0% { background-position: 0% 50%; }
        100% { background-position: 100% 50%; }
      }
      @keyframes twinkle {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.5); opacity: 0.5; }
      }

      @media (max-width: 768px) {
        #gpt-widget-wrapper {
          width: 90vw !important;
          height: 85vh !important;
          border-radius: 16px;
        }
      }

      @media (max-width: 480px) {
        #gpt-widget-wrapper {
          width: 95vw !important;
          height: 85vh !important;
          border-radius: 12px;
        }
      }
    `;
    document.head.appendChild(style);

    function makeDraggable(target, handle = target) {
      let isMouseDown = false;
      let offset = { x: 0, y: 0 };

      handle.addEventListener("mousedown", function (e) {
        isMouseDown = true;
        offset = {
          x: target.offsetLeft - e.clientX,
          y: target.offsetTop - e.clientY,
        };
        target.style.transition = "none";
      });

      document.addEventListener("mouseup", function () {
        isMouseDown = false;
      });

      document.addEventListener("mousemove", function (e) {
        e.preventDefault();
        if (isMouseDown) {
          target.style.left = e.clientX + offset.x + "px";
          target.style.top = e.clientY + offset.y + "px";
          target.style.bottom = "auto";
          target.style.right = "auto";
        }
      });
    }
  }

  // Ensure DOM is ready before running
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initWidget);
  } else {
    initWidget();
  }


})();