import { useForm } from "@mantine/form"
import { useMutation, useQueryClient } from "@tanstack/react-query"
import React, { useMemo } from "react"
import useDynamicTextareaSize from "~/hooks/useDynamicTextareaSize"
import { toBase64 } from "~/libs/to-base64"
import { useMessageOption } from "~/hooks/useMessageOption"
import {
  Button,
  Checkbox,
  Dropdown,
  Image,
  MenuProps,
  Switch,
  Tooltip
} from "antd"
import { useWebUI } from "~/store/webui"
import { defaultEmbeddingModelForRag } from "~/services/ollama"
import { ImageIcon, MicIcon, StopCircleIcon, X } from "lucide-react"
import { getVariable } from "@/utils/select-variable"
import { useTranslation } from "react-i18next"
// import { KnowledgeSelect } from "../Knowledge/KnowledgeSelect"
import { useSpeechRecognition } from "@/hooks/useSpeechRecognition"
import { PiGlobe, PiNetwork } from "react-icons/pi"
import { handleChatInputKeyDown } from "@/utils/key-down"
import { getIsSimpleInternetSearch } from "@/services/search"

type Props = {
  dropedFile: File | undefined
}

export const PlaygroundForm = ({ dropedFile }: Props) => {
  const { t } = useTranslation(["playground", "common"])
  const inputRef = React.useRef<HTMLInputElement>(null)
  const [typing, setTyping] = React.useState<boolean>(false)
  const {
    onSubmit,
    selectedModel,
    chatMode,
    speechToTextLanguage,
    stopStreamingRequest,
    streaming: isSending,
    webSearch,
    setWebSearch,
    iodSearch,
    setIodSearch,
    selectedQuickPrompt,
    textareaRef,
    setSelectedQuickPrompt,
    selectedKnowledge,
    temporaryChat,
    useOCR,
    setUseOCR,
    defaultInternetSearchOn
  } = useMessageOption()

  const isMobile = () => {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
      navigator.userAgent
    )
  }

  const textAreaFocus = () => {
    if (textareaRef.current) {
      if (
        textareaRef.current.selectionStart === textareaRef.current.selectionEnd
      ) {
        if (!isMobile()) {
          textareaRef.current.focus()
        } else {
          textareaRef.current.blur()
        }
      }
    }
  }

  const form = useForm({
    initialValues: {
      message: "",
      image: ""
    }
  })

  React.useEffect(() => {
    textAreaFocus()
    if (defaultInternetSearchOn) {
      setWebSearch(true)
    }
  }, [])

  React.useEffect(() => {
    if (defaultInternetSearchOn) {
      setWebSearch(true)
    }
  }, [defaultInternetSearchOn])

  const onInputChange = async (
    e: React.ChangeEvent<HTMLInputElement> | File
  ) => {
    if (e instanceof File) {
      const base64 = await toBase64(e)
      form.setFieldValue("image", base64)
    } else {
      if (e.target.files) {
        const base64 = await toBase64(e.target.files[0])
        form.setFieldValue("image", base64)
      }
    }
  }
  const handlePaste = (e: React.ClipboardEvent) => {
    if (e.clipboardData.files.length > 0) {
      onInputChange(e.clipboardData.files[0])
    }
  }
  React.useEffect(() => {
    if (dropedFile) {
      onInputChange(dropedFile)
    }
  }, [dropedFile])

  useDynamicTextareaSize(textareaRef, form.values.message, 300)

  const {
    transcript,
    isListening,
    resetTranscript,
    start: startListening,
    stop: stopSpeechRecognition,
    supported: browserSupportsSpeechRecognition
  } = useSpeechRecognition()
  const { sendWhenEnter, setSendWhenEnter } = useWebUI()

  React.useEffect(() => {
    if (isListening) {
      form.setFieldValue("message", transcript)
    }
  }, [transcript])

  React.useEffect(() => {
    if (selectedQuickPrompt) {
      const word = getVariable(selectedQuickPrompt)
      form.setFieldValue("message", selectedQuickPrompt)
      if (word) {
        textareaRef.current?.focus()
        const interval = setTimeout(() => {
          textareaRef.current?.setSelectionRange(word.start, word.end)
          setSelectedQuickPrompt(null)
        }, 100)
        return () => {
          clearInterval(interval)
        }
      }
    }
  }, [selectedQuickPrompt])

  const queryClient = useQueryClient()

  const { mutateAsync: sendMessage } = useMutation({
    mutationFn: onSubmit,
    onSuccess: () => {
      textAreaFocus()
      queryClient.invalidateQueries({
        queryKey: ["fetchChatHistory"]
      })
    },
    onError: (error) => {
      textAreaFocus()
    }
  })

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (import.meta.env.BROWSER !== "firefox") {
      if (e.key === "Process" || e.key === "229") return
    }
    if (
      handleChatInputKeyDown({
        e,
        sendWhenEnter,
        typing,
        isSending
      })
    ) {
      e.preventDefault()
      stopListening()
      form.onSubmit(async (value) => {
        if (value.message.trim().length === 0 && value.image.length === 0) {
          return
        }
        if (!selectedModel || selectedModel.length === 0) {
          form.setFieldError("message", t("formError.noModel"))
          return
        }
        if (webSearch) {
          const defaultEM = await defaultEmbeddingModelForRag()
          const simpleSearch = await getIsSimpleInternetSearch()
          if (!defaultEM && !simpleSearch) {
            form.setFieldError("message", t("formError.noEmbeddingModel"))
            return
          }
        }
        form.reset()
        textAreaFocus()
        await sendMessage({
          image: value.image,
          message: value.message.trim()
        })
      })()
    }
  }

  const stopListening = async () => {
    if (isListening) {
      stopSpeechRecognition()
    }
  }

  const iodSearchItems = useMemo<MenuProps["items"]>(() => {
    return [
      {
        key: 0,
        label: (
          <p
            onClick={() => {
              setIodSearch(true)
            }}>
            <p
              className={`${iodSearch ? "text-[#0057ff]" : "text-[#000000d9]"} flex items-center gap-1 mb-1`}>
              <PiNetwork className="h-5 w-5" />开
            </p>
            <p className="text-[#00000080]">输出带数联网的回答</p>
          </p>
        )
      },
      {
        key: 1,
        label: (
          <p
            onClick={() => {
              setIodSearch(false)
            }}>
            <p
              className={`${!iodSearch ? "text-[#0057ff]" : "text-[#000000d9]"} flex items-center gap-1 mb-1`}>
              <PiNetwork className="h-5 w-5" /> 关闭
            </p>
            <p className="text-[#00000080]">快速直接回答</p>
          </p>
        )
      }
    ]
  }, [iodSearch])

  return (
    <div className="flex w-full flex-col items-center pt-1 px-5 pb-4">
      <div className="relative z-10 flex w-full flex-col items-center justify-center gap-2 text-base">
        <div className="relative flex w-full flex-row justify-center gap-2 lg:w-5/5">
          <div
            className={`shadow-xl relative w-full max-w-[65rem] p-1 rounded-xl  bg-gradient-to-br from-white/90 via-blue-50/90 to-cyan-50/90 backdrop-blur-lg border border-blue-100/70 cursor-pointer hover:shadow-blue-100/60 transition-all duration-500`}>
            <div
              className={`border-b border-gray-200 dark:border-gray-600 relative ${
                form.values.image.length === 0 ? "hidden" : "block"
              }`}>
              <button
                type="button"
                onClick={() => {
                  form.setFieldValue("image", "")
                }}
                className="absolute top-1 left-1 flex items-center justify-center z-10 bg-white dark:bg-[#262626] p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-600 text-black dark:text-gray-100">
                <X className="h-4 w-4" />
              </button>{" "}
              <Image
                src={form.values.image}
                alt="Uploaded Image"
                preview={false}
                className="rounded-md max-h-32"
              />
            </div>
            <div>
              <div className={`flex  bg-transparent `}>
                <form
                  onSubmit={form.onSubmit(async (value) => {
                    stopListening()
                    if (!selectedModel || selectedModel.length === 0) {
                      form.setFieldError("message", t("formError.noModel"))
                      return
                    }
                    if (webSearch) {
                      const defaultEM = await defaultEmbeddingModelForRag()
                      const simpleSearch = await getIsSimpleInternetSearch()
                      if (!defaultEM && !simpleSearch) {
                        form.setFieldError(
                          "message",
                          t("formError.noEmbeddingModel")
                        )
                        return
                      }
                    }
                    if (
                      value.message.trim().length === 0 &&
                      value.image.length === 0
                    ) {
                      return
                    }
                    form.reset()
                    textAreaFocus()
                    await sendMessage({
                      image: value.image,
                      message: value.message.trim()
                    })
                  })}
                  className="shrink-0 flex-grow  flex flex-col items-center ">
                  <input
                    id="file-upload"
                    name="file-upload"
                    type="file"
                    className="sr-only"
                    ref={inputRef}
                    accept="image/*"
                    multiple={false}
                    onChange={onInputChange}
                  />
                  <div className="w-full  flex flex-col dark:border-gray-600  p-2">
                    <textarea
                      onCompositionStart={() => {
                        if (import.meta.env.BROWSER !== "firefox") {
                          setTyping(true)
                        }
                      }}
                      onCompositionEnd={() => {
                        if (import.meta.env.BROWSER !== "firefox") {
                          setTyping(false)
                        }
                      }}
                      onKeyDown={(e) => handleKeyDown(e)}
                      ref={textareaRef}
                      className="px-2 py-2 w-full resize-none bg-transparent focus-within:outline-none focus:ring-0 focus-visible:ring-0 ring-0 dark:ring-0 border-0 dark:text-gray-100"
                      onPaste={handlePaste}
                      rows={1}
                      style={{ minHeight: "35px" }}
                      tabIndex={0}
                      placeholder={t("form.textarea.placeholder")}
                      {...form.getInputProps("message")}
                    />
                    <div className="mt-2 flex justify-between items-center">
                      <div className="flex">
                        {!selectedKnowledge && (
                          <div>
                            {/* 展示隐藏深度搜索*/}
                            <Tooltip
                              title={t("tooltip.searchInternet")}
                              className="hidden">
                              <div className="inline-flex items-center gap-2">
                                <PiGlobe
                                  className={`h-5 w-5 dark:text-gray-300 `}
                                />
                                <Switch
                                  value={webSearch}
                                  onChange={(e) => setWebSearch(e)}
                                  checkedChildren={t("form.webSearch.on")}
                                  unCheckedChildren={t("form.webSearch.off")}
                                />
                              </div>
                            </Tooltip>
                            <Dropdown
                              menu={{ items: iodSearchItems }}
                              placement="bottom"
                              trigger={["click"]}
                              arrow>
                              <Button
                                color="default"
                                variant="filled"
                                size="large"
                                className="w-full mt-4 hover:!bg-[#0057ff1a]"
                                style={
                                  iodSearch
                                    ? {
                                        color: "#0057ff",
                                        background: "#0057ff0f",
                                        border: "1px solid #0066ff26"
                                      }
                                    : {}
                                }>
                                <PiNetwork className="h-5 w-5" />
                                数联网深度搜索{iodSearch ? "：开" : ""}
                              </Button>
                            </Dropdown>
                          </div>
                        )}
                      </div>
                      <div className="flex !justify-end gap-1">
                        {!selectedKnowledge && (
                          <Tooltip title={t("tooltip.uploadImage")}>
                            <Button
                              color="default"
                              variant="text"
                              onClick={() => {
                                inputRef.current?.click()
                              }}
                              className={`!px-[5px] flex items-center justify-center dark:text-gray-300 ${
                                chatMode === "rag" ? "hidden" : "block"
                              }`}>
                              <ImageIcon stroke-width={1} className="h-5 w-5" />
                            </Button>
                          </Tooltip>
                        )}

                        {browserSupportsSpeechRecognition && (
                          <Tooltip title={t("tooltip.speechToText")}>
                            <Button
                              color="default"
                              variant="text"
                              onClick={async () => {
                                if (isListening) {
                                  stopSpeechRecognition()
                                } else {
                                  resetTranscript()
                                  startListening({
                                    continuous: true,
                                    lang: speechToTextLanguage
                                  })
                                }
                              }}
                              className={`flex items-center justify-center dark:text-gray-300 !px-[5px]`}>
                              {!isListening ? (
                                <MicIcon stroke-width={1} className="h-5 w-5" />
                              ) : (
                                <div className="relative">
                                  <span className="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75"></span>
                                  <MicIcon
                                    stroke-width={1}
                                    className="h-5 w-5"
                                  />
                                </div>
                              )}
                            </Button>
                          </Tooltip>
                        )}
                        {/*<KnowledgeSelect />*/}

                        {!isSending ? (
                          <Dropdown.Button
                            type="default"
                            htmlType="submit"
                            disabled={isSending}
                            // icon={
                            //   <svg
                            //     xmlns="http://www.w3.org/2000/svg"
                            //     fill="none"
                            //     viewBox="0 0 24 24"
                            //     strokeWidth={1.5}
                            //     stroke="currentColor"
                            //     className="w-5 h-5">
                            //     <path
                            //       strokeLinecap="round"
                            //       strokeLinejoin="round"
                            //       d="m19.5 8.25-7.5 7.5-7.5-7.5"
                            //     />
                            //   </svg>
                            // }
                            menu={{
                              items: [
                                {
                                  key: 1,
                                  label: (
                                    <Checkbox
                                      checked={sendWhenEnter}
                                      onChange={(e) =>
                                        setSendWhenEnter(e.target.checked)
                                      }>
                                      {t("sendWhenEnter")}
                                    </Checkbox>
                                  )
                                },
                                {
                                  key: 2,
                                  label: (
                                    <Checkbox
                                      checked={useOCR}
                                      onChange={(e) =>
                                        setUseOCR(e.target.checked)
                                      }>
                                      {t("useOCR")}
                                    </Checkbox>
                                  )
                                }
                              ]
                            }}>
                            <div className="inline-flex gap-2">
                              {t("common:submit")}
                            </div>
                          </Dropdown.Button>
                        ) : (
                          <Tooltip title={t("tooltip.stopStreaming")}>
                            <button
                              type="button"
                              onClick={stopStreamingRequest}
                              className="text-gray-800 dark:text-gray-300">
                              <StopCircleIcon className="h-6 w-6" />
                            </button>
                          </Tooltip>
                        )}
                      </div>
                    </div>
                  </div>
                </form>
              </div>
              {form.errors.message && (
                <div className="text-red-500 text-center text-sm mt-1">
                  {form.errors.message}
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}