import { AnimatedNumber, Stack, Typography } from '@tidbcloud/uikit'
import { useDebouncedValue } from '@tidbcloud/uikit/hooks'

import { usePredictCost } from 'dbaas/services/api-clients/legacy/serverless'

import { ESSENTIAL_RCU_MIN } from '../schema'

interface EssentialCostProps {
  cloudProvider: string
  region: string
  minRcu: number
  maxRcu: number
}

export function EssentialCost({ cloudProvider, region, minRcu, maxRcu }: EssentialCostProps) {
  const [debouncedMinRcu] = useDebouncedValue(minRcu, 500)
  const [debouncedMaxRcu] = useDebouncedValue(maxRcu, 500)
  const predictMinRcu = Math.max(debouncedMinRcu || ESSENTIAL_RCU_MIN, ESSENTIAL_RCU_MIN)
  const predictMaxRcu = Math.max(debouncedMaxRcu || ESSENTIAL_RCU_MIN, ESSENTIAL_RCU_MIN)

  const { data: minPredictCost } = usePredictCost(
    { cloud_provider: cloudProvider, region, rcu: predictMinRcu },
    {
      query: {
        enabled: !!(cloudProvider && region),
        select: (data) => ({
          monthly: Number(data?.rcu_cost_monthly || 0)
        }),
        keepPreviousData: true,
        refetchOnWindowFocus: false
      }
    }
  )

  const { data: maxPredictCost } = usePredictCost(
    { cloud_provider: cloudProvider, region, rcu: predictMaxRcu },
    {
      query: {
        enabled: !!(cloudProvider && region),
        select: (data) => ({
          monthly: Number(data?.rcu_cost_monthly || 0)
        }),
        keepPreviousData: true,
        refetchOnWindowFocus: false
      }
    }
  )

  return (
    <Stack gap={4} py="xl">
      <AnimatedNumber
        value={minPredictCost?.monthly ?? 0}
        format={{ maximumFractionDigits: 5, minimumFractionDigits: 2 }}
        prefix="From $"
        suffix="/month"
        c="carbon.9"
        fw={700}
        fz={20}
        sx={{
          '&::part(suffix)': {
            color: 'var(--mantine-color-carbon-8)',
            fontWeight: 400,
            fontSize: 14,
            marginLeft: 4
          }
        }}
      />
      <Typography variant="body-md" c="carbon.8" inline>
        Pay only for your actual usage. Monthly fees are limited by your maximum RCU setting, up to a maximum cost of{' '}
        <Typography variant="title-md" component="span">
          ${(maxPredictCost?.monthly ?? 0).toFixed(2)}
        </Typography>{' '}
        per month. Learn more{' '}
        <a target="_blank" rel="noreferrer" href="https://www.pingcap.com/tidb-cloud-essential-pricing-details/">
          TiDB Cloud Essential pricing
        </a>
      </Typography>
    </Stack>
  )
}