import { Alert, Button, Group, Modal, Stack, TextInput, Typography, notifier } from '@tidbcloud/uikit'
import { IconXCircle } from '@tidbcloud/uikit/icons'

import { getApiErrorMsgDom } from 'dbaas/components/Notification/ErrorMessag'
import { CloudProviderConst } from 'dbaas/features/Project'
import { usePrivateEndpointConnectionServiceDeletePrivateEndpointConnection } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2'
import { Nextgenv1beta2PrivateEndpointConnectionEndpointState } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2/interface'
import useStores from 'dbaas/stores/useStores'
import { MixpanelEvents } from 'dbaas/utils/tracking'

interface DeletePremiumAzurePrivateEndpointModalProps {
  tidbId: string
  connectionId: string
  endpointId: string
  serviceName: string
  state?: Nextgenv1beta2PrivateEndpointConnectionEndpointState
  opened: boolean
  onClose: () => void
  onFinish?: () => void
}

export const DeletePremiumAzurePrivateEndpointModal = ({
  tidbId,
  connectionId,
  endpointId,
  serviceName,
  state,
  opened,
  onClose,
  onFinish
}: DeletePremiumAzurePrivateEndpointModalProps) => {
  const {
    store: {
      lastVisitLocation: { orgId, projectId }
    }
  } = useStores()
  const mutator = usePrivateEndpointConnectionServiceDeletePrivateEndpointConnection({
    mutation: {
      onSuccess: () => {
        notifier.success('Azure Private Endpoint Connection deleted successfully')
        onFinish?.()
        onClose()
      },
      onError: (error) => {
        const errorMsgDom = getApiErrorMsgDom(error)

        notifier.error(errorMsgDom)
      }
    }
  })

  const handleDelete = async () =>
    mutator.mutateAsync({
      tidbId,
      privateEndpointConnectionId: connectionId,
      params: { orgId, projectId }
    })

  return (
    <Modal title="Delete Azure Private Endpoint Connection" centered size={560} opened={opened} onClose={onClose}>
      <Stack>
        {state === 'ACTIVE' && (
          <Alert color="red" icon={<IconXCircle size={16} />}>
            When you delete this Azure private endpoint connection, you will lose connection to your instance.
          </Alert>
        )}
        <TextInput value={endpointId} disabled label="Private Endpoint" />
        <TextInput value={serviceName} disabled label="Private Link Service" />
        <Typography variant="body-lg">
          Are you sure to delete the connection between the private endpoint and private link service?
        </Typography>
        <Group justify="flex-end">
          <Button
            variant="default"
            onClick={onClose}
            data-mp-event={MixpanelEvents.PremiumPrivateEndpoint.Delete.CancelClicked}
            data-mp-cloud-provider={CloudProviderConst.AZURE}
          >
            Cancel
          </Button>
          <Button
            color="red"
            variant="light"
            loading={mutator.isLoading}
            onClick={handleDelete}
            data-mp-event={MixpanelEvents.PremiumPrivateEndpoint.Delete.SubmitClicked}
            data-mp-cloud-provider={CloudProviderConst.AZURE}
          >
            I understand, delete it
          </Button>
        </Group>
      </Stack>
    </Modal>
  )
}