import { NavMenuPortal } from '@tidbcloud/uikit/biz'
import { IconBarLineChart, IconDataflow03, IconHome02, IconIntegration, IconSettings02 } from '@tidbcloud/uikit/icons'
import { lazy, Suspense } from 'react'
import { Redirect, Route, Switch, useLocation } from 'react-router-dom'

import { DelayedPageLoader } from 'dbaas/components/Placeholder'
import { NavItemProps, NavMenu } from 'dbaas/layouts/v5/SideNavbar/components/NavMenu'
import { useEssentialV2ChangefeedEnabled } from 'dbaas/screens/NextGen/my-tidb-creation/shared/use-essential-v2-enabled'
import { SharedTiDB } from 'dbaas/screens/NextGen/shared/model/shared-tidb-state'
import { SharedTiDBContext } from 'dbaas/screens/NextGen/tidb-mgmt-container/shared/tidb-context'
import { eventTracking } from 'dbaas/utils/tracking'

const Overview = lazy(() => import('./overview'))
const EditCapacity = lazy(() => import('./capacity'))
const ImportList = lazy(() => import('dbaas/screens/NextGen/premium/import/List'))
const ImportDetail = lazy(() => import('dbaas/screens/NextGen/premium/import/Detail'))
const ImportCreation = lazy(() => import('dbaas/screens/NextGen/premium/import/Creation'))
const ExportList = lazy(() => import('dbaas/screens/NextGen/premium/export/List'))
const ExportCreation = lazy(() => import('dbaas/screens/NextGen/premium/export/Creation'))
const BackupList = lazy(() => import('dbaas/screens/NextGen/premium/backup/List'))
const RestoreCreate = lazy(() => import('dbaas/screens/NextGen/premium/restore/Create'))
const CdcList = lazy(() => import('dbaas/screens/Changefeed/ChangefeedListPremium'))
const CdcCreateOrEdit = lazy(() => import('dbaas/screens/Changefeed/CreateOrEditChangefeedPremium'))
const CdcDetail = lazy(() => import('dbaas/screens/Changefeed/ChangefeedDetailPremium'))
const DataMigrationList = lazy(() => import('dbaas/screens/NextGen/premium/dm/List'))
const DataMigrationDetail = lazy(() => import('dbaas/screens/NextGen/premium/dm/Detail'))
const DataMigrationCreate = lazy(() => import('dbaas/screens/NextGen/premium/dm/Create'))
const Metrics = lazy(() => import('dbaas/screens/NextGen/premium/metrics'))
const TopSQL = lazy(() => import('dbaas/screens/NextGen/premium/top-sql'))
const Networking = lazy(() => import('dbaas/screens/NextGen/premium/networking'))
const Diagnosis = lazy(() => import('dbaas/screens/NextGen/premium/diagnosis'))
const DBAuditLog = lazy(() => import('dbaas/screens/NextGen/premium/db-aduit-log'))
const SlowQuery = lazy(() => import('dbaas/screens/NextGen/premium/slowquery/list'))
const SlowQueryDetail = lazy(() => import('dbaas/screens/NextGen/premium/slowquery/detail'))
const SQLStatement = lazy(() => import('dbaas/screens/NextGen/premium/sql-statement/list'))
const SQLStatementV2 = lazy(() => import('dbaas/screens/NextGen/premium/sql-statement-v2/list'))
const SQLStatementV2Detail = lazy(() => import('dbaas/screens/NextGen/premium/sql-statement-v2/detail'))
const StatementDetail = lazy(() => import('dbaas/screens/NextGen/premium/sql-statement/detail'))
const Security = lazy(() => import('dbaas/screens/NextGen/premium/security'))
const AlertsSubscription = lazy(() => import('dbaas/screens/NextGen/premium/alert-subscription'))
const AlertsList = lazy(() => import('dbaas/screens/NextGen/premium/alert-rule/AlertsList'))
const AlertsRules = lazy(() => import('dbaas/screens/NextGen/premium/alert-rule/AlertsRules'))
const Integrations = lazy(() => import('./integrations'))

const basePath = '/tidbs'

