import { Card, Loader } from '@tidbcloud/uikit'
import React, { useEffect } from 'react'

import config from 'config'
import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import { dashboardUrl } from 'dbaas/services/openapi'
import { useGetMetricsSourceURLForCluster } from 'dbaas/services/useO11YQuery'
import useStores from 'dbaas/stores/useStores'
import { isCookieAuthEnabled, type DataPlaneHeadersInput } from 'dbaas/utils/o11y-auth'

import { ClusterPageShell } from '../../components'
import { isClusterInvalid, PausedStatus } from '../../components/PausedStatus'

import CalibrateResourcePage from './Page'
import { CalibrateResourceProvider } from './utils/context'
import { getCalibrateResourceContext } from './utils/context-impl'

const CalibrateResource: React.FC<React.PropsWithChildren<{ cluster: SharedCluster }>> = ({ cluster }) => {
  useEffect(() => {
    document.title = `${config.PAGE_TITLE_PREFIX}Calibrate Resource`
  }, [])
  const {
    store: {
      tenantData: { id: orgId },
      activeProjectId
    }
  } = useStores()
  const cookieEnabled = isCookieAuthEnabled()
  const apiPrefix = dashboardUrl(orgId, cluster.id, false) + 'api'
  const {
    data: metricsApiPrefix,
    isLoading: isLoadingMetricsURL,
    metricRequestOptions
  } = useGetMetricsSourceURLForCluster(orgId, activeProjectId, cluster)

  const headerInput: DataPlaneHeadersInput | undefined = cookieEnabled
    ? {
        regionId: cluster.computed.isDedicated ? cluster.regionId : `${cluster.provider}-${cluster.regionId}`,
        bizType: cluster.computed.isServerless ? config.O11Y_DEVTIER_BIZ_TYPE : config.O11Y_DEDICATED_BIZ_TYPE,
        orgId,
        clusterId: cluster.id,
        projectId: activeProjectId
      }
    : undefined

  return (
    <ClusterPageShell title="Calibrate Resource">
      {isClusterInvalid(cluster) ? (
        <Card shadow="none" h="calc(100vh - 152px)">
          <PausedStatus
            cluster={cluster}
            featureName="Calibrate Resource"
            featureDesc={`Calibrate resource allows you to estimate the capacity of the cluster in request units (RU), and may
                deviate from actual capacity.
                Please note the "estimated capacity" refers to a result that is measured by hardware specs or past
                statistics,
                and may deviate from actual capacity.`}
          />
        </Card>
      ) : isLoadingMetricsURL ? (
        <Loader size="xs" />
      ) : (
        <CalibrateResourceProvider
          value={getCalibrateResourceContext({
            clusterId: cluster.id,
            apiPrefix,
            metricsApiPrefix: metricsApiPrefix ?? '',
            metricsRequestOptions: cookieEnabled ? { cookieEnabled: true, headerInput } : undefined,
            metricRequestOptions
          })}
        >
          <CalibrateResourcePage />
        </CalibrateResourceProvider>
      )}
    </ClusterPageShell>
  )
}

// use React.memo to prevent re-rendering when the cluster is updating periodically
export default React.memo(CalibrateResource, (prevProps, nextProps) => prevProps.cluster.id === nextProps.cluster.id)