import { Box, Divider, Flex, Group, HoverCard, Stack, Typography } from '@tidbcloud/uikit'
import { FormNumberInput } from '@tidbcloud/uikit/biz'
import { IconInfoCircle } from '@tidbcloud/uikit/icons'
import { useFormContext } from 'react-hook-form'

import { FormItem } from 'dbaas/screens/NextGen/my-tidb-creation/shared/FormItem'

import { ESSENTIAL_RCU_MAX, ESSENTIAL_RCU_MIN, ESSENTIAL_RCU_STEP } from '../schema'
import { EssentialFormValue } from '../types'

export function CapacitySection() {
  const { watch, trigger } = useFormContext<EssentialFormValue>()
  const minRcu = watch('minRcu')

  return (
    <FormItem
      label="Capacity"
      description={
        <Typography variant="body-md" c="carbon.7">
          TiDB Cloud Essential instance capacity is measured in Request Capacity Units (RCUs). TiDB Cloud automatically
          creates scaling rules based on the minimum and maximum capacity setting.{' '}
          <a href="https://www.pingcap.com/tidb-cloud-essential-pricing-details/" target="_blank" rel="noreferrer">
            Learn more
          </a>
          .
        </Typography>
      }
    >
      <Stack gap={8}>
        <Group align="flex-start" gap="xl">
          <FormNumberInput
            name="minRcu"
            leftAddon={
              <Group gap={4} wrap="nowrap" component="span">
                min
                <HoverCard shadow="md" withArrow width={400}>
                  <HoverCard.Target>
                    <IconInfoCircle sx={{ cursor: 'pointer' }} />
                  </HoverCard.Target>
                  <HoverCard.Dropdown>
                    <Typography variant="body-lg">
                      Keep the value at the minimum ({ESSENTIAL_RCU_MIN}) if cost is a concern and traffic is bursty.
                      Increase it if you require more consistent performance, smoother autoscaling, or better readiness
                      for sudden surges.
                    </Typography>
                  </HoverCard.Dropdown>
                </HoverCard>
              </Group>
            }
            sx={{ flex: 1 }}
            suffix=" RCUs"
            min={ESSENTIAL_RCU_MIN}
            max={ESSENTIAL_RCU_MAX}
            step={ESSENTIAL_RCU_STEP}
            rules={{
              required: 'Required',
              min: { value: ESSENTIAL_RCU_MIN, message: `RCUs should be greater than ${ESSENTIAL_RCU_MIN}` },
              max: { value: ESSENTIAL_RCU_MAX, message: `RCUs should be less than ${ESSENTIAL_RCU_MAX}` },
              validate: (val) => {
                if (val % ESSENTIAL_RCU_STEP !== 0) {
                  return `RCUs should be in increments of ${ESSENTIAL_RCU_STEP}`
                }
                return true
              }
            }}
            onChange={() => trigger('maxRcu')}
          />
          <Flex h={40} align="center">
            <Divider w={16} color="carbon.5" />
          </Flex>
          <FormNumberInput
            name="maxRcu"
            leftAddon={
              <Group gap={4} wrap="nowrap" component="span">
                max
                <HoverCard shadow="md" withArrow width={400}>
                  <HoverCard.Target>
                    <IconInfoCircle sx={{ cursor: 'pointer' }} />
                  </HoverCard.Target>
                  <HoverCard.Dropdown>
                    <Typography variant="body-lg">
                      TiDB Cloud offers a small buffer above the maximum RCU to accommodate short bursts in demand and
                      lower the chance of throttling. Continuous demand that exceeds the maximum, though, may still lead
                      to throttling.
                    </Typography>
                  </HoverCard.Dropdown>
                </HoverCard>
              </Group>
            }
            sx={{ flex: 1 }}
            suffix=" RCUs"
            min={ESSENTIAL_RCU_MIN}
            max={ESSENTIAL_RCU_MAX}
            step={ESSENTIAL_RCU_STEP}
            rules={{
              required: 'Required',
              min: { value: ESSENTIAL_RCU_MIN, message: `RCUs should be greater than ${ESSENTIAL_RCU_MIN}` },
              max: { value: ESSENTIAL_RCU_MAX, message: `RCUs should be less than ${ESSENTIAL_RCU_MAX}` },
              validate: (val) => {
                if (val % ESSENTIAL_RCU_STEP !== 0) {
                  return `RCUs should be in increments of ${ESSENTIAL_RCU_STEP}`
                }
                if (val && val < minRcu) {
                  return 'Max RCUs should be greater or equal to min RCUs'
                }
                return true
              }
            }}
            onChange={() => trigger('minRcu')}
          />
        </Group>
        <Typography variant="body-md" c="carbon.7">
          <Box component="span" fw={500}>
            Minimum Billing RCUs = {minRcu && minRcu > ESSENTIAL_RCU_MIN ? minRcu : ESSENTIAL_RCU_MIN}.
          </Box>{' '}
          If your actual usage is below this limit, you will be billed for this amount. RCUs start from 2,000 and can be
          increased up to 100,000 in increments of 100.
        </Typography>
      </Stack>
    </FormItem>
  )
}