import { zodResolver } from '@hookform/resolvers/zod'
import { Alert, Box, Button, Divider, Group, notifier, Paper, Stack, Typography } from '@tidbcloud/uikit'
import { FormErrorMessage, FormNumberInput, FormSelect, FormTextInput } from '@tidbcloud/uikit/biz'
import { useMemoizedFn } from 'ahooks'
import { observer } from 'mobx-react'
import { useEffect, useId, useMemo, useState } from 'react'
import { FormProvider, useForm } from 'react-hook-form'
import { useHistory, useLocation, useParams } from 'react-router-dom'
import * as z from 'zod'

import { HeroComponent, isHeroQueryReady } from 'dbaas/components/Measurement'
import { DelayedPageLoader } from 'dbaas/components/Placeholder'
import { PageAccessGuard } from 'dbaas/contexts/access-control'
import { renderNodes, renderStorage } from 'dbaas/features/ClusterManagement/common'
import { TI_PROXY_AVALIABLE_NODE_COUNTS, useCheckArch2024ProjectExp } from 'dbaas/features/ClusterManagement/dedicated'
import { WaringForSpecInSummary } from 'dbaas/features/ClusterManagement/dedicated/node/NodeSizes/WarningForSpecInSummary'
import { useOrgProjectClusterIds } from 'dbaas/features/Common'
import { CloudProviderLabelConst } from 'dbaas/features/Project'
import { HeadLabel } from 'dbaas/screens/ClustersV2/new/components'
import { ClusterNodeSizes } from 'dbaas/screens/ClustersV2/new/Dedicated/FormContent/NodeSizes'
import { useFetchClusterCosts } from 'dbaas/screens/ClustersV2/new/Dedicated/helpers'
import {
  NewClusterPricingSummary,
  NodeSizeSkeleton,
  useNodeProfileTargets
} from 'dbaas/screens/ClustersV2/new/Dedicated/SumCard/SumCard'
import { CreationFormValueState, renderStorageType, useGetNodeProfiles } from 'dbaas/screens/ClustersV2/new/helpers'
import { CMEKActiveAlert } from 'dbaas/screens/ClustersV2/new/Wrapper/CreationForm'
import { useSetUpRegionalCidr } from 'dbaas/screens/NextGen/my-tidb-creation/plans/dedicated/hooks/use-setup-regional-cidr'
import { ProjectCidrSection } from 'dbaas/screens/NextGen/my-tidb-creation/plans/dedicated/sections/ProjectCidrSection'
import { RestoreLayout } from 'dbaas/screens/Restore/RestoreLayout'
import { RestoreSummaryCard, RestoreSummaryItem, RestoreSummarySection } from 'dbaas/screens/Restore/RestoreSummary'
import { useCustomerManagedEncryptionKeyServiceListCustomerManagedEncryptionKeys } from 'dbaas/services/api-clients/v2023/dedicated/v1beta1'
import { useGetRecycleBinCluster, useListBackups, useRestoreBackup } from 'dbaas/services/dataflow'
import {
  DataflowBackup,
  DataflowComponentType,
  DataflowRestoreMode,
  DataflowSimpleClusterComponent
} from 'dbaas/services/dataflow/interface'
import { getErrorMessage } from 'dbaas/services/errorCodes'
import useStores from 'dbaas/stores/useStores'
import { cidrRegEx } from 'dbaas/utils/regex'
import { clusterNameRules, tidbPortRules } from 'dbaas/utils/validationRules'

import { renderSpecVersion, useSpecVersionEnabled } from '../Cluster/OverviewV2/helpers'

import { getDedicatedRestoreRegionOptions, getPreferredDedicatedRestoreRegion } from './RestoreForDedicated.helpers'

interface RestoreFormData {
  restore_mode: DataflowRestoreMode
  id: string
  dedicated: CreationFormValueState['dedicated']
}

