function record() {
  let recognition = new webkitSpeechRecognition();
  recognition.lang = "ru-RU";

  const voiceVisualizer = document.querySelector(".voice-visualizer");
  const mess_input = document.getElementById("chat-message-input");

  const btnStopRecord = document.querySelector(".stop-record");

  recognition.onresult = function (event) {
    mess_input.value = event.results[0][0].transcript;
    const message = mess_input.value;
    if (message) {
      hideButtonSend(message);
    }

    mess_input.focus();
    auto_grow(mess_input);
  };

  recognition.start();

  recognition.onstart = function () {
    voiceVisualizer.style.display = "flex";
  };

  btnStopRecord.onclick = function () {
    recognition.stop();
  };

  recognition.onend = function () {
    voiceVisualizer.style.display = "none";
  };
}

function speakMessage(e) {
  const parentElement = e.closest("div");
  const textSpeak = parentElement.parentNode.parentNode.childNodes[1].innerText;
  let speakSvg = parentElement.querySelector('a svg use');

  if (speakSvg.href.animVal == '#listen-voice') {
    let utterance = new SpeechSynthesisUtterance(textSpeak);
    utterance.lang = "ru-RU";
    utterance.rate = 1.1;
    window.speechSynthesis.speak(utterance);
    speakSvg = speakSvg.setAttribute('xlink:href', '#' + 'listen-voice-stop');
    parentElement.querySelector('a').setAttribute('title', 'остановить');

    utterance.addEventListener('end', function () {
      parentElement.querySelector('a svg use').setAttribute('xlink:href', '#' + 'listen-voice');
      parentElement.querySelector('a').setAttribute('title', 'прослушать');
  })
  } else {
    window.speechSynthesis.cancel();
    speakSvg = speakSvg.setAttribute('xlink:href', '#' + 'listen-voice');
    parentElement.querySelector('a').setAttribute('title', 'прослушать');
  }
}
// end record

// copy text
function copyAiResponse(elem) {
  let parentElement = elem.closest("div");
  let text = parentElement.parentNode.parentNode.childNodes[1].innerText;
  let copiedLabel = parentElement.querySelector(".btn-copy-label");
  let copySvg = parentElement.querySelector('a svg');

  navigator.clipboard
    .writeText(text)
    .then(() => {
      copiedLabel.classList.remove("displayNone");
      copySvg.style.stroke = "var(--green-btn-submit)";
      setTimeout(() => {
        copiedLabel.classList.add("displayNone");
        copySvg.style.stroke = "var(--color-dark-grey-text)";
      }, 1500);
    })
    .catch((error) => {
      console.error("Failed to copy text: ", error);
    });
}

function scrollDown() {
  const chatWindow = document.querySelector(".aichat__content__body.aichat-window");
  const chatWindowInner = document.querySelector(".aichat-window__chat-inner");
  if (chatWindow) {
    chatWindow.scrollTop = chatWindowInner.scrollHeight + 100;
  }
}

function auto_grow(element) {
  element.style.height = "auto";
  element.style.height = element.scrollHeight;
}
function auto_grow_art(element) {
  element.style.height = "auto";
  element.style.height = element.scrollHeight - 20 + "px";
}