export const EssentialV2Routes = ({ tidb }: { tidb: SharedTiDB }) => {
  const location = useLocation()

  return (
    <SharedTiDBContext.Provider value={tidb}>
      <Suspense fallback={<DelayedPageLoader />}>
        <Switch>
          <Route path={`${basePath}/:id/overview`} exact>
            <Overview />
          </Route>
          <Route path={`${basePath}/:id/edit-capacity`} exact>
            <EditCapacity />
          </Route>
          <Route path={`${basePath}/:id/imports`} exact>
            <ImportList />
          </Route>
          <Route path={`${basePath}/:id/imports/create-import`} exact>
            <ImportCreation />
          </Route>
          <Route path={`${basePath}/:id/imports/:importId`} exact>
            <ImportDetail />
          </Route>
          <Route path={`${basePath}/:id/exports`} exact>
            <ExportList />
          </Route>
          <Route path={`${basePath}/:id/exports/create`} exact>
            <ExportCreation />
          </Route>
          <Route path={`${basePath}/:id/backups`} exact>
            <BackupList />
          </Route>
          <Route path={`${basePath}/:id/restore`} exact>
            <RestoreCreate />
          </Route>
          <Route path={`${basePath}/:id/changefeed`} exact>
            <CdcList />
          </Route>
          <Route path={`${basePath}/:id/changefeed/create`} exact>
            <CdcCreateOrEdit />
          </Route>
          <Route path={`${basePath}/:id/changefeed/edit`} exact>
            <CdcCreateOrEdit />
          </Route>
          <Route path={`${basePath}/:id/changefeed/:changefeedId`} exact>
            <CdcDetail />
          </Route>
          <Route path={`${basePath}/:id/data-migration`} exact>
            <DataMigrationList />
          </Route>
          <Route path={`${basePath}/:id/data-migration/create`} exact>
            <DataMigrationCreate />
          </Route>
          <Route path={`${basePath}/:id/data-migration/:jobId`} exact>
            <DataMigrationDetail />
          </Route>
          <Route path={`${basePath}/:id/metrics`} exact>
            <Metrics />
          </Route>
          <Route path={`${basePath}/:id/top-ru`} exact>
            <TopSQL />
          </Route>
          <Route path={`${basePath}/:id/networking`} exact>
            <Networking />
          </Route>
          <Route path={`${basePath}/:id/audit-log`} exact>
            <DBAuditLog />
          </Route>
          <Route path={`${basePath}/:id/diagnosis/slow-query/detail`} exact>
            <SlowQueryDetail />
          </Route>
          <Route path={`${basePath}/:id/diagnosis/sql-statement-v2/detail`} exact>
            <SQLStatementV2Detail />
          </Route>
          <Route path={`${basePath}/:id/diagnosis/sql-statement/detail`} exact>
            <StatementDetail />
          </Route>
          <Route path={`${basePath}/:id/diagnosis/*`}>
            <Diagnosis>
              <Switch>
                <Route path={`${basePath}/:id/diagnosis/slow-query`} exact>
                  <SlowQuery embedded />
                </Route>
                <Route path={`${basePath}/:id/diagnosis/sql-statement-v2`} exact>
                  <SQLStatementV2 embedded />
                </Route>
                <Route path={`${basePath}/:id/diagnosis/sql-statement`} exact>
                  <SQLStatement embedded />
                </Route>
              </Switch>
            </Diagnosis>
          </Route>
          <Redirect from={`${basePath}/:id/diagnosis`} to={`${basePath}/:id/diagnosis/`} exact />
          <Route path={`${basePath}/:id/slow-query`} exact>
            <Redirect to={{ pathname: `${basePath}/${tidb.tidbId}/diagnosis/slow-query`, search: location.search }} />
          </Route>
          <Route path={`${basePath}/:id/slow-query/detail`} exact>
            <Redirect
              to={{ pathname: `${basePath}/${tidb.tidbId}/diagnosis/slow-query/detail`, search: location.search }}
            />
          </Route>
          <Route path={`${basePath}/:id/sql-statement-v2`} exact>
            <Redirect
              to={{ pathname: `${basePath}/${tidb.tidbId}/diagnosis/sql-statement-v2`, search: location.search }}
            />
          </Route>
          <Route path={`${basePath}/:id/sql-statement-v2/detail`} exact>
            <Redirect
              to={{ pathname: `${basePath}/${tidb.tidbId}/diagnosis/sql-statement-v2/detail`, search: location.search }}
            />
          </Route>
          <Route path={`${basePath}/:id/sql-statement`} exact>
            <Redirect
              to={{ pathname: `${basePath}/${tidb.tidbId}/diagnosis/sql-statement`, search: location.search }}
            />
          </Route>
          <Route path={`${basePath}/:id/sql-statement/detail`} exact>
            <Redirect
              to={{ pathname: `${basePath}/${tidb.tidbId}/diagnosis/sql-statement/detail`, search: location.search }}
            />
          </Route>
          <Route path={`${basePath}/:id/alerts`} exact>
            <AlertsList />
          </Route>
          <Route path={`${basePath}/:id/alerts/rules`} exact>
            <AlertsRules />
          </Route>
          <Route path={`${basePath}/:id/integrations`} exact>
            <Integrations />
          </Route>
          <Route path={`${basePath}/:id/security`} exact>
            <Security />
          </Route>
          <Route path={`${basePath}/:id/alert-subscription`} exact>
            <AlertsSubscription />
          </Route>
          <Redirect from={`${basePath}/:id`} to={`${basePath}/:id/overview`} exact />
        </Switch>
      </Suspense>
    </SharedTiDBContext.Provider>
  )
}

