var chatContainer = document.createElement("div");
      chatContainer.id = "chatbot-chat-container";
      document.body.appendChild(chatContainer);
      const el = document.querySelector("#chatbot-chat-container")
      el.innerHTML = `<div><div class="chatbot-chat-toggle"><img class="chatbot-chat-icon" src="https://chatbot.r2u.it/frontend/public/assets/svg/noun-chat-6973649.svg"/><span> CHAT</span></div><div id="chatbot-chat-body"><div id="chatbot-header"><span class="chatbot-header-title">Chat</span><img class="chatbot-close-icon" src="https://chatbot.r2u.it/frontend/public/assets/svg/noun-less-4984256.svg"/></div><div id="chatbot-main"><div id="chatbot-onBoarding"><div role="presentation" tabindex="0" class="chatbot-container"><div class="chatbot-content"><div class="chatbot-chat-messages" id="chatbot-chat-messages"></div></div><div class="chatbot-footer"><div class="chatbot-footer-header"><div id="chatbot-chip-container"></div></div><div class="chatbot-footer-content"><div class="chatbot-input-container"><textarea id="chatbot-message-input" placeholder="Fai una domanda..."></textarea><button id="chatbot-send-message-button" onclick="getMessageAndSend()"><img src="https://chatbot.r2u.it/frontend/public/assets/svg/sendBlack-01.svg"/></button></div></div><div class="chatbot-footer-note"><span>BETA VERSION</span></div></div></div></div><div id="chatbot-consent"><p class="chatbot-information-text">Questa chatbot virtuale è una sperimentazione attivata dall'Università degli Studi Roma Tre con l'obiettivo di migliorare l'interazione offrendo un supporto rapido ed efficiente.</p><form class="chatbot-chat-form"><input type="text" class="chatbot-input-style" name="name" placeholder="Nome" required/><div class="chatbot-checkbox-container"><label class="chatbot-checkbox-option"><input type="checkbox" name="consent"/>Consenso al miglioramento del servizio con anonimo<p class="chatbot-consent-text">Con la presente, acconsento al fatto che la conversazione che sto avendo con questo modello di intelligenza artificiale possa essere utilizzata per migliorare il servizio stesso, nel rispetto del mio anonimato.</p></label></div><button type="submit" class="chatbot-start-chat-btn">Inizia chat</button></form></div></div></div></div>`;
      



const apiPath = "https://chatbot.r2u.it/backend" + "/api/v1/";

const onBoardingDiv = document.getElementById("chatbot-onBoarding");
const toggleButton = document.querySelector(".chatbot-chat-toggle");
const mainDiv = document.getElementById("chatbot-chat-body");
const closeIconChat = document.querySelector(".chatbot-close-icon");

const faqUsed = [];

onBoardingDiv.style.display = "none";

const consentDiv = document.getElementById("chatbot-consent");
const consentForm = consentDiv.querySelector(".chatbot-form");
skipConsentForm();
showReceivedTextMessage(
  "<p>Ciao, sono l'assistente virtuale dell'Università degli Studi Roma Tre. Come posso aiutarti oggi? </p>"
);

showAllMessages();


toggleButton.addEventListener("click", () => {
  mainDiv.classList.toggle("visible");
  console.log("clicked");
});

closeIconChat.addEventListener("click", () => {
  mainDiv.classList.remove("visible");
});

const chatForm = document.querySelector(".chatbot-chat-form");

chatForm.addEventListener("submit", function (event) {
  event.preventDefault(); // Previene il comportamento di default del form

  // Raccoglie i valori degli input
  const formData = new FormData(chatForm);
  const data = {
    firstName: formData.get("name"),
    consentToAnonymousImprovement:
      formData.get("consent") == "on" ? true : false,
  };

  fetch(apiPath + "contacts", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "X-API-KEY": "f1628f45-283e-4e35-b26c-a2c732f803aa",
    },
    body: JSON.stringify(data),
  })
    .then((response) => {
      if (response.ok) {
        return response.json();
      } else {
        throw new Error("Errore nella richiesta");
      }
    })
    .then((data) => {
      onBoardingDiv.style.display = "block";
      consentDiv.style.display = "none";
      console.log("Success:", data);
    })
    .catch((error) => {
      console.error("Error:", error);
    });
});

let isSendingMessage = false;

const messageInputElement = document.getElementById("chatbot-message-input");

messageInputElement.addEventListener("keydown", function (event) {
  if (event.key === "Enter" && !event.shiftKey) {
    event.preventDefault();
    if (!isSendingMessage) {
      getMessageAndSend();
    }
  }
});

function getMessageAndSend() {
    sendMessage(document.getElementById("chatbot-message-input").value.trim());
}