const createSchema = () => {
  return z
    .object({
      restore_mode: z.string(),
      id: z.string({ required_error: 'Required' }).min(1, 'Required'),
      dedicated: z.object({
        provider: z.string(),
        name: z
          .string({ required_error: clusterNameRules.required })
          .regex(clusterNameRules.pattern.value, clusterNameRules.pattern.message),
        region: z.string(),
        projectCIDR: z.string().trim().regex(cidrRegEx, 'Please enter a valid CIDR.').optional(),
        cmekId: z.string().optional(),
        port: z
          .number({ required_error: tidbPortRules.required })
          .min(tidbPortRules.min.value, tidbPortRules.min.message)
          .max(tidbPortRules.max.value, tidbPortRules.max.message)
          .refine((v) => Number(v) !== 10080, {
            message: 'Invalid port number, valid port number is from 1024 to 65535 except for port 10080'
          }),
        sizes: z.object({
          tidb: z.object({
            profileName: z.string({ required_error: 'Please choose a vCPU + RAM size.' }),
            replicas: z.number(),
            tiproxySetting: z
              .object({
                nodeSpecKey: z.string().optional(),
                nodeCount: z.number().refine((v) => TI_PROXY_AVALIABLE_NODE_COUNTS.includes(v), '')
              })
              .optional()
          }),
          tikv: z.object({
            profileName: z.string({ required_error: 'Please choose a vCPU + RAM size.' }),
            replicas: z.number().refine((v) => v % 3 === 0, 'The number of nodes must be a multiple of 3.'),
            storageGiB: z.number(),
            storageType: z.string().optional(),
            raftStoreIops: z.number().optional(),
            dataStoreIops: z.number().optional()
          }),
          tiflash: z.object({
            profileName: z.string().nullable().optional(),
            replicas: z.number().optional(),
            storageGiB: z.number().optional(),
            storageType: z.string().optional()
          })
        })
      })
    })
    .passthrough()
}

interface RestoreForDedicatedRecycleBinSummaryProps {
  formId: string
  cluster: {
    region: string
    provider: string
    id: string
    name: string
    projectId: string
    orgId: string
  }
  backupName: string
  cmekId?: string
  provider: string
  region: string
  name: string
  port: number
  projectCIDR?: string
  cidrConfigured: boolean
  sizes: RestoreFormData['dedicated']['sizes']
  isLoading: boolean
  nodeGroupEnabled: boolean
  profileTargets: ReturnType<typeof useNodeProfileTargets>
  specVersionEnabled?: boolean
  costs: ReturnType<typeof useFetchClusterCosts>['costs']
  totalCost?: number | null
  costError: ReturnType<typeof useFetchClusterCosts>['error']
  restore: ReturnType<typeof useRestoreBackup>
  onCancel: () => void
  disableSubmit: boolean
  submitLoading: boolean
  isCalculating: boolean
}

