import { Box, Flex, Stack, useComputedColorScheme } from '@tidbcloud/uikit'
import { useDisclosure } from '@tidbcloud/uikit/hooks'
import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'

import config from 'config'
import { ServerlessClusterPropPanel } from 'dbaas/screens/Cluster/OverviewV2/ClusterProperty'
import MonitorCard from 'dbaas/screens/Cluster/OverviewV2/Monitoring'
import { ClusterPageShell } from 'dbaas/screens/ClusterV2/components'
import { TiDBOnboaring } from 'dbaas/screens/NextGen/premium/overview/guide'
import { PremiumOverviewHeaderRightSection } from 'dbaas/screens/NextGen/premium/overview/header/HeaderRightSection'
import { PremiumConnectModal } from 'dbaas/screens/NextGen/premium/shared/connection/ConnectModal'
import { ServicePlanTag } from 'dbaas/screens/NextGen/shared/tidb-instance/service-plan/ServicePlanTag'
import { useSharedTiDBContext } from 'dbaas/screens/NextGen/tidb-mgmt-container/shared/tidb-context'
import useStores from 'dbaas/stores/useStores'

import { toEssentialV2Cluster } from '../shared/to-essential-v2-cluster'

import { StandardCapacity } from './StandardCapacity'

const EssentialV2Overview = () => {
  const colorScheme = useComputedColorScheme()
  const tidb = useSharedTiDBContext()
  const cluster = toEssentialV2Cluster(tidb)
  const [connectOpened, connectHandlers] = useDisclosure(false)
  const { state } = useLocation<{ from?: string }>()
  const {
    actions: { fetchCluster }
  } = useStores()

  useEffect(() => {
    document.title = `${config.PAGE_TITLE_PREFIX}Overview`
  }, [])

  useEffect(() => {
    // fix capacity update not sync to frontend
    if (state?.from === 'edit-capacity') {
      fetchCluster(cluster.id)
    }
  }, [state?.from, cluster.id, fetchCluster])

  return (
    <ClusterPageShell
      title="Overview"
      wrapperProps={{
        h: '100%',
        sx: (theme) => ({
          backgroundColor: colorScheme === 'dark' ? undefined : theme.colors.carbon[1]
        })
      }}
      headerProps={{
        sticky: true,
        rightSection: <PremiumOverviewHeaderRightSection openConnect={connectHandlers.open} />,
        sx: (theme) => ({
          background: colorScheme === 'dark' ? undefined : theme.colors.carbon[1]
        })
      }}
      bodyProps={{
        px: 0,
        pb: 96
      }}
    >
      <Stack gap="xl" justify="flex-start" px="xl" miw={937}>
        <TiDBOnboaring tidb={tidb} openConnect={connectHandlers.open} />
        <Flex
          gap="xl"
          align="stretch"
          sx={(theme) => ({ [`@media (max-width: ${theme.breakpoints.lg}px)`]: { flexWrap: 'wrap' } })}
        >
          <Box w="100%">
            <StandardCapacity
              tidb={tidb}
              miw={448}
              mb={24}
              sx={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}
            />
            <MonitorCard cluster={cluster} />
          </Box>

          <Box maw={400}>
            <ServerlessClusterPropPanel
              cluster={cluster}
              miw={400}
              rightSection={<ServicePlanTag servicePlan={cluster.serverless?.servicePlan ?? 'Starter'} />}
              sx={(theme) => ({
                [`@media (max-width: ${theme.breakpoints.lg}px)`]: {
                  flex: 1
                }
              })}
            />
          </Box>
        </Flex>
      </Stack>
      <PremiumConnectModal tidb={tidb} opened={connectOpened} onClose={connectHandlers.close} />
    </ClusterPageShell>
  )
}

export default EssentialV2Overview