import { Badge, Box, CardProps, Skeleton, Stack } from '@tidbcloud/uikit'
import { PropertyCard } from '@tidbcloud/uikit/biz'

import { CopyActionIcon } from 'dbaas/components/Copy/CopyActionIcon'
import TimeComponent from 'dbaas/components/TimeComponent'
import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import { getCloudProviderLabel } from 'dbaas/features/Project'
import { HADescriptions } from 'dbaas/screens/ClustersV2/new/Serverless/FormContent/AdvancedSettings'
import { useDualLayerDataEncryptionFeatEnabled } from 'dbaas/screens/NextGen/my-tidb-creation/shared/premium-byoc/dual-layer-data-encryption/use-dual-layer-data-encryption-feat-enabled'
import { Commonv1beta1ServicePlan } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2/interface'

import { ClusterStatusWithRestoreProgress, truncateStr } from '../../ClusterInfo'
import { useBFFDedicated } from '../helpers'

import { useInstancePropertiesData } from './use-instance-properties-data'

interface ClusterBasicInfoProps {
  cluster: SharedCluster
}

interface ClusterPropPanelProps extends ClusterBasicInfoProps, Omit<CardProps, 'children'> {
  rightSection?: React.ReactNode
}

export const ClusterPropPanel = ({ cluster, rightSection, ...rootProps }: ClusterPropPanelProps) => {
  const { dedicated, useBffData, isLoading } = useBFFDedicated(cluster)

  const TierType = (
    <PropertyCard.Item label="Plan">
      <Badge variant="outline" fw={500} color="aqua">
        Dedicated
      </Badge>
    </PropertyCard.Item>
  )

  const clusterName = isLoading ? '' : !useBffData ? cluster.displayName : (dedicated?.displayName ?? '')

  return (
    <PropertyCard p="xl" title={clusterName} {...rootProps} sx={{ position: 'relative', maxWidth: 416 }}>
      {isLoading && (
        <Stack gap="sm">
          <Skeleton h={20} /> <Skeleton h={20} /> <Skeleton h={20} />
        </Stack>
      )}
      {!isLoading && dedicated && useBffData && (
        <>
          <PropertyCard.Item label="Cluster ID" valueProps={{ sx: { display: 'flex', alignItems: 'center' } }}>
            {dedicated.clusterId}
            <CopyActionIcon
              text={dedicated.clusterId ?? ''}
              actionIconProps={{ size: 22, variant: 'subtle', ml: 6 }}
              iconProps={{ size: 14, c: 'carbon.7' }}
              data-mp-event={'Cluster ID Copy Button Clicked'}
            />
          </PropertyCard.Item>
          <PropertyCard.Item label="Status">
            <ClusterStatusWithRestoreProgress cluster={cluster} />
          </PropertyCard.Item>
          {TierType}
          <PropertyCard.Item label="TiDB Version">{dedicated.version}</PropertyCard.Item>
          <PropertyCard.Item label="Cloud Provider">{getCloudProviderLabel(dedicated.cloudProvider)}</PropertyCard.Item>
          <PropertyCard.Item label="Region">{dedicated.regionDisplayName}</PropertyCard.Item>
          <PropertyCard.Item label="Created by">{truncateStr(dedicated.createdBy || '', 30)}</PropertyCard.Item>
          <PropertyCard.Item label="Created at">
            {<TimeComponent time={dedicated.createTime ?? ''} />}
          </PropertyCard.Item>
        </>
      )}
    </PropertyCard>
  )
}

const getDualLayerDataEncryptionText = (
  encryption: ReturnType<typeof useInstancePropertiesData>['dualLayerDataEncryption']
) => {
  if (encryption?.cmek) return 'Enabled with Customer-Managed Encryption Key (CMEK)'
  if (encryption?.defaultKey) return 'Enable with Service-Managed Encryption Key'
  return undefined
}

export const ServerlessClusterPropPanel = ({ cluster, rightSection, ...rootProps }: ClusterPropPanelProps) => {
  const {
    isLoading,
    instanceName,
    instanceId,
    version,
    cloudProvider,
    regionDisplayName,
    creator,
    createTime,
    highAvailabilityType,
    dualLayerDataEncryption
  } = useInstancePropertiesData(cluster)
  const { isEnabled: isDataEncryptionFeatEnabled } = useDualLayerDataEncryptionFeatEnabled({
    servicePlan: cluster.computed.isEssentialV2
      ? Commonv1beta1ServicePlan.Essential_V2
      : Commonv1beta1ServicePlan.Starter,
    cloudProvider
  })
  const dualLayerDataEncryptionText = getDualLayerDataEncryptionText(dualLayerDataEncryption)

  return (
    <PropertyCard p="xl" title="Instance Properties" {...rootProps} sx={{ position: 'relative' }}>
      {isLoading && (
        <Stack gap="sm">
          <Skeleton h={20} /> <Skeleton h={20} /> <Skeleton h={20} />
        </Stack>
      )}

      {!isLoading && instanceId && (
        <>
          <Box sx={{ position: 'absolute', top: 26, right: 24 }}>{rightSection}</Box>
          <PropertyCard.Item label="Instance Name">{instanceName}</PropertyCard.Item>
          <PropertyCard.Item label="Instance ID" mb={-2} valueProps={{ sx: { display: 'flex', alignItems: 'center' } }}>
            {instanceId}
            <CopyActionIcon
              text={instanceId ?? ''}
              actionIconProps={{ size: 22, variant: 'subtle', ml: 6 }}
              iconProps={{ size: 14, c: 'carbon.7' }}
              data-mp-event={'Cluster ID Copy Button Clicked'}
            />
          </PropertyCard.Item>
          <PropertyCard.Item label="Status">
            <ClusterStatusWithRestoreProgress cluster={cluster} />
          </PropertyCard.Item>
          <PropertyCard.Item label="TiDB Version">{version}</PropertyCard.Item>
          <PropertyCard.Item label="Cloud Provider">
            {cloudProvider ? getCloudProviderLabel(cloudProvider) : '-'}
          </PropertyCard.Item>
          <PropertyCard.Item label="Region">{regionDisplayName}</PropertyCard.Item>
          <PropertyCard.Item label="Created by">{truncateStr(creator || '', 30)}</PropertyCard.Item>
          <PropertyCard.Item label="Created at">{<TimeComponent time={createTime ?? ''} />}</PropertyCard.Item>
          {!!highAvailabilityType && (
            <PropertyCard.Item label="High Availability">{HADescriptions[highAvailabilityType]}</PropertyCard.Item>
          )}
          {cluster.computed.isEssentialV2 && isDataEncryptionFeatEnabled && dualLayerDataEncryptionText && (
            <PropertyCard.Item label="Dual-Layer Data Encryption">{dualLayerDataEncryptionText}</PropertyCard.Item>
          )}
        </>
      )}
    </PropertyCard>
  )
}