export function initChat() {
  if (!isNeedChat()) {
    return;
  }

  // Your CSS as text
  let styles = `
body {
    background-color: #f5f5f5;
}

#chat-assistant-container {
    position: fixed;
    right: 40px;
    bottom: 86px;
    z-index:9990;
}

#chat-assistant-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: linear-gradient(135deg, rgb(215 98 150 / 55%),rgb(34 78 139 / 71%), rgb(114 222 172));
    box-shadow: 0px 0px 8px 1px rgb(0 0 0 / 22%);
    color: #fff;
    text-shadow: 1px 1px 3px rgb(0 0 0 / 56%);
}


#chat-container {
    position: fixed;
    padding: 10px;
    top: 45%;
    left: 50%;
    z-index:9990;
    transform: translate(-50%, -50%);
    display: none;
    border-radius: 5px;
    width: 40%;
    background: linear-gradient(135deg, rgb(215 98 150 / 92%),rgb(34 78 139 / 93%), rgb(114 222 172 / 94%));
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}



#chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 10px 0;
    border-radius: 5px 5px 0 0;
    cursor: move;
}

#loading-indicator {
    width: 14px;
    height: 14px;
    margin: 0 10px 0 10px;
    border: 2px solid #ccc;
    border-top-color: #4caf50;
    border-radius: 50%;
    animation: spin 2s linear infinite;
    visibility: hidden;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#chat-header .show-loading {
    visibility: visible;
}

#chat-header .hide-loading {
    visibility: hidden;
}


#circle-button {
    padding: 0;
    border: none;
    background-color: transparent;
    font-size: 16px;
    user-select: none;
    display: flex;
    align-items: center;
    color: #fff; 
    text-shadow: 1px 1px 3px black;
}

#close-button {
    cursor: pointer;
    padding: 0;
    border: none;
    background-color: transparent;
    font-size: 24px;
    color: #fff; 
    text-shadow: 1px 1px 3px black;
}
#send-button {
    cursor: pointer;
    padding: 0;
    border: none;
    background-color: transparent;
    font-size: 16px;
}

#close-button:hover,
#send-button:hover {
    color: #888;
}

#chat-input-container,
#chat-input {
    border: none;
}

#chat-input-container {
    display: flex;
    align-items: center;
    border-radius: 5px;
    background-color: #fff;
    padding: 10px;
}

#chat-input {
    flex: 1;
    padding: 0;
    margin-right: 5px;
    border-radius: 5px;
    overflow-y: auto;
    height: 24px;
    font-size: 1rem;
    outline: none;
    resize: none;
    background: transparent;
}

#send-button {
    background-color: transparent;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    width: 32px;
}

#send-button>span {
    height: 16px;
    width: 16px;
}

#send-button:enabled {
    background-color: rgb(120,198,174);
}

#send-button:enabled svg path {
    fill: #fff;
}
`;

  let styleSheet = document.createElement("style");
  styleSheet.innerText = styles;
  document.head.appendChild(styleSheet);

  const html = `<div id="chat-assistant-container">
            <button id="chat-assistant-button">🤖AI</button>
        </div>
    
        <div id="chat-container">
            <div id="chat-header">
                <span id="circle-button">Univer AI 助手<div id="loading-indicator"></div></span>
    
                <button id="close-button">×</button>
            </div>
            <div id="chat-input-container">
                <textarea id="chat-input" placeholder="请输入问题"></textarea>
                <!-- <textarea id="chat-input" placeholder="请输入问题"></textarea> -->
                <button id="send-button" disabled>
                    <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" class="h-4 w-4 m-1 md:m-0"
                            stroke-width="2">
                            <path
                                d="M.5 1.163A1 1 0 0 1 1.97.28l12.868 6.837a1 1 0 0 1 0 1.766L1.969 15.72A1 1 0 0 1 .5 14.836V10.33a1 1 0 0 1 .816-.983L8.5 8 1.316 6.653A1 1 0 0 1 .5 5.67V1.163Z"
                                fill="currentColor"></path>
                        </svg></span>
                </button>
            </div>
    
        </div>`;
  document.body.insertAdjacentHTML("beforeend", html);

  const assistantButton = document.getElementById("chat-assistant-button");
  const chatContainer = document.getElementById("chat-container");
  const closeButton = document.getElementById("close-button");
  const chatInput = document.getElementById("chat-input");
  const sendButton = document.getElementById("send-button");
  const loadingIndicator = document.getElementById("loading-indicator");

  assistantButton.addEventListener("click", function () {
    chatContainer.style.display = "block";
  });

  closeButton.addEventListener("click", function () {
    chatContainer.style.display = "none";
  });

  sendButton.addEventListener("click", function () {
    const message = chatInput.value;
    if (message.trim() !== "") {
      // 处理发送消息的逻辑

      chatInput.value = "";
      resetButton(chatInput);

      // 显示 Loading
      loadingIndicator.classList.add("show-loading");
      setTimeout(() => {
        setFormuala(message);
        // 隐藏 Loading
        loadingIndicator.classList.remove("show-loading");
      }, 1000);
    }
  });

  chatInput.addEventListener("input", function () {
    inputHandler(this);
  });

  function inputHandler(input) {
    if (input.scrollHeight > 24) {
      input.style.height = "auto";
    }
    input.style.height = input.scrollHeight + "px"; // 根据内容高度设置 textarea 高度
    if (input.scrollHeight > 200) {
      input.style.overflowY = "scroll";
    } else {
      input.style.overflowY = "hidden";
    }

    resetButton(input);
  }

  function resetButton(input) {
    if (input.value.trim() !== "") {
      sendButton.disabled = false;
      sendButton.classList.add("enabled");
    } else {
      input.style.height = "24px"; // 重置高度为一行
      sendButton.disabled = true;
      sendButton.classList.remove("enabled");
    }
  }

  // 快捷键
  let isComposing = false;

  chatInput.addEventListener("compositionstart", function () {
    isComposing = true;
  });

  chatInput.addEventListener("compositionend", function () {
    isComposing = false;
  });

  chatInput.addEventListener("keydown", function (event) {
    const isWindows = navigator.platform.includes("Win");
    const isMac = navigator.platform.includes("Mac");

    const key = event.key;

    if (isWindows && event.key === "Enter" && !isComposing && !event.altKey) {
      // Windows 上的 Enter 键触发发送
      event.preventDefault();
      sendButton.click();
    } else if (
      isWindows &&
      event.key === "Enter" &&
      !isComposing &&
      event.altKey
    ) {
      // Windows 上的 Alt+Enter 键触发换行
      event.preventDefault();
      this.value += "\n";
    } else if (
      isMac &&
      event.key === "Enter" &&
      !isComposing &&
      !event.metaKey
    ) {
      // Mac 上的 Enter 键触发发送
      event.preventDefault();
      sendButton.click();
    } else if (
      isMac &&
      event.key === "Enter" &&
      !isComposing &&
      event.metaKey
    ) {
      // Mac 上的 Command+Enter 键触发换行
      event.preventDefault();
      this.value += "\n";
    } else if (!isComposing && (key === "Backspace" || key === "Delete")) {
    }

    inputHandler(this);
  });

  // 添加拖拽功能
  let isDragging = false;
  let offset = { x: 0, y: 0 };

  const chatHeader = document.getElementById("chat-header");

  chatHeader.addEventListener("mousedown", function (event) {
    isDragging = true;
    offset.x = event.clientX - chatContainer.offsetLeft;
    offset.y = event.clientY - chatContainer.offsetTop;
  });

  document.addEventListener("mousemove", function (event) {
    if (isDragging) {
      chatContainer.style.left = `${event.clientX - offset.x}px`;
      chatContainer.style.top = `${event.clientY - offset.y}px`;
    }
  });

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

const needChatHosts = ["crm.lashuju.com", "localhost:3000"];
function isNeedChat() {
  const host = location.host;
  if (needChatHosts.includes(host)) {
    return true;
  }

  return false;
}

function setFormuala(sentence = "") {
  let link = getLink(sentence);

  if (link !== "") {
    setGET_AIRTABLE(link);
  } else {
    setASK_AI(sentence);
  }
}

function setASK_AI(sentence = "") {
  let range = getRange(sentence);

  range = range === "" ? "" : "," + range;
  const data = [
    [
      {
        f: '=ASK_AI("' + sentence + '"' + range + ")",
      },
    ],
  ];
  luckysheet.setRangeValue(data);
}

function setGET_AIRTABLE(link) {
  const data = [
    [
      {
        f: '=GET_AIRTABLE_DATA("' + link + '")',
      },
    ],
  ];
  luckysheet.setRangeValue(data);
}

function getLink(sentence = "") {
  const regex = /(https?:\/\/(?:www\.)?airtable\.com\/\S+)/gi;
  const matches = sentence.match(regex);

  if (matches) {
    return matches[0];
  }

  return "";
}

function getRange(text) {
  const regex = /([A-Z]+[0-9]*):([A-Z]+[0-9]*)/g;
  const matche = text.match(regex);
  if (matche) {
    return matche[0];
  }
  return "";
}
