import { Box, HoverCard, SelectProps, Typography } from '@tidbcloud/uikit'
import { FormSelect, FormTextInput } from '@tidbcloud/uikit/biz'
import { IconInfoCircle } from '@tidbcloud/uikit/icons'

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

interface FormContentProps {
  disabled: boolean
  regions: SelectProps['data']
  cloudProvider: V1beta1RegionCloudProvider
  isBYOC: boolean
}

const FormContent = ({ disabled, regions, cloudProvider, isBYOC }: FormContentProps) => {
  if (cloudProvider === V1beta1RegionCloudProvider.azure) {
    return (
      <>
        <FormTextInput
          name="bucketUri"
          autoComplete="off"
          placeholder={
            cloudProvider === V1beta1RegionCloudProvider.azure
              ? 'Example: https://<storage-account-name>.blob.core.windows.net/<container-name>/[prefix]'
              : 'https://xxxxxx.blob.core.windows.net/path'
          }
          label="Blob URL"
          disabled={disabled}
        />

        {!isBYOC && (
          <FormTextInput
            mt={24}
            disabled={disabled}
            name="cloudRoleIdentity"
            autoComplete="off"
            placeholder="Example: se=2024-09-07T00:00Z&sp=rcw&sig=..."
            label="SAS Token"
          />
        )}
      </>
    )
  }

  const labelMap: Record<
    string,
    { bucketPlaceholder: string; bucketTips: string; roleArnPlaceholder: string; roleArnTips: React.ReactNode }
  > = {
    [V1beta1RegionCloudProvider.aws]: {
      bucketPlaceholder: 'Example: s3://bucket-name/path/to/dump/',
      bucketTips: 'It is recommended to store the data in an S3 bucket located in the same region as the instance.',
      roleArnPlaceholder: 'arn:aw:iam:001234567890:role/myrole',
      roleArnTips: (
        <>
          Enter your AWS S3 IAM Role ARN Information, refer to{' '}
          <a
            href="https://docs.pingcap.com/tidbcloud/tidb-cloud-auditing-premium/?plan=premium#step-2-configure-amazon-s3-access"
            target="_blank"
            rel="noopener noreferrer"
          >
            documentation
          </a>
          .
        </>
      )
    },
    [V1beta1RegionCloudProvider.alicloud]: {
      bucketPlaceholder: 'Example: oss://customer-audit-log-bucket/tidb_audit_log/test1/',
      bucketTips: 'It is recommended to store the data in an OSS bucket located in the same region as the instance.',
      roleArnPlaceholder: 'acs:ram::1234567890123456:role/AllowMyServiceWriteOnBucket',
      roleArnTips: (
        <>
          Enter your Alibaba Cloud OSS RAM Role ARN, refer to{' '}
          <a
            href="https://docs.pingcap.com/tidbcloud/tidb-cloud-auditing-premium/?plan=premium#step-2-configure-oss-access"
            target="_blank"
            rel="noopener noreferrer"
          >
            documentation
          </a>
          .
        </>
      )
    }
  }

  const { bucketPlaceholder, bucketTips, roleArnPlaceholder, roleArnTips } = labelMap[cloudProvider] || {
    bucketPlaceholder: '',
    bucketTips: '',
    roleArnPlaceholder: '',
    roleArnTips: ''
  }

  return (
    <>
      <FormTextInput
        name="bucketUri"
        autoComplete="off"
        placeholder={bucketPlaceholder}
        label={`Bucket URI`}
        disabled={disabled}
      />
      <Typography c="carbon.7" mt={2} fz={12}>
        {bucketTips}
      </Typography>

      <FormSelect
        name="bucketRegionId"
        label="Bucket Region"
        placeholder="Select a region"
        data={regions}
        my={24}
        disabled={disabled}
      />

      <FormTextInput
        disabled={disabled}
        name="cloudRoleIdentity"
        autoComplete="off"
        placeholder={roleArnPlaceholder}
        label={
          <Box
            sx={{
              display: 'inline-flex',
              alignItems: 'center'
            }}
          >
            <Typography variant="label-lg">Role ARN</Typography>
            <HoverCard withArrow withinPortal shadow="md" position="top" width={500}>
              <HoverCard.Target>
                <IconInfoCircle size={14} ml={4} sx={{ cursor: 'pointer' }} />
              </HoverCard.Target>
              <HoverCard.Dropdown>
                <Typography mb={8}>{roleArnTips}</Typography>
              </HoverCard.Dropdown>
            </HoverCard>
          </Box>
        }
      />
    </>
  )
}

export default FormContent