import { Card, Group, HoverCard, Stack, Typography } from '@tidbcloud/uikit'
import { IconBreakdown02, IconInfoCircle } from '@tidbcloud/uikit/icons'

import { V1beta2ByocVcpuPool } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2/interface'

const formatVcpu = (value: number | string | null | undefined) => {
  const parsed = Number(value)
  return Number.isFinite(parsed) ? parsed.toLocaleString() : '-'
}

const sumPoolUsedVcpu = (pools: V1beta2ByocVcpuPool[]) =>
  pools.reduce((total, pool) => {
    const used = Number(pool.vcpusUsed)
    return total + (Number.isFinite(used) ? used : 0)
  }, 0)

const ProvisionRow = ({
  label,
  value,
  tooltip
}: {
  label: string
  value: number | string | null | undefined
  tooltip?: string
}) => (
  <Group justify="space-between" wrap="nowrap" gap={32}>
    <Group gap={6} wrap="nowrap">
      <Typography>{label}</Typography>
      {tooltip && (
        <HoverCard width={320}>
          <HoverCard.Target>
            <IconInfoCircle size={14} color="var(--mantine-color-carbon-6)" />
          </HoverCard.Target>
          <HoverCard.Dropdown>{tooltip}</HoverCard.Dropdown>
        </HoverCard>
      )}
    </Group>
    <Typography fw={600}>{formatVcpu(value)}</Typography>
  </Group>
)

export const VCPUProvisionPopover = ({
  adminNodeVcpu,
  observabilityVcpu,
  pools
}: {
  adminNodeVcpu?: number
  observabilityVcpu?: number
  pools: V1beta2ByocVcpuPool[]
}) => {
  const currentPoolsTotal = sumPoolUsedVcpu(pools)
  const totalAdminNodeVcpu = adminNodeVcpu === undefined ? undefined : adminNodeVcpu * pools.length

  return (
    <Group justify="flex-end">
      <Group gap={8}>
        <Typography variant="label-md">Current Pools Total vCPU :</Typography>
        <Typography variant="label-md" fw={600}>
          {formatVcpu(currentPoolsTotal)}
        </Typography>
        <HoverCard width={380} position="right-start" shadow="md">
          <HoverCard.Target>
            <IconBreakdown02 size={16} />
          </HoverCard.Target>
          <HoverCard.Dropdown p={0}>
            <Card p="xl" withBorder={false}>
              <Stack gap="lg">
                <Group gap={12}>
                  <Typography variant="title-md">Resource Pool vCPU Provision</Typography>
                  <Typography c="carbon.6">(Charge)</Typography>
                </Group>
                {pools.map((pool) => (
                  <ProvisionRow
                    key={pool.resourcePoolId ?? pool.name}
                    label={`${pool.name || pool.resourcePoolId || 'Pool'} vCPU`}
                    value={pool.vcpusUsed}
                    tooltip="Provisioned vCPU cores for this resource pool."
                  />
                ))}

                <Group gap={12} mt="xs">
                  <Typography variant="title-md">Additional vCPU Provision</Typography>
                  <Typography c="green.7">(Free)</Typography>
                </Group>
                <ProvisionRow
                  label="Observability vCPU"
                  value={observabilityVcpu}
                  tooltip="Provisioned vCPU cores for the observability components."
                />
                <ProvisionRow
                  label="Admin Node vCPU"
                  value={totalAdminNodeVcpu}
                  tooltip="Provisioned Admin Node vCPU cores across all resource pools."
                />
              </Stack>
            </Card>
          </HoverCard.Dropdown>
        </HoverCard>
      </Group>
    </Group>
  )
}