import { Alert, Anchor, Box, Code, Modal, Typography } from '@tidbcloud/uikit'
import { CodeBlock, Form, FormTextInput } from '@tidbcloud/uikit/biz'
import { IconLinkExternal01 } from '@tidbcloud/uikit/icons'
import { observer } from 'mobx-react'
import { useId } from 'react'
import { useForm } from 'react-hook-form'

import {
  useCustomerManagedEncryptionKeyServiceGetCmekAccessIamPrincipal,
  useCustomerManagedEncryptionKeyServiceVerifyCmekAccessIamPrincipal
} from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2'
import { Commonv1beta1ServicePlan } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2/interface'
import useStores from 'dbaas/stores/useStores'

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

interface AddAliyunKmsKeyModalProps {
  servicePlan: Commonv1beta1ServicePlan
  regionId: string
  projectId: string
  opened: boolean
  onClose: () => void
  onFinish: (data: { kmsKeyArn: string; accountId: string }) => void
}

export const AddAliyunKmsKeyModal = observer(
  ({ servicePlan, regionId, projectId, opened, onClose, onFinish }: AddAliyunKmsKeyModalProps) => {
    const {
      store: {
        lastVisitLocation: { orgId }
      }
    } = useStores()
    const aliyunCmekPrincipalQuery = useCustomerManagedEncryptionKeyServiceGetCmekAccessIamPrincipal(
      {
        orgId,
        projectId,
        servicePlan,
        regionId
      },
      {
        query: {
          enabled: !!(orgId && projectId && servicePlan && regionId)
        }
      }
    )
    const accountId = aliyunCmekPrincipalQuery.data?.aliyun?.accountId
    const keyPolicyString = JSON.stringify(aliyunKmsKeyPolicy, null, 2).replace(
      '<account-id>',
      accountId ?? '<account-id>'
    )

    const formMethods = useForm<{ kmsKeyArn: string }>({
      defaultValues: {
        kmsKeyArn: ''
      }
    })
    const { setError } = formMethods

    const verifyCmekAccessIamPrincipalQuery = useCustomerManagedEncryptionKeyServiceVerifyCmekAccessIamPrincipal({
      mutation: {
        onSuccess: (data, vars) => {
          if (data.valid) {
            onFinish({
              kmsKeyArn: vars.data?.aliyunKms?.kmsKeyArn ?? '',
              accountId: vars.data?.aliyunPrincipal?.accountId ?? ''
            })
          } else {
            setError('kmsKeyArn', { message: data.failReason ?? 'Failed to verify KMS key configuration' })
          }
        }
      }
    })

    const onSubmit = (data: { kmsKeyArn: string }) => {
      return verifyCmekAccessIamPrincipalQuery.mutateAsync({
        data: {
          aliyunKms: {
            kmsKeyArn: data.kmsKeyArn?.trim() ?? ''
          },
          aliyunPrincipal: {
            accountId: accountId ?? ''
          },
          servicePlan,
          regionId
        },
        params: {
          orgId,
          projectId
        }
      })
    }

    const formId = useId()

    return (
      <Modal
        title="Add Alibaba Cloud KMS Key"
        centered
        size={720}
        opened={opened}
        onClose={onClose}
        onExitTransitionEnd={() => formMethods.reset()}
      >
        <Form
          id={formId}
          form={formMethods}
          actionsProps={{
            confirmText: 'Test and Add KMS Key',
            confirmProps: {
              form: formId
            },
            onCancel: onClose
          }}
          stopPropagation
          onSubmit={onSubmit}
        >
          <Box>
            <Typography variant="title-md" mb={4}>
              Configure Key Policy
            </Typography>
            <Typography variant="body-lg">
              Append the statements below to your Alibaba Cloud KMS 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>
          </Box>
          <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>
          <FormTextInput
            name="kmsKeyArn"
            label="KMS Key ARN"
            placeholder="Enter the KMS Key ARN you configured in Alibaba Cloud"
            rules={{ required: 'KMS Key ARN is required' }}
            data-autofocus="true"
          />
        </Form>
      </Modal>
    )
  }
)