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

import { useRequestSupport } from 'dbaas/screens/HelpCenter/RequestSupport/helper'
import { Nextgenv1beta2VpcPeering } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2/interface'

interface VpcPeerInfoBlockProps {
  tidbId: string
  supported?: boolean
  showCreateButton?: boolean
  loading?: boolean
  data: Nextgenv1beta2VpcPeering[] | undefined
  onCancel: () => void
}

const VpcPeerEmptyInfo = () => {
  const { open: openSupport } = useRequestSupport()

  return (
    <Box>
      <Typography variant="body-lg">
        To ensure a secure connection, create VPC peering before your first connection to the instance. For new VPC
        peering requests,{' '}
        <a
          onClick={() => {
            openSupport()
          }}
        >
          contact TiDB Support
        </a>
        .
      </Typography>
    </Box>
  )
}

export const VpcPeerInfoBlock = ({
  tidbId,
  supported = true,
  showCreateButton = true,
  loading,
  data,
  onCancel
}: VpcPeerInfoBlockProps) => {
  const activePeerings = data?.filter((item) => item.state === 'ACTIVE')
  const pendingPeerings = data?.filter((item) => item.state === 'PENDING')
  const failedPeerings = data?.filter((item) => item.state === 'FAILED')
  const active = !!activePeerings?.length
  const pending = !!pendingPeerings?.length && !active
  const failed = !!failedPeerings?.length && !active && !pending
  const none = !data?.length

  if (!supported) {
    return <VpcPeerEmptyInfo />
  }

  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>
    )
  }

  return (
    <Stack p="xl" pt={0} align="flex-start">
      {none && <VpcPeerEmptyInfo />}
      {pending && (
        <Alert>
          Your VPC peering is in the Pending status. Please wait a few minutes
          {showCreateButton && (
            <>
              {' '}
              or visit the{' '}
              <Link to={`/tidbs/${tidbId}/networking`} onClick={onCancel}>
                Networking
              </Link>{' '}
              page to review it.
            </>
          )}
        </Alert>
      )}
      {failed && (
        <Alert color="red">
          Your VPC peering has failed.
          {showCreateButton && (
            <>
              {' '}
              Visit the{' '}
              <Link to={`/tidbs/${tidbId}/networking`} onClick={onCancel}>
                Networking
              </Link>{' '}
              page to review it.
            </>
          )}
        </Alert>
      )}
      {active && (
        <>
          <Typography variant="body-lg">Only active VPC peerings are displayed here.</Typography>
          <Typography variant="body-lg" lineClamp={1} c="carbon.7">
            Peering connections: {activePeerings?.map((item) => item.tidbCloudVpcId)?.join(', ')}
          </Typography>
        </>
      )}
    </Stack>
  )
}