import Markdown from "../../Common/Markdown"
import React from "react"
import { Collapse, Image, Popover, Tag, Tooltip } from "antd"
import { WebSearch } from "./WebSearch"
import {
  ArrowUpSquare,
  CheckIcon,
  ClipboardIcon,
  InfoIcon,
  MessageSquareShare,
  Pen,
  PlayIcon,
  RotateCcw,
  Square,
  Star,
  ThumbsDown,
  ThumbsUp
} from "lucide-react"
import { EditMessageForm } from "./EditMessageForm"
import { useTranslation } from "react-i18next"
import { MessageSource } from "./MessageSource"
import { useTTS } from "@/hooks/useTTS"
import { tagColors } from "@/utils/color"
import { GenerationInfo } from "./GenerationInfo"
import { parseReasoning } from "@/libs/reasoning"
import { humanizeMilliseconds } from "@/utils/humanize-milliseconds"
import { AllIodRegistryEntry } from "@/types/iod.ts"
import { PiNetwork } from "react-icons/pi"

type Props = {
  id?: string
  message: string
  message_type?: string
  hideCopy?: boolean
  botAvatar?: JSX.Element
  userAvatar?: JSX.Element
  isBot: boolean
  name: string
  images?: string[]
  currentMessageIndex: number
  totalMessages: number
  onRengerate: () => void
  onEditFormSubmit: (value: string, isSend: boolean) => void
  isProcessing: boolean
  webSearch?: {}
  isSearchingInternet?: boolean
  webSources?: any[]
  iodSources?: AllIodRegistryEntry
  hideEditAndRegenerate?: boolean
  onSourceClick?: (source: any) => void
  isTTSEnabled?: boolean
  generationInfo?: any
  isStreaming: boolean
  reasoningTimeTaken?: number
  iodSearch?: boolean
  setCurrentMessageId: (id: string) => void
}

