import { DownOutlined } from '@ant-design/icons'
import {
  Card,
  Descriptions,
  Button,
  Space,
  Divider,
  FormInstance,
  Modal,
  Progress,
  Table,
  Typography,
  Tag,
  Menu,
  Dropdown,
  Alert,
  Tooltip
} from 'antd'
import { useCallback, useMemo, useRef, useState } from 'react'
import { Link } from 'react-router-dom'

import {
  operationControllerCreateInstance,
  operationControllerPreviewInstance,
  useCloudConfigControllerSearchClusterComponents,
  useGetClusterComponents
} from 'apiClient/services/devops'
import {
  CloudConfigControllerSearchClusterComponentsClusterType,
  CloudconfigClusterComponentVersion,
  CloudconfigClusterType,
  ClusterClusterComponent,
  ClusterGetClusterResp,
  OperationActionStartPolicy,
  OperationCreateInstanceReq,
  OperationOperationTarget
} from 'apiClient/services/devops/interface'
import ModalForm from 'components/ModalForm'
import { format } from 'utils/time'

import CreateOperation from '../../Devops/Operations/CreateOperation'
import CreateInstanceForm, {
  CreateInstanceFormType,
  AppendCategoryFromDeployType
} from '../../Devops/Operations/Forms/CreateInstanceForm'

import { useAzFaultActiveAz } from './AzFaultActiveAlert'
import ChangeImageOperation from './Operations/Image'
import ImageController from './Operations/Image/ImageController'
import CreateMigrationCluster from './Operations/Migrate/CreateMigrationCluster'
import MigratePrivateLink from './Operations/Migrate/MigratePrivateLink'
import PremiumUpgrade from './Operations/PremiumUpgrade'
import ScaleComponentOperation from './Operations/Scale'
import UpgradeOperation from './Operations/Upgrade'
import ScaleModalForm from './ScaleComponentsModalForm'

const { Text, Title } = Typography

const DEFAULT_RESOURCE_POOL_SERVICE_PLANS = ['Premium', 'BYOC', 'Essential_V2']
const RESOURCE_POOL_COMPONENT_GROUP_PAGE_SIZE = 20
const RESOURCE_POOL_IMAGE_TAGS_PAGE_SIZE = 500

const getComponentName = (componentType?: string) =>
  componentType?.replace(/^COMPONENT_TYPE_/, '').toLowerCase()

const getImageTagsByComponent = (
  items?: CloudconfigClusterComponentVersion[]
) => {
  const imageTagsByComponent = new Map<string, string[]>()

  items?.forEach((item) => {
    if (!item.component_name || !item.effective_image_tag) {
      return
    }

    const imageTags = imageTagsByComponent.get(item.component_name) || []

    if (!imageTags.includes(item.effective_image_tag)) {
      imageTags.push(item.effective_image_tag)
    }

    imageTagsByComponent.set(item.component_name, imageTags)
  })

  return imageTagsByComponent
}

const renderImageTags = (imageTags?: string[], loading?: boolean) => {
  if (loading) {
    return 'Loading...'
  }

  if (!imageTags?.length) {
    return '-'
  }

  return (
    <Space direction="vertical" size={2}>
      {imageTags.map((imageTag) => (
        <Text key={imageTag}>{imageTag}</Text>
      ))}
    </Space>
  )
}

export const BasicInfo: React.FC<
  React.PropsWithChildren<{
    cluster: ClusterGetClusterResp
    reload: () => Promise<void>
    hideSetDefaultResourcePoolAction?: boolean
  }>
