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

import { DelayedPageLoader } from 'dbaas/components/Placeholder'
import { useOrgProjectClusterIds } from 'dbaas/features/Common'
import { NavItemProps, NavMenu } from 'dbaas/layouts/v5/SideNavbar/components/NavMenu'
import { SharedTiDB } from 'dbaas/screens/NextGen/shared/model/shared-tidb-state'
import { SharedTiDBContext } from 'dbaas/screens/NextGen/tidb-mgmt-container/shared/tidb-context'
import { useGetExpWhiteList } from 'dbaas/services'
import { eventTracking } from 'dbaas/utils/tracking'

import AlertsList from '../premium/alert-rule/AlertsList'
import AlertsRules from '../premium/alert-rule/AlertsRules'

import { canShowPremiumDm } from './premium-dm-visibility'

const Overview = lazy(() => import('dbaas/screens/NextGen/premium/overview'))
const EditCapacity = lazy(() => import('dbaas/screens/NextGen/premium/capacity'))
const ImportListPremium = lazy(() => import('dbaas/screens/NextGen/premium/import/List'))
const ImportDetailPremium = lazy(() => import('dbaas/screens/NextGen/premium/import/Detail'))
const BackupListPremium = lazy(() => import('dbaas/screens/NextGen/premium/backup/List'))
const RestoreCreatePremium = lazy(() => import('dbaas/screens/NextGen/premium/restore/Create'))
const ImportCreationPremium = lazy(() => import('dbaas/screens/NextGen/premium/import/Creation'))
const ExportListPremium = lazy(() => import('dbaas/screens/NextGen/premium/export/List'))
const ExportCreationPremium = lazy(() => import('dbaas/screens/NextGen/premium/export/Creation'))
const Metrics = lazy(() => import('dbaas/screens/NextGen/premium/metrics'))
const Events = lazy(() => import('dbaas/screens/NextGen/premium/events'))
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 SlowQuery = lazy(() => import('dbaas/screens/NextGen/premium/slowquery/list'))
const SlowQueryDetail = lazy(() => import('dbaas/screens/NextGen/premium/slowquery/detail'))
const DBAuditLog = lazy(() => import('dbaas/screens/NextGen/premium/db-aduit-log'))
const Security = lazy(() => import('dbaas/screens/NextGen/premium/security'))
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 CdcListPremium = lazy(() => import('dbaas/screens/Changefeed/ChangefeedListPremium'))
const CdcCreateOrEditPremium = lazy(() => import('dbaas/screens/Changefeed/CreateOrEditChangefeedPremium'))
const CdcDetailPremium = lazy(() => import('dbaas/screens/Changefeed/ChangefeedDetailPremium'))
const AlertsSubscription = lazy(() => import('dbaas/screens/NextGen/premium/alert-subscription'))
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 Integrations = lazy(() => import('dbaas/screens/NextGen/premium/integrations'))

const basePath = '/tidbs'

const getCassandraAllowedPathPatterns = (tidbId?: string) => [
  `${basePath}/${tidbId}/overview`,
  `${basePath}/${tidbId}/edit-capacity`,
  `${basePath}/${tidbId}/metrics`,
  `${basePath}/${tidbId}/changefeed`,
  `${basePath}/${tidbId}/changefeed/create`,
  `${basePath}/${tidbId}/changefeed/edit`,
  `${basePath}/${tidbId}/changefeed/:changefeedId`
]

export const TiDBMgmtRoutes = ({ tidb }: { tidb: SharedTiDB }) => {
  const location = useLocation()
  const overviewPath = `${basePath}/${tidb.tidbId}/overview`

  const cassandraPathAllowed = getCassandraAllowedPathPatterns(tidb.tidbId).some((path) =>
    matchPath(location.pathname, { path, exact: true })
  )

  if (tidb.computed.isCassandra && !cassandraPathAllowed) {
    return <Redirect to={overviewPath} />
  }

  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>
            <ImportListPremium />
          </Route>
          <Route path={`${basePath}/:id/imports/create-import`} exact>
            <ImportCreationPremium />
          </Route>
          <Route path={`${basePath}/:id/imports/:importId`} exact>
            <ImportDetailPremium />
          </Route>
          <Route path={`${basePath}/:id/exports`} exact>
            <ExportListPremium />
          </Route>
          <Route path={`${basePath}/:id/exports/create`} exact>
            <ExportCreationPremium />
          </Route>
          <Route path={`${basePath}/:id/backups`} exact>
            <BackupListPremium />
          </Route>
          <Route path={`${basePath}/:id/restore`} exact>
            <RestoreCreatePremium />
          </Route>
          <Route path={`${basePath}/:id/changefeed`} exact>
            <CdcListPremium />
          </Route>
          <Route path={`${basePath}/:id/changefeed/create`} exact>
            <CdcCreateOrEditPremium />
          </Route>
          <Route path={`${basePath}/:id/changefeed/edit`} exact>
            <CdcCreateOrEditPremium />
          </Route>
          <Route path={`${basePath}/:id/changefeed/:changefeedId`} exact>
            <CdcDetailPremium />
          </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/events`} exact>
            <Events />
          </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/security`} exact>
            <Security />
          </Route>
          <Route path={`${basePath}/:id/alert-subscription`} exact>
            <AlertsSubscription />
          </Route>
          <Route path={`${basePath}/:id/integrations`} exact>
            <Integrations />
          </Route>
          <Route path={`${basePath}/:id/alerts`} exact>
            <AlertsList />
          </Route>
          <Route path={`${basePath}/:id/alerts/rules`} exact>
            <AlertsRules />
          </Route>
          <Redirect from={`${basePath}/:id`} to={`${basePath}/:id/overview`} exact />
        </Switch>
      </Suspense>
    </SharedTiDBContext.Provider>
  )
}

export const TiDBMgmtNav = ({ tidb }: { tidb: SharedTiDB }) => {
  // TODO: replace eventTracking with data-mp-event
  const id = tidb.tidbId
  const getNavOnClick = (navLabel: string) => {
    const params = {
      'Cluster Type': 'Premium',
      source: 'TiDBMgmt - Navbar'
    }

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

  const { orgId } = useOrgProjectClusterIds()
  const { data: expNames } = useGetExpWhiteList(orgId, undefined, {
    query: {
      enabled: !!orgId,
      refetchOnWindowFocus: false,
      refetchOnMount: false,
      select(data) {
        return data.exp_names
      }
    }
  })
  const isPremiumDataMigrationEnabled = expNames?.includes('premium_data_migration')
  const isPremiumDataMigrationVisible = canShowPremiumDm({
    cloudProvider: tidb.cloudProvider,
    isFeatureEnabled: isPremiumDataMigrationEnabled ?? false,
    isTenantAllowlisted: expNames?.includes('premium_data_migration_by_tenant') ?? false
  })
  const isCassandra = tidb.computed.isCassandra
  const isPremiumReserved = tidb.computed.isPremiumReserved

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

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