import { Box, Button, HoverCard } from '@tidbcloud/uikit'
import { useDisclosure } from '@tidbcloud/uikit/hooks'
import { sha256 } from 'js-sha256'
import { observer } from 'mobx-react'

import { RainbowButton } from 'dbaas/components/Button/RainbowButton'
import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import { ServerlessConnectionV2 } from 'dbaas/screens/ClusterV2/features/Connection/serverless'
import { McpConfigModal } from 'dbaas/screens/ClusterV2/features/Mcp/starter/Modal'
import { StarterOperation } from 'dbaas/screens/ClusterV2/features/Operations/starter/shared/StarterOperation'
import { useConnectionModal } from 'dbaas/screens/ClusterV2/features/Overview/context'
import useStores from 'dbaas/stores/useStores'
import { GA4_PAGE_CATEGORY, PRODUCT_TYPES, reportGA } from 'dbaas/utils/tracking'

import { useStarterOverviewOperationModals } from './use-overview-operation-modals'

interface ServerlessToolbarProps {
  cluster: SharedCluster
}

export const ServerlessToolbar = observer(({ cluster }: ServerlessToolbarProps) => {
  const disabled = cluster?.computed?.creating || cluster?.computed?.recovering
  const {
    store: { userProfile }
  } = useStores()

  const [mcpConfigOpened, mcpConfigHandlers] = useDisclosure()
  const [connectOpened, connectHandlers] = useConnectionModal()
  const oprModals = useStarterOverviewOperationModals(cluster.id)

  return (
    <>
      {cluster?.computed.isStarter && (
        <HoverCard shadow="md" position="left" withArrow disabled={!disabled}>
          <HoverCard.Target>
            <Box component="span" mr={8}>
              <RainbowButton
                size="sm"
                disabled={disabled}
                onClick={() => mcpConfigHandlers.open()}
                data-mp-event="Use with AI Tools Button Clicked"
                data-mp-service-plan={cluster?.servicePlan}
              >
                Use with AI Tools
              </RainbowButton>
            </Box>
          </HoverCard.Target>
          <HoverCard.Dropdown>Retry after the instance is available.</HoverCard.Dropdown>
        </HoverCard>
      )}
      <HoverCard shadow="md" position="left" withArrow disabled={!disabled}>
        <HoverCard.Target>
          <Box component="span" mr={8}>
            <Button
              disabled={disabled}
              onClick={() => {
                reportGA({
                  event: 'connect_button_click',
                  page_category: GA4_PAGE_CATEGORY.CLUSTER_OVERVIEW,
                  product_type: PRODUCT_TYPES.SERVERLESS,
                  user_id: sha256(userProfile.email)
                })
                connectHandlers.open()
              }}
              size="sm"
              data-mp-event="Connect Button Clicked"
              data-mp-service-plan={cluster?.servicePlan}
              data-testid="serverless-connect-v2-btn"
            >
              Connect
            </Button>
          </Box>
        </HoverCard.Target>
        <HoverCard.Dropdown>Retry after the instance is available.</HoverCard.Dropdown>
      </HoverCard>
      {cluster?.computed.isStarter && (
        <McpConfigModal cluster={cluster} opened={mcpConfigOpened} onClose={mcpConfigHandlers.close} />
      )}
      <ServerlessConnectionV2
        cluster={cluster}
        branchScope="all"
        opened={connectOpened}
        onClose={connectHandlers.close}
      />
      <StarterOperation cluster={cluster.serverless} modals={oprModals} actionIconProps={{ variant: 'default' }} />
    </>
  )
})