import type React from 'react';
import { useState } from 'react';
import { useUIKit, Button } from '@tencentcloud/uikit-base-component-react';
import classNames from 'classnames';
import { ContactStore } from 'tuikit-atomicx-react/chat';
import { Avatar } from 'tuikit-atomicx-react/chat';
import styles from './SearchUserInfo.module.scss';
import type { SearchUserInfoProps } from '../../../../types/contact';

export const SearchUserInfo: React.FC<SearchUserInfoProps> = ({
  user,
  showActions = true,
  onAddFriend,
  className,
  style,
}) => {
  const { t } = useUIKit();
  const { addFriend } = ContactStore();
  const [wording, setWording] = useState('');
  const [loading, setLoading] = useState(false);
  const [status, setStatus] = useState<'idle' | 'success' | 'error'>('idle');
  const [errorMessage, setErrorMessage] = useState('');

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

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

    if (onAddFriend) {
      setStatus('success');
      setLoading(false);
      onAddFriend?.(user, wording.trim() || t('ContactList.apply_to_add_friend'));
      return;
    }

    try {
      await addFriend({
        userID: user.userID,
        source: 'AddSource_Type_Web',
        addWording: wording.trim() || t('ContactList.apply_to_add_friend'),
      });

      setStatus('success');
    } catch (error: any) {
      setStatus('error');
      setErrorMessage(error?.message || t('ContactList.add_friend_failed'));
    } finally {
      setLoading(false);
    }
  };

  const displayName = user.nickname || user.userID;

  return (
    <div className={classNames(styles['contact-search-user-info'], className)} style={style}>
      <div className={styles['contact-search-user-info__header']}>
        <div className={styles['contact-search-user-info__main-info']}>
          <div className={styles['contact-search-user-info__name']}>{displayName}</div>
          <div className={styles['contact-search-user-info__id']}>
            {t('ContactList.id')}
            ：
            {user.userID}
          </div>
        </div>
        <div className={styles['contact-search-user-info__avatar-wrap']}>
          <Avatar
            {...(user.avatarURL && { src: user.avatarURL })}
            alt={displayName}
            size={48}
          />
        </div>
      </div>
      <div className={styles['contact-search-user-info__rows']}>
        <div className={styles['contact-search-user-info__row']}>
          <div className={styles['contact-search-user-info__row-label']}>{t('ContactList.personal_signature')}</div>
          <div className={styles['contact-search-user-info__row-value']}>
            <span className={styles['contact-search-user-info__intro']}>
              {user.aboutMe || t('ContactList.none')}
            </span>
          </div>
        </div>
      </div>

      {
        status !== 'idle'
          ? (
            <div className={classNames(
              styles['contact-search-user-info__status'],
              styles[`contact-search-user-info__status--${status}`],
            )}
            >
              { status === 'success'
                ? t('ContactList.friend_request_sent_waiting_for_confirmation')
                : errorMessage}
            </div>
          )
          : (
            <div className={styles['contact-search-user-info__form']}>
              <div className={styles['contact-search-user-info__form-item']}>
                <label className={styles['contact-search-user-info__form-label']}>
                  {t('ContactList.application_info')}
                </label>
                <div className={styles['contact-search-user-info__form-input-wrapper']}>
                  <textarea
                    className={styles['contact-search-user-info__form-input']}
                    name="addFriendWording"
                    value={wording}
                    onChange={e => setWording(e.target.value)}
                    placeholder={t('ContactList.please_enter_application_info')}
                    maxLength={200}
                  />
                  <div className={styles['contact-search-user-info__form-counter']}>
                    {wording.length}
                    /200
                  </div>
                </div>
              </div>
            </div>
          )
      }

      {showActions && status !== 'success' && (
        <div className={styles['contact-search-user-info__actions']}>
          <Button
            className={styles['contact-search-user-info__button--primary']}
            type="primary"
            size="big"
            radius="round"
            loading={loading}
            onClick={handleAddFriend}
          >
            {t('ContactList.apply_to_add_friend')}
          </Button>
        </div>
      )}
    </div>
  );
};