import { Alert, Button, Skeleton, Stack, Typography, Box } from '@tidbcloud/uikit'
import { Link } from 'react-router-dom'

import { AccessGuard } from 'dbaas/contexts/access-control'
import { MixpanelEvents } from 'dbaas/utils/tracking'

import { docLinks } from '../helpers'

const ANYWHERE_CIDR = '0.0.0.0/0'

interface PublicInfoBlockProps {
  tidbId: string
  cloudProvider: string
  loading?: boolean
  enabled?: boolean
  endpointReady?: boolean
  ipList: string[] | undefined
  onCancel: () => void
  onInit: () => void
}

export const PublicInfoBlock = ({
  tidbId,
  cloudProvider,
  loading,
  enabled,
  endpointReady,
  ipList,
  onCancel,
  onInit
}: PublicInfoBlockProps) => {
  const none = !ipList?.length
  const anywhere = !!ipList?.includes(ANYWHERE_CIDR)
  const showEnablingAlert = enabled && endpointReady === false

  if (loading) {
    return (
      <Stack gap={8} p="xl" pt={0}>
        <Skeleton height={20} radius="sm" />
        <Skeleton height={20} radius="sm" />
        <Skeleton height={20} radius="sm" />
      </Stack>
    )
  }

  if (!enabled) {
    return (
      <Box p="xl" pt={0}>
        <Alert color="yellow">
          For security reasons, the public connection is disabled. You can visit the{' '}
          <Link to={`/tidbs/${tidbId}/networking`} onClick={onCancel}>
            Networking
          </Link>{' '}
          page to enable it.
        </Alert>
      </Box>
    )
  }

  if (none) {
    return (
      <Stack p="xl" pt={0}>
        {showEnablingAlert && <Alert color="peacock">Public Endpoint is enabling. Please wait a few minutes.</Alert>}
        <Typography variant="body-lg">
          To ensure a secure connection, you need to configure an IP access list to filter internet traffic before your
          first connection to your instance. Learn more about the{' '}
          <a href={docLinks.public[cloudProvider]} target="_blank" rel="noreferrer">
            configuring an IP access list
          </a>
          .
        </Typography>
        <AccessGuard
          id="TidbxNetworkingUpdate"
          fallback={<Alert>Please ask your admin to configure an IP access list.</Alert>}
        >
          <Button
            variant="default"
            onClick={onInit}
            sx={{ alignSelf: 'flex-start' }}
            data-mp-event={MixpanelEvents.PremiumPublicIpAccess.Update.EnterClicked}
            data-mp-source="premium-connect-modal"
          >
            Configure IP Access List
          </Button>
        </AccessGuard>
      </Stack>
    )
  }

  return (
    <Stack p="xl" pt={0}>
      {showEnablingAlert && <Alert color="peacock">Public Endpoint is enabling. Please wait a few minutes.</Alert>}
      {anywhere && (
        <Alert color="yellow">
          You allow any IP address to access your instance now. It's not recommended as this would expose your instance
          to the internet completely. You can visit the{' '}
          <Link to={`/tidbs/${tidbId}/networking`} onClick={onCancel}>
            Networking
          </Link>{' '}
          page to configure the IP access list.
        </Alert>
      )}
      {!anywhere && (
        <>
          <Typography variant="body-lg">
            Only IP addresses in your IP access list can connect to your instance. You can visit the{' '}
            <Link to={`/tidbs/${tidbId}/networking`} onClick={onCancel}>
              Networking
            </Link>{' '}
            page to configure them.
          </Typography>
          <Typography variant="body-lg" lineClamp={1} c="carbon.7">
            IP addresses: {ipList?.join(', ')}
          </Typography>
        </>
      )}
    </Stack>
  )
}