import {
  apiDisable2FA,
  apiEnable2FA,
  apiVerify2FA,
} from '@/services/master/AuthController';
import { useIntl, useModel } from '@umijs/max';
import {
  Card,
  Input,
  message,
  Modal,
  QRCode,
  Space,
  Switch,
  Typography,
} from 'antd';
import { useState } from 'react';

const { Text, Title } = Typography;

const TwoFactorAuthentication = () => {
  const intl = useIntl();
  const { initialState, refresh } = useModel('@@initialState');
  const [modal, contextHolder] = Modal.useModal();

  const profile = initialState?.currentUserProfile;

  const [loading, setLoading] = useState(false);
  const [modalVisible, setModalVisible] = useState(false);
  const [qrData, setQrData] = useState<MasterModel.Enable2FAResponse | null>(
    null,
  );
  const [otpCode, setOtpCode] = useState('');
  const [verifying, setVerifying] = useState(false);

  const handleEnable2FA = async () => {
    setLoading(true);
    try {
      const response = await apiEnable2FA();
      if (response?.data) {
        setQrData(response.data);
        setModalVisible(true);
      }
    } catch (error) {
      message.error(
        intl.formatMessage({
          id: 'master.profile.2fa.enable.error',
          defaultMessage: 'Không thể bật 2FA. Vui lòng thử lại.',
        }),
      );
    } finally {
      setLoading(false);
    }
  };

  const handleVerifyOTP = async () => {
    if (!otpCode || otpCode.length !== 6) {
      message.warning(
        intl.formatMessage({
          id: 'master.profile.2fa.otp.invalid',
          defaultMessage: 'Vui lòng nhập mã OTP 6 số',
        }),
      );
      return;
    }

    setVerifying(true);
    try {
      const response = await apiVerify2FA({ otp: otpCode });
      if (response?.status === 200 || response?.status === 201) {
        message.success(
          intl.formatMessage({
            id: 'master.profile.2fa.enable.success',
            defaultMessage: 'Bật 2FA thành công!',
          }),
        );
        setModalVisible(false);
        setOtpCode('');
        setQrData(null);
        refresh();
      }
    } catch (error) {
      message.error(
        intl.formatMessage({
          id: 'master.profile.2fa.verify.error',
          defaultMessage: 'Mã OTP không đúng. Vui lòng thử lại.',
        }),
      );
    } finally {
      setVerifying(false);
    }
  };

  const handleDisable2FA = async () => {
    modal.confirm({
      title: intl.formatMessage({
        id: 'master.profile.2fa.disable.confirm.title',
        defaultMessage: 'Xác nhận tắt 2FA',
      }),
      content: intl.formatMessage({
        id: 'master.profile.2fa.disable.confirm.content',
        defaultMessage:
          'Bạn có chắc chắn muốn tắt xác thực 2 bước? Điều này sẽ giảm bảo mật cho tài khoản của bạn.',
      }),
      okText: intl.formatMessage({
        id: 'master.profile.2fa.disable.confirm.ok',
        defaultMessage: 'Tắt 2FA',
      }),
      cancelText: intl.formatMessage({
        id: 'master.profile.2fa.disable.confirm.cancel',
        defaultMessage: 'Hủy',
      }),
      okButtonProps: { danger: true },
      onOk: async () => {
        try {
          const response = await apiDisable2FA();
          if (response?.status === 200 || response?.status === 204) {
            message.success(
              intl.formatMessage({
                id: 'master.profile.2fa.disable.success',
                defaultMessage: 'Đã tắt 2FA thành công!',
              }),
            );
            refresh();
          }
        } catch (error) {
          message.error(
            intl.formatMessage({
              id: 'master.profile.2fa.disable.error',
              defaultMessage: 'Không thể tắt 2FA. Vui lòng thử lại.',
            }),
          );
        }
      },
    });
  };

  const handleToggle2FA = (checked: boolean) => {
    if (checked) {
      handleEnable2FA();
    } else {
      handleDisable2FA();
    }
  };

  const handleModalCancel = () => {
    setModalVisible(false);
    setOtpCode('');
    setQrData(null);
  };

  return (
    <>
      {contextHolder}
      <Card>
        <Title level={4}>
          {intl.formatMessage({
            id: 'master.profile.two-factor-authentication',
          })}
        </Title>
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            marginTop: 16,
          }}
        >
          <div>
            <Text strong>
              {intl.formatMessage({
                id: 'master.profile.2fa.status',
                defaultMessage: 'Trạng thái 2FA',
              })}
            </Text>
            <br />
            <Text type="secondary">
              {intl.formatMessage({
                id: 'master.profile.2fa.description',
                defaultMessage:
                  'Bật xác thực 2 bước để tăng cường bảo mật cho tài khoản của bạn',
              })}
            </Text>
          </div>
          <Switch
            checked={profile?.enable_2fa}
            onChange={handleToggle2FA}
            loading={loading}
            checkedChildren={intl.formatMessage({
              id: 'master.profile.2fa.enabled',
              defaultMessage: 'Bật',
            })}
            unCheckedChildren={intl.formatMessage({
              id: 'master.profile.2fa.disabled',
              defaultMessage: 'Tắt',
            })}
          />
        </div>
      </Card>

      <Modal
        title={intl.formatMessage({
          id: 'master.profile.2fa.setup.title',
          defaultMessage: 'Thiết lập xác thực 2 bước',
        })}
        open={modalVisible}
        onOk={handleVerifyOTP}
        onCancel={handleModalCancel}
        confirmLoading={verifying}
        okText={intl.formatMessage({
          id: 'master.profile.2fa.verify',
          defaultMessage: 'Xác nhận',
        })}
        cancelText={intl.formatMessage({
          id: 'master.profile.2fa.cancel',
          defaultMessage: 'Hủy',
        })}
      >
        <Space direction="vertical" align="center" style={{ width: '100%' }}>
          <Text>
            {intl.formatMessage({
              id: 'master.profile.2fa.scan.instruction',
              defaultMessage:
                'Quét mã QR bằng ứng dụng xác thực (Google Authenticator, Authy, ...)',
            })}
          </Text>

          {qrData?.qr_code_base64 ? (
            <img
              src={`data:image/png;base64,${qrData.qr_code_base64}`}
              alt="QR Code"
              style={{ width: 200, height: 200 }}
            />
          ) : qrData?.otp_auth_url ? (
            <QRCode value={qrData.otp_auth_url} size={200} />
          ) : null}

          <Text type="secondary" style={{ marginTop: 16 }}>
            {intl.formatMessage({
              id: 'master.profile.2fa.otp.instruction',
              defaultMessage: 'Nhập mã 6 số từ ứng dụng xác thực:',
            })}
          </Text>

          <Input.OTP
            length={6}
            value={otpCode}
            onChange={setOtpCode}
            style={{ marginTop: 8 }}
          />
        </Space>
      </Modal>
    </>
  );
};

export default TwoFactorAuthentication;
