import React, { useMemo, useState } from 'react';
import {
  Card,
  Flex,
  Box,
  Button,
  ModalBody,
  ModalFooter,
  useTheme,
  Textarea,
  Grid,
  Divider
} from '@chakra-ui/react';
import Avatar from '@/components/Avatar';
import { useForm } from 'react-hook-form';
import { QuestionOutlineIcon } from '@chakra-ui/icons';
import type { SelectedKbType } from '@/types/plugin';
import { useToast } from '@/hooks/useToast';
import MySlider from '@/components/Slider';
import MyTooltip from '@/components/MyTooltip';
import MyModal from '@/components/MyModal';
import MyIcon from '@/components/Icon';
import { KbTypeEnum } from '@/constants/kb';
import { useTranslation } from 'react-i18next';
import { useQuery } from '@tanstack/react-query';
import { useDatasetStore } from '@/store/dataset';
import { feConfigs } from '@/store/static';
import DatasetSelectModal, { useDatasetSelect } from '@/components/core/dataset/SelectModal';

export type KbParamsType = {
  searchSimilarity: number;
  searchLimit: number;
  searchEmptyText: string;
};

export const KBSelectModal = ({
  isOpen,
  activeKbs = [],
  onChange,
  onClose
}: {
  isOpen: boolean;
  activeKbs: SelectedKbType;
  onChange: (e: SelectedKbType) => void;
  onClose: () => void;
}) => {
  const { t } = useTranslation();
  const theme = useTheme();
  const [selectedKbList, setSelectedKbList] = useState<SelectedKbType>(activeKbs);
  const { toast } = useToast();
  const { paths, parentId, setParentId, datasets } = useDatasetSelect();
  const { allDatasets, loadAllDatasets } = useDatasetStore();

  useQuery(['loadAllDatasets'], loadAllDatasets);

  const filterKbList = useMemo(() => {
    return {
      selected: allDatasets.filter((item) => selectedKbList.find((kb) => kb.kbId === item._id)),
      unSelected: datasets.filter((item) => !selectedKbList.find((kb) => kb.kbId === item._id))
    };
  }, [datasets, allDatasets, selectedKbList]);

  return (
    <DatasetSelectModal
      isOpen={isOpen}
      paths={paths}
      parentId={parentId}
      setParentId={setParentId}
      tips={'仅能选择同一个索引模型的知识库'}
      onClose={onClose}
    >
      <ModalBody flex={['1 0 0', '0 0 auto']} maxH={'80vh'} overflowY={'auto'} userSelect={'none'}>
        <Grid gridTemplateColumns={['repeat(1,1fr)', 'repeat(2,1fr)', 'repeat(3,1fr)']} gridGap={3}>
          {filterKbList.selected.map((item) =>
            (() => {
              return (
                <Card
                  key={item._id}
                  p={3}
                  border={theme.borders.base}
                  boxShadow={'sm'}
                  bg={'myBlue.300'}
                >
                  <Flex alignItems={'center'} h={'38px'}>
                    <Avatar src={item.avatar} w={['24px', '28px']}></Avatar>
                    <Box flex={'1 0 0'} mx={3}>
                      {item.name}
                    </Box>
                    <MyIcon
                      name={'delete'}
                      w={'14px'}
                      cursor={'pointer'}
                      _hover={{ color: 'red.500' }}
                      onClick={() => {
                        setSelectedKbList((state) => state.filter((kb) => kb.kbId !== item._id));
                      }}
                    />
                  </Flex>
                </Card>
              );
            })()
          )}
        </Grid>

        {filterKbList.selected.length > 0 && <Divider my={3} />}

        <Grid gridTemplateColumns={['repeat(1,1fr)', 'repeat(2,1fr)', 'repeat(3,1fr)']} gridGap={3}>
          {filterKbList.unSelected.map((item) =>
            (() => {
              return (
                <MyTooltip
                  key={item._id}
                  label={
                    item.type === KbTypeEnum.dataset
                      ? t('kb.Select Dataset')
                      : t('kb.Select Folder')
                  }
                >
                  <Card
                    p={3}
                    border={theme.borders.base}
                    boxShadow={'sm'}
                    h={'80px'}
                    cursor={'pointer'}
                    _hover={{
                      boxShadow: 'md'
                    }}
                    onClick={() => {
                      if (item.type === KbTypeEnum.folder) {
                        setParentId(item._id);
                      } else if (item.type === KbTypeEnum.dataset) {
                        const vectorModel = selectedKbList[0]?.vectorModel?.model;

                        if (vectorModel && vectorModel !== item.vectorModel.model) {
                          return toast({
                            status: 'warning',
                            title: '仅能选择同一个索引模型的知识库'
                          });
                        }
                        setSelectedKbList((state) => [
                          ...state,
                          { kbId: item._id, vectorModel: item.vectorModel }
                        ]);
                      }
                    }}
                  >
                    <Flex alignItems={'center'} h={'38px'}>
                      <Avatar src={item.avatar} w={['24px', '28px']}></Avatar>
                      <Box
                        className="textEllipsis"
                        ml={3}
                        fontWeight={'bold'}
                        fontSize={['md', 'lg', 'xl']}
                      >
                        {item.name}
                      </Box>
                    </Flex>
                    <Flex justifyContent={'flex-end'} alignItems={'center'} fontSize={'sm'}>
                      {item.type === KbTypeEnum.folder ? (
                        <Box color={'myGray.500'}>{t('Folder')}</Box>
                      ) : (
                        <>
                          <MyIcon mr={1} name="kbTest" w={'12px'} />
                          <Box color={'myGray.500'}>{item.vectorModel.name}</Box>
                        </>
                      )}
                    </Flex>
                  </Card>
                </MyTooltip>
              );
            })()
          )}
        </Grid>
        {filterKbList.unSelected.length === 0 && (
          <Flex mt={5} flexDirection={'column'} alignItems={'center'}>
            <MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
            <Box mt={2} color={'myGray.500'}>
              这个目录已经没东西可选了~
            </Box>
          </Flex>
        )}
      </ModalBody>

      <ModalFooter>
        <Button
          onClick={() => {
            // filter out the kb that is not in the kList
            const filterKbList = selectedKbList.filter((kb) => {
              return datasets.find((item) => item._id === kb.kbId);
            });

            onClose();
            onChange(filterKbList);
          }}
        >
          完成
        </Button>
      </ModalFooter>
    </DatasetSelectModal>
  );
};