function contentBlockMessage(data, type) {
  let contentValue;
  if (type === "user") {
    contentValue = `<div class="chat-inner-wrapp__item request">
                      <div class="chat-inner__item request">
                        <div class="chat-inner__item__avatar user">
                          <div class="user-avatar__container">
                            Я
                          </div>
                        </div>
                        <div class="chat-inner__item__message-wrapp user">
                          <div class="chat-inner__item__message user">
                          <pre style="white-space: pre-wrap"><code style="background-color: inherit; padding: 0;">${data}</code>
                          </pre>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="chat-inner__item-wrapp response">
                      <div class="chat-inner__item response">

                        <div class="chat-inner__item__avatar ai">
                          <div class="user-avatar__container-wrapp ai">
                            <div class="user-avatar__container ai">
                              <svg width="16" height="19">
                                <use xlink:href="#logo-black"></use>
                              </svg>
                            </div>
                          </div>
                        </div>

                        <div class="chat-inner__item__message-wrapp ai">
                          <div class="chat-inner__item__message ai">
                            <pre style="white-space: pre-wrap"><code id="code-block" style="background-color: inherit; padding: 0;"></code>
                            </pre>
                            <div class="typing">
                              <div class="dot"></div>
                              <div class="dot"></div>
                              <div class="dot"></div>
                            </div>

                            <div class="message-meta response">
                              <div class="qty-chars"></div>
                              <div class="message-meta__date"></div>

                              <div class="speak-message-wrapp" hidden>
                                <a href="javascript:void(0);" class="speak-message-btn" onclick="speakMessage(this)" title="прослушать">
                                  <svg width="24" height="24">
                                    <use xlink:href="#listen-voice"></use>
                                  </svg>
                                </a>
                              </div>

                              <div class="btn-copy-text" hidden>
                                <span class="btn-copy-label displayNone">скопировано</span>
                                <a href="javascript:void(0)" onclick="copyAiResponse(this)" title="копировать текст">
                                  <svg width="24" height="24">
                                    <use xlink:href="#copy-icon"></use>
                                  </svg>
                                </a>
                              </div>
                            </div>

                          </div>
                        </div>
                      </div>
                    </div>`;
    const chatWindow = document.querySelector(".chat-inner__items-wrapp");
    chatWindow.innerHTML += contentValue;
  } else {
    let balance = document.querySelector(".wallet-btn__text");
    let messages = document.querySelectorAll(".chat-inner__item__message-wrapp.ai");
    let endMessageElem = messages[messages.length - 1];

    let message = endMessageElem.querySelector(".chat-inner__item__message.ai");
    let chars = endMessageElem.querySelector(".qty-chars");
    let date = endMessageElem.querySelector(".message-meta__date");
    let copy = endMessageElem.querySelector(".btn-copy-text");
    let speak = message.querySelector(".speak-message-wrapp");
    let codeBlock = endMessageElem.querySelector("#code-block");

    let audio = new Audio();

    message.querySelector(".typing").remove();
    let i = 0;
    let txt = data.message;
    let speed = 10;

    function typeWriter() {
      if (i < txt.length) {
        codeBlock.innerText += txt.charAt(i);
        i++;
        balance.innerHTML--;
        let audio = new Audio();
        audio.volume = 0.1;
        // audio.src = "/static/money.mp3";
        audio.autoplay = true;
        setTimeout(typeWriter, speed);
      } else if (txt.length == i) {
        // audio.src = "/static/kassa.mp3";
        audio.volume = 0.1;
        audio.autoplay = true;
        date.innerHTML = data.date;
        copy.hidden = false;
        speak.hidden = false;
        chars.innerHTML = data.chars;
        balance.innerHTML = data.balance;
        scrollDown();
      }
    }

    typeWriter();
  }
  scrollDown();
}

(function () {
  scrollDown();

})();

// function connect() {
//   const room = document.getElementById("room-name");
//
//   if (room) {
//     const roomName = JSON.parse(room.textContent);
//     document.querySelector("#chat-message-input").focus();
//
//     if (location.protocol == "https:") {
//       ws_url = "wss://" + window.location.host + "/ws/chat/" + roomName + "/";
//     } else {
//       ws_url = "ws://" + window.location.host + "/ws/chat/" + roomName + "/";
//     }
//
//     const chatSocket = new ReconnectingWebSocket(ws_url);
//     chatSocket.debug = true;
//     chatSocket.timeoutInterval = 5400;
//
//     chatSocket.onopen = function () {
//       console.log("Connected to chat socket");
//     };
//
//     chatSocket.onmessage = function (e) {
//       const data = JSON.parse(e.data);
//       if (data.status) {
//         contentBlockMessage(data, "bot");
//       } else {
//         let popupUpWrong = document.querySelector("#popupUpWrong");
//         let popupContext = document.querySelector(".inform-popup__content.wrong")
//         popupContext.innerHTML = "<a class='green-btn btn-subscribe' href='/account/billing/'>" + data.message + "</a>"
//         popupUpWrong.classList.add("show");
//       }
//     };
//
//     const reloadChat = document.getElementById("reloadChat");
//
//     chatSocket.onclose = function (e) {
//       console.log('Socket is closed. Reconnect will be attempted in 1 second.', e.reason);
//       // reloadChat.classList.add("show");
//     };
//
//     chatSocket.onerror = function (error) {
//       console.error(error);
//       // reloadChat.classList.add("show");
//     };
//
//     const inputMessageElement = document.querySelector("#chat-message-input");
//
//     inputMessageElement.onkeyup = function () {
//       hideButtonSend(inputMessageElement.value)
//     };
//
//     const messageSubmitSvg = document.querySelector("#chat-message-submit svg");
//
//     document.querySelector("#chat-message-submit").onclick = function (e) {
//         const message = inputMessageElement.value;
//         const currChat = window.location.pathname;
//
//         if (message) {
//             console.log(currChat);
//
//             const chatMappings = {
//                 '/account/aichat/': 'gpt3.5',
//                 '/account/aichat4/': 'gpt4',
//                 '/account/aichat-companion/': 'companion',
//                 '/account/aibot-chat/': 'aibotchat',
//                 '/account/aichat-teacher/': 'teacher'
//             };
//
//             if (chatMappings[currChat]) {
//                 chatSocket.send(
//                     JSON.stringify({
//                         curr_chat: chatMappings[currChat],
//                         message: message
//                     })
//                 );
//             }
//
//             contentBlockMessage(message, "user");
//             inputMessageElement.value = "";
//             messageSubmitSvg.style.fill = "var(--color-dark-grey-text)";
//             hideButtonSend(inputMessageElement.value);
//             auto_grow(inputMessageElement);
//         }
//     };
//   }
// }
//
// connect();


