import { Alert, Button, Card, Group, Loader, Typography } from '@tidbcloud/uikit'
import { DotBadge } from '@tidbcloud/uikit/biz'
import { useDisclosure } from '@tidbcloud/uikit/hooks'
import { IconAlertTriangle, IconInfoCircle } from '@tidbcloud/uikit/icons'

import { useMeta } from 'dbaas/services/account'
import auth from 'dbaas/services/auth'

import { BlockHeader } from '../../components'

import { TwoFADisabling, TwoFADisablingForSSO } from './Disabling'
import { TwoFAEnabling } from './Enabling'

export const TwoFactorAuthentication = () => {
  const connectionType = auth.getConnectionType()
  const mfaAccessible = connectionType === 'EMAIL'
  const mfaQuery = useMeta({
    query: {
      select: (data) => data?.use_mfa,
      refetchOnWindowFocus: false
    }
  })
  const enabled = !!mfaQuery.data
  const [disablingOpened, disablingHandlers] = useDisclosure()
  const onDisableConfirm = async () => {
    await mfaQuery.refetch()
    disablingHandlers.close()
  }
  const [enablingOpened, enablingHandlers] = useDisclosure()
  const onEnableConfirm = async () => {
    await mfaQuery.refetch()
    enablingHandlers.close()
  }

  return (
    <>
      <Card p="xl">
        <BlockHeader
          title={
            <Group gap="md">
              <Typography variant="title-lg">Multi-Factor Authentication</Typography>
              {mfaQuery.isLoading ? (
                <Loader size="xs" />
              ) : (
                <DotBadge color={enabled ? 'green' : 'gray'}>{enabled ? 'Enabled' : 'Disabled'}</DotBadge>
              )}
            </Group>
          }
          description="Multi-factor authentication adds additional security by requiring an Authenticator app to generate a one-time password to log in."
          rightSection={
            enabled ? (
              <Button
                variant="default"
                disabled={mfaQuery.isLoading}
                onClick={disablingHandlers.open}
                size="sm"
                data-mp-event="Multi-factor Authentication Disable Button Clicked"
              >
                Disable
              </Button>
            ) : mfaAccessible ? (
              <Button
                variant="default"
                disabled={mfaQuery.isLoading}
                onClick={enablingHandlers.open}
                size="sm"
                data-mp-event="Multi-factor Authentication Enable Button Clicked"
              >
                Enable
              </Button>
            ) : null
          }
        />
        {enabled && !mfaAccessible && (
          <Alert icon={<IconAlertTriangle />} px={12} py={10} color="yellow" mt="xl">
            You login based on SSO, so please switch the MFA configuration in SSO Management Platform as soon as
            possible and disable TIDB Cloud MFA here.{' '}
            <a
              href="https://docs.pingcap.com/tidbcloud/tidb-cloud-password-authentication/#enable-or-disable-mfa-optional"
              target="_blank"
              rel="noreferrer"
            >
              Learn more
            </a>
          </Alert>
        )}
        {!enabled && mfaAccessible && (
          <Alert icon={<IconInfoCircle />} px={12} py={10} mt="xl">
            You may use any Authenticator app from the iOS or Android App Store to generate the password.
          </Alert>
        )}
        {!enabled && !mfaAccessible && (
          <Alert icon={<IconAlertTriangle />} px={12} py={10} color="yellow" mt="xl">
            You are logging in to TiDB Cloud through SSO authentication. Please visit provider to set up MFA for your
            account.
          </Alert>
        )}
      </Card>
      {mfaAccessible ? (
        <TwoFADisabling
          opened={disablingOpened}
          onClose={disablingHandlers.close}
          onConfirm={onDisableConfirm}
          updating={mfaQuery.isRefetching}
        />
      ) : (
        <TwoFADisablingForSSO
          opened={disablingOpened}
          onClose={disablingHandlers.close}
          onConfirm={onDisableConfirm}
          updating={mfaQuery.isRefetching}
        />
      )}

      <TwoFAEnabling
        opened={enablingOpened}
        onClose={enablingHandlers.close}
        onConfirm={onEnableConfirm}
        updating={mfaQuery.isRefetching}
      />
    </>
  )
}