import { AnimatedNumber, Stack, Typography } from '@tidbcloud/uikit'
import { useDebouncedValue } from '@tidbcloud/uikit/hooks'
import { useEffect, useMemo, useState } from 'react'

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

import { ESSENTIAL_V2_RCU_MIN } from '../schema'

interface EssentialV2CostProps {
  cloudProvider: string
  regionId: string
  minRcu: number
  maxRcu: number
}

export function EssentialV2Cost({ cloudProvider, regionId, minRcu, maxRcu }: EssentialV2CostProps) {
  const capacity = useMemo(() => ({ minRcu, maxRcu }), [minRcu, maxRcu])
  const [debouncedCapacity] = useDebouncedValue(capacity, 500)
  const predictMinRcu = Math.max(debouncedCapacity.minRcu || ESSENTIAL_V2_RCU_MIN, ESSENTIAL_V2_RCU_MIN)
  const predictMaxRcu = Math.max(debouncedCapacity.maxRcu || ESSENTIAL_V2_RCU_MIN, ESSENTIAL_V2_RCU_MIN)
  const [displayCost, setDisplayCost] = useState({ minMonthly: 0, maxMonthly: 0 })

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

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

  useEffect(() => {
    if (isFetchingMinPredictCost || isFetchingMaxPredictCost) {
      return
    }

    setDisplayCost({
      minMonthly: minPredictCost?.monthly ?? 0,
      maxMonthly: maxPredictCost?.monthly ?? 0
    })
  }, [isFetchingMaxPredictCost, isFetchingMinPredictCost, maxPredictCost?.monthly, minPredictCost?.monthly])

  return (
    <Stack gap={4} py="xl">
      <AnimatedNumber
        value={displayCost.minMonthly}
        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">
          ${displayCost.maxMonthly.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>
  )
}