import { Suspense } from 'react'
import { Redirect, Route, Switch } from 'react-router-dom'

import { DelayedPageLoader } from 'dbaas/components/Placeholder'
import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import { useBranchAvailability } from 'dbaas/features/ClusterManagement/feats/use-branch-availability'
import { useNextGenMode } from 'dbaas/features/Organization/mode'

import {
  AlertsList,
  AlertsRules,
  AlertSubscription,
  AuditLog,
  AwsBedrock,
  BackupHome,
  BackupRestore,
  Branch,
  CalibrateResource,
  CapacityEdit,
  CDCCreation,
  CDCDetailPage,
  CDCEdit,
  CDCHome,
  ClusterIntegration,
  ClusterModifying,
  DedicatedNodes,
  Diagnosis,
  DMCreation,
  DMJob,
  DMList,
  Events,
  ExportBackup,
  ExportCreation,
  ExportList,
  ImportCreation,
  ImportList,
  IndexAdvisor,
  Integration,
  KeyViz,
  Metrics,
  Networking,
  Overview,
  Security,
  SlowQueryDetail,
  SlowQueryList,
  SpendLimitEdit,
  SQLEditor,
  SQLRepositoryDetail,
  SQLRepositoryList,
  SQLUsers,
  StatementDetail,
  StatementDetailV2,
  StatementList,
  StatementListV2,
  TopRU
} from '../features'

interface ClusterRoutesProps {
  cluster: SharedCluster
}

const ClusterRoutes: React.FC<React.PropsWithChildren<ClusterRoutesProps>> = ({ cluster }) => {
  const { isNextGen } = useNextGenMode()
  const basePath = isNextGen ? '/tidbs' : '/clusters'
  const branchAvailability = useBranchAvailability(cluster)

  if (!cluster) {
    return null
  }

  return (
    <Suspense fallback={<DelayedPageLoader />}>
      <Switch>
        <Route path={`${basePath}/:id/overview`} exact>
          <Overview cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/integration`} exact>
          <Integration cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/modifying`} exact>
          <ClusterModifying cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/edit-spendlimit`} exact>
          <SpendLimitEdit cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/edit-capacity`} exact>
          <CapacityEdit cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/sqleditor`} exact>
          <SQLEditor cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/branches`} exact>
          {branchAvailability.isLoading ? (
            <DelayedPageLoader />
          ) : branchAvailability.enabled ? (
            <Branch cluster={cluster} />
          ) : (
            <Redirect to={`${basePath}/${cluster.id}/overview`} />
          )}
        </Route>
        {/* diagnosis */}
        <Route path={`${basePath}/:id/diagnosis/slow-query/detail`}>
          <SlowQueryDetail cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/diagnosis/sql-statement/detail`}>
          <StatementDetail cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/diagnosis/sql-statement-v2/detail`}>
          <StatementDetailV2 cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/diagnosis/sql-repository/detail`}>
          <SQLRepositoryDetail cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/diagnosis/*`}>
          <Diagnosis cluster={cluster}>
            <Switch>
              <Route path={`${basePath}/:id/diagnosis/sql-statement-v2`} exact>
                <StatementListV2 cluster={cluster} />
              </Route>
              <Route path={`${basePath}/:id/diagnosis/sql-statement`} exact>
                <StatementList cluster={cluster} />
              </Route>
              <Route path={`${basePath}/:id/diagnosis/sql-repository`}>
                <SQLRepositoryList cluster={cluster} />
              </Route>
              <Route path={`${basePath}/:id/diagnosis/slow-query`}>
                <SlowQueryList cluster={cluster} />
              </Route>
              <Route path={`${basePath}/:id/diagnosis/index-advisor`}>
                <IndexAdvisor cluster={cluster} />
              </Route>
              <Route path={`${basePath}/:id/diagnosis/key-viz`}>
                <KeyViz cluster={cluster} />
              </Route>
            </Switch>
          </Diagnosis>
        </Route>
        <Redirect from={`${basePath}/:id/diagnosis`} to={`${basePath}/:id/diagnosis/`} />

        <Route path={`${basePath}/:id/metrics`}>
          <Metrics cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/top-ru`} exact>
          <TopRU cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/nodes`}>
          <DedicatedNodes cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/alerts`} exact>
          <AlertsList cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/alerts/rules`}>
          <AlertsRules cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/events`}>
          <Events cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/calibrate_resource`}>
          <CalibrateResource cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/imports/create-import`} exact>
          <ImportCreation />
        </Route>
        <Route path={`${basePath}/:id/imports`} exact>
          <ImportList cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/exports/create-export`} exact>
          <ExportCreation />
        </Route>
        <Route path={`${basePath}/:id/exports`} exact>
          <ExportList cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/data-migration`} exact>
          <DMList cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/data-migration/create`} exact>
          <DMCreation cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/data-migration/:jobId`} exact>
          <DMJob />
        </Route>
        <Route path={`${basePath}/:id/changefeed`} exact>
          <CDCHome cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/changefeed/create-changefeed`} exact>
          <CDCCreation cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/changefeed/edit-changefeed`} exact>
          <CDCEdit cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/changefeed/:changefeedId`}>
          <CDCDetailPage cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/backup`} exact>
          <BackupHome cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/backup/restore`} exact>
          <BackupRestore cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/backup/export`} exact>
          <ExportBackup cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/sql-users`} exact>
          <SQLUsers cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/networking`} exact>
          <Networking cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/audit-log`} exact>
          <AuditLog cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/security`} exact>
          <Security cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/alert-subscription`} exact>
          <AlertSubscription cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/integrations`} exact>
          <ClusterIntegration cluster={cluster} />
        </Route>
        <Route path={`${basePath}/:id/aws-bedrock`} exact>
          <AwsBedrock cluster={cluster} />
        </Route>
        <Redirect from={`${basePath}/:id`} to={`${basePath}/:id/overview`} exact />
        <Redirect from={`${basePath}/:id/data-import`} to={`${basePath}/:id/imports`} exact />
        <Redirect from={`${basePath}/:id/monitoring`} to={`${basePath}/:id/metrics`} exact />
      </Switch>
    </Suspense>
  )
}

export default ClusterRoutes