import { BoxProps, Button, Group, notifier } from '@tidbcloud/uikit'
import { DotBadge } from '@tidbcloud/uikit/biz'
import { useDisclosure } from '@tidbcloud/uikit/hooks'
import { observer } from 'mobx-react'
import { useMemo } from 'react'

import { ReasonHoverHint, type HoverHintReason } from 'dbaas/components/HoverHint/ReasonHoverHint'
import { HeroComponent, isHeroQueryReady } from 'dbaas/components/Measurement'
import { getApiErrorMsgDom } from 'dbaas/components/Notification/ErrorMessag'
import { useAccessDeniedHintReason } from 'dbaas/contexts/access-control'
import { BlockHeader } from 'dbaas/screens/NextGen/premium/networking/shared/BlockHeader'
import { usePremiumPublicEndpointStatusByTidbId } from 'dbaas/screens/NextGen/premium/networking/shared/public-endpoint-status/usePremiumPublicEndpointStatus'
import { getTidbStateToPassivePhrase } from 'dbaas/screens/NextGen/shared/model/tidb-state'
import { useSharedTiDBContext } from 'dbaas/screens/NextGen/tidb-mgmt-container/shared/tidb-context'
import {
  usePublicConnectionSettingServiceGetPublicConnectionSetting,
  usePublicConnectionSettingServiceUpdatePublicConnectionSetting
} from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2'
import useStores from 'dbaas/stores/useStores'
import { MixpanelEvents } from 'dbaas/utils/tracking'

import { PremiumDisablePublicEndpointModal } from './DisablePublicEndpointModal'

export const PremiumTogglePublicEndpoint = observer((boxProps: BoxProps) => {
  const {
    store: {
      lastVisitLocation: { orgId, projectId }
    }
  } = useStores()
  const tidb = useSharedTiDBContext()
  const tidbId = tidb.tidbId!
  const passivePhrase = getTidbStateToPassivePhrase(tidb?.state)
  const { data, isFetched, isError, refetch } = usePublicConnectionSettingServiceGetPublicConnectionSetting(tidbId, {
    orgId,
    projectId
  })

  const settingEnabled = !!data?.enabled
  const { status } = usePremiumPublicEndpointStatusByTidbId({
    tidbId,
    settingEnabled,
    active: true
  })

  const updator = usePublicConnectionSettingServiceUpdatePublicConnectionSetting({
    mutation: {
      onSuccess: () => {
        notifier.info('Public endpoint is enabling. Please wait a few minutes.')
        refetch()
      },
      onError: (error) => {
        const errorMsgDom = getApiErrorMsgDom(error)

        notifier.error(errorMsgDom)
      }
    }
  })
  const handleEnable = () => {
    return updator.mutateAsync({
      tidbId,
      data: {
        enabled: true
      },
      params: {
        orgId,
        projectId
      }
    })
  }
  const [disableModalOpened, disableModalHandlers] = useDisclosure()
  const { reason: accessDeniedReason } = useAccessDeniedHintReason({ id: 'TidbxNetworkingUpdate' })
  const notReadyReason = useMemo<HoverHintReason>(
    () => ({
      id: 'notReady',
      when: !tidb?.computed.ready,
      content: `This feature is unavailable while the instance is ${passivePhrase}.`
    }),
    [passivePhrase, tidb?.computed.ready]
  )

  return (
    <>
      <HeroComponent ready={isHeroQueryReady({ isFetched, isError })} />
      <BlockHeader
        heading={
          <Group gap={8}>
            Public Endpoint
            {data && status === 'enabled' && (
              <DotBadge color="green" bg="green.1" aria-label="Public Endpoint Enabled">
                Enabled
              </DotBadge>
            )}
            {data && status === 'enabling' && (
              <DotBadge color="peacock" bg="peacock.1" aria-label="Public Endpoint Enabling">
                Enabling
              </DotBadge>
            )}
            {data && status === 'disabled' && (
              <DotBadge color="carbon" bg="carbon.2" aria-label="Public Endpoint Disabled">
                Disabled
              </DotBadge>
            )}
          </Group>
        }
        desc="The public endpoint is a publicly resolvable DNS address. Enabling this allows the instance to be accessible through the internet."
        rightSection={
          <ReasonHoverHint reasons={[accessDeniedReason, notReadyReason]}>
            {({ matched }) =>
              data?.enabled ? (
                <Button
                  variant="default"
                  size="sm"
                  disabled={matched}
                  onClick={disableModalHandlers.open}
                  data-mp-event={MixpanelEvents.PremiumPublicConnect.Disable.ButtonClicked}
                >
                  Disable
                </Button>
              ) : (
                <Button
                  variant="default"
                  size="sm"
                  disabled={matched}
                  loading={updator.isLoading}
                  onClick={handleEnable}
                  data-mp-event={MixpanelEvents.PremiumPublicConnect.Enable.ButtonClicked}
                >
                  Enable
                </Button>
              )
            }
          </ReasonHoverHint>
        }
        {...boxProps}
      />
      <PremiumDisablePublicEndpointModal
        tidbId={tidbId}
        opened={disableModalOpened}
        onClose={disableModalHandlers.close}
        onFinish={refetch}
      />
    </>
  )
})