import { forwardRef, useCallback, useState, useMemo, useEffect } from 'react';
import { ReceiveMessageOption } from 'tuikit-atomicx-react/chat';
import { useUIContext, useContactStore } from 'tuikit-atomicx-react/chat';
import { Button, Dialog, IconCopy, Toast, useUIKit } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import { View } from 'tuikit-atomicx-react/chat';
import { copyTextToClipboard } from '../../../utils';
import { Divider } from '../Divider';
import { SettingItem } from '../SettingItem';
import classes from './C2CChatSetting.module.scss';

interface C2CChatSettingProps {
  className?: string;
}

const C2CChatSetting = forwardRef<HTMLDivElement, C2CChatSettingProps>((props, ref) => {
  const { className } = props;
  const { t } = useUIKit();

  // Channel: active conversation data + methods
  const {
    activeConversationID,
    activeConversation,
    pinConversation,
    setReceiveMessageOpt,
    clearConversationMessages,
  } = useUIContext();

  // ContactStore: friend info for the C2C peer
  const { friendList, setFriendRemark, loadFriends } = useContactStore();

  useEffect(() => {
    if (friendList.length === 0) {
      loadFriends();
    }
  }, []);

  // Derive C2C peer info
  const currentUserID = activeConversationID?.startsWith('C2C')
    ? activeConversationID.slice(3)
    : undefined;

  const contactInfo = useMemo(
    () => friendList.find(f => f.userID === currentUserID),
    [friendList, currentUserID],
  );

  const nick = contactInfo?.nickname;
  const signature = contactInfo?.aboutMe;
  const remark = contactInfo?.friendRemark;
  const isContact = contactInfo?.isFriend ?? false;
  const isMuted = activeConversation
    ? activeConversation.receiveOption !== ReceiveMessageOption.Receive
    : undefined;
  const isPinned = activeConversation?.isPinned;

  const [isShowClearHistoryDialog, setIsShowClearHistoryDialog] = useState(false);

  const handlePinnedChange = useCallback((value: boolean) => {
    if (!activeConversationID) {
      return;
    }
    pinConversation(activeConversationID, value);
  }, [activeConversationID, pinConversation]);

  const handleMutedChange = useCallback((value: boolean) => {
    if (!activeConversationID) {
      return;
    }
    setReceiveMessageOpt(
      activeConversationID,
      value ? ReceiveMessageOption.NotNotify : ReceiveMessageOption.Receive,
    );
  }, [activeConversationID, setReceiveMessageOpt]);

  const handleRemarkConfirm = useCallback((value: string) => {
    if (!currentUserID) {
      return;
    }
    setFriendRemark(currentUserID, value).then(() => {
      Toast.success({
        message: t('ChatSetting.remark_update_success'),
      });
    }).catch((err: any) => {
      Toast.error({
        message: err.code === 2700 ? t('ChatSetting.you_are_not_friend') : t('ChatSetting.remark_update_failed'),
      });
    });
  }, [currentUserID, setFriendRemark, t]);

  const handleCopyUserID = useCallback(() => {
    if (currentUserID) {
      copyTextToClipboard(currentUserID).then(() => {
        Toast.success({
          message: t('ChatSetting.copied'),
        });
      });
    }
  }, [currentUserID, t]);

  const handleClearHistory = useCallback(async () => {
    if (!activeConversationID) {
      return;
    }
    try {
      await clearConversationMessages(activeConversationID);
      setIsShowClearHistoryDialog(false);
      Toast.success({
        message: t('ChatSetting.clear_history_success'),
      });
    } catch {
      Toast.error({
        message: t('ChatSetting.clear_history_failed'),
      });
    }
  }, [activeConversationID, clearConversationMessages, t]);

  if (!currentUserID) {
    return null;
  }

  return (
    <View
      ref={ref}
      className={cs(classes['c2c-chat-setting'], className)}
    >
      <Divider variant="line" fullWidth={true} />

      {/* User Info Section */}
      <View className={classes['c2c-chat-setting__info-section']}>
        {/* User ID */}
        <View className={classes['c2c-chat-setting__item']}>
          <View className={classes['c2c-chat-setting__label']}>{t('ChatSetting.user_id')}</View>
          <View className={classes['c2c-chat-setting__content']}>
            <View className={classes['c2c-chat-setting__value']}>
              {currentUserID}
            </View>
            <IconCopy
              className={cs(classes['c2c-chat-setting__copy-btn'], 'unique-icon-btn')}
              size="24px"
              onClick={handleCopyUserID}
            />
          </View>
        </View>

        <Divider variant="line" />

        {/* Nick Name */}
        <SettingItem
          type="display"
          isWrap={true}
          label={t('ChatSetting.nickname')}
          value={nick || ''}
          placeholder={t('ChatSetting.nickname_placeholder')}
        />

        {/* Signature */}
        {signature && signature.trim() && (
          <>
            <Divider variant="line" />
            <SettingItem
              type="display"
              isWrap={true}
              label={t('ChatSetting.signature')}
              value={signature}
            />
          </>
        )}
      </View>

      {/* Remark Section */}
      {isContact && (
        <>
          <Divider variant="line" />
          <View className={classes['c2c-chat-setting__remark-section']}>
            <SettingItem
              type="input"
              label={t('ChatSetting.remark')}
              value={remark || ''}
              placeholder={t('ChatSetting.remark_placeholder')}
              editable={true}
              onConfirm={handleRemarkConfirm}
            />
          </View>
        </>
      )}

      <Divider variant="section" />

      {/* Settings Section */}
      <View className={classes['c2c-chat-setting__settings-section']}>
        {/* Pin Setting */}
        {isPinned !== undefined && (
          <SettingItem
            type="switch"
            label={t('ChatSetting.pin_conversation')}
            value={isPinned}
            onChange={handlePinnedChange}
          />
        )}

        <Divider variant="line" />

        {/* Mute Setting */}
        {isMuted !== undefined && (
          <SettingItem
            type="switch"
            label={t('ChatSetting.mute_conversation')}
            value={isMuted}
            onChange={handleMutedChange}
          />
        )}

        <Divider variant="line" />

        {/* Clear History */}
        <View className={classes['c2c-chat-setting__danger-actions']}>
          <Button
            className={classes['c2c-chat-setting__danger-button']}
            color="red"
            type="text"
            onClick={() => setIsShowClearHistoryDialog(true)}
          >
            {t('ChatSetting.clear_history_message')}
          </Button>
        </View>
      </View>

      {/* Clear History Dialog */}
      <Dialog
        visible={isShowClearHistoryDialog}
        title={t('ChatSetting.clear_history_message')}
        onClose={() => setIsShowClearHistoryDialog(false)}
        onCancel={() => setIsShowClearHistoryDialog(false)}
        onConfirm={handleClearHistory}
      >
        <View>{t('ChatSetting.confirm_clear_history')}</View>
      </Dialog>
    </View>
  );
});

C2CChatSetting.displayName = 'C2CChatSetting';

export { C2CChatSetting };
export type { C2CChatSettingProps };