(function () {
    // Create a style element for custom CSS
    const style = document.createElement("style");
    style.textContent = `
    @keyframes thinking {
      0%, 80%, 100% { opacity: 0; }
      40% { opacity: 1; }
    }
    .thinking-dot {
      width: 8px;
      height: 8px;
      background-color: #6b7280;
      border-radius: 50%;
      display: inline-block;
      animation: thinking 1.4s infinite ease-in-out both;
    }
    .thinking-dot:nth-child(1) { animation-delay: -0.32s; }
    .thinking-dot:nth-child(2) { animation-delay: -0.16s; }
    #chat-interface {
      font-family: Arial, sans-serif;
    }
    #chat-interface * {
      box-sizing: border-box;
    }

  `;
    document.head.appendChild(style);

    // Load Tailwind CSS
    const tailwindScript = document.createElement("script");
    tailwindScript.src = "https://cdn.tailwindcss.com";
    document.head.appendChild(tailwindScript);

    // Load marked library for Markdown parsing
    const markedScript = document.createElement("script");
    markedScript.src = "https://cdn.jsdelivr.net/npm/marked/marked.min.js";
    document.head.appendChild(markedScript);

    let buttonTriggerStatus = false;
    let threadId = "";
    let accessToken = "";
    // Wait for DOM content to be loaded
    document.addEventListener("DOMContentLoaded", initChat);

    async function initChat() {
      createContactUsButton();
      createRequestCallButton();
      createChatButton();
      setupEventListeners();

      try {
        const response = await fetch(
          "https://fitness.sidyum.com/version-test/api/1.1/wf/get_access_token",
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              userId:
                document.getElementById("info-from-bubble").dataset.userid,
            }),
          }
        );
        const res = await response.json();
        accessToken = res.response.accessToken;
      } catch (error) {
        console.log(error);
        alert("Please reload this webpage");
      }
    }

    function createChatInterface() {
      const container = document.createElement("div");
      if (!container) return;

      container.innerHTML = `
        <div class="relative bg-slate-100 shadow-xl border border-slate-300 md:w-[400px] flex flex-col md:fixed md:h-[600px] h-[100vh] md:right-5 md:bottom-5 md:rounded-[20px] overflow-hidden" id="chat-interface">
        <div class="z-10 bg-cyan-600 px-4 py-3 sticky top-0 w-full text-white text-xl font-semibold flex justify-between items-center">
            <span>Live Chat</span>
            <button onclick="hideChatInterface()" class="text-2xl hover:text-cyan-200 transition-colors" aria-label="Close chat">&times;</button>
        </div>

        <div id="chatMessages" class="flex-grow py-4 px-3 overflow-y-auto flex flex-col">
            <!-- Messages will be dynamically inserted here -->
        </div>

        <div id="thinkingAnimation" class="hidden px-4 py-2">
            <div class="flex space-x-2">
            <div class="w-2 h-2 bg-cyan-600 rounded-full animate-bounce"></div>
            <div class="w-2 h-2 bg-cyan-600 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
            <div class="w-2 h-2 bg-cyan-600 rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
            </div>
        </div>

        <div class="border-t border-slate-300 flex items-center p-2">
            <textarea id="messageInput" class="flex-grow px-3 py-2 border border-slate-300 rounded-l-md resize-none focus:outline-none focus:ring-2 focus:ring-cyan-500" placeholder="Type your message..." rows="1"></textarea>
            <button id="sendButton" onclick="sendMessageToNova()" class="bg-cyan-600 text-white p-2 rounded-r-md hover:bg-cyan-700 transition-colors focus:outline-none focus:ring-2 focus:ring-cyan-500" aria-label="Send message">
            send
            </button>
        </div>
        </div>
  `;
      document.body.appendChild(container);
    }

    function createFormInterface() {
      const container = document.createElement("div");
      if (!container) return;

      container.innerHTML = `
    <div
      class="fixed bg-[rgba(0,0,0,0.5)] z-50 top-0 flex justify-center items-center h-full w-full"
      onclick="hideFormInterface()"
      id="formOverlay"
    >
      <form
        class="bg-[#fff] w-[450px] sm:w-[350px] h-auto flex flex-col p-10 border rounded-2xl gap-2"
        id="salesForm"
      >
        <h2 class="text-cyan-500 text-center font-sans text-lg mb-4">
          ${document.getElementById("info-from-bubble").dataset.businessname}
        </h2>
        <input
          type="text"
          class="w-[100%] border-[2px] rounded-lg px-3 py-2 text-cyan-500 focus:border-cyan-500 focus:outline-none"
          placeholder="name"
          id="nameInput"
          required
        />
        <input
          type="text"
          class="w-[100%] border-[2px] rounded-lg px-3 py-2 text-cyan-500 focus:border-cyan-500 focus:outline-none"
          placeholder="number (+1 212 456 7890)"
          id="numberInput"
          required
        />
        <input
          type="email"
          class="w-[100%] border-[2px] rounded-lg px-3 py-2 text-cyan-500 focus:border-cyan-500 focus:outline-none"
          placeholder="email"
          id="emailInput"
          required
        />
        <button id="talk-with-sales" class="border bg-cyan-500 py-2 mt-3 rounded-lg text-white" type="submit">
          Talk with Sales
        </button>
      </form>
    </div>
  `;
      document.body.appendChild(container);

      // Prevent click events on the form from closing the overlay
      const salesForm = document.getElementById("salesForm");
      salesForm.addEventListener("click", (event) => {
        event.stopPropagation(); // Stop the event from reaching the formOverlay
      });

      salesForm.addEventListener("submit", handleSalesFormSubmit);
    }

    function addMessage(message, isUser = false) {
      const chatMessages = document.getElementById("chatMessages");
      const messageElement = document.createElement("div");
      messageElement.className = isUser
        ? "bg-slate-300 self-end mr-3 max-w-[70%] relative w-fit py-2 px-3 mb-2 rounded-lg rounded-tr-[0]"
        : "bg-cyan-500 ml-3 max-w-[70%] relative w-fit py-2 px-3 mb-2 rounded-lg rounded-tl-[0]";

      messageElement.innerHTML = `
    <div class="w-0 h-0 absolute top-0 ${
      isUser
        ? "right-0 rotate-[150deg] translate-x-2"
        : "left-0 rotate-[200deg] -translate-x-2"
    } border-t-[10px] border-r-[10px] border-b-[10px] border-l-[10px] border-solid border-t-transparent border-r-transparent border-b-${
        isUser ? "slate-300" : "cyan-500"
      } border-l-transparent"></div>
    <span class="break-words whitespace-normal h-1 text-sm">${marked.parse(
      message
    )}</span>
  `;

      chatMessages.appendChild(messageElement);
      chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    async function sendMessageToNova() {
      const messageInput = document.getElementById("messageInput");
      const message = messageInput.value.trim();
      if (message) {
        messageInput.value = "";
        showThinkingAnimation();
        addMessage(message, true);
        const ans = await handleNovaAi(message);
        if (ans.error == null) {
          if (getChildCount("chatMessages") <= 2) {
            threadId = ans.threadId;
          }
          addMessage(ans.response);
        } else {
          alert("An error occurred. Please try again later.");
          messageInput.value = message;
        }
        hideThinkingAnimation();
      }
    }

    async function handleNovaAi(message) {
      const vectorId =
        document.getElementById("info-from-bubble").dataset.vectorid;
      if (vectorId) {
        const aiName =
          document.getElementById("info-from-bubble").dataset.ainame;
        const businessName =
          document.getElementById("info-from-bubble").dataset.businessname;
        const businessNumber =
          document.getElementById("info-from-bubble").dataset.businessnumber;
        const userId =
          document.getElementById("info-from-bubble").dataset.userid;
        try {
          const response = await fetch("https://ma0358.buildship.run/nova-ai", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              message,
              threadId,
              vector: vectorId,
              businessName,
              aiName,
              businessNumber,
              accessToken,
            }),
          });
          return await response.json();
        } catch (error) {
          console.error("Error in handleNovaAi:", error);
          return { error: "Failed to communicate with the server" };
        }
      }
      return { error: "Vector ID not found" };
    }

    function createContactUsButton() {
      const button = document.createElement("div");
      button.innerHTML = "Contact Us";
      button.id = "show-chat-call";
      button.className =
        "fixed bottom-5 right-5 bg-cyan-500 text-white px-4 py-2 rounded-full cursor-pointer z-50";
      document.body.appendChild(button);
    }

    function createRequestCallButton() {
      const button = document.createElement("div");
      button.innerHTML = "Request a call";
      button.id = "request-call-from-vapi";
      button.className =
        "fixed bottom-20 right-5 bg-cyan-500 text-white px-4 py-2 rounded-full cursor-pointer z-50 hidden";
      document.body.appendChild(button);
    }

    function createChatButton() {
      const button = document.createElement("div");
      button.innerHTML = "Chat with Us";
      button.id = "chat-box-opened";
      button.className =
        "fixed bottom-36 right-5 bg-cyan-500 text-white px-4 py-2 rounded-full cursor-pointer z-50 hidden";
      document.body.appendChild(button);
    }

    function setupEventListeners() {
      document
        .getElementById("show-chat-call")
        .addEventListener("click", toggleButtons);
      document
        .getElementById("chat-box-opened")
        .addEventListener("click", showChatInterface);
      document
        .getElementById("request-call-from-vapi")
        .addEventListener("click", showFormInterface);
    }

    function toggleButtons() {
      buttonTriggerStatus = !buttonTriggerStatus;
      document
        .getElementById("request-call-from-vapi")
        .classList.toggle("hidden");
      document.getElementById("chat-box-opened").classList.toggle("hidden");
    }

    async function showChatInterface() {
      createChatInterface();
      hideButtons();
      showThinkingAnimation();
      const ans = await handleNovaAi("Hello");
      if (ans.error == null) {
        threadId = ans.threadId;
        addMessage(ans.response);
      }
      hideThinkingAnimation();
    }

    function showFormInterface() {
      createFormInterface();
      hideButtons();
    }

    function hideButtons() {
      document.getElementById("request-call-from-vapi").classList.add("hidden");
      document.getElementById("chat-box-opened").classList.add("hidden");
      document.getElementById("show-chat-call").classList.add("hidden");
    }

    function hideChatInterface() {
      const chatInterface = document.getElementById("chat-interface");
      if (chatInterface) chatInterface.remove();
      document.getElementById("show-chat-call").classList.remove("hidden");
      threadId = "";
    }

    function hideFormInterface() {
      const formOverlay = document.getElementById("formOverlay");
      if (formOverlay) formOverlay.remove();
      document.getElementById("show-chat-call").classList.remove("hidden");
    }

    async function handleSalesFormSubmit(e) {
      e.preventDefault();
      const name = document.getElementById("nameInput").value.trim();
      const number = document.getElementById("numberInput").value.trim();
      const email = document.getElementById("emailInput").value.trim();

      if (name && number && email) {
        const fieldsData = JSON.parse(
          document
            .getElementById("info-from-bubble")
            .dataset.fieldsid.replace(/'/g, '"')
        );

        const aiName =
          document.getElementById("info-from-bubble").dataset.ainame;
        const businessName =
          document.getElementById("info-from-bubble").dataset.businessname;
        const businessNumber =
          document.getElementById("info-from-bubble").dataset.businessnumber;
        const userId =
          document.getElementById("info-from-bubble").dataset.userid;

        try {
          const response = await fetch("https://ma0358.buildship.run/luna-ai", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              name,
              phone: number,
              fields: fieldsData,
              businessName,
              businessNumber,
              aiName,
              email,
              userId,
              accessToken,
            }),
          });

          const result = await response.json();
          if (result) {
            console.log(result);
            alert("Call has been scheduled");
            hideFormInterface();
          }
        } catch (error) {
          console.error("Error in handleSalesFormSubmit:", error);
          alert("An error occurred. Please try again later.");
        }
      } else {
        alert("Please fill in all fields");
      }
    }

    function getChildCount(elementId) {
      const element = document.getElementById(elementId);
      return element ? element.children.length : 0;
    }

    function showThinkingAnimation() {
      document.getElementById("thinkingAnimation").classList.remove("hidden");
      document.getElementById("sendButton").disabled = true;
      document.getElementById("sendButton").style.cursor = "not-allowed";
      document.getElementById("sendButton").classList.remove("bg-cyan-500");
      document.getElementById("sendButton").classList.add("bg-cyan-400");
    }

    function hideThinkingAnimation() {
      document.getElementById("thinkingAnimation").classList.add("hidden");
      document.getElementById("sendButton").disabled = false;
      document.getElementById("sendButton").style.cursor = "pointer";
      document.getElementById("sendButton").classList.add("bg-cyan-500");
      document.getElementById("sendButton").classList.remove("bg-cyan-400");
    }

    // Expose necessary functions to global scope
    window.hideChatInterface = hideChatInterface;
    window.hideFormInterface = hideFormInterface;
    window.sendMessageToNova = sendMessageToNova;
  })();