import { Box, Group, Stack } from '@tidbcloud/uikit'
import { FormSelect, FormTextInput } from '@tidbcloud/uikit/biz'

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 {
  PROJECT_SELECTOR_WIDTH,
  ProjectGroupSection
} from 'dbaas/screens/NextGen/my-tidb-creation/shared/ProjectGroupSection'
import {
  Commonv1beta1Region,
  Commonv1beta1ServicePlan,
  V1beta1RegionCloudProvider
} from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2/interface'

interface BasicSettingsSectionProps {
  servicePlan: Commonv1beta1ServicePlan
  cloudProviders: V1beta1RegionCloudProvider[]
  regions: Commonv1beta1Region[]
  disabled?: boolean
  projectOptions: { value: string; label: string }[]
  onProjectCreated?: () => void
  withFormLabel?: boolean
  projectOptional?: boolean
  description?: string
  additionalFields?: React.ReactNode
}

export function BasicSettingsSection({
  servicePlan,
  cloudProviders,
  regions,
  disabled,
  projectOptions,
  onProjectCreated,
  withFormLabel = true,
  projectOptional = true,
  description = '',
  additionalFields
}: BasicSettingsSectionProps) {
  const content = (
    <Stack gap="md">
      <Group align="flex-start">
        <ProjectGroupSection
          projectOptions={projectOptions}
          onProjectCreated={onProjectCreated}
          optional={projectOptional}
        />
        <FormTextInput name="name" label="Instance Name" placeholder="Enter instance name" flex={1} />
      </Group>
      <Group align="flex-start">
        <MarketplaceRestrictionHoverCard availableProviderCount={cloudProviders.length} width={PROJECT_SELECTOR_WIDTH}>
          <FormSelect
            name="cloudProvider"
            label="Cloud Provider"
            w="100%"
            disabled={cloudProviders.length <= 1 || disabled}
            data={cloudProviders.map((p) => ({ value: p, label: getCloudProviderLabel(p) }))}
          />
        </MarketplaceRestrictionHoverCard>
        <FormSelect
          name="regionId"
          label="Region"
          flex={1}
          disabled={regions.length <= 1 || disabled}
          data={regions.map((r) => ({ value: r.regionId!, label: r.displayName! }))}
        />
      </Group>
      {additionalFields}
      <MarketplaceRestrictionAlert />
    </Stack>
  )

  if (!withFormLabel) {
    return <Box p="xl">{content}</Box>
  }

  return (
    <FormItem
      label="Basic Settings"
      description={
        description || `Configure the name, cloud provider, and region for your new TiDB Cloud ${servicePlan} instance.`
      }
    >
      {content}
    </FormItem>
  )
}