'use client'
import type { FC } from 'react'
import React from 'react'
import cn from 'classnames'
import { useTranslation } from 'react-i18next'
import {
  PencilIcon,
} from '@heroicons/react/24/solid'
import s from './style.module.css'
import type { AppInfo } from '@/types/app'
import Button from '@/app/components/base/button'

export const AppInfoComp: FC<{ siteInfo: AppInfo }> = ({ siteInfo }) => {
  const { t } = useTranslation()
  return (
    <div>
      <div className='flex items-center py-2 text-xl font-medium text-gray-700 rounded-md'>👏 {t('app.common.welcome')} {siteInfo.title}</div>
      <p className='text-sm text-gray-500'>{siteInfo.description}</p>
    </div>
  )
}

export const PromptTemplate: FC<{ html: string }> = ({ html }) => {
  return (
    <div
      className={' box-border text-sm text-gray-700'}
      dangerouslySetInnerHTML={{ __html: html }}
    ></div>
  )
}

export const StarIcon = () => (
  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M2.75 1C2.75 0.723858 2.52614 0.5 2.25 0.5C1.97386 0.5 1.75 0.723858 1.75 1V1.75H1C0.723858 1.75 0.5 1.97386 0.5 2.25C0.5 2.52614 0.723858 2.75 1 2.75H1.75V3.5C1.75 3.77614 1.97386 4 2.25 4C2.52614 4 2.75 3.77614 2.75 3.5V2.75H3.5C3.77614 2.75 4 2.52614 4 2.25C4 1.97386 3.77614 1.75 3.5 1.75H2.75V1Z" fill="#444CE7" />
    <path d="M2.75 8.5C2.75 8.22386 2.52614 8 2.25 8C1.97386 8 1.75 8.22386 1.75 8.5V9.25H1C0.723858 9.25 0.5 9.47386 0.5 9.75C0.5 10.0261 0.723858 10.25 1 10.25H1.75V11C1.75 11.2761 1.97386 11.5 2.25 11.5C2.52614 11.5 2.75 11.2761 2.75 11V10.25H3.5C3.77614 10.25 4 10.0261 4 9.75C4 9.47386 3.77614 9.25 3.5 9.25H2.75V8.5Z" fill="#444CE7" />
    <path d="M6.96667 1.32051C6.8924 1.12741 6.70689 1 6.5 1C6.29311 1 6.10759 1.12741 6.03333 1.32051L5.16624 3.57494C5.01604 3.96546 4.96884 4.078 4.90428 4.1688C4.8395 4.2599 4.7599 4.3395 4.6688 4.40428C4.578 4.46884 4.46546 4.51604 4.07494 4.66624L1.82051 5.53333C1.62741 5.60759 1.5 5.79311 1.5 6C1.5 6.20689 1.62741 6.39241 1.82051 6.46667L4.07494 7.33376C4.46546 7.48396 4.578 7.53116 4.6688 7.59572C4.7599 7.6605 4.8395 7.7401 4.90428 7.8312C4.96884 7.922 5.01604 8.03454 5.16624 8.42506L6.03333 10.6795C6.1076 10.8726 6.29311 11 6.5 11C6.70689 11 6.89241 10.8726 6.96667 10.6795L7.83376 8.42506C7.98396 8.03454 8.03116 7.922 8.09572 7.8312C8.1605 7.7401 8.2401 7.6605 8.3312 7.59572C8.422 7.53116 8.53454 7.48396 8.92506 7.33376L11.1795 6.46667C11.3726 6.39241 11.5 6.20689 11.5 6C11.5 5.79311 11.3726 5.60759 11.1795 5.53333L8.92506 4.66624C8.53454 4.51604 8.422 4.46884 8.3312 4.40428C8.2401 4.3395 8.1605 4.2599 8.09572 4.1688C8.03116 4.078 7.98396 3.96546 7.83376 3.57494L6.96667 1.32051Z" fill="#444CE7" />
  </svg>
)

