import { useState } from 'react';
import type React from 'react';
import { IconSearch, Toast, useUIKit } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import {
  ConversationType,
  useChatContext,
  useGroupStore,
} from 'tuikit-atomicx-react/chat';
import { Dialog } from '../../../baseComp/Dialog';
import { Input } from '../../../baseComp/Input';
import { StandardSearchH5 } from '../../SearchNewH5';
import styles from './ConversationSearch.module.scss';
import type { SearchProps, SearchResultItemType, SearchType } from '../../../types/search';
import type { StandardSearchH5Result } from '../../SearchNewH5/StandardSearchH5';

export interface ConversationSearchProps extends SearchProps {
  visible?: boolean;
  className?: string;
  style?: React.CSSProperties;
  /** When true, GROUP search results are filtered to only show groups the current user has joined. */
  enableLocalSearch?: boolean;
}

export const ConversationSearch = (props: ConversationSearchProps = {}) => {
  const {
    visible = true,
    className,
    style,
    enableLocalSearch,
    onResultItemClick,
  } = props;

  const [isShowStandard, setIsShowStandard] = useState(false);
  const { t } = useUIKit();
  const { setActiveConversation, getConversationInfo } = useChatContext();
  const { joinedGroupList, getGroupInfo, loadJoinedGroups } = useGroupStore();

  if (!visible) {
    return null;
  }

  const handleOpen = () => {
    setIsShowStandard(true);
  };

  const handleCloseStandard = () => {
    setIsShowStandard(false);
  };

  const activateConversationByID = async (conversationID: string): Promise<void> => {
    try {
      const info = await getConversationInfo(conversationID);
      if (info.type === ConversationType.Group) {
        const groupID = conversationID.replace(/^GROUP/, '');
        try {
          const groupInfo = await getGroupInfo(groupID);
          await loadJoinedGroups();
          const isInGroup = !!joinedGroupList.find(g => g.groupID === groupID);
          if (!groupInfo?.groupID) {
            Toast.error({ message: t('TUIConversation.the_group_chat_has_been_disbanded') });
            return;
          }
          if (!isInGroup) {
            Toast.error({
              message: t('TUIConversation.You are not in the group, please join the group first'),
            });
          }
        } catch {
          Toast.error({ message: t('TUIConversation.the_group_chat_has_been_disbanded') });
          return;
        }
      }
      setActiveConversation(info.conversationID);
    } catch (err) {
      Toast.error({ message: t('TUIConversation.conversation_not_found') });
      console.error('[ConversationSearch.activateConversationByID] failed', err);
    }
  };

  const handleSearchUserClick = (data: { userID?: string }) => {
    if (data?.userID) {
      void activateConversationByID(`C2C${data.userID}`);
    }
    handleCloseStandard();
  };

  const handleSearchGroupClick = (data: { groupID?: string }) => {
    if (data?.groupID) {
      void activateConversationByID(`GROUP${data.groupID}`);
    } else {
      Toast.error({
        message: t('TUIConversation.You are not in the group, please join the group first'),
      });
    }
    handleCloseStandard();
  };

  const handleOnSelectResult = (result: StandardSearchH5Result) => {
    if (onResultItemClick) {
      onResultItemClick(result.data as unknown as SearchResultItemType, result.type as unknown as SearchType);
      return;
    }

    switch (result.type) {
      case 'user':
        handleSearchUserClick(result.data);
        break;
      case 'group':
        handleSearchGroupClick(result.data);
        break;
      case 'message':
        break;
      default:
        break;
    }
  };

  return (
    <div className={cs(styles.conversationSearch, className)} style={style}>
      <div className={styles.conversationSearch__trigger} onClick={handleOpen}>
        <Input
          readOnly
          clearable={false}
          value=""
          placeholder={t('Search.search')}
          prefix={<IconSearch />}
        />
      </div>

      <Dialog
        className={cs(styles.conversationSearch__advanced)}
        viewportClassName={cs(styles.conversationSearch__viewport)}
        open={isShowStandard}
        showClose={false}
        footer={null}
        onClose={handleCloseStandard}
      >
        <StandardSearchH5
          className={cs(styles.searchContainer)}
          enableLocalSearch={enableLocalSearch}
          onBack={handleCloseStandard}
          onResultItemClick={handleOnSelectResult}
          onLocateMessage={handleCloseStandard}
        />
      </Dialog>
    </div>
  );
};

export default ConversationSearch;