import { Divider, List, Flex, Typography, Alert, Box, Button, Group, Badge } from '@tidbcloud/uikit'
import { FormTextInput, FormSelect } from '@tidbcloud/uikit/biz'
import { IconAlertCircle, IconLinkExternal01 } from '@tidbcloud/uikit/icons'
import { observer } from 'mobx-react'
import React from 'react'

import { CardContainer as Card, ActionSteps, DeleteModal } from 'dbaas/components/IntegrationCard'
import { CardForm } from 'dbaas/components/IntegrationCard/form'
import { VendorLogo } from 'dbaas/components/Logo'
import { AccessGuard, useAccessCheck } from 'dbaas/contexts/access-control'
import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import type { CentralDatadogSite, CentralIntegrationStatusResp } from 'dbaas/services'
import { CentralIntegrationPayload, CentralIntegrationType, CentralUserProject } from 'dbaas/services'
import { createIntegration, deleteIntegration, validateDatadogAPIKey } from 'dbaas/services'
import {
  integrationServiceCreateIntegration,
  integrationServiceDeleteIntegration,
  integrationServiceValidateDatadogAPIKey
} from 'dbaas/services/metricsIntegration'
import {
  IntegrationServiceDeleteIntegrationType,
  V1DatadogSite,
  V1IntegrationPayload,
  V1IntegrationStatusResp,
  V1IntegrationType
} from 'dbaas/services/metricsIntegration/interface'
import useStores from 'dbaas/stores/useStores'
import { len100StrRegexp } from 'dbaas/utils/regex'
import { eventTracking } from 'dbaas/utils/tracking'

type DatadogFormSite = '' | CentralDatadogSite | V1DatadogSite

const datadogSiteLabelMap = {
  DATADOG_SITE_US1: 'US1',
  DATADOG_SITE_US3: 'US3',
  DATADOG_SITE_US5: 'US5',
  DATADOG_SITE_US1_FED: '',
  DATADOG_SITE_EU1: 'EU1',
  DATADOG_SITE_UNSPECIFIED: '',
  DATADOG_SITE_AP1: 'AP1',
  DATADOG_SITE_AP2: 'AP2'
} as const satisfies Record<Exclude<DatadogFormSite, ''>, string>

const getDatadogSiteOptions = (cluster?: SharedCluster) => {
  return Object.entries(datadogSiteLabelMap)
    .filter(([value, label]) => {
      return !!label && (cluster || value !== V1DatadogSite.DATADOG_SITE_AP2)
    })
    .map(([value, label]) => {
      return {
        value,
        label
      }
    })
}

const getDatadogSiteLabel = (site?: DatadogFormSite) => {
  if (!site) {
    return ''
  }
  return datadogSiteLabelMap[site]
}

const stepTexts: Record<ActionSteps, string> = {
  initial: 'Test Integration',
  passed: 'Confirm',
  confirmed: 'Confirmed'
}

type DatadogFormData = {
  datadog_api_key: string
  datadog_site: DatadogFormSite
}

export const DatadogForm = observer(
  ({
    onCancel,
    projectId,
    onConfirmed,
    cluster
  }: {
    onCancel?: () => void
    projectId: string
    onConfirmed?: () => void
    cluster?: SharedCluster
  }) => {
    const {
      store: { tenantData }
    } = useStores()
    const accessible = useAccessCheck('ProjectIntegrationAction')
    const datadogSiteOptions = getDatadogSiteOptions(cluster)

    const onTest = (data: DatadogFormData) => {
      eventTracking('Integration Datadog Test Button Clicked')
      if (cluster) {
        return integrationServiceValidateDatadogAPIKey(tenantData.id, projectId, cluster.id!, {
          datadog_api_key: data.datadog_api_key,
          datadog_site: data.datadog_site as V1DatadogSite
        })
      }
      return validateDatadogAPIKey(tenantData.id, projectId, {
        datadog_api_key: data.datadog_api_key,
        datadog_site: data.datadog_site as CentralDatadogSite
      })
    }

    const onConfirm = (data: DatadogFormData) => {
      eventTracking('Integration Datadog Confirm Button Clicked')
      if (cluster) {
        return integrationServiceCreateIntegration(tenantData.id, projectId, cluster.id!, {
          type: V1IntegrationType.INTEGRATION_TYPE_DATADOG,
          payloads: [V1IntegrationPayload.INTEGRATION_PAYLOAD_METRICS],
          datadog_api_key: data.datadog_api_key,
          datadog_site: data.datadog_site as V1DatadogSite
        })
      }
      return createIntegration(tenantData.id, projectId, {
        org_id: tenantData.id,
        project_id: projectId,
        type: CentralIntegrationType.INTEGRATION_TYPE_DATADOG,
        payloads: [CentralIntegrationPayload.INTEGRATION_PAYLOAD_METRICS],
        datadog_api_key: data.datadog_api_key,
        datadog_site: data.datadog_site as CentralDatadogSite
      })
    }

    const styles = {
      root: {
        display: 'flex',
        alignItems: 'center',
        flexWrap: 'wrap' as const
      },
      label: {
        minWidth: 144,
        marginBottom: 0
      },
      wrapper: {
        flex: 1
      },
      error: {
        marginLeft: 144,
        width: '100%'
      }
    } as const

    return (
      <CardForm<DatadogFormData>
        type="Datadog"
        onTest={onTest}
        onConfrim={onConfirm}
        onConfirmed={onConfirmed}
        stepTexts={stepTexts}
        onCancel={onCancel}
        defaultValues={{ datadog_api_key: '', datadog_site: '' }}
      >
        {(_, readOnly) => {
          return (
            <>
              <FormTextInput
                name="datadog_api_key"
                readOnly={readOnly as any} // TODO:
                disabled={!accessible}
                label="API Key"
                styles={styles}
                rules={{
                  required: 'Required',
                  pattern: {
                    value: len100StrRegexp,
                    message: 'Datadog API key is invalid'
                  }
                }}
              />
              <FormSelect
                name="datadog_site"
                placeholder="Choose Site"
                data={datadogSiteOptions}
                label="Site"
                disabled={(!accessible || readOnly) as any} // TODO:
                styles={{
                  ...styles,
                  root: {
                    ...styles.root,
                    '& > div:first-of-type': {
                      flex: 1
                    }
                  }
                }}
                rules={{
                  required: 'Required'
                }}
              />
            </>
          )
        }}
      </CardForm>
    )
  }
)

