import { Box, Button, Divider, Stack, Typography } from '@tidbcloud/uikit'
import { useDisclosure } from '@tidbcloud/uikit/hooks'
import { ReactNode } from 'react'

import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import { DedicatedResumingModal, useFetchPause2024Enabled } from 'dbaas/features/ClusterManagement/dedicated'
import PauseOrResumeCluster from 'dbaas/screens/Cluster/PauseOrResumeCluster'
import { SharedTiDB } from 'dbaas/screens/NextGen/shared/model/shared-tidb-state'
import { Commonv1beta1ClusterState } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2/interface'
import useStores from 'dbaas/stores/useStores'

export function isClusterInvalid(cluster: SharedCluster | SharedTiDB) {
  return Array.of<Commonv1beta1ClusterState>(
    Commonv1beta1ClusterState.PAUSED,
    Commonv1beta1ClusterState.PAUSING,
    Commonv1beta1ClusterState.RESUMING,
    Commonv1beta1ClusterState.CREATING
  ).includes(cluster.state!)
}

export const TableFallback = ({
  children,
  height = 'calc(100vh - 240px)'
}: {
  children: ReactNode
  height?: string | number
}) => (
  <Box
    sx={{
      height,
      backgroundColor: 'var(--mantine-color-carbon-0)'
    }}
  >
    {children}
  </Box>
)

const TableEmptyStatus = ({ title, desc }: { title: ReactNode; desc: string }) => {
  return (
    <Stack gap={24} align="center" justify="center" maw={720} h="100%" m="auto">
      <Typography fz={18} fw={700} c="carbon.7" ta="center">
        {title}
      </Typography>
      <Typography variant="body-lg" c="carbon.7" ta="center" sx={{ textWrap: 'balance' }}>
        {desc}
      </Typography>
    </Stack>
  )
}

export function PausedStatus({
  cluster,
  featureName,
  featureDesc,
  customTitle
}: {
  cluster: SharedCluster
  featureName: string
  featureDesc: ReactNode
  customTitle?: string
}) {
  const {
    actions: { fetchCluster }
  } = useStores()

  const [resumingModalOpened, resumingModalHandlers] = useDisclosure(false)
  const pause2024ExpQuery = useFetchPause2024Enabled()
  const entityName = cluster.computed.isDedicated ? 'cluster' : 'instance'
  const finalTitle =
    customTitle ?? `The ${entityName} is ${cluster.state.toLocaleLowerCase()}, and ${featureName} is inaccessible.`

  return (
    <Stack align="center" justify="center" h="100%">
      <Typography variant="body-lg" style={{ textAlign: 'center', maxWidth: 800, textWrap: 'balance' }} c="carbon.7">
        {featureDesc}
      </Typography>

      <Divider w={136} my={16} />

      {/* text are normal size when cluster are in pausing/resuming status */}
      <Typography variant={cluster.computed.paused ? 'headline-sm' : 'body-lg'} c="carbon.7">
        {(cluster.computed.paused || cluster.computed.pausing) && finalTitle}

        {cluster.computed.resuming &&
          `The ${entityName} is resuming, and ${featureName} will be accessible after it is active. Please wait for a while.`}
      </Typography>

      {cluster.computed.paused && (
        <>
          <Typography variant="body-lg" c="carbon.7">
            Resume the {entityName} to use this function.
          </Typography>
          <Button size="sm" mt={24} onClick={resumingModalHandlers.open}>
            Resume
          </Button>
          {pause2024ExpQuery.data ? (
            <DedicatedResumingModal
              clusterId={cluster.id}
              clusterName={cluster.displayName}
              opened={resumingModalOpened}
              onClose={resumingModalHandlers.close}
              onFinish={async () => {
                await fetchCluster(cluster.id)
              }}
            />
          ) : (
            <PauseOrResumeCluster
              id={cluster.id}
              cluster={cluster}
              visible={resumingModalOpened}
              onClose={resumingModalHandlers.close}
              onFinish={async () => {
                await fetchCluster(cluster.id)
              }}
            />
          )}
        </>
      )}
    </Stack>
  )
}

TableFallback.displayName = 'TableFallback'
TableFallback.Paused = PausedStatus
TableFallback.Empty = TableEmptyStatus