import { DynamicEchTheme } from '@tidb-cloud-uikit/theme/Chart/DynamicEchTheme'
import { Box, Stack } from '@tidbcloud/uikit'
import { AppShell } from '@tidbcloud/uikit/biz'
import dayjs from 'dayjs'
import { observer } from 'mobx-react'
import { Suspense } from 'react'
import { Redirect, Route, Switch, useHistory, useLocation } from 'react-router-dom'

import { MSPServiceAgreement } from 'dbaas/components/Legal'
import { DelayedPageLoader } from 'dbaas/components/Placeholder'
import { SkipContent, useScorllToHash } from 'dbaas/components/SkipContent'
import { useSyncOrgToUrl } from 'dbaas/features/Organization'
import { useNextGenMode } from 'dbaas/features/Organization/mode'
import { layoutDependentRoutes } from 'dbaas/routes/protected/layout-dependent'
import { legacyRedirectRoutes } from 'dbaas/routes/protected/misc'
import WebShell from 'dbaas/screens/Cluster/WebShell'
import { HelpCenterEntry } from 'dbaas/screens/HelpCenter'
import { HelpCenterProvider } from 'dbaas/screens/HelpCenter/context'
import { TrialUserBanner } from 'dbaas/screens/OrgSettings/features/Billing/components/TrialUserNotification'
import useStores from 'dbaas/stores/useStores'
import { eventTracking, MixpanelEvents } from 'dbaas/utils/tracking'
import Logo from 'media/logo/tidb-cloud-no-text.svg?react'

import { NewNavGuideFeedbackModal } from './NewNavGuide/Feedback'
import { useNewNavGuide } from './NewNavGuide/useNewNavGuide'
import { FootSection } from './SideNavbar'
import { NavSwitcher } from './SideNavbar/NavSwitcher'
import { NavSwitcherNextGen } from './SideNavbar/NavSwitcherNextGen'

export const AppContainer = observer(() => {
  const {
    store: {
      userProfile: { user_created_at }
    }
  } = useStores()
  const { isNextGen } = useNextGenMode()

  useSyncOrgToUrl()

  const location = useLocation()
  const history = useHistory()

  const skipName = 'skip-to-content'

  useScorllToHash(skipName)
  // new navigation guide for users created before 2026-03-30
  useNewNavGuide(dayjs(user_created_at).isBefore(dayjs('2026-03-30')))

  const LogoComponent = () => <Box component={Logo} width={26} height={26} />

  return (
    <DynamicEchTheme>
      <SkipContent name={skipName} />
      <NewNavGuideFeedbackModal />
      <HelpCenterProvider>
        <AppShell
          banner={
            <div>
              <TrialUserBanner />
            </div>
          }
          navbar={{
            logo: <LogoComponent />,
            aboveMenu: <Stack gap="xs">{isNextGen ? <NavSwitcherNextGen /> : <NavSwitcher />}</Stack>,
            footer: <FootSection />,
            onLogoClick: () => {
              eventTracking(MixpanelEvents.AppContainerNavbarLogo.View.ButtonClicked)
              history.push('/')
            },
            onCollapse() {
              eventTracking('Nav Sidebar Collapse')
            },
            onExpand() {
              eventTracking('Nav Sidebar Expand')
            }
          }}
        >
          <div id={skipName}></div>
          <Suspense fallback={<DelayedPageLoader />}>
            <Switch>
              {legacyRedirectRoutes.map((route) => {
                return (
                  <Redirect
                    key={route.from}
                    from={route.from}
                    to={{ pathname: route.to, search: location.search }}
                    exact={route.exact}
                  />
                )
              })}
              {/* FIXME: move these routes to `legacyRedirectRoutes` */}
              {layoutDependentRoutes.map((route) => {
                const { path } = route
                return <Redirect key={path} from={`/console${path}`} to={path} />
              })}
              {layoutDependentRoutes.map((route) => {
                const { path, component: Component } = route
                return (
                  <Route key={path} path={path}>
                    <Component />
                  </Route>
                )
              })}
            </Switch>
          </Suspense>
          {/* web sql shell */}
          <WebShell />
          <MSPServiceAgreement />
        </AppShell>
        <HelpCenterEntry />
      </HelpCenterProvider>
    </DynamicEchTheme>
  )
})