import type React from 'react';
import { useState } from 'react';
import { GroupType } from 'tuikit-atomicx-react/chat';
import { GroupStore } from 'tuikit-atomicx-react/chat';
import { useUIKit, Button } from '@tencentcloud/uikit-base-component-react';
import classNames from 'classnames';
import { DEFAULT_GROUP_COMMON_AVATAR } from '../../../../constant/avatar';
import { Avatar } from 'tuikit-atomicx-react/chat';
import styles from './SearchGroupInfo.module.scss';
import type { SearchGroupInfoProps } from '../../../../types/contact';

export const SearchGroupInfo: React.FC<SearchGroupInfoProps> = ({
  group,
  showActions = true,
  onJoinGroup,
  className,
  style,
}) => {
  const { t } = useUIKit();
  const { joinGroup } = GroupStore();
  const [note, setNote] = useState('');
  const [loading, setLoading] = useState(false);
  const [status, setStatus] = useState<'idle' | 'success' | 'error'>('idle');
  const [errorMessage, setErrorMessage] = useState('');

  const handleJoinGroup = async () => {
    if (loading) {
      return;
    }

    setLoading(true);
    setStatus('idle');
    setErrorMessage('');

    if (onJoinGroup) {
      setStatus('success');
      setLoading(false);
      onJoinGroup?.(group, note.trim() || t('ContactList.apply_to_join_group'));
      return;
    }

    try {
      await joinGroup(group.groupID, note.trim() || t('ContactList.apply_to_join_group'));
      setStatus('success');
    } catch (error: any) {
      console.error('[SearchGroupInfo joinGroup] error', error);
      setStatus('error');
      setErrorMessage(t('ContactList.apply_to_join_group_failed'));
    } finally {
      setLoading(false);
    }
  };

  const getGroupTypeName = (type?: GroupType) => {
    switch (type) {
      case GroupType.Work:
        return t('ContactList.work_group');
      case GroupType.Public:
        return t('ContactList.public_group');
      case GroupType.Meeting:
        return t('ContactList.meeting_group');
      case GroupType.AVChatRoom:
        return t('ContactList.live_group');
      case GroupType.Community:
        return t('ContactList.community');
      default:
        return t('ContactList.unknown');
    }
  };

  const displayName = group.groupName || group.groupID;

  return (
    <div className={classNames(styles['contact-search-group-info'], className)} style={style}>
      <div className={styles['contact-search-group-info__header']}>
        <div className={styles['contact-search-group-info__main-info']}>
          <div className={styles['contact-search-group-info__name']}>{displayName}</div>
          <div className={styles['contact-search-group-info__id']}>
            {`${t('ContactList.group_id')}: ${group.groupID}`}
          </div>
        </div>
        <div className={styles['contact-search-group-info__avatar-wrap']}>
          <Avatar
            src={group.avatarURL || DEFAULT_GROUP_COMMON_AVATAR}
            alt={displayName}
            size={48}
          />
        </div>
      </div>
      <div className={styles['contact-search-group-info__rows']}>
        <div className={styles['contact-search-group-info__row']}>
          <div className={styles['contact-search-group-info__row-label']}>{t('ContactList.group_type')}</div>
          <div className={styles['contact-search-group-info__row-value']}>{getGroupTypeName(group.groupType)}</div>
        </div>
      </div>
      {
        status !== 'idle'
          ? (
            <div className={classNames(
              styles['contact-search-group-info__status'],
              styles[`contact-search-group-info__status--${status}`],
            )}
            >
              { status === 'success'
                ? t('ContactList.group_application_sent_waiting_for_admin_approval')
                : errorMessage}
            </div>
          )
          : (
            <div className={styles['contact-search-group-info__form']}>
              <div className={styles['contact-search-group-info__form-item']}>
                <label className={styles['contact-search-group-info__form-label']}>
                  {t('ContactList.application_info')}
                </label>
                <div className={styles['contact-search-group-info__form-input-wrapper']}>
                  <textarea
                    className={styles['contact-search-group-info__form-input']}
                    name="joinGroupNote"
                    value={note}
                    onChange={e => setNote(e.target.value)}
                    placeholder={t('ContactList.please_enter_application_info')}
                    maxLength={200}
                  />
                  <div className={styles['contact-search-group-info__form-counter']}>
                    {note.length}
                    /200
                  </div>
                </div>
              </div>
            </div>
          )
      }
      {showActions && status !== 'success' && (
        <div className={styles['contact-search-group-info__actions']}>
          <Button
            className={styles['contact-search-group-info__button--primary']}
            type="primary"
            size="big"
            radius="round"
            loading={loading}
            onClick={handleJoinGroup}
          >
            {t('ContactList.apply_to_join_group')}
          </Button>
        </div>
      )}
    </div>
  );
};