import { ActionIcon, Box, CopyButton, Flex, Tooltip, Typography } from '@tidbcloud/uikit'
import { IconCheck, IconCopy03 } from '@tidbcloud/uikit/icons'
import React from 'react'

import { useTidbServiceGetCloudProviderInfo } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2'
import { V1beta1RegionCloudProvider } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2/interface'
import useStores from 'dbaas/stores/useStores'

export const IAMPolicy = ({ tidbId, cloudProvider }: { tidbId: string; cloudProvider: V1beta1RegionCloudProvider }) => {
  const {
    store: { tenantData, activeProjectId }
  } = useStores()

  const { data } = useTidbServiceGetCloudProviderInfo(
    tidbId,
    {
      orgId: tenantData.id,
      projectId: activeProjectId
    },
    {
      query: {
        enabled: Boolean(tidbId && tenantData.id && activeProjectId)
      }
    }
  )

  return (
    <Box
      w={296}
      p={24}
      sx={(t) => ({
        backgroundColor: t.colors.carbon[2],
        borderRadius: t.defaultRadius
      })}
    >
      <IamPolicyContent
        accountId={data?.tidbCloudAccountId ?? ''}
        externalId={data?.tidbCloudAccountExternalId ?? ''}
        cloudProvider={cloudProvider}
      />
    </Box>
  )
}

export const IamPolicyContent = ({
  accountId,
  externalId,
  cloudProvider
}: {
  accountId: string
  externalId: string
  cloudProvider: V1beta1RegionCloudProvider
}) => {
  const labelMap: Record<string, { title: string; tips: React.ReactNode }> = {
    [V1beta1RegionCloudProvider.aws]: {
      title: 'AWS IAM Policy Settings',
      tips: (
        <>
          Retrieve the policy settings that TiDB Cloud needs to access you AWS sources. Refer to{' '}
          <a
            href="https://docs.pingcap.com/tidbcloud/tidb-cloud-auditing-premium"
            target="_blank"
            rel="noopener noreferrer"
          >
            documentation link
          </a>
          .
        </>
      )
    },
    [V1beta1RegionCloudProvider.alicloud]: {
      title: 'Alibaba Cloud RAM Policy Settings',
      tips: (
        <>
          Retrieve the policy settings that TiDB Cloud needs to access you Alibaba Cloud account. Refer to{' '}
          <a
            href="https://docs.pingcap.com/tidbcloud/tidb-cloud-auditing-premium"
            target="_blank"
            rel="noopener noreferrer"
          >
            documentation link
          </a>
          .
        </>
      )
    }
  }

  const { title, tips } = labelMap[cloudProvider] || { title: '', tips: '' }

  return (
    <>
      <Typography variant="title-sm" mb={8}>
        {title}
      </Typography>
      <Typography variant="body-sm">{tips}</Typography>
      <Typography variant="body-lg" mt={16} mb={8}>
        TiDB Cloud Account ID
      </Typography>
      <Flex>
        <Typography variant="title-md" sx={{ wordBreak: 'break-all' }}>
          {accountId}
        </Typography>
        <CopyButton value={accountId} timeout={2000}>
          {({ copied, copy }) => (
            <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="right">
              <ActionIcon variant="transparent" size="sm" c="carbon.8" onClick={copy}>
                {copied ? <IconCheck size={14} /> : <IconCopy03 size={14} strokeWidth={2} onClick={copy} />}
              </ActionIcon>
            </Tooltip>
          )}
        </CopyButton>
      </Flex>
      <Typography variant="body-lg" my={8}>
        TiDB Cloud External ID
      </Typography>
      <Flex>
        <Typography variant="title-md" sx={{ wordBreak: 'break-all' }}>
          {externalId}
        </Typography>
        <CopyButton value={externalId} timeout={2000}>
          {({ copied, copy }) => (
            <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="right">
              <ActionIcon variant="transparent" size="sm" c="carbon.8" onClick={copy}>
                {copied ? <IconCheck size={14} /> : <IconCopy03 size={14} strokeWidth={2} onClick={copy} />}
              </ActionIcon>
            </Tooltip>
          )}
        </CopyButton>
      </Flex>
    </>
  )
}