import { Alert, Anchor, Button, Code, Group, Modal, Paper, Stack, Typography } from '@tidbcloud/uikit'
import { CodeBlock } from '@tidbcloud/uikit/biz'
import { IconLinkExternal01 } from '@tidbcloud/uikit/icons'

import { default as aliyunKmsKeyPolicy } from './aliyun-kms-key-policy.json'

interface CheckAliyunKeyPolicyModalProps {
  accountId: string
  kmsKeyArn: string
  opened: boolean
  onClose: () => void
}

export const CheckAliyunKeyPolicyModal = ({
  accountId,
  kmsKeyArn,
  opened,
  onClose
}: CheckAliyunKeyPolicyModalProps) => {
  const keyPolicyString = JSON.stringify(aliyunKmsKeyPolicy, null, 2).replace(
    '<account-id>',
    accountId || '<account-id>'
  )

  return (
    <Modal title="Check Alibaba Cloud KMS Key Policy" centered size={720} opened={opened} onClose={onClose}>
      <Stack>
        <Paper bg="carbon.2" p="sm">
          <Group wrap="nowrap">
            <Typography variant="label-lg" c="carbon.7">
              KMS Key ARN
            </Typography>
            <Typography variant="body-lg">{kmsKeyArn}</Typography>
          </Group>
        </Paper>
        <Typography variant="body-lg">
          Compare your Alibaba Cloud KMS key policy with the one shown here. If they differ, append the statements in{' '}
          <Code>Statement</Code> to your existing key policy to grant TiDB Cloud access. For details, see{' '}
          <Anchor
            href="https://www.alibabacloud.com/help/en/kms/key-management-service/security-and-compliance/overview-of-key-policies"
            target="_blank"
            rel="noreferrer"
            sx={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}
          >
            Overview of Key Policies <IconLinkExternal01 />
          </Anchor>
          .
        </Typography>
        <Alert>
          This is a full policy document. <strong>Do not overwrite your existing policy.</strong> Copy the entries in{' '}
          <Code>Statement</Code> and append them to your Alibaba Cloud KMS key policy.
        </Alert>
        <CodeBlock language="json" foldProps={{ defaultHeight: 300 }} copyContent={keyPolicyString}>
          {keyPolicyString}
        </CodeBlock>
        <Group justify="flex-end">
          <Button onClick={onClose}>Done</Button>
        </Group>
      </Stack>
    </Modal>
  )
}