async function sendMessage(messageInput) {
  if (isSendingMessage || messageInput === "") {
    return;
  }

  document.getElementById("chatbot-send-message-button").disabled = true;
  isSendingMessage = true;
  showSentMessage(messageInput);
  showBotTyping();

  const { threadId } = getSessionStorageItems();
  let runId = null;
  const data = { content: messageInput };

  try {
    let response;
    if (threadId == undefined) {
      response = await fetch(apiPath + "thread", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-API-KEY": "f1628f45-283e-4e35-b26c-a2c732f803aa",
        },
        body: JSON.stringify(data),
      });
    } else {
      response = await fetch(apiPath + "thread/" + threadId + "/message", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-API-KEY": "f1628f45-283e-4e35-b26c-a2c732f803aa",
        },
        body: JSON.stringify(data),
      });
    }

    if (!response.ok) {
      throw new Error("Network response was not ok");
    }

    const responseData = await response.json();
    if (threadId == undefined) {
      console.log(responseData);
      sessionStorage.setItem("thread_id", responseData.thread_id);
    }
    if (responseData.answer_type == "faq"){
        setTimeout(() => {
        hideBotTyping();
        isSendingMessage = false;
        document.getElementById("chatbot-send-message-button").disabled = false;
        showReceivedTextMessage(responseData.answer_content);
        getFaq(responseData.tags);
        }, 1000);
        
    }else{
        runId = responseData.run_id;
        receiveMessage(runId);
    }
  } catch (error) {
    console.error("Error:", error);
    hideBotTyping();
    showReceivedTextMessage(
      "<p>Si è verificato un errore, riprova più tardi.</p>"
    );
    isSendingMessage = false;
    document.getElementById("chatbot-send-message-button").disabled = false;
  }
}

async function receiveMessage(runId) {
  const { threadId } = getSessionStorageItems();
  console.log(threadId, runId);

  try {
    const response = await fetch(
      apiPath + "thread/" + threadId + "/run/" + runId + "/messages",
      {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          "X-API-KEY": "f1628f45-283e-4e35-b26c-a2c732f803aa",
        },
      }
    );

    const data = await response.json();
    console.log("Success:", data);

    if (data.error) {
      showReceivedTextMessage(
        "<p>Si è verificato un errore, riprova più tardi.</p>"
      );
    } else {
      showReceivedTextMessage(data.messages[0].content[0].text.value.response);
        if (data.messages[0].content[0].text.value.tags) {
            getFaq(data.messages[0].content[0].text.value.tags);
        }  
    }
  } catch (error) {
    console.error("Error:", error);
    showReceivedTextMessage(
      "<p>Si è verificato un errore, riprova più tardi.</p>"
    );
  } finally {
    hideBotTyping();
    isSendingMessage = false;
    document.getElementById("chatbot-send-message-button").disabled = false;
  }
}

function getSessionStorageItems() {
  return {
    threadId: sessionStorage.getItem("thread_id"),
    runId: sessionStorage.getItem("run_id"),
  };
}

function showBotTyping() {
  const botTypingHTML =
    '<div class="chatbot-botTyping"><div class="chatbot-bounce1"></div><div class="chatbot-bounce2"></div><div class="chatbot-bounce3"></div></div>';
  showLoadingDots(botTypingHTML);
}

function hideBotTyping() {
  const botTyping = document.getElementById("chatbot-typingBot");
  if (botTyping) botTyping.remove();
}

function showSentMessage(message) {
  var chatMessages = document.getElementById("chatbot-chat-messages");
  var messageDiv = document.createElement("div");
  messageDiv.classList.add("chatbot-message", "chatbot-sent");
  var messageContent = document.createElement("div");
  messageContent.classList.add("chatbot-message-content");

  var messageText = document.createElement("p");
  messageText.textContent = message;
  messageContent.appendChild(messageText);

  messageDiv.appendChild(messageContent);
  chatMessages.appendChild(messageDiv);

  chatMessages.scrollTop = chatMessages.scrollHeight;

  document.getElementById("chatbot-message-input").value = "";
}

function showReceivedTextMessage(message) {
  var chatMessages = document.getElementById("chatbot-chat-messages");
  var messageDiv = document.createElement("div");
  messageDiv.classList.add("chatbot-message", "chatbot-received");
  var messageContent = document.createElement("div");
  messageContent.classList.add("chatbot-message-content");

  var avatarImg = document.createElement("img");
  avatarImg.src =
    "https://chatbot.r2u.it/frontend" + "/public/assets/img/avatar.png";
  avatarImg.classList.add("chatbot-avatar");
  messageDiv.appendChild(avatarImg);

  /*     var messageText = document.createElement('p');
        messageText.textContent = message;
        messageContent.appendChild(messageText); */

  messageContent.innerHTML = message;

  messageContent.classList.add("chatbot-fade-in");
  messageDiv.appendChild(messageContent);
  chatMessages.appendChild(messageDiv);

  /*  typeLineByLine('.chatbot-received .message-content p', 50);  */

  // Scroll automatico verso il basso quando si aggiunge un nuovo messaggio
  chatMessages.scrollTop = chatMessages.scrollHeight;
}

