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

import { useCreateResourceRoleState } from 'dbaas/screens/NextGen/shared/access/create-resource-role'
import useStores from 'dbaas/stores/useStores'

import { useVirtualProjectId } from '../../shared/use-virtual-project-id'
import { CapacitySection as EssentialV2CapacitySection } from '../EssentialV2/sections/CapacitySection'
import { EncryptionSection as EssentialV2EncryptionSection } from '../EssentialV2/sections/EncryptionSection'
import { HighAvailabilitySection as EssentialV2HighAvailabilitySection } from '../EssentialV2/sections/HighAvailabilitySection'

import { EssentialServicePlan } from './essential-regions'
import { BasicSettingsSection } from './sections/BasicSettingsSection'
import { CapacitySection } from './sections/CapacitySection'
import { EncryptionSection } from './sections/EncryptionSection'
import { HighAvailabilitySection } from './sections/HighAvailabilitySection'
import { AdaptiveEssentialFormValue } from './types'
import { useEssentialCreationRegions } from './use-essential-creation-regions'

interface EssentialFormProps {
  formId: string
  planSelector: React.ReactNode
  onRegionChange: (regionName: string, servicePlan: EssentialServicePlan) => void
  onSubmit: () => void
}

export const EssentialForm = observer(({ formId, planSelector, onRegionChange, onSubmit }: EssentialFormProps) => {
  const {
    store: {
      lastVisitLocation: { projectId: currentProjectId }
    },
    actions: { fetchUserProfileV2 }
  } = useStores()

  const { watch, getValues, setValue } = useFormContext<AdaptiveEssentialFormValue>()
  const region = watch('region')
  const provider = watch('provider')
  const projectId = watch('projectId')
  const virtualProjectId = useVirtualProjectId()
  const { allRegions, cloudProviders, regions, isLoading } = useEssentialCreationRegions(provider)
  const selectedRegion = useMemo(() => allRegions.find((item) => item.value === region), [allRegions, region])

  const { ownerProjects, isOrgOwner, isAnyProjectOwner } = useCreateResourceRoleState()
  const effectiveProjectId = isOrgOwner ? projectId || virtualProjectId : projectId
  const eligibleProjects = useMemo(
    () => ownerProjects.filter((project) => !project.aws_cmek_enabled && project.type === 'tidbx'),
    [ownerProjects]
  )
  const projectOptions = useMemo(
    () => eligibleProjects.map((p) => ({ value: p.id, label: p.name })),
    [eligibleProjects]
  )

  useEffect(() => {
    const nextProvider = cloudProviders[0]
    if (!nextProvider) {
      return
    }

    if (!provider || !cloudProviders.includes(provider)) {
      setValue('provider', nextProvider)
    }
  }, [provider, cloudProviders, setValue])

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

  useEffect(() => {
    if (selectedRegion) {
      onRegionChange(selectedRegion.label, selectedRegion.servicePlan)
    }
  }, [onRegionChange, selectedRegion])

  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])

  return (
    <Paper
      component="form"
      id={formId}
      data-testid="adaptive-essential-form"
      onSubmit={onSubmit}
      withBorder
      shadow="none"
    >
      {planSelector}

      <Divider />
      <BasicSettingsSection
        cloudProviders={cloudProviders}
        regions={regions}
        disabled={isLoading}
        projectOptions={projectOptions}
        onProjectCreated={() => fetchUserProfileV2()}
        projectOptional={isOrgOwner}
      />
      <Divider />
      <div data-testid="adaptive-essential-version-fields" data-service-plan={selectedRegion?.servicePlan}>
        {selectedRegion?.servicePlan === 'Essential' && (
          <>
            <CapacitySection />
            <Divider />
            <EncryptionSection />
            <Divider />
            <HighAvailabilitySection region={region} />
          </>
        )}
        {selectedRegion?.servicePlan === 'Essential_V2' && (
          <>
            <EssentialV2CapacitySection projectId={effectiveProjectId} />
            <Divider />
            <EssentialV2EncryptionSection />
            <Divider />
            <EssentialV2HighAvailabilitySection />
          </>
        )}
      </div>
    </Paper>
  )
})