export const PlaygroundMessage: React.FC<Props> = (props) => {
  const [isBtnPressed, setIsBtnPressed] = React.useState(false)
  const [editMode, setEditMode] = React.useState(false)

  const { t } = useTranslation("common")
  const { cancel, isSpeaking, speak } = useTTS()
  return (
    <div className="group relative flex w-full flex-col items-end justify-center pb-2 md:px-4 text-gray-800 dark:text-gray-100">
      {/* <div className="text-base md:max-w-2xl lg:max-w-xl xl:max-w-3xl flex lg:px-0 m-auto w-full"> */}
      <div
        className={`flex flex-row  gap-1 md:gap-1 my-2 m-auto w-full ${props.isBot ? "" : "flex-row-reverse"}`}>
        <div className="flex flex-col gap-2">
          <span className="text-xs font-bold text-gray-800 dark:text-white"></span>

          {props.isBot &&
          props.isSearchingInternet &&
          props.currentMessageIndex === props.totalMessages - 1 ? (
            <WebSearch />
          ) : null}
          <div>
            {props?.message_type && (
              <Tag color={tagColors[props?.message_type] || "default"}>
                {t(`copilot.${props?.message_type}`)}
              </Tag>
            )}
          </div>
          <div className={`flex flex-grow flex-col`}>
            {!editMode ? (
              props.isBot ? (
                <>
                  {parseReasoning(props.message).map((e, i) => {
                    if (e.type === "reasoning") {
                      return (
                        <Collapse
                          key={i}
                          defaultActiveKey={["reasoning"]}
                          className="border-none !mb-3"
                          items={[
                            {
                              key: "reasoning",
                              label:
                                props.isStreaming && e?.reasoning_running ? (
                                  <div className="flex items-center gap-2">
                                    <span className="italic">
                                      {t("reasoning.thinking")}
                                    </span>
                                  </div>
                                ) : (
                                  t("reasoning.thought", {
                                    time: humanizeMilliseconds(
                                      props.reasoningTimeTaken
                                    )
                                  })
                                ),
                              children: <Markdown message={e.content} />
                            }
                          ]}
                        />
                      )
                    }

                    return <Markdown key={i} message={e.content} />
                  })}
                </>
              ) : (
                // <p
                //   className={`bg-[#f1f3f4] font-normal text-[#000000d9] px-4 py-2.5 rounded-2xl prose-lg dark:prose-invert whitespace-pre-line prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark ${
                //     props.message_type && "italic  dark:text-gray-400"
                //   }  flex flex-row-reverse`}>
                //   {props.message}
                // </p>
                <p
                  className={`bg-[#2563eb] font-normal rounded-tr-none
 text-white px-4 py-2.5 rounded-2xl prose-lg dark:prose-invert whitespace-pre-line prose-p:leading-relaxed prose-pre:p-0 dark:prose-dark ${
   props.message_type && "italic  dark:text-gray-400"
 }  flex flex-row-reverse`}>
                  {props.message}
                </p>
              )
            ) : (
              <EditMessageForm
                value={props.message}
                onSumbit={props.onEditFormSubmit}
                onClose={() => setEditMode(false)}
                isBot={props.isBot}
              />
            )}
          </div>
          {/* source if available */}
          {props.images &&
            props.images.filter((img) => img.length > 0).length > 0 && (
              <div>
                {props.images
                  .filter((image) => image.length > 0)
                  .map((image, index) => (
                    <Image
                      key={index}
                      src={image}
                      alt="Uploaded Image"
                      width={180}
                      className="rounded-md relative"
                    />
                  ))}
              </div>
            )}

          {props.isBot && props?.webSources && props?.webSources.length > 0 && (
            <Collapse
              className="mt-6"
              ghost
              // defaultActiveKey={['webSources']}
              items={[
                {
                  key: "webSources",
                  label: (
                    <div className="italic text-gray-500 dark:text-gray-400">
                      {t("webCitations")}
                    </div>
                  ),
                  children: (
                    <div className="mb-3 flex flex-wrap gap-2">
                      {props?.webSources?.map((source, index) => (
                        <MessageSource
                          onSourceClick={props.onSourceClick}
                          key={index}
                          index={index}
                          source={source}
                        />
                      ))}
                    </div>
                  )
                }
              ]}
            />
          )}
          {props.isBot &&
            props?.iodSources &&
            Object.values(props?.iodSources)
              .map((item) => item.data)
              .flat().length > 0 && (
              <Collapse
                className="mt-6"
                ghost
                // defaultActiveKey={['iod']}
                items={[
                  {
                    key: "iod",
                    label: (
                      <div className="italic text-gray-500 dark:text-gray-400">
                        {t("iodCitations")}
                      </div>
                    ),
                    children: (
                      <div className="mb-3 flex flex-wrap gap-2">
                        {Object.values(props?.iodSources)
                          .map((item) => item.data)
                          .flat()
                          ?.map((source, index) => (
                            <MessageSource
                              onSourceClick={props.onSourceClick}
                              key={index}
                              index={index}
                              source={source}
                            />
                          ))}
                      </div>
                    )
                  }
                ]}
              />
            )}
          {!props.isProcessing && !editMode ? (
            <div
              className={`space-x-2 gap-2 flex ${
                props.currentMessageIndex !== props.totalMessages - 1
                  ? //  there is few style issue so i am commenting this out for v1.4.5 release
                    // next release we will fix this
                    "invisible group-hover:visible"
                  : // ? "hidden group-hover:flex"
                    ""
                // : "flex"
              }`}>
              {props.isTTSEnabled && (
                <Tooltip title={t("tts")}>
                  <button
                    aria-label={t("tts")}
                    onClick={() => {
                      if (isSpeaking) {
                        cancel()
                      } else {
                        speak({
                          utterance: props.message
                        })
                      }
                    }}
                    className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                    {!isSpeaking ? (
                      <PlayIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                    ) : (
                      <Square className="w-3 h-3 text-red-400 group-hover:text-red-500" />
                    )}
                  </button>
                </Tooltip>
              )}
              {props.isBot && (
                <>
                  {/*数联网搜索*/}
                  {props.iodSearch && (
                    <Tooltip title="数联网信息">
                      <button
                        onClick={() => props.setCurrentMessageId(props.id)}
                        aria-label="数联网信息"
                        className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                        <PiNetwork className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                      </button>
                    </Tooltip>
                  )}

                  {!props.hideCopy && (
                    <Tooltip title={t("copyToClipboard")}>
                      <button
                        aria-label={t("copyToClipboard")}
                        onClick={() => {
                          navigator.clipboard.writeText(props.message)
                          setIsBtnPressed(true)
                          setTimeout(() => {
                            setIsBtnPressed(false)
                          }, 2000)
                        }}
                        className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                        {!isBtnPressed ? (
                          <ClipboardIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                        ) : (
                          <CheckIcon className="w-3 h-3 text-green-400 group-hover:text-green-500" />
                        )}
                      </button>
                    </Tooltip>
                  )}

                  {props.generationInfo && (
                    <Popover
                      content={
                        <GenerationInfo generationInfo={props.generationInfo} />
                      }
                      title={t("generationInfo")}>
                      <button
                        aria-label={t("generationInfo")}
                        className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                        <InfoIcon className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                      </button>
                    </Popover>
                  )}

                  {!props.hideEditAndRegenerate &&
                    props.currentMessageIndex === props.totalMessages - 1 && (
                      <Tooltip title={t("regenerate")}>
                        <button
                          aria-label={t("regenerate")}
                          onClick={props.onRengerate}
                          className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                          <RotateCcw className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                        </button>
                      </Tooltip>
                    )}
                </>
              )}
              {!props.hideEditAndRegenerate && (
                <Tooltip title={t("edit")}>
                  <button
                    onClick={() => setEditMode(true)}
                    aria-label={t("edit")}
                    className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                    <Pen className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                  </button>
                </Tooltip>
              )}
              {
                <Tooltip title="收藏">
                  <button
                    aria-label="收藏"
                    className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                    <Star className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                  </button>
                </Tooltip>
              }
              {
                <Tooltip title="发布语用">
                  <button
                    aria-label="发布语用"
                    className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                    <ArrowUpSquare className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                  </button>
                </Tooltip>
              }
              {
                <Tooltip title="发布对话">
                  <button
                    aria-label="发布对话"
                    className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                    <MessageSquareShare className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                  </button>
                </Tooltip>
              }
              {
                <Tooltip title="点赞">
                  <button
                    aria-label="点赞"
                    className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                    <ThumbsUp className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                  </button>
                </Tooltip>
              }
              {
                <Tooltip title="点踩">
                  <button
                    aria-label="点踩"
                    className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                    <ThumbsDown className="w-3 h-3 text-gray-400 group-hover:text-gray-500" />
                  </button>
                </Tooltip>
              }
            </div>
          ) : (
            // add invisible div to prevent layout shift
            <div className="invisible">
              <div className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"></div>
            </div>
          )}
        </div>
      </div>
      {/* </div> */}
    </div>
  )
}