function showLoadingDots(htmlDots) {
  var chatMessages = document.getElementById("chatbot-chat-messages");
  var messageDiv = document.createElement("div");
  messageDiv.setAttribute("id", "chatbot-typingBot");
  messageDiv.classList.add("chatbot-message", "chatbot-received");
  var messageContent = document.createElement("div");
  messageContent.classList.add("chatbot-message-content");
  messageContent.innerHTML = htmlDots;
  messageDiv.appendChild(messageContent);
  chatMessages.appendChild(messageDiv);
  // Scroll automatico verso il basso quando si aggiunge un nuovo messaggio
  chatMessages.scrollTop = chatMessages.scrollHeight;
}

function typeLineByLine(selector, typingSpeed = 200) {
  // Seleziona solo l'ultimo elemento corrispondente al selettore
  const lines = document.querySelectorAll(selector);
  const lastLine = lines[lines.length - 1];
  if (!lastLine) return;

  let currentChar = 0;
  const originalText = lastLine.textContent;

  lastLine.textContent = "";
  lastLine.style.display = "inline";

  function typeNextChar() {
    if (currentChar < originalText.length) {
      lastLine.textContent = originalText.substring(0, currentChar + 1);
      currentChar++;
      setTimeout(typeNextChar, typingSpeed);
    }
  }

  typeNextChar();
}

function skipConsentForm() {
  const { threadId } = getSessionStorageItems();
  console.log(threadId);
  if (threadId) {
    onBoardingDiv.style.display = "block";
    consentDiv.style.display = "none";
  }
}

async function showAllMessages() {
  const { threadId } = getSessionStorageItems();

  if (threadId == undefined) {
    getFaq("iscrizione");
    return;
  }

  try {
    const response = await fetch(apiPath + "thread/" + threadId + "/messages", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        "X-API-KEY": "f1628f45-283e-4e35-b26c-a2c732f803aa",
      },
    });

    if (!response.ok) {
      throw new Error("Errore nella richiesta");
    }

    const data = await response.json();
    if (data.messages.length == 0) getFaq("iscrizione");
    data.messages.forEach((message) => {
      if (message.role == "user") {
        showSentMessage(message.content[0].text.value.response);
      } else {
        showReceivedTextMessage(message.content[0].text.value.response);
      }
    });
    console.log("Success:", data);
  } catch (error) {
    console.error("Error:", error);
  }
}


function showSuggestedQuestions(questions) {

    const container = document.getElementById("chatbot-chip-container");
    const oldChips = document.getElementById("chatbot-suggested-questions-container");
    
    if (questions.length == 0) {
        container.innerHTML = "";
        return
    }


    container.innerHTML = ""; // Clear previous questions
    const chipContainer = document.createElement("div");
    chipContainer.setAttribute("id","suggested-questions-container")
    container.appendChild(chipContainer); 

    questions.forEach((element) => {

        const chip = document.createElement("div");
        chip.classList.add("chatbot-suggested-question-chip");

        var chipText = document.createElement("p");
        chipText.textContent = element.question;
        chip.appendChild(chipText);
        chipContainer.appendChild(chip);
        chip.addEventListener("click", () => {
            console.log(isSendingMessage);
            sendMessage(element.question).then(() => {
                faqUsed.push(element.id);
                if(oldChips) oldChips.innerHTML = "";
            });
            
        });
    });
}


async function getFaq(tag= null) {
    try {
        let url = apiPath + "faq";
            if (tag) {
                url += "?tags="+tag;
            }
        const response = await fetch(url, {
            method: "GET",
            headers: {
                "Content-Type": "application/json",
                "X-API-KEY": "f1628f45-283e-4e35-b26c-a2c732f803aa",
            },
        });

        if (!response.ok) {
            throw new Error("Errore nella richiesta");
        }
        
        const data = await response.json();
        console.log(data);
        const unusedElements = [];
        data.content.forEach(element => {
            if (element.id && !faqUsed.includes(element.id)) {
                unusedElements.push(element);
            }
        });
        const shuffledData = unusedElements.sort(() => 0.5 - Math.random());
        const selectedData = shuffledData.slice(0, 3);
        console.log(selectedData);
        showSuggestedQuestions(selectedData);
        console.log("Success:", data);
    } catch (error) {
        console.error("Error:", error);
    }
}