function RestoreForDedicatedRecycleBinSummary({
  formId,
  cluster,
  backupName,
  cmekId,
  provider,
  region,
  name,
  port,
  projectCIDR,
  cidrConfigured,
  sizes,
  isLoading,
  nodeGroupEnabled,
  profileTargets,
  specVersionEnabled,
  costs,
  totalCost,
  costError,
  restore,
  onCancel,
  disableSubmit,
  submitLoading,
  isCalculating
}: RestoreForDedicatedRecycleBinSummaryProps) {
  return (
    <RestoreSummaryCard
      description="Your new cluster will be:"
      footer={
        <>
          <NewClusterPricingSummary
            error={getErrorMessage(costError)}
            totalCost={totalCost ?? 0}
            costsDetail={costs}
            mt="sm"
          />

          <Stack gap="md" mt="md">
            <Group justify="flex-end">
              <Button variant="default" onClick={onCancel} data-mp-event="Dedicated Restore Cancel Clicked">
                Cancel
              </Button>

              <Button
                type="submit"
                form={formId}
                data-mp-event="Dedicated Restore Submit Clicked"
                disabled={disableSubmit}
                loading={submitLoading}
                sx={{ flex: 1 }}
              >
                {submitLoading ? 'Fetching...' : isCalculating ? 'Calculating...' : 'Restore'}
              </Button>
            </Group>

            <FormErrorMessage message={getErrorMessage(restore.error, true)} />
          </Stack>
        </>
      }
    >
      <RestoreSummarySection title="Select Backup">
        <RestoreSummaryItem label="Plan" value="Dedicated" labelWidth={100} />
        <RestoreSummaryItem label="Cluster" value={cluster.name} labelWidth={100} />
        <RestoreSummaryItem label="Restore Mode" value="Snapshot Restore" labelWidth={100} />
        <RestoreSummaryItem label="Snapshot" value={backupName} labelWidth={100} />
      </RestoreSummarySection>

      <RestoreSummarySection title="Restore to a New Dedicated Cluster">
        <RestoreSummaryItem label="Provider" value={CloudProviderLabelConst[provider]} labelWidth={100} />
        <RestoreSummaryItem label="Region" value={region} labelWidth={100} />
        <RestoreSummaryItem label="Name" value={name || '-'} labelWidth={100} />
        {!cidrConfigured && <RestoreSummaryItem label="CIDR" value={projectCIDR || '-'} labelWidth={100} />}
        {cmekId && <RestoreSummaryItem label="CMEK ID" value={cmekId} labelWidth={100} />}
      </RestoreSummarySection>

      <Stack py="md">
        <RestoreSummaryItem
          label="TiDB"
          labelWidth={100}
          value={
            isLoading ? (
              <NodeSizeSkeleton />
            ) : (
              <Stack justify="flex-start" gap={8}>
                <Group gap={4}>
                  {profileTargets.tidb.label}
                  {renderSpecVersion(profileTargets.tidb.version, specVersionEnabled)}
                  <WaringForSpecInSummary
                    cpuNum={profileTargets.tidb.profile?.vCpu ?? 0}
                    memory={profileTargets.tidb.profile?.memorySizeGi ?? 0}
                  />
                </Group>
                <Box>
                  {nodeGroupEnabled ? 'Default Group: ' : ''}
                  {renderNodes(sizes?.tidb?.replicas)}
                </Box>
              </Stack>
            )
          }
        />

        <RestoreSummaryItem
          label="TiKV"
          labelWidth={100}
          value={
            isLoading ? (
              <NodeSizeSkeleton />
            ) : (
              <Stack justify="flex-start" gap={8}>
                <Group gap={4}>
                  {profileTargets.tikv.label}
                  {renderSpecVersion(profileTargets.tikv.version, specVersionEnabled)}
                  <WaringForSpecInSummary
                    cpuNum={profileTargets.tikv.profile?.vCpu ?? 0}
                    memory={profileTargets.tikv.profile?.memorySizeGi ?? 0}
                  />
                </Group>
                <Box>
                  {sizes?.tikv?.storageGiB || 0} GiB Storage × {renderNodes(sizes?.tikv?.replicas)}
                </Box>
                {sizes?.tikv?.storageType && <Box>{renderStorageType(sizes?.tikv?.storageType)} storage</Box>}
                {sizes?.tikv?.raftStoreIops && <Box>{sizes?.tikv?.raftStoreIops} Extra Raft IOPS</Box>}
                {sizes?.tikv?.storageType === 'Plus' && sizes.tikv.dataStoreIops && (
                  <Box>{sizes.tikv.dataStoreIops.toLocaleString()} Data Disk IOPS</Box>
                )}
              </Stack>
            )
          }
        />

        {!!sizes?.tiflash?.replicas && (
          <RestoreSummaryItem
            label="TiFlash"
            labelWidth={100}
            value={
              isLoading ? (
                <NodeSizeSkeleton />
              ) : (
                <Stack justify="flex-start" gap={8}>
                  <Group gap={4}>
                    {profileTargets.tiflash.label}
                    {renderSpecVersion(profileTargets.tiflash.version, specVersionEnabled)}
                    <WaringForSpecInSummary
                      cpuNum={profileTargets.tiflash.profile?.vCpu ?? 0}
                      memory={profileTargets.tiflash.profile?.memorySizeGi ?? 0}
                    />
                  </Group>
                  <Box>
                    {renderStorage(sizes?.tiflash?.storageGiB)} × {renderNodes(sizes?.tiflash?.replicas)}
                  </Box>
                  {sizes?.tiflash.storageType && <Box>{renderStorageType(sizes?.tiflash.storageType)} storage</Box>}
                </Stack>
              )
            }
          />
        )}
      </Stack>
      <Divider />
      <RestoreSummaryItem label="Port" value={port} labelWidth={100} py="md" />
      <Divider />
    </RestoreSummaryCard>
  )
}

