import { Button, Stack, Typography } from '@tidbcloud/uikit'
import { IconAlertCircle } from '@tidbcloud/uikit/icons'
import { observer } from 'mobx-react'
import { useLocation } from 'react-router-dom'

import { NextGenModes } from 'dbaas/features/Organization/mode'
import { useCreateUserVisitHistory } from 'dbaas/services/account'
import { clearLastPage } from 'dbaas/stores/localStorage'
import useStores from 'dbaas/stores/useStores'

export const PremiumPreviewGuard = observer(({ children }: React.PropsWithChildren) => {
  const {
    store: {
      lastVisitLocation: { orgId },
      userProfile
    }
  } = useStores()
  const location = useLocation()
  const isInPreview = location.pathname.startsWith('/tidbs')
  const privatePreviewEnabled = true

  const visitHistoryMutator = useCreateUserVisitHistory({
    mutation: {
      onMutate: () => {
        clearLastPage(userProfile.user_id)
      }
    }
  })

  const handleRedirect = () => {
    return visitHistoryMutator.mutateAsync({
      data: {
        org_id: orgId,
        cluster_mode: NextGenModes.Classic
      }
    })
  }

  if (isInPreview && !privatePreviewEnabled) {
    return (
      <Stack align="center" justify="center" gap={8} mih={512} h="100%">
        <IconAlertCircle size={32} c="carbon.7" />
        <Typography variant="headline-md" ta="center">
          Access Not Available
        </Typography>
        <Typography variant="body-lg" ta="center">
          TiDB Cloud Preview requires invitation-based access.
        </Typography>
        <Button
          size="sm"
          component="a"
          href={`/project/clusters?orgId=${orgId}`}
          target="_self"
          onClick={handleRedirect}
        >
          Return to TiDB Cloud
        </Button>
      </Stack>
    )
  }

  return <>{children}</>
})