import { Badge, Box, Flex, HoverCard, Loader, Typography } from '@tidbcloud/uikit'
import { IconInfoCircle } from '@tidbcloud/uikit/icons'

import { useGetAppMetricsStatistic } from 'dbaas/services/dataservice'
import useStores from 'dbaas/stores/useStores'

const OverviewStatus = ({ appId, from, to }: { appId: string; from: number; to: number }) => {
  const {
    store: { activeProjectId, tenantData }
  } = useStores()

  const { data, isLoading } = useGetAppMetricsStatistic(
    tenantData.id,
    activeProjectId,
    appId,
    {
      from,
      to
    },
    {
      query: {
        enabled: !!(activeProjectId && tenantData.id && appId),
        refetchInterval: false,
        refetchOnWindowFocus: false,
        refetchOnMount: false
      }
    }
  )

  return (
    <Flex
      sx={(t) => ({
        border: `1px solid ${t.colors.carbon[5]}`,
        padding: 24,
        borderRadius: t.defaultRadius
      })}
      my={24}
      justify="space-between"
    >
      {isLoading ? (
        <Loader size={52} />
      ) : (
        <>
          <Flex direction="column">
            <Flex align="center" gap={4}>
              <Typography variant="label-lg">Data App Status</Typography>
              <HoverCard shadow="md" width={500}>
                <HoverCard.Target>
                  <Box component={IconInfoCircle} size={14} sx={{ cursor: 'pointer' }} />
                </HoverCard.Target>
                <HoverCard.Dropdown>
                  <Typography variant="body-lg">
                    The "Data App Status" is determined based on a metric where, over a 5-minute interval, if the
                    proportion of successful requests out of the total requests for the current data app exceeds 50%,
                    the status is deemed "Available". Conversely, if this proportion is 50% or less, the status is
                    "Unavailable".
                  </Typography>
                </HoverCard.Dropdown>
              </HoverCard>
            </Flex>

            <Typography variant="headline-lg" c={data?.dataapp_available ? 'green.8' : 'red.8'}>
              {data?.dataapp_available ? 'A' : 'Una'}
              vailable
            </Typography>
          </Flex>
          <Flex>
            <Flex
              direction="column"
              pr={24}
              sx={(t) => ({
                borderRight: `1px solid ${t.colors.carbon[5]}`
              })}
            >
              <Typography variant="label-lg">Endpoints</Typography>
              <Typography variant="headline-lg">
                {(data?.endpoint?.deployed ?? 0) + (data?.endpoint?.draft ?? 0)}
              </Typography>
            </Flex>
            <Flex direction="column" ml={24}>
              <Flex>
                <Badge variant="dot" color="green" sx={{ paddingLeft: 0 }} w={80}>
                  <Typography variant="label-xs">Deployed</Typography>
                </Badge>
                <Box>{data?.endpoint?.deployed ?? 0}</Box>
              </Flex>
              <Flex mt={8}>
                <Badge variant="dot" color="carbon" sx={{ paddingLeft: 0, marginRight: 20 }} w={60}>
                  <Typography variant="label-xs">Draft</Typography>
                </Badge>
                <Box>{data?.endpoint?.draft ?? 0}</Box>
              </Flex>
            </Flex>
          </Flex>
          {/* <Flex direction="column">
            <Typography variant="label-lg">Unique Users</Typography>
            <Typography variant="headline-lg">{data?.unique_user ?? 0}</Typography>
          </Flex> */}
        </>
      )}
    </Flex>
  )
}

export default OverviewStatus