import { Divider, Flex, Menu, Stack, Typography } from '@tidbcloud/uikit'
import { DotBadge } from '@tidbcloud/uikit/biz'
import { useDisclosure } from '@tidbcloud/uikit/hooks'
import { IconChevronRight, IconLogOut03, IconUserCircle } from '@tidbcloud/uikit/icons'
import { observer } from 'mobx-react'
import { Link } from 'react-router-dom'

import { AccessGuard } from 'dbaas/contexts/access-control'
import { getEnterpriseSwitchURL, ORG_TYPE } from 'dbaas/features/Organization'
import { AccountSettings } from 'dbaas/screens/Account/container'
import { CentralAuth0AuditLogReqOperation, updateAuth0AuditLog } from 'dbaas/services'
import { useMeta } from 'dbaas/services/account'
import auth from 'dbaas/services/auth'
import useStores from 'dbaas/stores/useStores'
import { FeatureType } from 'dbaas/utils/feature'

import { NavButton } from '../../components'
import { ColorSchemeToggle } from '../ColorSchemeToggle'

interface UserNavMenuProps {
  onMenuChange?: () => void
}

export const UserNavMenu = observer(({ onMenuChange }: UserNavMenuProps) => {
  const {
    store: {
      userProfile: { first_name: firstName, last_name: lastName, email },
      tenantData: { id: orgId, company_name: company, org_type: orgType }
    },
    actions: { isFeatureEnabled }
  } = useStores()

  const { data: accountMeta } = useMeta({
    query: {
      refetchOnWindowFocus: false,
      refetchInterval: false
    }
  })

  const [opened, { open, close }] = useDisclosure(false)

  const isNameExisted = !!firstName
  const displayName = isNameExisted ? `${firstName} ${lastName}` : email

  const logout = async () => {
    try {
      await updateAuth0AuditLog(
        {
          operation: CentralAuth0AuditLogReqOperation.SIGNOUT,
          is_success: true,
          org_id: orgId,
          failure_info: ''
        },
        {
          isHandleErr: true,
          // in case waiting too long
          timeout: 4 * 1000
        }
      )
    } finally {
      if (orgType === ORG_TYPE.ENTERPRISE) {
        auth.logout(getEnterpriseSwitchURL(company || '', orgId), false)
      } else {
        auth.logout()
      }
    }
  }

  return (
    <>
      <Menu
        position="right-end"
        offset={4}
        withArrow={false}
        width={248}
        styles={(theme) => ({ dropdown: { borderColor: theme.colors.carbon[4] }, item: { paddingLeft: 8 } })}
      >
        <Menu.Target>
          <NavButton
            aria-label="User Menu"
            icon={<IconUserCircle size={16} />}
            rightSection={<IconChevronRight size={16} />}
            data-mp-event="User nav clicked"
            data-mp-source="Global Side Navbar"
            data-testid="user-nav-button"
          >
            {displayName}
          </NavButton>
        </Menu.Target>
        <Menu.Dropdown p={8} miw={218} maw={338}>
          {accountMeta?.use_mfa && (
            <DotBadge color="green" radius={8} leftSection={null}>
              MFA is enabled for your account
            </DotBadge>
          )}
          <Stack align="left" gap={8} p={8}>
            <Typography variant="headline-sm" fz={16} sx={{ wordBreak: 'break-all' }}>
              {displayName}
            </Typography>
            {isNameExisted && (
              <Typography variant="body-lg" c="carbon.7" sx={{ wordBreak: 'break-all' }}>
                {email}
              </Typography>
            )}
          </Stack>
          <Menu.Item
            onClick={() => {
              open()
              onMenuChange?.()
            }}
            data-mp-event="Accounts Link Clicked"
            data-mp-source="Global Side Navbar"
            mt={8}
          >
            Account Settings
          </Menu.Item>
          <Divider color="carbon.3" my={8} />
          <Menu.Item
            component={Link}
            to="/org-settings"
            onClick={onMenuChange}
            data-mp-event="Organization Settings Link Clicked"
            data-mp-source="Global Side Navbar"
          >
            Organization Settings
          </Menu.Item>
          <AccessGuard id="OrgBillingGate">
            <Menu.Item
              component={Link}
              to="/org-settings/billing"
              onClick={onMenuChange}
              data-mp-event="Billing Link Clicked"
              data-mp-source="Global Side Navbar"
            >
              Billing
            </Menu.Item>
          </AccessGuard>
          {isFeatureEnabled(FeatureType.Authorization) && (
            <AccessGuard id="OrgAuthorizationGate">
              <Menu.Item
                component={Link}
                to="/authorization"
                onClick={onMenuChange}
                data-mp-event="Authorization Link Clicked"
                data-mp-source="Global Side Navbar"
              >
                Authorization
              </Menu.Item>
            </AccessGuard>
          )}
          <Divider color="carbon.3" mt={8} mb={4} />
          <Menu.Item sx={{ ':hover': { backgroundColor: 'transparent' } }}>
            <Flex align="center" justify="space-between">
              Theme <ColorSchemeToggle />
            </Flex>
          </Menu.Item>
          <Divider color="carbon.3" mt={4} mb={8} />
          <Menu.Item
            rightSection={<IconLogOut03 size={16} />}
            onClick={logout}
            data-mp-event="Logout Button Clicked"
            data-mp-source="Global Side Navbar"
          >
            Logout
          </Menu.Item>
        </Menu.Dropdown>
      </Menu>
      <AccountSettings opened={opened} onClose={close} />
    </>
  )
})