const _RestoreForDedicatedFromRecycleBin = ({
  cluster,
  backup
}: {
  cluster: {
    region: string
    provider: string
    id: string
    name: string
    projectId: string
    orgId: string
  }
  backup: DataflowBackup
}) => {
  const location = useLocation()
  const orgId = cluster.orgId
  const { store } = useStores()
  const project = store.getProjectById(cluster.projectId)
  const awsEnableCmek = project?.aws_cmek_enabled
  const projectId = project?.id ?? cluster.projectId
  const history = useHistory()
  const formId = useId()
  const backupId = backup.id
  const backupName = backup.name
  const regionOptions = useMemo(() => {
    const backupRegionOptions = getDedicatedRestoreRegionOptions({ regions: backup.regions })

    return backupRegionOptions.length
      ? backupRegionOptions
      : [{ key: cluster.region, label: cluster.region, value: cluster.region }]
  }, [backup.regions, cluster.region])
  const restoreInitialRegion = useMemo(
    () =>
      getPreferredDedicatedRestoreRegion({
        options: regionOptions,
        currentRegion: cluster.region,
        fallbackRegion: cluster.region
      }),
    [cluster.region, regionOptions]
  )
  const methods = useForm<RestoreFormData>({
    defaultValues: {
      restore_mode: DataflowRestoreMode.RESTORE_MODE_SNAPSHOT,
      id: backupId,
      dedicated: {
        provider: cluster.provider,
        region: restoreInitialRegion,
        projectCIDR: undefined,
        name: '',
        port: 4000,
        specVersion: 'V2'
      }
    },
    resolver: async (data, context, options) => {
      const schema = createSchema()

      // you can debug your validation schema here
      // console.log('formData', data, context, options)
      // console.log('validation result', await zodResolver(schema)(data, context, options))
      return zodResolver(schema)(data, context, options)
    }
  })
  const { handleSubmit, watch, setValue, setError, setFocus } = methods
  const provider = watch('dedicated.provider')
  const region = watch('dedicated.region')
  const name = watch('dedicated.name')
  const port = watch('dedicated.port')
  const projectCIDR = watch('dedicated.projectCIDR')
  const sizes = watch('dedicated.sizes')
  const cmekId = watch('dedicated.cmekId')
  const [projectCidrConfiguredStatus, setProjectCidrConfiguredStatus] = useState<boolean>()
  const projectCidrConfigured = projectCidrConfiguredStatus === true
  const cidrStatusLoading = !!provider && !!region && typeof projectCidrConfiguredStatus === 'undefined'
  const { setUpRegionalCidr, isLoading: isSettingProjectCidr } = useSetUpRegionalCidr({
    orgId,
    projectId,
    configured: projectCidrConfigured
  })

  useEffect(() => {
    const restoreRegion = getPreferredDedicatedRestoreRegion({
      options: regionOptions,
      currentRegion: region,
      fallbackRegion: cluster.region
    })

    if (region !== restoreRegion) {
      setValue('dedicated.region', restoreRegion)
    }
  }, [cluster.region, region, regionOptions, setValue])

  const { expEnabled: nodeGroupEnabled, isLoading: nodeGroupLoading } = useCheckArch2024ProjectExp('node-group')

  const { nodeProfiles, isLoading: nodeProfilesLoading } = useGetNodeProfiles({
    tier: 'dedicated',
    provider,
    region,
    tidbVersion: backup.cluster.cluster_version
  })

  useCustomerManagedEncryptionKeyServiceListCustomerManagedEncryptionKeys(
    {
      orgId,
      projectId
    },
    {
      query: {
        refetchOnMount: false,
        refetchOnWindowFocus: false,
        enabled: !!orgId && !!projectId && awsEnableCmek,
        onSuccess(data) {
          if (awsEnableCmek) {
            const cmekData = data?.cmeks?.find((item) => item.regionId === `${provider}-${region}`)
            setValue(
              'dedicated.cmekId',
              cmekData?.awsKms ? cmekData.awsKms.kmsKeyArn : cmekData?.azureKeyVault?.keyVaultKey
            )
          }
        }
      }
    }
  )

  const profileTargets = useNodeProfileTargets({
    tidbProfileName: sizes?.tidb?.profileName,
    tikvProfileName: sizes?.tikv?.profileName,
    tiflashProfileName: sizes?.tiflash?.profileName,
    nodeProfiles: nodeProfiles!
  })

  const {
    costs,
    totalCost,
    isLoading: isCostLoading,
    error: costError
  } = useFetchClusterCosts(
    {
      isAllValid: true,
      provider,
      region,
      sizes
    },
    false
  )

  const restore = useRestoreBackup()

  const isLoading = nodeGroupLoading || nodeProfilesLoading
  const isCalculating = isCostLoading
  const disableSubmit = cidrStatusLoading

  const onSubmit = useMemoizedFn(async (data: RestoreFormData) => {
    if (typeof projectCidrConfiguredStatus === 'undefined') {
      notifier.error('Project CIDR is still loading. Please try again in a moment.')
      return
    }

    const normalizedProjectCIDR = data.dedicated.projectCIDR?.trim() ?? ''
    if (!projectCidrConfigured && !normalizedProjectCIDR) {
      setError('dedicated.projectCIDR', { type: 'manual', message: 'Please enter a valid CIDR.' })
      setFocus('dedicated.projectCIDR', { shouldSelect: true })
      return
    }

    const cidrErrMsg = await setUpRegionalCidr({
      provider: data.dedicated.provider,
      region: data.dedicated.region,
      cidr: normalizedProjectCIDR
    })
    if (cidrErrMsg) {
      notifier.error(<div dangerouslySetInnerHTML={{ __html: cidrErrMsg }} />)
      return
    }

    const components: DataflowSimpleClusterComponent[] = [
      {
        component_type: DataflowComponentType.COMPONENT_TYPE_TIDB,
        node_profile_name: sizes?.tidb?.profileName,
        replicas: sizes?.tidb?.replicas,
        storage_size_gi: sizes?.tidb?.storageGiB
      },
      {
        component_type: DataflowComponentType.COMPONENT_TYPE_TIKV,
        node_profile_name: sizes?.tikv?.profileName,
        replicas: sizes?.tikv?.replicas,
        storage_size_gi: sizes?.tikv?.storageGiB,
        storage_type: sizes?.tikv?.storageType,
        raft_iops: sizes?.tikv?.raftStoreIops,
        data_store_iops: sizes?.tikv?.storageType === 'Plus' ? sizes.tikv.dataStoreIops : undefined
      }
    ]
    if (sizes?.tiflash?.replicas) {
      components.push({
        component_type: DataflowComponentType.COMPONENT_TYPE_TIFLASH,
        node_profile_name: sizes?.tiflash?.profileName,
        replicas: sizes?.tiflash?.replicas,
        storage_size_gi: sizes?.tiflash?.storageGiB,
        storage_type: sizes?.tiflash?.storageType
      })
    }
    if (sizes?.tidb?.tiproxySetting?.nodeCount) {
      components.push({
        component_type: DataflowComponentType.COMPONENT_TYPE_TIPROXY,
        node_profile_name: sizes?.tidb?.tiproxySetting?.nodeSpecKey!,
        replicas: sizes?.tidb?.tiproxySetting?.nodeCount,
        storage_size_gi: 0
      })
    }

    await restore.mutateAsync({
      orgId,
      projectId,
      clusterId: cluster.id,
      id: data.id,
      data: {
        restore_mode: data.restore_mode,
        cluster_name: data.dedicated.name,
        port: data.dedicated.port,
        region: data.dedicated.region,
        components
      }
    })

    notifier.success(`Successfully initiated restore to cluster ${data.dedicated.name}`)

    // back to My TiDB list
    history.push(`/tidbs`)
  })

  const onCancel = useMemoizedFn(() => {
    // back to recycle bin
    if (location.pathname.startsWith('/tidbs')) {
      history.push(`/tidbs/recycle-bin`)
    } else {
      history.push(`/project/recycle-bin/${cluster.id}`)
    }
  })

  const { specVersionEnabled } = useSpecVersionEnabled(provider)

  return (
    <FormProvider {...methods}>
      <RestoreLayout
        title="Restore"
        rightSection={
          <RestoreForDedicatedRecycleBinSummary
            formId={formId}
            cluster={cluster}
            backupName={backupName}
            cmekId={cmekId}
            provider={provider}
            region={region}
            name={name}
            port={port}
            projectCIDR={projectCIDR}
            cidrConfigured={projectCidrConfigured}
            sizes={sizes}
            isLoading={isLoading}
            nodeGroupEnabled={nodeGroupEnabled}
            profileTargets={profileTargets}
            specVersionEnabled={specVersionEnabled}
            costs={costs}
            totalCost={totalCost}
            costError={costError}
            restore={restore}
            onCancel={onCancel}
            disableSubmit={disableSubmit}
            submitLoading={isLoading || methods.formState.isSubmitting || isCalculating || isSettingProjectCidr}
            isCalculating={isCalculating}
          />
        }
      >
        <Paper
          component="form"
          id={formId}
          onSubmit={handleSubmit(onSubmit)}
          shadow="none"
          withBorder
          p="xl"
          data-testid="restore-dedicated-recycle-bin"
        >
          <Stack>
            <HeadLabel label="Restore Method" description="Choose a backup source and restore mode." />
            <Stack>
              <Group>
                <Typography variant="label-lg" w={120}>
                  From Cluster
                </Typography>
                <Typography variant="body-lg">{cluster.name}</Typography>
              </Group>

              <Group>
                <Typography variant="label-lg" w={120}>
                  From Snapshot
                </Typography>
                <Typography variant="body-lg">{backupName}</Typography>
              </Group>

              {awsEnableCmek && <CMEKActiveAlert />}
            </Stack>

            <Divider mx={-24} />

            <HeadLabel label="Cloud Provider & Region" description="Select the region of the new cluster." />
            <Group>
              <FormSelect
                name="dedicated.provider"
                label="Cloud Provider"
                disabled
                data={[{ label: CloudProviderLabelConst[cluster.provider], value: cluster.provider }]}
              />
              <FormSelect
                name="dedicated.region"
                label="Region"
                data={regionOptions}
                sx={{ flexGrow: 1 }}
                disabled={awsEnableCmek || regionOptions.length <= 1}
              />
            </Group>

            {awsEnableCmek && (
              <Alert color="yellow" mt="sm">
                For projects with Customer-Managed Encryption Key (CMEK) enabled, the restored cluster must be in the
                same region as the source cluster.
              </Alert>
            )}

            <Divider mx={-24} />

            <HeadLabel label="Cluster Name" description="Enter the name of the new cluster." />

            <FormTextInput name="dedicated.name" placeholder="Enter your new cluster's name" />

            <Divider mx={-24} />

            <HeadLabel label="Cluster Size" description="Determine the size of your TiDB/TiKV/TiFlash Nodes." />

            <ClusterNodeSizes
              nodeProfiles={nodeProfiles}
              nodeGroupEnabled={nodeGroupEnabled}
              provider={cluster.provider}
            />

            <Divider mx={-24} />

            <HeadLabel label="Custom Port Number" description="Adjust the TiDB port for connection. Default is 4000." />

            <FormNumberInput name="dedicated.port" min={tidbPortRules.min.value} max={tidbPortRules.max.value} />

            <Divider mx={-24} />

            <ProjectCidrSection
              orgId={orgId}
              projectId={projectId}
              provider={provider}
              region={region}
              layout="stack"
              configuredAction="restore"
              testId="restore-project-cidr-section"
              onConfiguredChange={setProjectCidrConfiguredStatus}
            />
          </Stack>
        </Paper>
      </RestoreLayout>
    </FormProvider>
  )
}

