import type React from 'react';
import { useEffect, useState } from 'react';
import {
  Dialog,
  IconViewList,
  Toast,
  useUIKit,
} from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import { Avatar, useLoginState } from 'tuikit-atomicx-react/chat';
import classes from './ProfileEditButton.module.scss';

export interface ProfileEditButtonProps {
  label?: string;
  iconSize?: number;
  disabled?: boolean;
  className?: string;
  style?: React.CSSProperties;
  showLabel?: boolean;
}

const avatarUrlPattern = /^https?:\/\/\S+$/i;

function ProfileEditButton(props: ProfileEditButtonProps): React.ReactElement {
  const {
    label,
    iconSize = 20,
    disabled = false,
    className,
    style,
    showLabel = false,
  } = props;

  const { t } = useUIKit();
  const { loginUserInfo, setSelfInfo } = useLoginState();
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [isSaving, setIsSaving] = useState(false);
  const [userName, setUserName] = useState('');
  const [avatarUrl, setAvatarUrl] = useState('');

  useEffect(() => {
    if (!isDialogOpen) {
      return;
    }

    setUserName(loginUserInfo?.userName || '');
    setAvatarUrl(loginUserInfo?.avatarUrl || '');
  }, [isDialogOpen, loginUserInfo?.avatarUrl, loginUserInfo?.userName]);

  const openDialog = () => {
    setUserName(loginUserInfo?.userName || '');
    setAvatarUrl(loginUserInfo?.avatarUrl || '');
    setIsDialogOpen(true);
  };

  const closeDialog = () => {
    if (isSaving) {
      return;
    }
    setIsDialogOpen(false);
  };

  const handleSaveProfile = async () => {
    const trimmedUserName = userName.trim();
    const trimmedAvatarUrl = avatarUrl.trim();

    if (!trimmedUserName) {
      Toast.warning({
        message: t('TUIProfile.Nickname required'),
      });
      return;
    }

    if (trimmedAvatarUrl && !avatarUrlPattern.test(trimmedAvatarUrl)) {
      Toast.warning({
        message: t('TUIProfile.Avatar URL invalid'),
      });
      return;
    }

    setIsSaving(true);
    try {
      await setSelfInfo({
        userName: trimmedUserName,
        avatarUrl: trimmedAvatarUrl,
      });
      Toast.success({
        message: t('TUIProfile.Profile updated successfully'),
      });
      setIsDialogOpen(false);
    } catch (error) {
      Toast.error({
        message: `${t('TUIProfile.Profile update failed')}${error instanceof Error ? `: ${error.message}` : ''}`,
      });
    } finally {
      setIsSaving(false);
    }
  };

  return (
    <>
      <button
        type="button"
        className={cs(classes['profile-edit-button'], className)}
        style={style}
        onClick={openDialog}
        disabled={disabled}
        aria-label={label || t('TUIProfile.Edit profile')}
      >
        <IconViewList size={`${iconSize}px`} />
        {showLabel && (
          <span className={classes['profile-edit-button__label']}>
            {label || t('TUIProfile.Edit')}
          </span>
        )}
      </button>

      <Dialog
        visible={isDialogOpen}
        title={t('TUIProfile.Edit profile')}
        confirmText={t('TUIProfile.Save')}
        cancelText={t('TUIProfile.Cancel')}
        confirmDisabled={isSaving}
        cancelDisabled={isSaving}
        onClose={closeDialog}
        onCancel={closeDialog}
        onConfirm={handleSaveProfile}
        style={{ width: '420px', maxWidth: 'calc(100vw - 32px)' }}
      >
        <div className={classes['profile-dialog']}>
          <div className={classes['profile-preview']}>
            <Avatar
              className={classes['profile-preview__avatar']}
              src={avatarUrl.trim() || loginUserInfo?.avatarUrl || ''}
            />
            <div className={classes['profile-preview__meta']}>
              <div className={classes['profile-preview__name']}>
                {userName.trim() || loginUserInfo?.userName || loginUserInfo?.userId}
              </div>
              <div className={classes['profile-preview__id']}>{loginUserInfo?.userId}</div>
            </div>
          </div>

          <label className={classes['profile-field']}>
            <span className={classes['profile-field__label']}>{t('TUIProfile.Nickname')}</span>
            <input
              className={classes['profile-field__input']}
              value={userName}
              onChange={event => setUserName(event.target.value)}
              placeholder={t('TUIProfile.Enter nickname')}
              maxLength={64}
              disabled={isSaving}
            />
          </label>

          <label className={classes['profile-field']}>
            <span className={classes['profile-field__label']}>{t('TUIProfile.Avatar URL')}</span>
            <input
              className={classes['profile-field__input']}
              value={avatarUrl}
              onChange={event => setAvatarUrl(event.target.value)}
              placeholder={t('TUIProfile.Enter avatar URL')}
              disabled={isSaving}
            />
          </label>

          <div className={classes['profile-field__hint']}>
            {t('TUIProfile.Avatar URL hint')}
          </div>
        </div>
      </Dialog>
    </>
  );
}

export { ProfileEditButton };