> = ({ cluster, reload, hideSetDefaultResourcePoolAction }) => {
  const [scaleModalVisible, setScaleModalVisible] = useState(false)
  const [advisoryProgress, setAdvisoryProgress] = useState<number | null>(null)
  const progressTimerRef = useRef<ReturnType<typeof setInterval> | null>(null)
  const [
    createMigrationClusterModalVisible,
    setCreateMigrationClusterModalVisible
  ] = useState(false)
  const [migratePrivateLinkModalVisible, setMigratePrivateLinkModalVisible] =
    useState(false)

  const onScaleModalClose = useCallback(() => {
    setScaleModalVisible(false)
  }, [])

  const [scaleState, setScaleState] = useState(false)
  const [scaleInfo, setScaleInfo] = useState<string>(``)
  const { data: componentsInfo } = useGetClusterComponents(cluster.id!, {
    query: {
      enabled: cluster.deploy_type !== 'DEPLOY_TYPE_RESOURCE_POOL'
    }
  })
  const azFaultActiveAz = useAzFaultActiveAz(
    cluster.id,
    cluster.deploy_type === 'DEPLOY_TYPE_DEDICATED'
  )
  const isResourcePool =
    cluster.deploy_type?.toLowerCase().includes('resource_pool') ?? false
  const {
    data: resourcePoolImageTags,
    isFetching: resourcePoolImageTagsLoading
  } = useCloudConfigControllerSearchClusterComponents(
    {
      cluster_id: cluster.id || '',
      cluster_type:
        CloudConfigControllerSearchClusterComponentsClusterType.SHARED_POOL,
      logical_region: cluster.logical_region || '',
      page: 1,
      per_page: RESOURCE_POOL_IMAGE_TAGS_PAGE_SIZE
    },
    {
      query: {
        enabled: isResourcePool && !!cluster.id && !!cluster.logical_region,
        refetchInterval: false,
        refetchIntervalInBackground: false,
        refetchOnWindowFocus: false
      }
    }
  )
  const imageTagsByComponent = useMemo(
    () => getImageTagsByComponent(resourcePoolImageTags?.data.items),
    [resourcePoolImageTags]
  )
  const supportsSetDefaultResourcePoolAction =
    cluster.deploy_type === 'DEPLOY_TYPE_RESOURCE_POOL' &&
    DEFAULT_RESOURCE_POOL_SERVICE_PLANS.includes(cluster.service_plan || '') &&
    !hideSetDefaultResourcePoolAction
  const defaultForTenants = Array.isArray(
    (cluster.resource_pool_details as any)?.default_orgs
  )
    ? (cluster.resource_pool_details as any).default_orgs
        .map((orgId: string | number) => String(orgId))
        .join(', ')
    : ''

  const onScaleOperation = async (payload: CreateInstanceFormType) => {
    const keysMap: { [key: string]: string } = {}
    Object.keys(payload.params).forEach((key) => {
      if (Array.isArray(payload.params[key])) {
        keysMap[key] = payload.params[key].join(',')
      } else {
        keysMap[key] = payload.params[key]
      }
    })
    const req: OperationCreateInstanceReq = {
      actions: payload.actions
        .filter((a) => a.choose)
        .map((val) => {
          return {
            name: val.name,
            start_policy:
              OperationActionStartPolicy[
                val.start_policy as keyof typeof OperationActionStartPolicy
              ],
            start_schedule_at: val.schedule_time
              ? val.schedule_time.unix()
              : undefined
          }
        }),
      operation: payload.operation,
      params: keysMap,
      reason: payload.reason,
      type: payload.type
    }
    const doCreate = async () => {
      try {
        const data = await operationControllerCreateInstance(req)
        const id = data.data.instance_id
        Modal.success({
          title: 'Info',
          content: (
            <div>
              <p>
                Operation <b>{id}</b> is awaiting approval and can only be
                started after approval.
                <br></br>
                <br></br>
                To check the progress of this operation, please refer to the{' '}
                <a href={`/operations/${id}`}>Detail</a> page.
              </p>
            </div>
          ),
          onOk() {}
        })
        setScaleState(false)
        reload()
      } catch (error) {
        Modal.error({
          title: error.response.data.errcode,
          content: error.response.data.errmsg
        })
        if (reload) {
          reload()
        }
      }
    }

    setAdvisoryProgress(0)
    progressTimerRef.current = setInterval(() => {
      setAdvisoryProgress((prev) => {
        if (prev === null) return null
        return Math.min(prev + (90 - prev) * 0.08 + 0.5, 90)
      })
    }, 500)

    try {
      const preview = await operationControllerPreviewInstance(req)
      const warnings = (preview.data.advisories ?? []).filter(
        (a) => a.level === 'warning'
      )
      if (warnings.length > 0) {
        Modal.confirm({
          title: 'Advisory',
          content: (
            <div>
              {warnings.map((w, i) => (
                <Alert
                  key={i}
                  type="warning"
                  message={w.message}
                  style={{ marginBottom: 8 }}
                  showIcon
                />
              ))}
              <p style={{ marginTop: 8 }}>Do you still want to proceed?</p>
            </div>
          ),
          onOk: doCreate,
          onCancel() {}
        })
        return
      }
    } catch (err) {
      Modal.confirm({
        title: 'Advisory Check Failed',
        content: (
          <div>
            <Alert
              type="error"
              message={err?.response?.data?.errmsg ?? String(err)}
              style={{ marginBottom: 8 }}
              showIcon
            />
            <p style={{ marginTop: 8 }}>Do you still want to proceed?</p>
          </div>
        ),
        onOk: doCreate,
        onCancel() {}
      })
      return
    } finally {
      if (progressTimerRef.current) {
        clearInterval(progressTimerRef.current)
        progressTimerRef.current = null
      }
      setAdvisoryProgress(null)
    }

    await doCreate()
  }

  const onScaleComponents = async (values: ClusterClusterComponent) => {
    const { tidb, tikv, tiflash } = values
    let components = [
      {
        component_type: 'COMPONENT_TYPE_TIDB',
        node_profile_name:
          cluster?.cluster_components?.tidb?.node_profile?.name,
        storage_size_gi: 0,
        replicas: tidb?.replicas
      },
      {
        component_type: 'COMPONENT_TYPE_TIKV',
        node_profile_name:
          cluster?.cluster_components?.tikv?.node_profile?.name,
        storage_size_gi:
          cluster?.cluster_components?.tikv?.node_profile?.storage_gi,
        replicas: tikv?.replicas
      }
    ]

    if (cluster?.cluster_components?.tiflash?.replicas) {
      components.push({
        component_type: 'COMPONENT_TYPE_TIFLASH',
        node_profile_name:
          cluster?.cluster_components?.tiflash?.node_profile?.name,
        storage_size_gi:
          cluster?.cluster_components.tiflash?.node_profile?.storage_gi,
        replicas: tiflash?.replicas
      })
    } else if (tiflash?.replicas) {
      components.push({
        component_type: 'COMPONENT_TYPE_TIFLASH',
        node_profile_name: tiflash?.node_profile?.name,
        storage_size_gi: tiflash?.node_profile?.storage_gi,
        replicas: tiflash?.replicas
      })
    }
    setScaleInfo(JSON.stringify({ components: components }))
    setScaleModalVisible(false)
    setScaleState(true)

    // return scaleTenantCluster(
    //   cluster.tenant_id?.toString() || '',
    //   cluster?.id?.toString() || '',
    //   { components } as FormsScaleComponentReq
    // ).then(() => {
    //   setScaleModalVisible(false)
    //   reload()
    // })
  }

  const ScaleButton: React.FC<
    React.PropsWithChildren<{ cluster: ClusterGetClusterResp }>
  > = ({ cluster }) => {
    const handleOpen = () => {
      setScaleModalVisible(true)
    }
    return (
      <div>
        <a
          onClick={handleOpen}
          style={{
            display: 'block',
            width: '100%',
            textAlign: 'left'
          }}
        >
          Scale
        </a>
      </div>
    )
  }

  const renderScaleFormFields = useCallback(
    (form: FormInstance) => {
      return (
        <CreateInstanceForm
          form={form}
          target_type={OperationOperationTarget.cluster}
          target_id={cluster.id}
          init_categories={AppendCategoryFromDeployType(
            [],
            cluster.deploy_type
          )}
          op={`scale`}
          json={scaleInfo}
        />
      )
    },
    [scaleState]
  )

  const handleCancelCreate = useCallback(() => {
    setScaleState(false)
    if (reload) {
      reload()
    }
  }, [])

  const isAwsProvider = (cluster.provider || '').toLowerCase() === 'aws'

  const menu = (
    <Menu>
      {cluster.deploy_type === 'DEPLOY_TYPE_SERVERLESS' ? (
        <></>
      ) : cluster.deploy_type === 'DEPLOY_TYPE_RESOURCE_POOL' ? (
        <>
          <Menu.Item>
            <PremiumUpgrade
              cluster={cluster}
              reload={reload}
              mode="resource-pool"
            />
          </Menu.Item>
          <Menu.Item>
            <ImageController clusterType="SHARED_POOL"></ImageController>
          </Menu.Item>
          {supportsSetDefaultResourcePoolAction && (
            <Menu.Item>
              <CreateOperation
                target_type={OperationOperationTarget.resource_pool}
                target_id={cluster.id}
                reload={reload}
                cluster={cluster}
                op="SetDefaultResourcePool"
                bottom_name="Set Default"
              ></CreateOperation>
            </Menu.Item>
          )}
          <Menu.Item>
            <CreateOperation
              target_type={OperationOperationTarget.resource_pool}
              target_id={cluster.id}
              reload={reload}
              cluster={cluster}
              op="DeleteResourcePool"
              bottom_name="Delete"
            ></CreateOperation>
          </Menu.Item>
        </>
      ) : cluster.deploy_type === 'DEPLOY_TYPE_NEXTGEN' ? (
        <>
          <Menu.Item>
            <PremiumUpgrade cluster={cluster} reload={reload} />
          </Menu.Item>
          <Menu.Item>
            <ImageController clusterType="LOGICAL_CLUSTER"></ImageController>
          </Menu.Item>
        </>
      ) : (
        <>
          <Menu.SubMenu title="Scale & Pause" key="sp-submenu">
            <Menu.Item>
              <ScaleButton cluster={cluster} />
            </Menu.Item>
            <Menu.Item>
              <CreateOperation
                target_type={OperationOperationTarget.cluster}
                target_id={cluster.id}
                reload={reload}
                cluster={cluster}
                op="pause"
              ></CreateOperation>
            </Menu.Item>
          </Menu.SubMenu>
          <Menu.SubMenu title="Scale (New)" key="scale-submenu">
            <Menu.Item>
              <ScaleComponentOperation
                componentType={'TiDB'}
                components={componentsInfo?.data!}
                cluster={cluster}
                cluster_id={cluster.id!}
                onScaleOperation={onScaleOperation}
                reload={reload}
              ></ScaleComponentOperation>
            </Menu.Item>
            <Menu.Item>
              <ScaleComponentOperation
                componentType="TiKV"
                components={componentsInfo?.data!}
                cluster={cluster}
                cluster_id={cluster.id!}
                onScaleOperation={onScaleOperation}
                reload={reload}
              ></ScaleComponentOperation>
            </Menu.Item>
          </Menu.SubMenu>
          <Menu.SubMenu title="Upgrade" key="upgrade-submenu">
            <Menu.Item>
              <UpgradeOperation
                changeType="tidb"
                clusterType={CloudconfigClusterType.DEDICATED_TIDB}
                cluster_id={cluster.id!}
              ></UpgradeOperation>
            </Menu.Item>
            <Menu.Item>
              <UpgradeOperation
                changeType="tiproxy"
                clusterType={CloudconfigClusterType.DEDICATED_TIDB}
                cluster_id={cluster.id!}
              ></UpgradeOperation>
            </Menu.Item>
            <Menu.Item>
              <UpgradeOperation
                changeType="data-migration"
                clusterType={CloudconfigClusterType.DEDICATED_TIDB}
                cluster_id={cluster.id!}
              ></UpgradeOperation>
            </Menu.Item>
          </Menu.SubMenu>
          <Menu.Item>
            <ImageController clusterType="DEDICATED_TIDB"></ImageController>
          </Menu.Item>
          <Menu.SubMenu title="Migrate" key="migrate-submenu">
            <Menu.Item>
              <a
                onClick={() => {
                  setCreateMigrationClusterModalVisible(true)
                }}
                style={{
                  display: 'block',
                  width: '100%',
                  textAlign: 'left'
                }}
              >
                Create MigrationCluster
              </a>
            </Menu.Item>
            <Menu.Item>
              <a
                onClick={() => {
                  setMigratePrivateLinkModalVisible(true)
                }}
                style={{
                  display: 'block',
                  width: '100%',
                  textAlign: 'left'
                }}
              >
                Migrate PrivateLink
              </a>
            </Menu.Item>
          </Menu.SubMenu>
          <Menu.SubMenu title="AZ / Zonal Shift" key="az-zonal-submenu">
            <Menu.Item disabled={!isAwsProvider}>
              {isAwsProvider ? (
                <CreateOperation
                  target_type={OperationOperationTarget.cluster}
                  target_id={cluster.id}
                  reload={reload}
                  cluster={cluster}
                  op="OfflineAzWithZonalShiftForCluster"
                  bottom_name="Offline AZ"
                ></CreateOperation>
              ) : (
                <Tooltip title="仅支持 AWS 平台的集群">
                  <span
                    style={{
                      display: 'inline-block',
                      width: '100%',
                      color: 'rgba(0, 0, 0, 0.25)'
                    }}
                  >
                    Offline AZ
                  </span>
                </Tooltip>
              )}
            </Menu.Item>
            <Menu.Item disabled={!isAwsProvider}>
              {isAwsProvider ? (
                <CreateOperation
                  target_type={OperationOperationTarget.cluster}
                  target_id={cluster.id}
                  reload={reload}
                  cluster={cluster}
                  op="RecoverAzWithStopZonalShiftForCluster"
                  bottom_name="Recover AZ"
                ></CreateOperation>
              ) : (
                <Tooltip title="仅支持 AWS 平台的集群">
                  <span
                    style={{
                      display: 'inline-block',
                      width: '100%',
                      color: 'rgba(0, 0, 0, 0.25)'
                    }}
                  >
                    Recover AZ
                  </span>
                </Tooltip>
              )}
            </Menu.Item>
            <Menu.Item disabled={!isAwsProvider}>
              {isAwsProvider ? (
                <CreateOperation
                  target_type={OperationOperationTarget.cluster}
                  target_id={cluster.id}
                  reload={reload}
                  cluster={cluster}
                  op="UpdateZonalShiftForCluster"
                  bottom_name="Update Zonal Shift"
                ></CreateOperation>
              ) : (
                <Tooltip title="仅支持 AWS 平台的集群">
                  <span
                    style={{
                      display: 'inline-block',
                      width: '100%',
                      color: 'rgba(0, 0, 0, 0.25)'
                    }}
                  >
                    Update Zonal Shift
                  </span>
                </Tooltip>
              )}
            </Menu.Item>
          </Menu.SubMenu>
        </>
      )}
      <Menu.Item>
        <CreateOperation
          target_type={
            cluster.deploy_type === 'DEPLOY_TYPE_RESOURCE_POOL'
              ? OperationOperationTarget.resource_pool
              : OperationOperationTarget.cluster
          }
          target_id={cluster.id}
          reload={reload}
          cluster={cluster}
          op="other Operations"
        ></CreateOperation>
      </Menu.Item>
    </Menu>
  )
  return (
    <>
      <Card
        title={<Title level={4}>{cluster.name}</Title>}
        bordered={false}
        extra={
          <Dropdown overlay={menu}>
            <Button type="primary">
              Actions <DownOutlined />
            </Button>
          </Dropdown>
        }
      >
        <Descriptions>
          <Descriptions.Item label="ID">{cluster.id}</Descriptions.Item>
          {cluster.deploy_type === 'DEPLOY_TYPE_RESOURCE_POOL' && (
            <Descriptions.Item label="Default In Region">
              {cluster.resource_pool_details?.is_default === true ? (
                <Tag color="green">Yes</Tag>
              ) : cluster.resource_pool_details?.is_default === false ? (
                <Tag>No</Tag>
              ) : (
                '-'
              )}
            </Descriptions.Item>
          )}
          {cluster.deploy_type === 'DEPLOY_TYPE_RESOURCE_POOL' && (
            <Descriptions.Item label="Default For Tenants">
              {defaultForTenants || '-'}
            </Descriptions.Item>
          )}
          <Descriptions.Item label="Status">
            <Space>
              {cluster.status
                ? cluster.status.replace('USER_CLUSTER_STATUS_', '')
                : '-'}
              {azFaultActiveAz && (
                <Tag color="error">AZ Fault: {azFaultActiveAz}</Tag>
              )}
            </Space>
          </Descriptions.Item>
          <Descriptions.Item label="Version">
            {cluster.version}
          </Descriptions.Item>
          {cluster.deploy_type === 'DEPLOY_TYPE_NEXTGEN' && (
            <Descriptions.Item label="TiDB Tag">
              {cluster.nextgen_details?.tidb_tag || '-'}
            </Descriptions.Item>
          )}
          {cluster.deploy_type === 'DEPLOY_TYPE_RESOURCE_POOL' && (
            <Descriptions.Item label="TiKV Tag">
              {cluster.resource_pool_details?.tikv_tag || '-'}
            </Descriptions.Item>
          )}
          <Descriptions.Item label="Created At">
            {cluster.create_time ? format(cluster.create_time * 1000) : '-'}
          </Descriptions.Item>
          <Descriptions.Item label="Deploy Type">
            {cluster.deploy_type?.replace('DEPLOY_TYPE_', '')}
          </Descriptions.Item>
          {cluster.deploy_type !== 'DEPLOY_TYPE_DEDICATED' && (
            <Descriptions.Item label="Service Plan">
              {cluster.service_plan}
            </Descriptions.Item>
          )}
          {cluster.deploy_type === 'DEPLOY_TYPE_DEDICATED' && (
            <Descriptions.Item label="Component">
              {['tidb', 'tikv', 'pd', 'tiflash', 'tiproxy']
                .map((c: keyof ClusterClusterComponent) => {
                  const nodeInfo = cluster?.cluster_components?.[c]
                  let infoStr = ''
                  if (
                    nodeInfo &&
                    nodeInfo.replicas !== undefined &&
                    nodeInfo?.replicas > 0
                  ) {
                    infoStr = `${nodeInfo.replicas}-${c}-${nodeInfo.node_profile?.compute?.cpu}C${nodeInfo.node_profile?.compute?.memory_mi}G`
                    if (nodeInfo.node_profile?.storage_gi! > 0) {
                      infoStr += `-${nodeInfo.node_profile?.storage_gi}G`
                    }
                    if ((nodeInfo.storage_type?.length || 0) > 0) {
                      infoStr += ` (${nodeInfo.storage_type})`
                    }
                  }
                  return infoStr
                })
                .filter((s) => s !== '')
                .join(' / ')}
            </Descriptions.Item>
          )}
          <Descriptions.Item label="Provider">
            {cluster.provider}
          </Descriptions.Item>
          <Descriptions.Item label="Region">{cluster.region}</Descriptions.Item>
          {cluster.deploy_type === 'DEPLOY_TYPE_RESOURCE_POOL' && (
            <Descriptions.Item label="Logical Region">
              {cluster.logical_region}
            </Descriptions.Item>
          )}
        </Descriptions>
      </Card>

      {cluster.deploy_type === 'DEPLOY_TYPE_NEXTGEN' && (
        <Card
          title={<Title level={5}>Premium Instance Details</Title>}
          bordered={false}
        >
          <Alert
            message="Only TiDB and TiProxy are exclusive to Premium Instances. For other shared components, please refer to the Resource Pool Details page."
            type="info"
            showIcon
            style={{ marginBottom: 16 }}
          />
          <Descriptions>
            <Descriptions.Item label="Max RCU">
              {cluster.nextgen_details?.max_rcu}
            </Descriptions.Item>
            <Descriptions.Item label="Min RCU">
              {cluster.nextgen_details?.min_rcu}
            </Descriptions.Item>
            <Descriptions.Item label="Resource Pool ID">
              {cluster.nextgen_details?.resource_pool_id ? (
                <Link
                  to={`/orgs/${cluster.tenant_id}/clusters/${cluster.nextgen_details.resource_pool_id}`}
                >
                  {cluster.nextgen_details.resource_pool_id}
                </Link>
              ) : (
                '-'
              )}
            </Descriptions.Item>
            <Descriptions.Item label="TiKV Group ID">
              {cluster.nextgen_details?.tikv_group_id || '-'}
            </Descriptions.Item>
            <Descriptions.Item label="Dataplane ID">
              {cluster.nextgen_details?.data_plane_id}
            </Descriptions.Item>
          </Descriptions>
        </Card>
      )}

      {isResourcePool && (
        <Card
          title={<Title level={5}>Resource Pool Details</Title>}
          bordered={false}
        >
          <Descriptions>
            <Descriptions.Item label="Instance Limit">
              {cluster.resource_pool_details?.instance_limit}
            </Descriptions.Item>
            <Descriptions.Item label="CIDR">
              {cluster.resource_pool_details?.cidr}
            </Descriptions.Item>
          </Descriptions>
          <Alert
            message={
              <>
                To modify image tags, please click <Text strong>Actions</Text> →{' '}
                <Text strong>Modify Image</Text>
              </>
            }
            type="info"
            showIcon
            style={{ marginBottom: 16 }}
          />
          <Table
            columns={[
              {
                title: 'Component',
                dataIndex: 'component_type'
              },
              {
                title: 'ID',
                dataIndex: 'id'
              },
              {
                title: 'Phase',
                dataIndex: 'phase'
              },
              {
                title: 'Max Node Count',
                dataIndex: 'max_node_count'
              },
              {
                title: 'Min Node Count',
                dataIndex: 'min_node_count'
              },
              {
                title: 'Node Count',
                dataIndex: 'node_count'
              },
              {
                title: 'CPU cores',
                dataIndex: 'cpu'
              },
              {
                title: 'Memory (GiB)',
                dataIndex: 'memory_gi'
              },
              {
                title: 'Version',
                dataIndex: 'version',
                render: (version: string) => version || '-'
              },
              {
                title: 'Image tags',
                dataIndex: 'component_type',
                render: (componentType: string) =>
                  renderImageTags(
                    imageTagsByComponent.get(
                      getComponentName(componentType) || ''
                    ),
                    resourcePoolImageTagsLoading
                  )
              },
              {
                title: 'Storage Info',
                dataIndex: 'storages',
                // render: marshal struct to json
                render: (storages: any[]) => {
                  if (!storages || storages.length === 0) {
                    return '-'
                  }
                  return storages
                    .map(
                      (s: any) =>
                        `${s.name}: ${s.type} ${s.size_gi} GiB ${s.iops} iops${
                          s.throughput_mbs ? ` ${s.throughput_mbs} Mbs` : ''
                        }`
                    )
                    .join(' | ')
                }
              }
            ]}
            dataSource={
              cluster.resource_pool_details?.shared_pool?.component_groups
            }
            pagination={{
              defaultPageSize: RESOURCE_POOL_COMPONENT_GROUP_PAGE_SIZE
            }}
            size="small"
          />
          <Table
            columns={[
              {
                title: 'Premium Instance',
                dataIndex: 'id',
                render: (id: string) => (
                  <Link to={`/orgs/${cluster.tenant_id}/clusters/${id}`}>
                    {id}
                  </Link>
                )
              },
              {
                title: 'Cluster Name',
                dataIndex: 'name'
              },
              {
                title: 'TiKV Group ID',
                dataIndex: 'tikv_group_id',
                render: (tikvGroupId: string) => tikvGroupId || '-'
              }
            ]}
            dataSource={cluster.resource_pool_details?.logical_clusters}
            size="small"
          />
        </Card>
      )}

      {cluster.deploy_type === 'DEPLOY_TYPE_SERVERLESS' && (
        <Card
          title={<Title level={5}>Serverless Details</Title>}
          bordered={false}
        >
          <Descriptions>
            <Descriptions.Item label="Keyspace Token">
              {cluster.serverless_details?.keyspace_token || '-'}
            </Descriptions.Item>
            <Descriptions.Item label="Keyspace ID">
              {cluster.serverless_details?.keyspace_id ?? '-'}
            </Descriptions.Item>
            <Descriptions.Item label="Enable Customer Alert">
              {cluster.serverless_details?.enable_customer_alert === true
                ? 'True'
                : cluster.serverless_details?.enable_customer_alert === false
                ? 'False'
                : '-'}
            </Descriptions.Item>
            <Descriptions.Item label="RU">
              {cluster.serverless_details?.request_unit ?? '-'}
            </Descriptions.Item>
            <Descriptions.Item label="Row Storage">
              {cluster.serverless_details?.row_storage !== undefined
                ? `${cluster.serverless_details.row_storage.toFixed(2)} MiB`
                : '-'}
            </Descriptions.Item>
            <Descriptions.Item label="Column Storage">
              {cluster.serverless_details?.column_storage !== undefined
                ? `${cluster.serverless_details.column_storage.toFixed(2)} MiB`
                : '-'}
            </Descriptions.Item>
          </Descriptions>
        </Card>
      )}

      {cluster.deploy_type === 'DEPLOY_TYPE_SERVERLESS' && (
        <Card
          title={<Title level={5}>Serverless Cluster Resource Config</Title>}
          bordered={false}
        >
          <Descriptions>
            <Descriptions.Item label="TiDB Pool">
              {cluster.serverless_details?.resource_config?.tidb_pool || '-'}
            </Descriptions.Item>
            <Descriptions.Item label="Min TiDB Replicas">
              {cluster.serverless_details?.resource_config?.min_tidb_replicas ||
                '-'}
            </Descriptions.Item>
            <Descriptions.Item label="Min RCU">
              {cluster.serverless_details?.resource_config?.min_rcu || '-'}
            </Descriptions.Item>
            <Descriptions.Item label="RU Mode">
              {cluster.serverless_details?.resource_config?.ru_mode || '-'}
            </Descriptions.Item>
            <Descriptions.Item label="Max TiDB Replicas">
              {cluster.serverless_details?.resource_config?.max_tidb_replicas ||
                '-'}
            </Descriptions.Item>
            <Descriptions.Item label="Max RCU">
              {cluster.serverless_details?.resource_config?.max_rcu || '-'}
            </Descriptions.Item>
            <Descriptions.Item label="Cluster Plan">
              {cluster.serverless_details?.resource_config?.cluster_plan || '-'}
            </Descriptions.Item>
            <Descriptions.Item label="Kubernetes">
              {cluster.serverless_details?.resource_config?.kubernetes || '-'}
            </Descriptions.Item>
            <Descriptions.Item label="Zone Redundancy">
              {cluster.serverless_details?.resource_config
                ?.zone_redundant_enabled === true
                ? 'True'
                : cluster.serverless_details?.resource_config
                    ?.zone_redundant_enabled === false
                ? 'False'
                : '-'}
            </Descriptions.Item>
          </Descriptions>
        </Card>
      )}

      {cluster.deploy_type === 'DEPLOY_TYPE_SERVERLESS' && (
        <Card title={<Title level={5}>Branches</Title>} bordered={false}>
          <Table
            columns={[
              {
                title: 'Name',
                dataIndex: 'display_name'
              },
              {
                title: 'ID',
                dataIndex: 'id'
              },
              {
                title: 'Status',
                dataIndex: 'status'
              },
              {
                title: 'Creation Time',
                dataIndex: 'create_time',
                render: (create_time: number) => format(create_time * 1000)
              },
              {
                title: 'Update Time',
                dataIndex: 'update_time',
                render: (update_time: number) => format(update_time * 1000)
              }
            ]}
            dataSource={cluster.serverless_details?.branches}
            size="small"
          />
        </Card>
      )}

      {cluster && (
        <ScaleModalForm
          name="scale_cluster_components"
          open={scaleModalVisible}
          org_id={cluster.tenant_id?.toString() || ''}
          cluster={cluster}
          onSubmit={onScaleComponents}
          onCancel={onScaleModalClose}
        />
      )}
      <ModalForm<CreateInstanceFormType>
        visible={!!scaleState}
        name="user"
        title={'Create Operation'}
        getFields={renderScaleFormFields}
        onSubmit={onScaleOperation}
        onCancel={handleCancelCreate}
        width={1000}
        destoryOnClose={true}
      />

      {cluster && (
        <CreateMigrationCluster
          cluster_id={cluster.id!}
          cluster={cluster}
          open={createMigrationClusterModalVisible}
          onClose={() => setCreateMigrationClusterModalVisible(false)}
        />
      )}

      {cluster && (
        <MigratePrivateLink
          cluster_id={cluster.id!}
          open={migratePrivateLinkModalVisible}
          onClose={() => setMigratePrivateLinkModalVisible(false)}
        />
      )}
      <Modal
        open={advisoryProgress !== null}
        footer={null}
        closable={false}
        title="Running advisory checks..."
      >
        <Progress percent={Math.round(advisoryProgress ?? 0)} status="active" />
        <p style={{ textAlign: 'center', marginTop: 12, color: '#666' }}>
          Performing soft checks, please wait...
        </p>
      </Modal>
    </>
  )
}