import { Alert, Button, Group, Typography } from '@tidbcloud/uikit'
import { FormSelect, FormTextInput } from '@tidbcloud/uikit/biz'
import { useDisclosure } from '@tidbcloud/uikit/hooks'
import { useMemo } from 'react'

import { getCloudProviderLabel } from 'dbaas/features/Project'
import { FormItem } from 'dbaas/screens/NextGen/my-tidb-creation/shared/FormItem'
import {
  MarketplaceRestrictionAlert,
  MarketplaceRestrictionHoverCard
} from 'dbaas/screens/NextGen/my-tidb-creation/shared/MarketplaceRestriction'
import { CmekRegionRenderOption } from 'dbaas/screens/Project/EncryptionAccess/CmekRegionRenderItem'
import CreateForm from 'dbaas/screens/Project/EncryptionAccess/CreateForm'

import type { DedicatedProjectSelectorOption } from '../components/ProjectSelectorField'
import { PROJECT_SELECTOR_WIDTH, ProjectSelectorField } from '../components/ProjectSelectorField'

interface DedicatedBasicSettingsSectionProps {
  projectId: string
  onProjectChange: (projectId: string) => void
  projectOptions: DedicatedProjectSelectorOption[]
  providerOptions: Array<{ value: string; label: string; disabled?: boolean }>
  regionOptions: Array<{ value: string; label: string }>
  loading?: boolean
  awsCmekEnabled: boolean
  cmekId?: string
  regionRenderOptionEnabled?: boolean
  onCreateProject?: () => void
  canCreateProject?: boolean
}

export function BasicSettingsSection({
  projectId,
  onProjectChange,
  projectOptions,
  providerOptions,
  regionOptions,
  loading,
  awsCmekEnabled,
  cmekId,
  regionRenderOptionEnabled,
  onCreateProject,
  canCreateProject
}: DedicatedBasicSettingsSectionProps) {
  const [cmekCreationModalOpened, cmekCreationModalHandlers] = useDisclosure(false)

  const enabledProviderCount = useMemo(() => providerOptions.filter((p) => !p.disabled).length, [providerOptions])

  return (
    <FormItem
      label="Basic Settings"
      description="Set up the project, cluster name, cloud provider, and region for your new TiDB Cloud Dedicated cluster."
    >
      <Group align="flex-start">
        <ProjectSelectorField
          value={projectId}
          onChange={onProjectChange}
          options={projectOptions}
          onCreateProject={onCreateProject}
          canCreateProject={canCreateProject}
        />
        <FormTextInput
          name="dedicated.name"
          label="Cluster Name"
          placeholder="Enter cluster name"
          flex={1}
          disabled={loading}
        />
      </Group>

      <Group align="flex-start" mt="md">
        <MarketplaceRestrictionHoverCard availableProviderCount={enabledProviderCount} width={PROJECT_SELECTOR_WIDTH}>
          <FormSelect
            name="dedicated.provider"
            label="Cloud Provider"
            w="100%"
            disabled={enabledProviderCount <= 1 || loading}
            data={providerOptions.map((p) => ({
              ...p,
              label: p.label || getCloudProviderLabel(p.value)
            }))}
          />
        </MarketplaceRestrictionHoverCard>
        <FormSelect
          data-testid="dedicated-region-select"
          name="dedicated.region"
          label="Region"
          flex={1}
          disabled={regionOptions.length <= 1 || loading}
          data={regionOptions}
          renderOption={regionRenderOptionEnabled ? CmekRegionRenderOption : undefined}
        />
      </Group>

      <MarketplaceRestrictionAlert mt="md" />

      {awsCmekEnabled && cmekId && (
        <FormTextInput disabled name="dedicated.cmekId" label="The Associated Encryption Key ID" mt="md" />
      )}

      {awsCmekEnabled && !cmekId && (
        <Alert color="yellow" mt="md">
          <Group>
            <Typography sx={{ flex: 1 }}>
              Encryption key not found for this region. Please create one before proceeding.
            </Typography>
            <Button size="xs" onClick={cmekCreationModalHandlers.open}>
              Create Encryption Key
            </Button>
          </Group>
          <CreateForm opened={cmekCreationModalOpened} onClose={cmekCreationModalHandlers.close} />
        </Alert>
      )}
    </FormItem>
  )
}