import { Button, Link } from '@heroui/react'
import { motion } from 'framer-motion'
import type { Answer, Attachment } from '@/types/chat'
import AnswerProDetailIcon from '@/assets/svg/answerProDetail.svg?react'
import CardNavImg from '@/assets/card-nav.png'
import CardCalculation from '@/assets/card-calculation.png'
import CardDetailImg from '@/assets/card-detail.png'
import CardPlansImg from '@/assets/card-book1111.png'
import CardProductCompareImg from '@/assets/card-product2222.png'
import { fetchGetDocumentLink } from '@/api/common'

interface ChatAnswerAttachmentProps {
  answer: Answer
  isLastAnswer?: boolean
  fromParser?: boolean
  onSubmitQuestion?: (question: string, productCode?: string) => void
}
export const ChatAnswerAttachment: React.FC<ChatAnswerAttachmentProps> = ({ fromParser, answer, isLastAnswer, onSubmitQuestion }) => {
  const handleClickBoxItem = (produceName: string, productCode: string) => {
    if (onSubmitQuestion) {
      onSubmitQuestion(produceName, productCode)
    }
  }

  const handleClickCard = (attachment: Attachment) => {
    window.open(attachment.content.url)
  }

  const handleClickDocLink = async (documentStoreKey: string) => {
    if (fromParser) {
      const res = await fetchGetDocumentLink(documentStoreKey)
      if (res.data) {
        window.open(res.data.docUrl)
      }
    }
    else {
      window.open(documentStoreKey)
    }
  }
  return (
    (
      <div className="cardList flex flex-col gap-[20px]">
        {answer.cardList && answer.cardList.map((attachment, index) => {
          if (attachment?.type) {
            return (
              (
                <div key={`${attachment.type}_${index}`}>
                  {/* 附件：product-detail */}
                  {attachment.type === 'product-detail' && (
                    <div className="bg-[#29B6FD0A] text-[14px] text-primary py-[4px] px-[16px] w-fit flex items-center">
                      <AnswerProDetailIcon />
                      {/* <span className="ml-[6px]">{attachment.name}</span> */}
                      <div className="ml-[6px] max-w-full sm:w-full text-nowrap text-ellipsis overflow-hidden">
                        {attachment.name}
                      </div>
                    </div>
                  )}
                  {/* 附件：引用文件 */}
                  {attachment.type === 'reference' && attachment.content?.docList && attachment.content.docList.length !== 0 && (
                    <div>
                      <p className="text-[14px] text-[#8D9795] mb-[12px]">
                        已为您找到
                        {attachment.content.docList.length}
                        篇资料作为参考：
                      </p>
                      <div className="flex flex-col gap-[9px]">
                        { attachment.content.docList.map(doc => (
                          <Link className="cursor-pointer" onPress={() => handleClickDocLink(doc.documentStoreKey)} size="sm" key={doc.documentStoreKey} isExternal showAnchorIcon underline="hover">
                            {doc.documentAlias}
                          </Link>
                        ))}
                      </div>
                    </div>

                  )}
                  {/* 附件：选择 box */}
                  {
                    attachment.type === 'box' && attachment.content.productList.length !== 0 && (
                      <div>
                        <div className="mb-[12px]">{attachment.description}</div>
                        <ul
                          className="flex flex-col gap-[8px]"
                        >
                          {attachment.content.productList.map(product => (
                            // <div key={product.productCode}>{product.productName}</div>
                            (
                              <motion.li
                                key={product.productCode}
                              >
                                <Button onPress={() => handleClickBoxItem(product.productName, product.productCode)} isDisabled={!isLastAnswer} color="primary" variant="light" className="text-left bg-[#F7FCFF] w-full text-[#333] rounded-[23px] data-[hover=true]:bg-[#E5F6FF] data-[hover=true]:text-primary">
                                  <div className="w-full text-nowrap text-ellipsis overflow-hidden">
                                    <span className="ml-[8px]">{product.productName}</span>
                                  </div>
                                </Button>
                              </motion.li>
                            )
                          ))}
                        </ul>
                      </div>
                    )
                  }
                  {
                    attachment.type?.includes('card-') && (
                      <div onClick={() => handleClickCard(attachment)}>
                        {attachment.type === 'card-nav' && <img className="w-full max-w-[400px] cursor-pointer" src={CardNavImg} alt="" />}
                        {attachment.type === 'card-detail' && <img className="w-full max-w-[400px] cursor-pointer" src={CardDetailImg} alt="" />}
                        {attachment.type === 'card-calculation' && <img className="w-full max-w-[400px] cursor-pointer" src={CardCalculation} alt="" />}
                        {attachment.type === 'card-product-compare' && <img className="w-full max-w-[400px] cursor-pointer" src={CardProductCompareImg} alt="" />}
                        {attachment.type === 'card-plans' && <img className="w-full max-w-[400px] cursor-pointer" src={CardPlansImg} alt="" />}
                      </div>
                    )
                  }
                </div>
              )
            )
          }
          return null
        })}
      </div>
    )
  )
}
