import { useMemo, useEffect, useState } from 'react';
import TencentCloudChat from '@tencentcloud/lite-chat';
import { useUIKit } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import { useChatContext, useLoginStore } from 'tuikit-atomicx-react/chat';
import { Avatar } from 'tuikit-atomicx-react/chat';
import classes from './MentionPanelH5.module.scss';
import type { GroupMember } from 'tuikit-atomicx-react/chat';

export interface MentionMember {
  userID: string;
  nickname?: string;
  avatarURL?: string;
  isAtAll?: boolean;
}

interface MentionPanelH5Props {
  visible: boolean;
  query: string;
  channel?: string;
  onSelect: (member: MentionMember) => void;
  onPanelTouchStart?: () => void;
}

function MentionPanelH5({
  visible,
  query,
  channel = 'default',
  onSelect,
  onPanelTouchStart,
}: MentionPanelH5Props) {
  const { t } = useUIKit();
  const { loginUserInfo } = useLoginStore();
  const {
    memberList,
    loadMembers,
  } = useChatContext(channel);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    if (!visible) {
      return undefined;
    }

    let cancelled = false;
    setIsLoading(true);
    Promise.resolve(loadMembers())
      .catch(() => {})
      .finally(() => {
        if (!cancelled) {
          setIsLoading(false);
        }
      });

    return () => {
      cancelled = true;
    };
  }, [loadMembers, visible]);

  const mentionMembers = useMemo<MentionMember[]>(() => {
    const myUserID = loginUserInfo?.userID;
    const members = memberList ?? [];
    const result = members
      .filter((member: GroupMember) => member.userID !== myUserID)
      .map((member: GroupMember) => ({
        userID: member.userID,
        nickname: member.nickname,
        avatarURL: member.avatarURL,
      }));

    if (members.length > 2) {
      result.unshift({
        userID: TencentCloudChat.TYPES.MSG_AT_ALL as string,
        nickname: t('MessageInput.at_all_members') || 'all',
        avatarURL: '/at_all_members.png',
        isAtAll: true,
      });
    }

    return result;
  }, [loginUserInfo?.userID, memberList, t]);

  const filteredMembers = useMemo(() => {
    const normalizedQuery = query.trim().toLowerCase();
    if (!normalizedQuery) {
      return mentionMembers;
    }

    return mentionMembers.filter(member =>
      (member.nickname || member.userID).toLowerCase().includes(normalizedQuery),
    );
  }, [mentionMembers, query]);

  if (!visible) {
    return null;
  }

  return (
    <div
      className={classes['mention-panel-h5']}
      onTouchStart={onPanelTouchStart}
      onTouchMove={event => event.stopPropagation()}
    >
      <div className={classes['mention-panel-h5__header']}>{t('MessageInput.select_mention_members')}</div>
      {filteredMembers.map(member => (
        <button
          key={member.userID}
          type="button"
          className={classes['mention-panel-h5__item']}
          onMouseDown={event => event.preventDefault()}
          onClick={() => onSelect(member)}
        >
          {member.isAtAll
            ? <span className={cs(classes['mention-panel-h5__avatar'], classes['mention-panel-h5__avatar--all'])}>@</span>
            : (
              <Avatar
                className={classes['mention-panel-h5__avatar']}
                src={member.avatarURL}
                alt={member.nickname || member.userID}
                size={36}
              />
            )}
          <span className={classes['mention-panel-h5__content']}>
            <span className={classes['mention-panel-h5__name']}>{member.nickname || member.userID}</span>
            {!member.isAtAll && member.nickname && member.nickname !== member.userID && (
              <span className={classes['mention-panel-h5__id']}>{member.userID}</span>
            )}
          </span>
        </button>
      ))}
      {filteredMembers.length === 0 && !isLoading && (
        <div className={classes['mention-panel-h5__empty']}>{t('MessageInput.no_matching_members')}</div>
      )}
      {isLoading && (
        <button
          type="button"
          className={classes['mention-panel-h5__load-more']}
          disabled
          onMouseDown={event => event.preventDefault()}
        >
          {t('MessageInput.loading')}
        </button>
      )}
    </div>
  );
}

export { MentionPanelH5 };