const submitIcon =  document.querySelector("#chat-message-submit")
const voiceIcon = document.querySelector("#chat-message-voice")

// смена иконки запись голоса/отправить сообщение
function hideButtonSend(value) {
  if (value) {
    submitIcon.classList.remove('displayNone')
    submitIcon.classList.add('displayFlex')
    voiceIcon.classList.add('displayNone')
    voiceIcon.classList.remove('displayFlex')
  } else {
    submitIcon.classList.add('displayNone')
    submitIcon.classList.remove('displayFlex')
    voiceIcon.classList.remove('displayNone')
    voiceIcon.classList.add('displayFlex')
  }
}

// отслеживание изменений в textarea в чатах(с учетом вставки из буфера обмена)
const textareaMess = document.querySelector('#chat-message-input')
if (textareaMess) {
  textareaMess.addEventListener('paste', () => {
    hideButtonSend(textareaMess.value)
    setTimeout(() => {
      hideButtonSend(textareaMess.value)
    }, 200)
  });
}

(function () {
  const scroll = document.querySelector(".aichat-window");

  if (scroll) {
    let parent = document.querySelector(".parentContents");
    let messages = parent.querySelectorAll(".contents").length;
    if (messages < 10) {
      getPage();
      scrollDown();
    }

    scroll.addEventListener("scroll", (e) => {
      const dateLabels = document.querySelectorAll('.divider');
      let lastElementText = '';

      dateLabels.forEach(element => {
        if (element.innerText === lastElementText) {
          element.style.display = 'none';
        } else {
          element.classList.add("sticky-date")
          lastElementText = element.innerText;
        }
      });
      if (scroll.scrollTop == 0) {
        getPage();
      }
    });
  }
})();



  //start -- settings prompts
