'use client';

import { ActionIcon, Icon } from '@lobehub/ui';
import { App, Button } from 'antd';
import { createStyles } from 'antd-style';
import { ChevronDownIcon, PlusIcon } from 'lucide-react';
import { useRouter } from 'next/navigation';
import { memo, useState } from 'react';
import { useTranslation } from 'react-i18next';

import { MOBILE_HEADER_ICON_SIZE } from '@/const/layoutTokens';
import { SESSION_CHAT_URL } from '@/const/url';
import { useSessionStore } from '@/store/session';
import { DiscoverAssistantItem } from '@/types/discover';

const useStyles = createStyles(({ css }) => ({
  button: css`
    border-radius: 20px;
    color: #2E62FF;
    border: 1px solid #2E62FF;
  `,
}));

const AddAgent = memo<{ data: DiscoverAssistantItem; mobile?: boolean }>(({ data, mobile }) => {
  const { styles } = useStyles();
  const [isLoading, setIsLoading] = useState(false);
  const createSession = useSessionStore((s) => s.createSession);
  const { message } = App.useApp();
  const router = useRouter();
  const { t } = useTranslation('discover');
  const handleAddAgentAndConverse = async () => {
    if (!data) return;

    setIsLoading(true);
    const session = await createSession({ config: data.config, meta: data.meta });
    setIsLoading(false);
    message.success(t('assistants.addAgentSuccess'));
    router.push(SESSION_CHAT_URL(session, mobile));
  };

  const handleAddAgent = async () => {
    if (!data) return;
    setIsLoading(true);
    createSession({ config: data.config, meta: data.meta }, false);
    message.success(t('assistants.addAgentSuccess'));
    setIsLoading(false);
  };

  if (mobile)
    return (
      <ActionIcon
        active
        icon={PlusIcon}
        onClick={handleAddAgentAndConverse}
        size={MOBILE_HEADER_ICON_SIZE}
        title={t('assistants.addAgentAndConverse')}
      />
    );

  return (
    <Button className={styles.button} loading={isLoading} onClick={handleAddAgentAndConverse}>添加并会话</Button>
  );
});

export default AddAgent;