export const DatadogDetail: React.FC<
  React.PropsWithChildren<{
    integration: CentralIntegrationStatusResp | null
    integrationInfoForCluster?: V1IntegrationStatusResp
  }>
> = ({ integration, integrationInfoForCluster }) => {
  return (
    <Box w="50%" m="0 auto" mt="xl">
      <List listStyleType={'none'} withPadding styles={{ item: { marginBottom: 16 } }}>
        <List.Item>
          <Typography w={100} display="inline-block" variant="action-lg" c="carbon.9">
            API Key
          </Typography>
          <Typography ml={64} display="inline-block">
            {integration?.datadog_masked_api_key || integrationInfoForCluster?.datadog_masked_api_key}
          </Typography>
        </List.Item>
        <List.Item>
          <Typography w={100} display="inline-block" variant="action-lg" c="carbon.9">
            Site
          </Typography>
          <Typography ml={64} display="inline-block">
            {getDatadogSiteLabel(integration?.datadog_site || integrationInfoForCluster?.datadog_site)}
          </Typography>
        </List.Item>
      </List>
      {(!!integration?.status_reason || !!integrationInfoForCluster?.status_reason) && (
        <Alert icon={<IconAlertCircle size={16} />} mt={16} color="red">
          {integration?.status_reason || integrationInfoForCluster?.status_reason}
        </Alert>
      )}
    </Box>
  )
}

export const Datadog: React.FC<
  React.PropsWithChildren<{
    integration: CentralIntegrationStatusResp | null
    integrationInfoForCluster?: V1IntegrationStatusResp
    open?: boolean
    project: CentralUserProject
    onConfirmed?: () => void
    cluster?: SharedCluster
  }>
> = observer(({ integration, integrationInfoForCluster, open = false, project, onConfirmed, cluster }) => {
  const {
    store: { tenantData }
  } = useStores()
  const isClusterLevel = !!cluster

  const onDelete = async () => {
    eventTracking('Integration Datadog Delete Button Clicked')

    if (isClusterLevel) {
      await integrationServiceDeleteIntegration(tenantData.id, project.id, cluster.id!, {
        type: IntegrationServiceDeleteIntegrationType.INTEGRATION_TYPE_DATADOG
      })
    } else {
      await deleteIntegration(tenantData.id, project.id, {
        type: CentralIntegrationType.INTEGRATION_TYPE_DATADOG
      })
    }
    onConfirmed?.()
  }

  const Content = () => {
    return (
      <Flex sx={{ flex: 1 }} justify="space-between" align="center">
        <Group gap={8}>
          <Typography variant="title-md">Integration to Datadog</Typography>
          {!isClusterLevel && (
            <Badge variant="outline" size="sm" color="carbon" c="carbon.7" fw={500}>
              Preview
            </Badge>
          )}
        </Group>
        {(integration !== null || !!integrationInfoForCluster) && (
          <Flex onClick={(e) => e.stopPropagation()} align="center" gap={16}>
            <Button
              component="a"
              target="_blank"
              variant="subtle"
              rel="noreferrer"
              href={integration?.datadog_dashboard_url || integrationInfoForCluster?.datadog_dashboard_url || ''}
              data-mp-event="Integration Datadog Dashboard Link Clicked"
              rightSection={<IconLinkExternal01 size={18} />}
            >
              Dashboard
            </Button>
            <AccessGuard id="ProjectIntegrationAction">
              <DeleteModal
                title="Delete Datadog Integration"
                content="By clicking delete you will delete the Datadog Integration."
                onSubmit={onDelete}
              />
            </AccessGuard>
          </Flex>
        )}
      </Flex>
    )
  }

  return (
    <Card
      open={open}
      left={<VendorLogo name="datadog" size={64} />}
      content={<Content />}
      isEmpty={!integration && !integrationInfoForCluster}
      onClick={(status) => eventTracking('Integration Datadog Card Clicked', { closed: status === 'closed' })}
    >
      {(status, setStatus) => {
        if (status === 'detail' && (integration !== null || !!integrationInfoForCluster)) {
          return (
            <>
              <Divider />
              <DatadogDetail integration={integration} integrationInfoForCluster={integrationInfoForCluster} />
            </>
          )
        }
        if (status === 'editing') {
          return (
            <>
              <Divider />
              <DatadogForm
                onCancel={() => setStatus('closed')}
                onConfirmed={onConfirmed}
                projectId={project.id}
                cluster={cluster}
              />
            </>
          )
        }
        return null
      }}
    </Card>
  )
})

export default Datadog