export const ChatBtn: FC<{ onClick: () => void; className?: string }> = ({
  className,
  onClick,
}) => {
  const { t } = useTranslation()
  return (
    <Button
      type='primary'
      className={cn(className, `space-x-2 flex items-center ${s.customBtn}`)}
      onClick={onClick}>
      <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fillRule="evenodd" clipRule="evenodd" d="M18 10.5C18 14.366 14.418 17.5 10 17.5C8.58005 17.506 7.17955 17.1698 5.917 16.52L2 17.5L3.338 14.377C2.493 13.267 2 11.934 2 10.5C2 6.634 5.582 3.5 10 3.5C14.418 3.5 18 6.634 18 10.5ZM7 9.5H5V11.5H7V9.5ZM15 9.5H13V11.5H15V9.5ZM9 9.5H11V11.5H9V9.5Z" fill="white" />
      </svg>
      {t('app.chat.startChat')}
    </Button>
  )
}

export const EditBtn = ({ className, onClick }: { className?: string; onClick: () => void }) => {
  const { t } = useTranslation()

  return (
    <div
      className={cn('px-2 flex space-x-1 items-center rounded-md  cursor-pointer', className)}
      onClick={onClick}
    >
      <PencilIcon className='w-3 h-3' />
      <span>{t('common.operation.edit')}</span>
    </div>
  )
}