if (document.querySelector('.aichat-main-wrapp') != null) {

    const promptBlock = document.querySelector('#aichat-footer-settings');
    const settingSvg = document.querySelector('#aichat-setting-icon svg');
    const promptsListSetting = document.querySelector('#prompts-list');

    // open block with prompts for chat
    document.querySelector('#aichat-setting-icon').onclick = function () {
      promptBlock.classList.toggle('displayNone')
      if (promptBlock.classList.contains('displayNone')) {
        settingSvg.style.stroke = "var(--color-dark-grey-text)";
        document.querySelectorAll("#prompts-list > li").forEach(el => {
          el.classList.remove('prompt-active');
        })
      } else {
        settingSvg.style.stroke = "var(--green-btn-submit)";
      }
    }

    // close block with prompts for chat
    document.querySelector('#settings-prompts-close').onclick = function () {
      if (!promptBlock.classList.contains('displayNone')) {
        document.querySelectorAll("#prompts-list > li").forEach(el => {
          el.classList.remove('prompt-active');
        })
        promptBlock.classList.add('displayNone')
        settingSvg.style.stroke = "var(--color-dark-grey-text)";
      }
    }

    const popupSavePrompt = document.querySelector('#popup-save-prompts');
    const formPrompts = document.querySelector('#form-popup-save-prompts');
    const inputTitlePrompt = document.querySelector('#popup-prompts-input-title');
    const inputTextPrompt = document.querySelector('#popup-prompts-input-text');
    const popupMessageError = document.querySelector('#form-popup-save-prompts-error');
    const popupCatalogPrompt = document.querySelector('#popup-catalog-prompts');
    const promptsListPopup = document.querySelector('#popup-prompts-list');
    const promptsList = document.querySelector('#prompts-list:not(.static)');
    const popupChangePrompt = document.querySelector('#popup-change-prompts');
    const popupWindow = document.querySelectorAll('.popup-prompts')

    // open popup to save prompts
    document.querySelector('#aichat-save-prompts').onclick = function () {
      popupSavePrompt.classList.add('popup-open');
    }

    // close popup to save prompts
    document.querySelector('#popup-save-prompts-close').onclick = function() {
      inputTitlePrompt.value = "";
      inputTextPrompt.value = "";
      popupSavePrompt.classList.remove('popup-open');
      popupMessageError.classList.add('displayNone');
    }

    const tokenUser = document.querySelector(".wallet-btn__text").dataset.auth;
    const urlPrompt = '/api/v1/prompt-list/';
    const urlPromptAdd = '/api/v1/prompt-create/';


    formPrompts.addEventListener('submit', addNewPrompt);
    promptsListPopup.addEventListener('click', deletePrompt);
    promptsListPopup.addEventListener('click', openEditPrompt);
    promptsListSetting.addEventListener('click', clickPromptSetting);
    popupChangePrompt.addEventListener('submit', editPrompt)

    popupWindow.forEach(el => {
      el.addEventListener('click', (e) => {
        if (e.target == el) {
          el.classList.remove('popup-open');
        }
      })
    })

    function showPrompts() {
      promptsListPopup.innerHTML = "";
      promptsList.innerHTML = "";
      fetch(urlPrompt, {
        method: "GET",
        headers: {
            "Content-Type": "application/json",
            'Authorization': `Token ${tokenUser}`
        }
      })
      .then((resp) => resp.json())
      .then(function(data) {
        // custom
        data.forEach((prompt) => {
          if (!prompt.is_default) {
            const promptPopupHTML = `<li id="${prompt.id}" class="popup-prompts__item">
            <div class="popup-prompts__item-content">
            <a href="#" title="редактировать" data-action="edit">
            <svg width="20" height="20" >
            <use xlink:href="#notepad-pen"></use>
            </svg>
            </a>
            <div class="popup-prompts__item-text">${prompt.title}</div>
            </div>
            <button class="popup-prompts__item__delete-btn" data-action="delete">Удалить</button>
            </li>`;
            promptsListPopup.insertAdjacentHTML('afterbegin', promptPopupHTML);
          }
        });
        // all
        data.forEach(function(prompt) {
          const promptHTML = `<li id="${prompt.id}" class="aichat-footer__settings-prompt">${prompt.title}</li>`;
          promptsList.insertAdjacentHTML('afterbegin', promptHTML);
        });
      });
    }

    function addNewPrompt(e) {
      e.preventDefault();
      const titlePrompts = inputTitlePrompt.value
      const textPrompts = inputTextPrompt.value
      const newPrompt = {
        id: Date.now(),
        title: titlePrompts,
        text: textPrompts
      }

      const promptPopupHTML = `<li id="${newPrompt.id}" class="popup-prompts__item">
                                <div class="popup-prompts__item-content">
                                  <a href="#" title="редактировать" data-action="edit">
                                    <svg width="20" height="20" >
                                      <use xlink:href="#notepad-pen"></use>
                                    </svg>
                                  </a>
                                  <div class="popup-prompts__item-text">${newPrompt.title}</div>
                                </div>
                                <button class="popup-prompts__item__delete-btn" data-action="delete">Удалить</button>
                              </li>`;

      const promptHTML = `<li id="${newPrompt.id}" class="aichat-footer__settings-prompt">${newPrompt.title}</li>`

      if (titlePrompts.length > 0 &&  textPrompts.length > 0) {
        popupSavePrompt.classList.remove('popup-open');
        popupMessageError.classList.add('displayNone')
        inputTitlePrompt.value = "";
        inputTextPrompt.value = "";

        fetch(urlPromptAdd, {
          method: "POST",
          body: JSON.stringify(newPrompt),
          headers: {
              "Content-Type": "application/json",
              'Authorization': `Token ${tokenUser}`
          }
        })
        .then((resp) => resp.json())
        .then((data) => {
          showPrompts()
          checkEmptyListPrompts();
        });
      } else {
        popupMessageError.classList.remove('displayNone');
      }
    }

    function deletePrompt(e) {
      if (e.target.dataset.action !== "delete") return

      const parentNodePrompt = e.target.closest('li');
      const idPromptClick = Number(parentNodePrompt.id);

      fetch(`/api/v1/prompt-delete/${idPromptClick}/`, {
        method: "DELETE",
        headers: {
            "Content-Type": "application/json",
            'Authorization': `Token ${tokenUser}`
        }
      })
      .then(() => {
        showPrompts();
        checkEmptyListPrompts();
      });

    }

    function editPrompt(e) {
      e.preventDefault();
      const titlePrompt = document.querySelector('#popup-prompts-change-title')
      const textPrompt = document.querySelector('#popup-prompts-change-text')
      const id = titlePrompt.closest('div').id
      const data = {
        id,
        title: titlePrompt.value,
        text: textPrompt.value
      }

      fetch(`/api/v1/prompt-update/${id}/`, {
        method: "PUT",
        "body": JSON.stringify(data),
        headers: {
            "Content-Type": "application/json",
            'Authorization': `Token ${tokenUser}`
        }
      })
      showPrompts();
      popupChangePrompt.classList.remove('popup-open');
    }

    function openEditPrompt(e) {
      if (e.target.dataset.action !== "edit") return

      const parentNodePrompt = e.target.closest('li');
      const idPromptClick = parentNodePrompt.id;

      fetch(urlPrompt, {
        method: "GET",
        headers: {
            "Content-Type": "application/json",
            'Authorization': `Token ${tokenUser}`
        }
      })
      .then((resp) => resp.json())
      .then(function(data) {
        data.find((el) => {
          if (el.id == idPromptClick) {
            const popupChangeHTML = `<form class="popup-prompts__content">
                                      <div id="${el.id}">
                                        <p class="popup-prompts__content-subtitle">Название промта</p>
                                        <input class="popup-prompts__content-title" type="text" value="${el.title}" id="popup-prompts-change-title">
                                      </div>
                                      <div class="">
                                        <p class="popup-prompts__content-subtitle">Содержание промпта</p>
                                        <textarea class="popup-prompts__content-text" name="" style="resize: none;" maxlength="1800" id="popup-prompts-change-text">${el.text} </textarea>
                                      </div>
                                      <div class="generation-req-form-wrapp__submit-wrapp">
                                        <button class="green-btn btn-full-width" type="submit">Сохранить изменения</button>
                                        <div class="line-loader-overlay">
                                          <div class="line-loader">loading</div>
                                        </div>
                                      </div>
                                    </form>`;
            const popupChang = document.querySelector('#popup-change-prompts-header')
            popupChang.insertAdjacentHTML('afterend', popupChangeHTML);
            popupChangePrompt.classList.add('popup-open');
          }
        });
      });
    }

    function checkEmptyListPrompts() {
      fetch(urlPrompt, {
        method: "GET",
        headers: {
            "Content-Type": "application/json",
            'Authorization': `Token ${tokenUser}`
        }
      })
      .then((resp) => resp.json())
      .then(function(data) {
        let dataEmpty;
        if (data.length > 0) {
          data.forEach((prompt) => {
            if (!prompt.is_default) {
              dataEmpty = false;
            } else {
              dataEmpty = true;
            }
          })
        }
        if (dataEmpty || data.length <= 0) {
          const emptyListHTML = `<li id="emptyElement" class="popup-prompts__item-empty">
                                  <p>Ваш каталог промтов пуст</p>
                                </li>`;
          promptsListPopup.insertAdjacentHTML('afterbegin', emptyListHTML)
        } else {
          const emptyList = document.querySelector('#emptyElement');
          emptyList ? emptyList.remove() : null;
        }
      })
    };

    showPrompts();
    checkEmptyListPrompts();

    // open popup prompt catalog
    document.querySelector('#aichat-catalog-prompts').onclick = function () {
      popupCatalogPrompt.classList.add('popup-open');
    }
    // close popup prompt catalog
    document.querySelector('#popup-catalog-prompts-close').onclick = function() {
      popupCatalogPrompt.classList.remove('popup-open');
    }

    // close popup for edit prompt
    document.querySelector('#popup-change-prompts-close').onclick = function() {
      popupChangePrompt.classList.remove('popup-open');
    }

    // add/remove prompt in input
    function clickPromptSetting(e) {
      const textarea = document.querySelector('#chat-message-input');
      const promptClick = e.target;

      fetch(urlPrompt, {
        method: "GET",
        headers: {
            "Content-Type": "application/json",
            'Authorization': `Token ${tokenUser}`
        }
      })
      .then((resp) => resp.json())
      .then(function(data) {
        data.forEach((el) => {
          if (el.id == promptClick.id) {
            if (textarea.value == el.text) {
              promptClick.classList.remove('prompt-active');
              textarea.value = "";
              textarea.style.height = 'auto';
            } else {
              let prompts = document.querySelectorAll("#prompts-list > li");
              Array.from(prompts).forEach(item => {
                item.classList.remove('prompt-active');
              })
              promptClick.classList.add('prompt-active');
              textarea.style.height = 'auto';
              textarea.value = el.text;
              textarea.style.height = (textarea.scrollHeight -20) + 'px';
            }
          }
        });
        hideButtonSend(textarea.value)
      });
    }
}