import { Box, Flex, HoverCard, Skeleton, Stack } from '@tidbcloud/uikit'
import { PropertyCard, PropertyCardProps } from '@tidbcloud/uikit/biz'
import { IconInfoCircle } from '@tidbcloud/uikit/icons'
import { Link, useLocation } from 'react-router-dom'

import { CopyActionIcon } from 'dbaas/components/Copy/CopyActionIcon'
import TimeComponent from 'dbaas/components/TimeComponent'
import { getCloudProviderLabel } from 'dbaas/features/Project'
import { ClusterStatusWithRestoreProgress, truncateStr } from 'dbaas/screens/Cluster/ClusterInfo'
import { useDualLayerDataEncryptionFeatEnabled } from 'dbaas/screens/NextGen/my-tidb-creation/shared/premium-byoc/dual-layer-data-encryption/use-dual-layer-data-encryption-feat-enabled'
import { getHADescription } from 'dbaas/screens/NextGen/shared/model/high-availability'
import { SharedTiDB } from 'dbaas/screens/NextGen/shared/model/shared-tidb-state'
import { ServicePlanTag } from 'dbaas/screens/NextGen/shared/tidb-instance/service-plan/ServicePlanTag'
import { useResourcePoolServiceGetResourcePool } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2'
import type { Nextgenv1beta2ResourcePoolHighAvailabilityType } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2/interface'
import useStores from 'dbaas/stores/useStores'

const SILENT_BYOC_QUERY_REQUEST = { isShowToast: false, isHandleErr: false }

interface TiDBPropPanelProps extends Omit<PropertyCardProps, 'children' | 'title'> {
  isLoading?: boolean
  tidb: SharedTiDB
}

const getResourcePoolHADescription = (haType?: Nextgenv1beta2ResourcePoolHighAvailabilityType) => {
  if (haType === 'REGIONAL') {
    return 'Regional'
  }
  if (haType === 'ZONAL') {
    return 'Zonal'
  }
  return ''
}

export const TiDBPropPanel = ({ isLoading, tidb, ...rootProps }: TiDBPropPanelProps) => {
  const location = useLocation()
  const {
    store: {
      lastVisitLocation: { orgId, projectId }
    }
  } = useStores()
  const { isEnabled: isDataEncryptionFeatEnabled } = useDualLayerDataEncryptionFeatEnabled({
    servicePlan: tidb.servicePlan,
    cloudProvider: tidb.cloudProvider
  })
  const resourcePoolQuery = useResourcePoolServiceGetResourcePool(
    tidb.resourcePoolId ?? '',
    { orgId, projectId },
    {
      query: {
        enabled: tidb.computed.isBYOC && !!tidb.resourcePoolId && !!orgId && !!projectId,
        retry: 1,
        refetchOnWindowFocus: false
      },
      request: SILENT_BYOC_QUERY_REQUEST
    }
  )
  const isDualLayerDataEncryptionEnabled = !tidb.dualLayerDataEncryption?.noEncryption
  const isCMEK = !!tidb.dualLayerDataEncryption?.cmek
  const resourcePoolName = tidb.resourcePoolDisplayName || resourcePoolQuery.data?.displayName || tidb.resourcePoolId
  const highAvailability =
    getHADescription(tidb.highAvailabilityType) ||
    (tidb.computed.isBYOC ? getResourcePoolHADescription(resourcePoolQuery.data?.highAvailabilityType) : '')
  return (
    <PropertyCard
      p="xl"
      {...rootProps}
      title={tidb.displayName}
      sx={{ position: 'relative', maxWidth: 416 }}
      labelProps={{ miw: 120 }}
    >
      {isLoading && (
        <Stack gap="sm">
          <Skeleton h={20} /> <Skeleton h={20} /> <Skeleton h={20} />
        </Stack>
      )}
      {!isLoading && (
        <>
          <PropertyCard.Item label="Instance ID" valueProps={{ sx: { display: 'flex', alignItems: 'center' } }}>
            {tidb.tidbId}
            <CopyActionIcon
              text={tidb.tidbId ?? ''}
              actionIconProps={{ size: 22, variant: 'subtle', ml: 6 }}
              iconProps={{ size: 14, c: 'carbon.7' }}
              data-mp-event={'Instance ID Copy Button Clicked'}
            />
          </PropertyCard.Item>
          <PropertyCard.Item label="Status">
            <ClusterStatusWithRestoreProgress cluster={tidb} />
          </PropertyCard.Item>
          <PropertyCard.Item label="Plan">
            <ServicePlanTag servicePlan={tidb.computed.isCassandra ? 'Cassandra Integration' : tidb.servicePlan} />
          </PropertyCard.Item>
          <PropertyCard.Item label="Cloud Provider">{getCloudProviderLabel(tidb.cloudProvider)}</PropertyCard.Item>
          <PropertyCard.Item label="Region">{tidb.regionDisplayName}</PropertyCard.Item>
          {tidb.computed.isBYOC && (
            <PropertyCard.Item label="Resource Pool">
              {tidb.resourcePoolId ? (
                <Box
                  component={Link}
                  to={`/byoc/resource-pools/${tidb.resourcePoolId}${location.search}`}
                  c="peacock.7"
                >
                  {resourcePoolName}
                </Box>
              ) : (
                '-'
              )}
            </PropertyCard.Item>
          )}
          {isDataEncryptionFeatEnabled && isDualLayerDataEncryptionEnabled && (
            <PropertyCard.Item label="Dual-Layer Data Encryption" labelProps={{ w: 120 }}>
              {isCMEK ? (
                <Flex align="center" gap={4} sx={{ position: 'relative', wordBreak: 'break-word' }}>
                  Enabled with Customer-Managed Encryption Key (CMEK)
                  <HoverCard withArrow shadow="md" position="bottom-start">
                    <HoverCard.Target>
                      <IconInfoCircle size={16} c="carbon.8" sx={{ position: 'absolute', top: 2, right: -2 }} />
                    </HoverCard.Target>
                    <HoverCard.Dropdown>
                      More details can be found in the <Link to={`/tidbs/${tidb.tidbId}/security`}>Security</Link>.
                    </HoverCard.Dropdown>
                  </HoverCard>
                </Flex>
              ) : (
                <Box sx={{ wordBreak: 'break-word' }}>Enable with Service-Managed Encryption Key</Box>
              )}
            </PropertyCard.Item>
          )}
          <PropertyCard.Item label="High Availability">{highAvailability || '-'}</PropertyCard.Item>
          <PropertyCard.Item label="Created at">{<TimeComponent time={tidb.createTime ?? ''} />}</PropertyCard.Item>
          {!tidb.computed.isCassandra && (
            <PropertyCard.Item label="Created by">{truncateStr(tidb.creator || '', 30)}</PropertyCard.Item>
          )}
        </>
      )}
    </PropertyCard>
  )
}