export const KbParamsModal = ({
  searchEmptyText,
  searchLimit,
  searchSimilarity,
  onClose,
  onChange
}: KbParamsType & { onClose: () => void; onChange: (e: KbParamsType) => void }) => {
  const [refresh, setRefresh] = useState(false);
  const { register, setValue, getValues, handleSubmit } = useForm<KbParamsType>({
    defaultValues: {
      searchEmptyText,
      searchLimit,
      searchSimilarity
    }
  });

  return (
    <MyModal isOpen={true} onClose={onClose} title={'搜索参数调整'} minW={['90vw', '600px']}>
      <Flex flexDirection={'column'}>
        <ModalBody>
          <Box display={['block', 'flex']} py={5} pt={[0, 5]}>
            <Box flex={'0 0 100px'} mb={[8, 0]}>
              相似度
              <MyTooltip
                label={'不同索引模型的相似度有区别，请通过搜索测试来选择合适的数值'}
                forceShow
              >
                <QuestionOutlineIcon ml={1} />
              </MyTooltip>
            </Box>
            <MySlider
              markList={[
                { label: '0', value: 0 },
                { label: '1', value: 1 }
              ]}
              min={0}
              max={1}
              step={0.01}
              value={getValues('searchSimilarity')}
              onChange={(val) => {
                setValue('searchSimilarity', val);
                setRefresh(!refresh);
              }}
            />
          </Box>
          <Box display={['block', 'flex']} py={8}>
            <Box flex={'0 0 100px'} mb={[8, 0]}>
              单次搜索数量
            </Box>
            <Box flex={1}>
              <MySlider
                markList={[
                  { label: '1', value: 1 },
                  { label: '20', value: 20 }
                ]}
                min={1}
                max={20}
                value={getValues('searchLimit')}
                onChange={(val) => {
                  setValue('searchLimit', val);
                  setRefresh(!refresh);
                }}
              />
            </Box>
          </Box>
          <Box display={['block', 'flex']} pt={3}>
            <Box flex={'0 0 100px'} mb={[2, 0]}>
              空搜索回复
            </Box>
            <Box flex={1}>
              <Textarea
                rows={5}
                maxLength={500}
                placeholder={`若填写该内容，没有搜索到对应内容时，将直接回复填写的内容。\n为了连贯上下文，${feConfigs?.systemTitle} 会取部分上一个聊天的搜索记录作为补充，因此在连续对话时，该功能可能会失效。`}
                {...register('searchEmptyText')}
              ></Textarea>
            </Box>
          </Box>
        </ModalBody>
        <ModalFooter>
          <Button variant={'base'} mr={3} onClick={onClose}>
            取消
          </Button>
          <Button
            onClick={() => {
              onClose();
              handleSubmit(onChange)();
            }}
          >
            完成
          </Button>
        </ModalFooter>
      </Flex>
    </MyModal>
  );
};

export default KBSelectModal;