export const FootLogo = () => (
  <svg width="68" height="17" viewBox="0 0 68 17" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M18.0001 8.49961C18.0001 13.1388 14.105 16.8996 9.3001 16.8996C8.14286 16.8996 7.03839 16.6815 6.0284 16.2854C5.8351 16.2096 5.73845 16.1717 5.66033 16.1548C5.5839 16.1383 5.52735 16.1322 5.44903 16.1322C5.36896 16.1322 5.28175 16.1462 5.10733 16.1743L1.66803 16.7278C1.30787 16.7857 1.12779 16.8147 0.997576 16.7608C0.883604 16.7136 0.792783 16.6259 0.743899 16.5158C0.688047 16.3901 0.71806 16.2162 0.778087 15.8685L1.3513 12.5478C1.38037 12.3794 1.39491 12.2952 1.3949 12.2179C1.39489 12.1423 1.38862 12.0877 1.37149 12.0139C1.35398 11.9384 1.31473 11.8451 1.23622 11.6585C0.826043 10.6833 0.600098 9.61694 0.600098 8.49961C0.600098 3.86042 4.49522 0.0996094 9.3001 0.0996094C14.105 0.0996094 18.0001 3.86042 18.0001 8.49961Z" fill="#155EEF" />
    <path opacity="0.72" fillRule="evenodd" clipRule="evenodd" d="M15.5011 14.3919L8.75536 14.3919C8.40761 14.3919 8.08484 14.2113 7.90299 13.9148L4.86874 8.96915C4.82047 8.89048 4.79492 8.79998 4.79492 8.70768V7.1416L8.50747 13.1368C8.6442 13.3576 8.88542 13.4919 9.14511 13.4919H16.298C16.0543 13.8099 15.7879 14.1106 15.5011 14.3919Z" fill="white" />
    <path d="M17.3614 11.6657C17.7734 10.6887 18.0003 9.61998 18.0003 8.50008C18.0003 8.32551 17.9948 8.15219 17.984 7.98026H11.9909C11.8167 7.98026 11.6551 7.88964 11.5643 7.74105L9.1534 3.79735C9.12615 3.75277 9.07767 3.72559 9.02542 3.72559H5.24077C5.04552 3.72559 4.92563 3.93939 5.02747 4.10598L9.35639 11.1872C9.53806 11.4844 9.86128 11.6657 10.2096 11.6657L17.3614 11.6657Z" fill="white" />
    <rect x="22.8003" y="13.4912" width="12.5919" height="0.9" fill="#155EEF" />
    <rect x="41.4927" y="13.4912" width="25.6982" height="0.9" fill="#155EEF" />
    <path d="M24.3123 10.9124H25.9647V12.1868H22.8003V5.19922H24.3123V10.9124Z" fill="#155EEF" />
    <path d="M29.3059 6.91642H30.5263V12.1868H29.3059V11.798C29.0827 12.1292 28.7119 12.2948 28.1935 12.2948H27.9667C27.0739 12.2948 26.6275 11.8196 26.6275 10.8692V8.23402C26.6275 7.28362 27.0739 6.80842 27.9667 6.80842H28.1935C28.7119 6.80842 29.0827 6.97402 29.3059 7.30522V6.91642ZM29.0791 11.042V8.06122C29.0791 8.00362 29.0575 7.95322 29.0143 7.91002C28.9783 7.86682 28.9315 7.84522 28.8739 7.84522H28.2799C28.2223 7.84522 28.1719 7.86682 28.1287 7.91002C28.0927 7.95322 28.0747 8.00362 28.0747 8.06122V11.042C28.0747 11.0996 28.0927 11.15 28.1287 11.1932C28.1719 11.2364 28.2223 11.258 28.2799 11.258H28.8739C28.9315 11.258 28.9783 11.2364 29.0143 11.1932C29.0575 11.15 29.0791 11.0996 29.0791 11.042Z" fill="#155EEF" />
    <path d="M32.9579 12.1868H31.5107V6.91642H32.8283V7.18642C33.0515 6.93442 33.3899 6.80842 33.8435 6.80842H34.0703C34.9631 6.80842 35.4095 7.28362 35.4095 8.23402V12.1868H33.9623V8.06122C33.9623 8.00362 33.9407 7.95322 33.8975 7.91002C33.8615 7.86682 33.8147 7.84522 33.7571 7.84522H33.1631C33.1055 7.84522 33.0551 7.86682 33.0119 7.91002C32.9759 7.95322 32.9579 8.00362 32.9579 8.06122V12.1868Z" fill="#155EEF" />
    <path d="M40.2927 6.91642V12.5864C40.2927 13.5368 39.8463 14.012 38.9535 14.012H37.8735C36.9807 14.012 36.5343 13.5368 36.5343 12.5864V12.4136H37.8411V12.7592C37.8411 12.8168 37.8591 12.8672 37.8951 12.9104C37.9383 12.9536 37.9887 12.9752 38.0463 12.9752H38.6403C38.6979 12.9752 38.7447 12.9536 38.7807 12.9104C38.8239 12.8672 38.8455 12.8168 38.8455 12.7592V11.6792C38.6223 11.852 38.3271 11.9384 37.9599 11.9384H37.7331C36.8403 11.9384 36.3939 11.4632 36.3939 10.5128V8.23402C36.3939 7.28362 36.8403 6.80842 37.7331 6.80842H37.9599C38.4783 6.80842 38.8491 6.97402 39.0723 7.30522V6.91642H40.2927ZM38.8455 10.6856V8.06122C38.8455 8.00362 38.8239 7.95322 38.7807 7.91002C38.7447 7.86682 38.6979 7.84522 38.6403 7.84522H38.0463C37.9887 7.84522 37.9383 7.86682 37.8951 7.91002C37.8591 7.95322 37.8411 8.00362 37.8411 8.06122V10.6856C37.8411 10.7432 37.8591 10.7936 37.8951 10.8368C37.9383 10.88 37.9887 10.9016 38.0463 10.9016H38.6403C38.6979 10.9016 38.7447 10.88 38.7807 10.8368C38.8239 10.7936 38.8455 10.7432 38.8455 10.6856Z" fill="#155EEF" />
    <path d="M43.5339 9.71362V8.60122H45.5319V11.1716C45.5319 12.122 45.0855 12.5972 44.1927 12.5972H42.8319C41.9391 12.5972 41.4927 12.122 41.4927 11.1716V6.81922C41.4927 5.86882 41.9391 5.39362 42.8319 5.39362H44.1927C45.0855 5.39362 45.5319 5.86882 45.5319 6.81922V7.47802H44.0955V6.63562C44.0955 6.57802 44.0739 6.52762 44.0307 6.48442C43.9947 6.44122 43.9479 6.41962 43.8903 6.41962H43.2099C43.1523 6.41962 43.1019 6.44122 43.0587 6.48442C43.0227 6.52762 43.0047 6.57802 43.0047 6.63562V11.3444C43.0047 11.402 43.0227 11.4524 43.0587 11.4956C43.1019 11.5388 43.1523 11.5604 43.2099 11.5604H43.8903C43.9479 11.5604 43.9947 11.5388 44.0307 11.4956C44.0739 11.4524 44.0955 11.402 44.0955 11.3444V9.71362H43.5339Z" fill="#101828" />
    <path d="M48.8709 7.11082C49.7637 7.11082 50.2101 7.58602 50.2101 8.53642V10.2428H47.7585V11.3444C47.7585 11.402 47.7765 11.4524 47.8125 11.4956C47.8557 11.5388 47.9061 11.5604 47.9637 11.5604H48.5577C48.6153 11.5604 48.6621 11.5388 48.6981 11.4956C48.7413 11.4524 48.7629 11.402 48.7629 11.3444V10.7612H50.2101V11.1716C50.2101 12.122 49.7637 12.5972 48.8709 12.5972H47.6505C46.7577 12.5972 46.3113 12.122 46.3113 11.1716V8.53642C46.3113 7.58602 46.7577 7.11082 47.6505 7.11082H48.8709ZM47.7585 9.29242H48.7629V8.32042C48.7629 8.26282 48.7413 8.21242 48.6981 8.16922C48.6621 8.12602 48.6153 8.10442 48.5577 8.10442H47.9637C47.9061 8.10442 47.8557 8.12602 47.8125 8.16922C47.7765 8.21242 47.7585 8.26282 47.7585 8.32042V9.29242Z" fill="#101828" />
    <path d="M52.4519 12.4892H51.0047V7.21882H52.3223V7.48882C52.5455 7.23682 52.8839 7.11082 53.3375 7.11082H53.5643C54.4571 7.11082 54.9035 7.58602 54.9035 8.53642V12.4892H53.4563V8.36362C53.4563 8.30602 53.4347 8.25562 53.3915 8.21242C53.3555 8.16922 53.3087 8.14762 53.2511 8.14762H52.6571C52.5995 8.14762 52.5491 8.16922 52.5059 8.21242C52.4699 8.25562 52.4519 8.30602 52.4519 8.36362V12.4892Z" fill="#101828" />
    <path d="M57.3567 6.56002C57.2055 6.71122 57.0219 6.78682 56.8059 6.78682C56.5899 6.78682 56.4027 6.71122 56.2443 6.56002C56.0859 6.40162 56.0067 6.21442 56.0067 5.99842C56.0067 5.77522 56.0859 5.58802 56.2443 5.43682C56.4027 5.27842 56.5899 5.19922 56.8059 5.19922C57.0219 5.19922 57.2055 5.27842 57.3567 5.43682C57.5151 5.58802 57.5943 5.77522 57.5943 5.99842C57.5943 6.22162 57.5151 6.40882 57.3567 6.56002ZM56.0823 12.4892V7.21882H57.5295V12.4892H56.0823Z" fill="#101828" />
    <path d="M60.9973 7.21882H62.4445V12.4892H61.1269V12.2192C60.9037 12.4712 60.5653 12.5972 60.1117 12.5972H59.8849C58.9921 12.5972 58.5457 12.122 58.5457 11.1716V7.21882H59.9929V11.3444C59.9929 11.402 60.0109 11.4524 60.0469 11.4956C60.0901 11.5388 60.1405 11.5604 60.1981 11.5604H60.7921C60.8497 11.5604 60.8965 11.5388 60.9325 11.4956C60.9757 11.4524 60.9973 11.402 60.9973 11.3444V7.21882Z" fill="#101828" />
    <path d="M65.9129 9.18442C66.8057 9.18442 67.2521 9.65962 67.2521 10.61V11.1716C67.2521 12.122 66.8057 12.5972 65.9129 12.5972H64.7141C63.8213 12.5972 63.3749 12.122 63.3749 11.1716V10.8368H64.7141V11.312C64.7141 11.3696 64.7321 11.42 64.7681 11.4632C64.8113 11.5064 64.8617 11.528 64.9193 11.528H65.8049C65.8625 11.528 65.9093 11.5064 65.9453 11.4632C65.9885 11.42 66.0101 11.3696 66.0101 11.312V10.664C66.0101 10.6064 65.9885 10.556 65.9453 10.5128C65.9093 10.4696 65.8625 10.448 65.8049 10.448H64.6925C63.7997 10.448 63.3533 9.97282 63.3533 9.02242V8.53642C63.3533 7.58602 63.7997 7.11082 64.6925 7.11082H65.8265C66.7193 7.11082 67.1657 7.58602 67.1657 8.53642V8.73082H65.8265V8.39602C65.8265 8.33842 65.8049 8.28802 65.7617 8.24482C65.7257 8.20162 65.6789 8.18002 65.6213 8.18002H64.8005C64.7429 8.18002 64.6925 8.20162 64.6493 8.24482C64.6133 8.28802 64.5953 8.33842 64.5953 8.39602V8.96842C64.5953 9.02602 64.6133 9.07642 64.6493 9.11962C64.6925 9.16282 64.7429 9.18442 64.8005 9.18442H65.9129Z" fill="#101828" />
  </svg>
)
