import IconFont from '@/components/IconFont';
import { apiAdminDisable2FA } from '@/services/master/AuthController';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Modal, Tooltip } from 'antd';
import { MessageInstance } from 'antd/es/message/interface';
import { useState } from 'react';

interface Disable2FAProps {
  user: MasterModel.UserResponse;
  message: MessageInstance;
  onSuccess?: (isSuccess: boolean) => void;
}

const Disable2FA = ({ user, message, onSuccess }: Disable2FAProps) => {
  const intl = useIntl();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  // Only show if user has 2FA enabled
  if (!user.enable_2fa) {
    return null;
  }

  const handleConfirmDisable = async () => {
    if (!user.id) return;

    setIsLoading(true);
    try {
      await apiAdminDisable2FA(user.id);
      message.success(
        intl.formatMessage({
          id: 'master.users.disable2fa.success',
          defaultMessage: '2FA has been disabled successfully',
        }),
      );
      setIsModalOpen(false);
      onSuccess?.(true);
    } catch (error) {
      console.error('Disable 2FA error:', error);
      message.error(
        intl.formatMessage({
          id: 'master.users.disable2fa.error',
          defaultMessage: 'Failed to disable 2FA',
        }),
      );
      onSuccess?.(false);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <>
      <Tooltip
        title={intl.formatMessage({
          id: 'master.users.disable2fa.title',
          defaultMessage: 'Disable 2FA',
        })}
      >
        <Button
          shape="default"
          size="small"
          danger
          icon={<IconFont type="icon-security" />}
          onClick={() => setIsModalOpen(true)}
          style={{ borderColor: '#ff4d4f', color: '#ff4d4f' }}
        />
      </Tooltip>

      <Modal
        title={
          <span style={{ color: '#ff4d4f' }}>
            <ExclamationCircleOutlined style={{ marginRight: 8 }} />
            {intl.formatMessage({
              id: 'master.users.disable2fa.modal.title',
              defaultMessage: 'Disable Two-Factor Authentication',
            })}
          </span>
        }
        open={isModalOpen}
        onCancel={() => setIsModalOpen(false)}
        footer={[
          <Button key="cancel" onClick={() => setIsModalOpen(false)}>
            {intl.formatMessage({
              id: 'common.cancel',
              defaultMessage: 'Cancel',
            })}
          </Button>,
          <Button
            key="confirm"
            type="primary"
            danger
            loading={isLoading}
            onClick={handleConfirmDisable}
          >
            {intl.formatMessage({
              id: 'common.confirm',
              defaultMessage: 'Confirm',
            })}
          </Button>,
        ]}
      >
        <div style={{ marginBottom: 16 }}>
          <p>
            {intl.formatMessage({
              id: 'master.users.disable2fa.modal.warning',
              defaultMessage:
                'Are you sure you want to disable 2FA for this user?',
            })}
          </p>
          <p style={{ fontWeight: 'bold' }}>{user.email}</p>
        </div>
        <div
          style={{
            backgroundColor: '#fff2f0',
            border: '1px solid #ffccc7',
            borderRadius: 6,
            padding: 12,
          }}
        >
          <p style={{ color: '#ff4d4f', margin: 0 }}>
            <ExclamationCircleOutlined style={{ marginRight: 8 }} />
            {intl.formatMessage({
              id: 'master.users.disable2fa.modal.caution',
              defaultMessage:
                'Warning: Disabling 2FA will reduce account security. The user will need to re-enable 2FA from their profile settings.',
            })}
          </p>
        </div>
      </Modal>
    </>
  );
};

export default Disable2FA;