import { Box, Button, Card, CardProps, Flex, Typography } from '@tidbcloud/uikit'
import { LabelTooltip } from '@tidbcloud/uikit/biz'
import { useDisclosure } from '@tidbcloud/uikit/hooks'
import { observer } from 'mobx-react'
import { useHistory } from 'react-router-dom'

import { AccessDeniedHoverHint } from 'dbaas/contexts/access-control'
import { PremiumReservedCapacityEditModal } from 'dbaas/screens/NextGen/premium/capacity/PremiumReservedCapacityEditModal'
import { SharedTiDB } from 'dbaas/screens/NextGen/shared/model/shared-tidb-state'
import { Commonv1beta1ServicePlan } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2/interface'
import { formatNumberAutoPrecision, formatStorage } from 'dbaas/utils/format'
import { MixpanelEvents } from 'dbaas/utils/tracking'

interface StandardCapacityProps extends Omit<CardProps, 'children'> {
  tidb: SharedTiDB
}

const StorageMetricItem: React.FC<
  React.PropsWithChildren<{
    label: string
    value: number | string
    tooltip?: string
  }>
> = ({ label, value, tooltip }) => {
  return (
    <Box>
      <Flex align="center">
        <Typography variant="body-lg">
          {label}
          {tooltip && <LabelTooltip width={400} label={tooltip} />}
        </Typography>
      </Flex>
      <Typography fz={26} fw={400} lh="34px" c="carbon.9">
        {typeof value === 'number' ? formatStorage(value) : value}
      </Typography>
    </Box>
  )
}

// @TODO: waiting for the backend ready
export const StandardCapacity = observer(({ tidb, ...rootProps }: StandardCapacityProps) => {
  const history = useHistory()
  const [editModalOpened, editModalHandlers] = useDisclosure(false)

  return (
    <>
      <Card p="xl" {...rootProps}>
        <Flex justify="space-between" align="center" mb={16}>
          <Typography variant="headline-sm">Capacity</Typography>
          <AccessDeniedHoverHint id="TidbxCapacityUpdate">
            {({ accessible }) => (
              <Button
                variant="default"
                size="compact-sm"
                disabled={!tidb.computed.active || !accessible}
                onClick={() => {
                  if (tidb.computed.isPremiumReserved) {
                    editModalHandlers.open()

                    return
                  }

                  history.push(`/tidbs/${tidb.tidbId}/edit-capacity`)
                }}
                data-mp-event={MixpanelEvents.TidbCapacity.Update.EnterClicked}
                data-mp-service-plan={Commonv1beta1ServicePlan.Premium}
              >
                Update Capacity
              </Button>
            )}
          </AccessDeniedHoverHint>
        </Flex>

        {tidb.computed.isPremiumReserved ? (
          <Flex direction="column">
            <Flex gap={32} mt={12}>
              <StorageMetricItem
                label="Reserved Capacity"
                value={`${formatNumberAutoPrecision(tidb?.reservedCapacity?.purchasedVcpu ?? 0)} vCPU`}
              />
            </Flex>
          </Flex>
        ) : (
          <Flex direction="column">
            <Typography variant="body-lg">
              Provisioned Compute
              {/* <LabelTooltip width={400} label="// todo" /> */}
            </Typography>
            <Flex gap={32} mt={12}>
              <StorageMetricItem label="Max RCU" value={`${formatNumberAutoPrecision(tidb?.maxRcu ?? 0)}`} />
            </Flex>
          </Flex>
        )}
      </Card>

      {tidb.computed.isPremiumReserved && (
        <PremiumReservedCapacityEditModal tidb={tidb} opened={editModalOpened} onClose={editModalHandlers.close} />
      )}
    </>
  )
})