import { useState, useImperativeHandle, forwardRef } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Space, App, Flex, Tooltip, Divider } from 'antd'
import { UsergroupAddOutlined } from '@ant-design/icons';

import type { ModelPlaza, ModelPlazaItem, ModelSquareDetailRef } from '../types';
import RbDrawer from '@/components/RbDrawer';
import { getModelPlaza, addModelPlaza } from '@/api/models'
import RbCard from '@/components/RbCard/Card'
import Tag from '@/components/Tag';
import PageEmpty from '@/components/Empty/PageEmpty';
import { getLogoUrl } from '../utils'

interface ModelSquareDetailProps {
  refresh: () => void;
  handleEdit: (vo: ModelPlazaItem) => void;
}
const ModelSquareDetail = forwardRef<ModelSquareDetailRef, ModelSquareDetailProps>(({ refresh, handleEdit }, ref) => {
  const { t } = useTranslation();
  const { message } = App.useApp()
  const [model, setModel] = useState<ModelPlaza>({} as ModelPlaza)
  const [open, setOpen] = useState(false);

  const [list, setList] = useState<ModelPlazaItem[]>([])

  const handleOpen = (vo: ModelPlaza) => {
    setModel(vo)
    setOpen(true)
    getList(vo)
  }
  const handleClose = () => {
    setOpen(false)
    refresh()
  }
  const getList = (vo: ModelPlaza) => {
    getModelPlaza({ provider: vo.provider })
      .then(res => {
        const response = res as ModelPlaza[]
        setList(response.length > 0 ? response[0].models : [])
      })
  }
  const handleAdd = (item: ModelPlazaItem) => {
    addModelPlaza(item.id)
      .then(() => {
        message.success(`${item.name}${t('modelNew.addSuccess')}`)
        getList(model)
      })
  }

  useImperativeHandle(ref, () => ({
      handleOpen,
  }));

  return (
    <RbDrawer
      title={<>{t(`modelNew.${model.provider}`)} {t('modelNew.modelList')} ({list.length}{t('modelNew.item')})</>}
      open={open}
      onClose={handleClose}
    >
      <div className="rb:h-full rb:overflow-y-auto">
        {list.length === 0 
          ? <PageEmpty />
          : <div className="rb:grid rb:grid-cols-2 rb:gap-4">
            {list.map(item => (
              <RbCard
                key={item.id}
                title={item.name}
                subTitle={<Space size={8}>
                  <Tag className="rb:mt-1">{t(`modelNew.${item.type}`)}</Tag>
                  {item.is_official && <Tag color="success" className="rb:mt-1">{t(`modelNew.official`)}</Tag>}
                </Space>}
                avatarUrl={getLogoUrl(item.logo)}
                avatar={
                  <div className="rb:w-12 rb:h-12 rb:rounded-lg rb:mr-3.25 rb:bg-[#155eef] rb:flex rb:items-center rb:justify-center rb:text-[28px] rb:text-[#ffffff]">
                    {item.name[0]}
                  </div>
                }
                bodyClassName="rb:relative rb:pb-[80px]! rb:h-[calc(100%-64px)]!"
              >
                <Tooltip title={item.description}>
                  <div className="rb:text-[#5B6167] rb:text-[12px] rb:leading-4.5 rb:font-regular rb:wrap-break-word rb:line-clamp-2 rb:mt-3">{item.description}</div>
                </Tooltip>
                <Flex gap={8} wrap className="rb:mt-3!">{item.tags.map((tag, tagIndex) => <Tag key={tagIndex}>{tag}</Tag>)}</Flex>
                <div className="rb:absolute rb:bottom-4 rb:left-6 rb:right-6">
                  <Divider size="middle" />
                  <Flex justify="space-between">
                    <Space size={8}><UsergroupAddOutlined /> {item.add_count}</Space>
                    <Space>
                      {!item.is_official && <Button type="primary" disabled={item.is_deprecated} onClick={() => handleEdit(item)}>{t('modelNew.edit')}</Button>}
                      {item.is_added
                        ? <Button type="primary" disabled>{t('modelNew.added')}</Button>
                        : <Button type="primary" ghost disabled={item.is_deprecated} onClick={() => handleAdd(item)}>{item.is_deprecated ? t('modelNew.deprecated') : `+ ${t('common.add')}`}</Button>
                      }
                    </Space>
                  </Flex>
                </div>
              </RbCard>
            ))}
            </div>
          }
      </div>
    </RbDrawer>
  );
});

export default ModelSquareDetail;