import type React from 'react';
import { useState, useMemo, useEffect } from 'react';
import { useUIKit, Button, IconEdit1, Input, Switch } from '@tencentcloud/uikit-base-component-react';
import classNames from 'classnames';
import { ContactStore, useUIContext } from 'tuikit-atomicx-react/chat';
import { Avatar } from 'tuikit-atomicx-react/chat';
import styles from './FriendInfo.module.scss';
import type { FriendInfoProps, ContactInfo } from '../../../../types/contact';

export const FriendInfo: React.FC<FriendInfoProps> = ({
  friend,
  showActions = true,
  onClose,
  onSendMessage,
  onDeleteFriend,
  onAddToBlacklist,
  onUpdateFriendRemark,
  className,
  style,
}) => {
  const { t } = useUIKit();
  const { blackList, deleteFriend, addToBlacklist, removeFromBlacklist, setFriendRemark } = ContactStore();
  const { setActiveConversation } = useUIContext();

  const [isEditing, setIsEditing] = useState(false);
  const [remark, setRemark] = useState(friend.friendRemark || '');
  const [remarkInput, setRemarkInput] = useState(friend.friendRemark || '');
  const [remarkLoading, setRemarkLoading] = useState(false);
  const [blackLoading, setBlackLoading] = useState(false);

  useEffect(() => {
    setRemark(friend.friendRemark || '');
    setRemarkInput(friend.friendRemark || '');
  }, [friend.friendRemark]);

  const isBlacklisted = useMemo(() =>
    blackList.some(item => item.userID === friend.userID),
  [blackList, friend.userID],
  );

  const handleRemarkSave = async () => {
    if (remarkInput.trim() === remark) {
      setIsEditing(false);
      return;
    }
    setRemarkLoading(true);
    try {
      await setFriendRemark(friend.userID, remarkInput.trim());
      setRemark(remarkInput.trim());
      setIsEditing(false);
      onUpdateFriendRemark?.({
        ...friend,
        friendRemark: remarkInput.trim(),
      }, remarkInput.trim());
    } catch (err: any) {
      console.error(err);
    } finally {
      setRemarkLoading(false);
    }
  };

  const handleBlacklistChange = async (checked: boolean) => {
    setBlackLoading(true);
    try {
      if (checked) {
        await addToBlacklist(friend.userID);
        onAddToBlacklist?.(friend);
      } else {
        await removeFromBlacklist(friend.userID);
      }
    } catch (err: any) {
      console.error(err);
    } finally {
      setBlackLoading(false);
    }
  };

  const handleDeleteFriend = async () => {
    try {
      await deleteFriend(friend.userID);
      onDeleteFriend?.(friend);
    } catch (err: any) {
      console.error(err);
    }
    onClose?.();
  };

  const handleSendMessage = (data: ContactInfo) => {
    onSendMessage?.(data);
    setActiveConversation(`C2C${data.userID}`);
  };

  const displayName = remark || friend?.nickname || friend.userID;

  return (
    <div className={classNames(styles['contact-friend-info'], className)} style={style}>
      <div className={styles['contact-friend-info__header']}>
        <div className={styles['contact-friend-info__main-info']}>
          <div className={styles['contact-friend-info__name']}>{displayName}</div>
          <div className={styles['contact-friend-info__id']}>
            {t('ContactList.id')}
            ：
            {friend.userID}
          </div>
        </div>
        <div className={styles['contact-friend-info__avatar-wrap']}>
          <Avatar
            {...(friend?.avatarURL && { src: friend.avatarURL })}
            alt={displayName}
            size={48}
          />
        </div>
      </div>
      <div className={styles['contact-friend-info__rows']}>
        <div className={styles['contact-friend-info__row']}>
          <div className={styles['contact-friend-info__row-label']}>{t('ContactList.remark_name')}</div>
          <div className={styles['contact-friend-info__row-value']}>
            {isEditing
              ? (
                <div className={styles['contact-friend-info__remark-editor']}>
                  <Input
                    value={remarkInput}
                    onChange={e => setRemarkInput(e.target.value)}
                    onBlur={handleRemarkSave}
                    onKeyDown={e => e.key === 'Enter' && handleRemarkSave()}
                    autoFocus
                    disabled={remarkLoading}
                    maxLength={30}
                  />
                  <Button
                    size="small"
                    type="primary"
                    radius="round"
                    loading={remarkLoading}
                    onClick={handleRemarkSave}
                  >
                    {t('ContactList.save')}
                  </Button>
                </div>
              )
              : (
                <div className={styles['contact-friend-info__remark-edit']}>
                  <span>{remark || <span className={styles['contact-friend-info__remark-placeholder']}>{t('ContactList.none')}</span>}</span>
                  <IconEdit1
                    className={styles['contact-friend-info__remark-edit-icon']}
                    onClick={() => {
                      setRemarkInput(remark);
                      setIsEditing(true);
                    }}
                  />
                </div>
              )}
          </div>
        </div>
        <div className={styles['contact-friend-info__row']}>
          <div className={styles['contact-friend-info__row-label']}>{t('ContactList.personal_signature')}</div>
          <div className={styles['contact-friend-info__row-value']}>
            <span className={styles['contact-friend-info__signature']}>
              {friend?.aboutMe || t('ContactList.none')}
            </span>
          </div>
        </div>
        <div className={classNames(styles['contact-friend-info__row'], styles['contact-friend-info__row--center'])}>
          <div className={styles['contact-friend-info__row-label']}>{t('ContactList.add_to_blacklist')}</div>
          <div className={styles['contact-friend-info__row-value']}>
            <Switch
              value={isBlacklisted}
              disabled={blackLoading}
              onChange={handleBlacklistChange}
            />
          </div>
        </div>
      </div>
      {showActions && (
        <div className={styles['contact-friend-info__actions']}>
          <Button
            className={styles['contact-friend-info__button--primary']}
            type="primary"
            size="big"
            radius="round"
            onClick={() => handleSendMessage?.(friend)}
          >
            {t('ContactList.send_message')}
          </Button>
          <Button
            className={styles['contact-friend-info__button--secondary']}
            type="default"
            size="big"
            radius="round"
            color="red"
            onClick={handleDeleteFriend}
          >
            {t('ContactList.delete_friend')}
          </Button>
        </div>
      )}
    </div>
  );
};