export const EssentialV2Nav = ({ tidb }: { tidb: SharedTiDB }) => {
  const id = tidb.tidbId
  const commonDisabled = tidb.computed.creating || tidb.computed.restoring
  const changefeedEnabled = useEssentialV2ChangefeedEnabled()
  const getNavOnClick = (navLabel: string) => {
    const params = {
      'Cluster Type': 'Essential',
      source: 'EssentialV2Mgmt - Navbar'
    }

    return () => eventTracking(`${navLabel} Nav Clicked`, params)
  }

  const navs: NavItemProps[] = [
    {
      label: 'Overview',
      path: `${basePath}/${id}/overview`,
      disabled: tidb.computed.restoring,
      onClick: getNavOnClick('Overview'),
      leftSection: <IconHome02 size={16} />
    },
    {
      label: 'Data',
      path: basePath,
      leftSection: <IconDataflow03 size={16} />,
      children: [
        {
          label: 'Import',
          path: `${basePath}/${id}/imports`,
          disabled: commonDisabled,
          onClick: getNavOnClick('Import')
        },
        {
          label: 'Export',
          path: `${basePath}/${id}/exports`,
          disabled: commonDisabled,
          onClick: getNavOnClick('Export')
        },
        {
          label: 'Backup',
          path: `${basePath}/${id}/backups`,
          disabled: commonDisabled,
          onClick: getNavOnClick('Backup')
        },
        {
          label: 'Changefeed',
          path: `${basePath}/${id}/changefeed`,
          disabled: commonDisabled,
          onClick: getNavOnClick('Changefeed'),
          hidden: !changefeedEnabled
        },
        {
          label: 'Data Migration',
          path: `${basePath}/${id}/data-migration`,
          disabled: commonDisabled,
          onClick: getNavOnClick('Data Migration')
        }
      ]
    },
    {
      label: 'Monitoring',
      path: basePath,
      leftSection: <IconBarLineChart size={16} />,
      children: [
        {
          label: 'Diagnosis',
          path: `${basePath}/${id}/diagnosis`,
          disabled: commonDisabled,
          onClick: getNavOnClick('Diagnosis')
        },
        {
          label: 'Metrics',
          path: `${basePath}/${id}/metrics`,
          disabled: commonDisabled,
          onClick: getNavOnClick('Metrics')
        },
        {
          label: 'Top RU',
          path: `${basePath}/${id}/top-ru`,
          disabled: commonDisabled,
          onClick: getNavOnClick('Top RU')
        },
        {
          label: 'Alerts',
          path: `${basePath}/${id}/alerts`,
          disabled: commonDisabled,
          onClick: getNavOnClick('Alerts')
        }
      ]
    },
    {
      label: 'Integrations',
      path: `${basePath}/${id}/integrations`,
      disabled: commonDisabled,
      onClick: getNavOnClick('Integrations'),
      leftSection: <IconIntegration size={16} />
    },
    {
      label: 'Settings',
      path: `${basePath}/${id}/settings`,
      leftSection: <IconSettings02 size={16} />,
      children: [
        {
          label: 'Networking',
          path: `${basePath}/${id}/networking`,
          disabled: commonDisabled,
          onClick: getNavOnClick('Networking')
        },
        {
          label: 'DB Audit Logging',
          path: `${basePath}/${id}/audit-log`,
          disabled: commonDisabled,
          onClick: getNavOnClick('DB Audit Logging')
        },
        {
          label: 'Security',
          path: `${basePath}/${id}/security`,
          disabled: commonDisabled,
          onClick: getNavOnClick('Security')
        },
        {
          label: 'Alert Subscription',
          path: `${basePath}/${id}/alert-subscription`,
          disabled: commonDisabled,
          onClick: getNavOnClick('Alert Subscription')
        }
      ]
    }
  ]

  return (
    <NavMenuPortal>
      <NavMenu navList={navs} defaultOpenedSub />
    </NavMenuPortal>
  )
}