const RestoreForDedicatedFromRecycleBin = observer(_RestoreForDedicatedFromRecycleBin)

/**
 * Data-loading wrapper shared by both routes:
 * Old project settings route:
 *    /project/recycle-bin/:id/backup/:backupId/restore?backupPage=1&orgId=xx&projectId=xx
 * NextGen route:
 *    /tidbs/recycle-bin/:id/restore?backupId=x&backupPage=1&backupProjectId=x&orgId=x&plan=Dedicated
 */
function RestoreForDedicatedFromRecycleBinContent() {
  const location = useLocation()
  const params = new URLSearchParams(location.search)
  const { id: clusterId, backupId: backupIdFromPath } = useParams<{ id: string; backupId?: string }>()
  const { orgId, projectId: projectIdFromHook } = useOrgProjectClusterIds()

  const projectId = params.get('backupProjectId') || projectIdFromHook
  const backupId = backupIdFromPath || params.get('backupId') || ''
  const page = Number(params.get('backupPage')) || 1
  const perPage = 20

  const { data: deleteCluster, isLoading: isLoadingCluster } = useGetRecycleBinCluster(orgId, projectId, clusterId)
  const {
    data: backups,
    isLoading: isLoadingBackups,
    isFetched: isBackupsFetched,
    isError: isBackupsError
  } = useListBackups(orgId, projectId, clusterId, { page, per_page: perPage })
  const hero = <HeroComponent ready={isHeroQueryReady({ isFetched: isBackupsFetched, isError: isBackupsError })} />

  if (isLoadingCluster || isLoadingBackups) {
    return (
      <>
        {hero}
        <DelayedPageLoader />
      </>
    )
  }

  const backup = backups?.items?.find((i) => i.id === backupId)
  if (!backup) {
    return (
      <>
        {hero}
        <DelayedPageLoader />
      </>
    )
  }

  const cluster = {
    region: deleteCluster?.cluster.region!,
    provider: deleteCluster?.cluster.provider!,
    id: deleteCluster?.cluster.id!,
    name: deleteCluster?.cluster.name!,
    projectId: projectId || deleteCluster?.cluster.project_id!,
    orgId: orgId
  }

  return (
    <>
      {hero}
      <RestoreForDedicatedFromRecycleBin cluster={cluster} backup={backup} />
    </>
  )
}

export default function RestoreForDedicatedFromRecycleBinPage() {
  const location = useLocation()
  const params = new URLSearchParams(location.search)
  const { orgId, projectId } = useOrgProjectClusterIds()
  const backupProjectId = params.get('backupProjectId') || projectId

  return (
    <PageAccessGuard id="ClusterRestoreAction" scopeProps={{ orgId, projectId: backupProjectId }}>
      <RestoreForDedicatedFromRecycleBinContent />
    </PageAccessGuard>
  )
}