import { Divider, Paper } from '@tidbcloud/uikit'
import { observer } from 'mobx-react'
import { useEffect, useMemo } from 'react'
import { useFormContext } from 'react-hook-form'

import { BasicSettingsSection } from 'dbaas/screens/NextGen/my-tidb-creation/plans/premium/sections/BasicSettingsSection'
import { DualLayerDataEncryptionSection } from 'dbaas/screens/NextGen/my-tidb-creation/plans/premium/sections/DualLayerDataEncryptionSection'
import { HighAvailabilitySection } from 'dbaas/screens/NextGen/my-tidb-creation/plans/premium/sections/HighAvailabilitySection'
import { useGetTidbCloudRegions } from 'dbaas/screens/NextGen/my-tidb-creation/shared/premium-byoc/basic-settings/use-cloud-providers-regions'
import { useDualLayerDataEncryptionFeatEnabled } from 'dbaas/screens/NextGen/my-tidb-creation/shared/premium-byoc/dual-layer-data-encryption/use-dual-layer-data-encryption-feat-enabled'
import { PremiumByocFormValue } from 'dbaas/screens/NextGen/my-tidb-creation/shared/premium-byoc/types'
import { useCreateResourceRoleState } from 'dbaas/screens/NextGen/shared/access/create-resource-role'
import { V1beta1RegionCloudProvider } from 'dbaas/services/api-clients/v2023/cluster-management/v1beta1/interface'
import { Commonv1beta1ServicePlan } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2/interface'
import useStores from 'dbaas/stores/useStores'

import { useVirtualProjectId } from '../../shared/use-virtual-project-id'

import { CapacitySection } from './sections/CapacitySection'

interface PremiumReservedFormProps {
  formId: string
  planSelector: React.ReactNode
  onSubmit: () => void
  active: boolean
}

const SERVICE_PLAN = Commonv1beta1ServicePlan.Premium_Reserved

export const PremiumReservedForm = observer(({ formId, planSelector, onSubmit, active }: PremiumReservedFormProps) => {
  const {
    store: {
      lastVisitLocation: { projectId: currentProjectId }
    },
    actions: { fetchUserProfileV2 }
  } = useStores()
  const { watch, getValues, setValue, trigger } = useFormContext<PremiumByocFormValue>()

  const projectId = watch('projectId')
  const cloudProvider = watch('cloudProvider')
  const regionId = watch('regionId')
  const virtualProjectId = useVirtualProjectId()
  const { ownerProjects, isOrgOwner, isAnyProjectOwner } = useCreateResourceRoleState()
  const effectiveProjectId = isOrgOwner ? projectId || virtualProjectId : projectId
  const { regions, isLoading: isLoadingRegions } = useGetTidbCloudRegions(SERVICE_PLAN, cloudProvider, {
    projectId: effectiveProjectId,
    needAll: !cloudProvider
  })

  const { regions: allRegions } = useGetTidbCloudRegions(SERVICE_PLAN, cloudProvider, {
    projectId: effectiveProjectId,
    needAll: true
  })

  const cloudProviders = useMemo(() => {
    return Array.from(
      new Set(allRegions.filter((r) => r.servicePlans?.includes(SERVICE_PLAN)).map((r) => r.cloudProvider))
    ) as V1beta1RegionCloudProvider[]
  }, [allRegions])

  const isLoading = isLoadingRegions

  const eligibleProjects = useMemo(
    () => ownerProjects.filter((project) => !project.aws_cmek_enabled && project.type === 'tidbx'),
    [ownerProjects]
  )
  const projectOptions = useMemo(
    () => eligibleProjects.map((project) => ({ value: project.id, label: project.name })),
    [eligibleProjects]
  )

  const { isEnabled: isDataEncryptionFeatEnabled } = useDualLayerDataEncryptionFeatEnabled({
    servicePlan: SERVICE_PLAN,
    cloudProvider
  })

  useEffect(() => {
    const nextCloudProvider = cloudProviders?.[0]
    if (!nextCloudProvider) {
      return
    }

    if (!cloudProvider || !cloudProviders.includes(cloudProvider)) {
      setValue('cloudProvider', nextCloudProvider)
    }
  }, [cloudProvider, cloudProviders, setValue])

  useEffect(() => {
    const currentRegion = getValues('regionId')
    const nextRegion = regions?.[0]?.regionId ?? ''
    if (!currentRegion || !regions?.some((r) => r.regionId === currentRegion)) {
      setValue('regionId', nextRegion)
    }
  }, [regions, setValue, getValues])

  useEffect(() => {
    if (isOrgOwner || !isAnyProjectOwner) {
      return
    }

    const selectedProjectId = getValues('projectId')
    const hasValidProjectSelection =
      !!selectedProjectId && eligibleProjects.some((project) => project.id === selectedProjectId)
    if (hasValidProjectSelection) {
      return
    }

    const nextProjectId =
      eligibleProjects.find((project) => project.id === currentProjectId)?.id || eligibleProjects[0]?.id || ''

    setValue('projectId', nextProjectId, { shouldValidate: true })
  }, [currentProjectId, eligibleProjects, getValues, isAnyProjectOwner, isOrgOwner, setValue])

  useEffect(() => {
    if (!active || isOrgOwner || eligibleProjects.length > 0) {
      return
    }

    void trigger('projectId')
  }, [active, eligibleProjects.length, isOrgOwner, trigger])

  return (
    <Paper component="form" id={formId} withBorder shadow="none" onSubmit={onSubmit}>
      {planSelector}
      <Divider />
      <BasicSettingsSection
        cloudProviders={cloudProviders}
        regions={regions}
        disabled={isLoading}
        projectOptions={projectOptions}
        onProjectCreated={() => fetchUserProfileV2()}
        projectOptional={isOrgOwner}
      />
      <Divider />
      <CapacitySection projectId={effectiveProjectId} />
      <Divider />
      {isDataEncryptionFeatEnabled && (
        <>
          <DualLayerDataEncryptionSection
            cloudProvider={cloudProvider}
            regionId={regionId}
            projectId={effectiveProjectId}
          />
          <Divider />
        </>
      )}
      <HighAvailabilitySection />
    </Paper>
  )
})