import { Box, Button, Group, Typography } from '@tidbcloud/uikit'
import { IconLockUnlocked03 } from '@tidbcloud/uikit/icons'
import { useHistory } from 'react-router-dom'

import { useAccessCheck } from 'dbaas/contexts/access-control'
import { MixpanelEvents } from 'dbaas/utils/tracking/event'

import { useProjectMigrationTask } from './use-project-migration-task'

export const ProjectMigrationAlert = () => {
  const history = useHistory()
  const accessible = useAccessCheck('TidbxProjectMigration')
  const { query, hasPendingTask } = useProjectMigrationTask()
  const shouldShowAlert = !query.isError && hasPendingTask

  return (
    <Box
      sx={{
        // If backend state propagation causes the alert to briefly reappear after confirm, reintroduce a one-shot suppression flag here.
        // TODO: Remove this temporary display toggle before release. It is only here to keep the alert in DOM for DevTools styling tweaks.
        display: shouldShowAlert ? undefined : 'none',
        padding: '16px 24px',
        borderRadius: 8,
        border: '1px solid transparent',
        background: `
          linear-gradient(90deg, var(--mantine-color-violet-2) 0%, var(--mantine-color-purple-2) 100%) padding-box,
          linear-gradient(90deg, #2D3ED2 0%, #B423D1 100%) border-box
        `
      }}
      data-testid="project-migration-alert"
      data-accessible={accessible}
      id="project-migration-alert"
    >
      <Group justify="center" gap={8} mb={4} wrap="nowrap">
        <IconLockUnlocked03 size={16} c="purple.9" />
        <Typography variant="title-lg" c="purple.9">
          Unlock more flexibility for Starter and Essential
        </Typography>
      </Group>

      <Box>
        <Typography variant="body-lg" c="purple.9" ta="center">
          To do that, move Starter and Essential instances in your organization to a new project. Learn more about{' '}
          <a
            href="https://docs.pingcap.com/tidbcloud/tidbx-instance-move-faq/?plan=starter"
            target="_blank"
            rel="noreferrer"
          >
            TiDB X instance conversion
          </a>
          .
        </Typography>
        <Typography variant="body-lg" c="purple.9" ta="center">
          <strong>Note:</strong> Dedicated clusters will remain in their current projects. There is no cost for this
          conversion.
        </Typography>
        {!accessible && (
          <Typography variant="body-lg" c="purple.9" ta="center">
            Please contact your org owner to move and unlock those new feature.
          </Typography>
        )}
      </Box>

      {accessible && (
        <Box ta="center" mt="sm">
          <Button
            variant="gradient"
            size="sm"
            gradient={{ from: '#B423D1', to: '#2D3ED2', deg: 90 }}
            onClick={() => {
              history.push({
                pathname: '/tidbs/project-migration'
              })
            }}
            data-testid="project-migration-alert-cta"
            data-mp-event={MixpanelEvents.ProjectMigration.View.EnterClicked}
          >
            Move & Unlock
          </Button>
        </Box>
      )}
    </Box>
  )
}