import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
import { Button, Dialog, Toast, useUIKit } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import type { GroupMember } from 'tuikit-atomicx-react/chat';
import { useUIContext, useGroupStore, useLoginStore } from 'tuikit-atomicx-react/chat';
import { View } from 'tuikit-atomicx-react/chat';
import { GroupPermission, hasGroupPermission } from '../../../../utils/chatGroupPermission';
import { UserPicker } from 'tuikit-atomicx-react/chat';
import { Divider } from '../../Divider';
import classes from './GroupActions.module.scss';
import type { IUserPickerRef } from 'tuikit-atomicx-react/chat';

interface ActionsProps {
  className?: string;
}

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

  const { activeConversationID, memberList, clearConversationMessages } = useUIContext();
  const { joinedGroupList, dismissGroup, quitGroup, changeOwner } = useGroupStore();
  const { loginUserInfo } = useLoginStore();

  const currentGroupID = activeConversationID?.startsWith('GROUP') ? activeConversationID.slice(5) : undefined;
  const groupInfo = useMemo(() => joinedGroupList.find(g => g.groupID === currentGroupID), [joinedGroupList, currentGroupID]);
  const currentUserRole = groupInfo?.selfRole;
  const groupType = groupInfo?.groupType;
  const currentUserID = loginUserInfo?.userID;

  const [isShowTransferDialog, setIsShowTransferDialog] = useState(false);
  const [isShowClearHistoryDialog, setIsShowClearHistoryDialog] = useState(false);
  const [isShowDismissDialog, setIsShowDismissDialog] = useState(false);
  const [isShowQuitDialog, setIsShowQuitDialog] = useState(false);
  const [loading, setLoading] = useState(false);

  const userPickerRef = useRef<IUserPickerRef>(null);

  const canDismissGroup = hasGroupPermission(GroupPermission.DISMISS_GROUP, currentUserRole, groupType);
  const canQuitGroup = hasGroupPermission(GroupPermission.QUIT_GROUP, currentUserRole, groupType);
  const canChangeGroupOwner = hasGroupPermission(GroupPermission.TRANSFER_OWNERSHIP, currentUserRole, groupType);

  // Handle clear history
  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]);

  const handleTransferConfirm = useCallback(async () => {
    const selectedItems = userPickerRef.current?.getSelectedItems();
    if (!selectedItems || selectedItems.length === 0) {
      Toast.error({
        message: t('ChatSetting.select_new_owner_error'),
      });
      return;
    }

    if (selectedItems.length > 1) {
      Toast.error({
        message: t('ChatSetting.only_one_owner_error'),
      });
      return;
    }

    if (!currentGroupID) return;

    try {
      setLoading(true);
      await changeOwner(currentGroupID, selectedItems[0].key);
      Toast.success({
        message: t('ChatSetting.transfer_owner_success'),
      });
      setIsShowTransferDialog(false);
    } catch {
      Toast.error({
        message: t('ChatSetting.transfer_owner_failed'),
      });
    } finally {
      setLoading(false);
    }
  }, [changeOwner, currentGroupID, t]);

  const transferDataSource = useMemo(() => {
    if (!memberList || memberList.length === 0) {
      return [];
    }

    return memberList.map((member: GroupMember) => {
      let label = member.nickname || member.userID;
      if (label.length > 20) {
        label = `${label.slice(0, 20)}...`;
      }
      label = `${label} (${t(`ChatSetting.group_member_role_${(member.role ?? '').toLowerCase()}`)})`;

      if (member.userID === currentUserID) {
        label = `${label} (${t('ChatSetting.me')})`;
      }

      return {
        key: member.userID,
        label,
        avatarUrl: member.avatarURL ?? '',
      };
    });
  }, [memberList, currentUserID, t]);

  return (
    <View
      ref={ref}
      className={cs(classes['group-actions'], className)}
    >
      {/* Change group owner button - only for group owner (blue text) */}
      {canChangeGroupOwner && (
        <Button
          className={classes['group-actions__button']}
          type="text"
          onClick={() => setIsShowTransferDialog(true)}
          disabled={loading}
        >
          {t('ChatSetting.transfer_group_owner')}
        </Button>
      )}

      {canChangeGroupOwner && <Divider variant="line" />}

      {/* Clear history button */}
      <Button
        className={classes['group-actions__button']}
        color="red"
        type="text"
        onClick={() => setIsShowClearHistoryDialog(true)}
      >
        {t('ChatSetting.clear_history_message')}
      </Button>

      {(canQuitGroup || canDismissGroup) && <Divider variant="line" />}

      {/* Quit group button */}
      {canQuitGroup && (
        <Button
          className={classes['group-actions__button']}
          color="red"
          type="text"
          onClick={() => setIsShowQuitDialog(true)}
        >
          {t('ChatSetting.quit_group')}
        </Button>
      )}

      {canQuitGroup && canDismissGroup && <Divider variant="line" />}

      {/* Dismiss group button - only for group owner */}
      {canDismissGroup && (
        <Button
          className={classes['group-actions__button']}
          color="red"
          type="text"
          onClick={() => setIsShowDismissDialog(true)}
        >
          {t('ChatSetting.dismiss_group')}
        </Button>
      )}

      {/* 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>

      <Dialog
        visible={isShowTransferDialog}
        title={t('ChatSetting.transfer_group_owner')}
        onClose={() => setIsShowTransferDialog(false)}
        onCancel={() => setIsShowTransferDialog(false)}
        onConfirm={handleTransferConfirm}
        style={{
          height: '80vh',
        }}
      >
        <UserPicker
          ref={userPickerRef}
          displayMode="list"
          dataSource={transferDataSource}
          lockedItems={[{ key: currentUserID! }]}
          maxCount={1}
          onMaxCountExceed={() => {
            Toast.error({
              message: t('ChatSetting.only_one_owner_error'),
            });
          }}
        />
      </Dialog>

      <Dialog
        visible={isShowDismissDialog}
        title={t('ChatSetting.dismiss_group')}
        onClose={() => setIsShowDismissDialog(false)}
        onCancel={() => setIsShowDismissDialog(false)}
        onConfirm={async () => {
          if (!currentGroupID) return;
          try {
            await dismissGroup(currentGroupID);
            setIsShowDismissDialog(false);
          } catch {
            Toast.error({ message: t('ChatSetting.dismiss_group_failed') });
          }
        }}
      />

      <Dialog
        visible={isShowQuitDialog}
        title={t('ChatSetting.quit_group')}
        onClose={() => setIsShowQuitDialog(false)}
        onCancel={() => setIsShowQuitDialog(false)}
        onConfirm={async () => {
          if (!currentGroupID) return;
          try {
            await quitGroup(currentGroupID);
            setIsShowQuitDialog(false);
          } catch {
            Toast.error({ message: t('ChatSetting.quit_group_failed') });
          }
        }}
      >
        <View>{t('ChatSetting.confirm_quit_group')}</View>
      </Dialog>
    </View>
  );
});

GroupActions.displayName = 'Actions';

export default GroupActions;