import React from 'react'

import { Navigate, Route, Routes, useParams } from 'react-router-dom'

import {
  ClusterGuard,
  OrgGuard,
  ReportGuard,
  DeployTypeGuard
} from '~/components/Layout'
import { useCurCluster, useCurOrg } from '~/hooks/state'
import { useRouteGuard } from '~/hooks/use-route-guard'
import { RouterMetaInfo } from '~/hooks/use-router-meta'
import ClusterPage from '~/pages/cluster'
import ConfigurationsPage from '~/pages/cluster/configurations'
import ClusterFilesPage from '~/pages/cluster/files'
import ClusterSettingsPage from '~/pages/cluster/settings'
import StatementDetailPage from '~/pages/cluster/SQLRepository/Detail'
import StatementListPage from '~/pages/cluster/SQLRepository/List'
import {
  StatementV2RouteGuard,
  StatementVersionResolver
} from '~/pages/cluster/StatementRoute'
import StatementV2Page from '~/pages/cluster/StatementV2'
import StatementV2DetailPage from '~/pages/cluster/StatementV2/Detail'
import DrillTestPage from '~/pages/drill-test'
import DrillTestDetailPage from '~/pages/drill-test/detail'
import EventCenterPages from '~/pages/event-center'
import HealthReportPage from '~/pages/reports/benchmark/Report'
import ComparisonReportListPage from '~/pages/reports/comparison/Index'
import ComparisonReportPage from '~/pages/reports/comparison/Report'
import ReportEntry from '~/pages/reports/entry'
import { ReportTypeName } from '~/pages/reports/entry/useReportType'
import HealthReport from '~/pages/reports/health'
import OOMPage from '~/pages/reports/oom'
import { ReportType } from '~/pages/reports/shared/types'
import SlowLogVisPage from '~/pages/reports/slow-log'
import TrafficMirrorReportPage from '~/pages/reports/traffic-mirror/List'
import WorkloadReportPage from '~/pages/reports/workload/Report'
import UIKitProvider from '~/uikit-provider'
import { ClusterDeployType } from '~/utils/cluster-status'

import { ClusterMetricsPage } from '../cluster/metrics'
import TopRUPage from '../cluster/top-ru'
import HealthCheckPage from '../health-check'
import HealthCheckDetail from '../health-check/detail'
import StrategyManagementPage from '../health-check/strategies'
import CreateStrategyPage from '../health-check/strategies/create'
import { TrafficMirrorReportDetail } from '../reports/traffic-mirror/ReportDetail'
import CloudClustersPage from './cloud'
import OPClustersPage from './op'
import OrgSettingsPage from './settings'

const EditOrgPermissionGuard: React.FC<React.PropsWithChildren> = ({
  children
}) => {
  const { curOrg } = useCurOrg()
  const isAdmin = curOrg!.isAdmin

  useRouteGuard(isAdmin, `/orgs/${curOrg?.id}`)

  return <>{children}</>
}

const EditClusterPermissionGuard: React.FC<React.PropsWithChildren> = ({
  children
}) => {
  const { curOrg } = useCurOrg()
  const isAdmin = curOrg!.isAdmin
  const isAnalyst = curOrg!.isAnalyst
  const { curCluster } = useCurCluster()

  useRouteGuard(
    isAdmin || isAnalyst,
    `/orgs/${curOrg?.id}/clusters/${curCluster?.id}`
  )

  return <>{children}</>
}

const OrgClusterPage: React.FC = () => {
  const { curOrg } = useCurOrg()
  const { isOP } = curOrg!

  return isOP ? <OPClustersPage /> : <CloudClustersPage />
}

const OrgPages: React.FC = () => {
  return (
    <Routes>
      {/* Protect by <OrgGuard/> component */}
      <Route path='/' element={<OrgGuard />}>
        <Route index element={<Navigate to='clusters' replace={true} />} />
        <Route
          path='clusters'
          element={
            <RouterMetaInfo title='Org Clusters'>
              <OrgClusterPage />
            </RouterMetaInfo>
          }
        />
        <Route
          path='settings'
          element={
            <EditOrgPermissionGuard>
              <RouterMetaInfo title='Org Setting'>
                <OrgSettingsPage />
              </RouterMetaInfo>
            </EditOrgPermissionGuard>
          }
        />
      </Route>

      {/* Statement pages open in a standalone window without Clinic chrome. */}
      <Route path='clusters/:cid' element={<ClusterGuard standalone />}>
        <Route
          path='sql-statement'
          element={
            <RouterMetaInfo title='SQL Statements'>
              <StatementVersionResolver />
            </RouterMetaInfo>
          }
        />
        <Route
          path='sql-statement-v2'
          element={
            <StatementV2RouteGuard>
              <RouterMetaInfo title='Statement Insight'>
                <UIKitProvider>
                  <StatementV2Page />
                </UIKitProvider>
              </RouterMetaInfo>
            </StatementV2RouteGuard>
          }
        />
        <Route
          path='sql-statement-v2/detail'
          element={
            <StatementV2RouteGuard>
              <RouterMetaInfo title='Statement Insight Detail'>
                <UIKitProvider>
                  <StatementV2DetailPage />
                </UIKitProvider>
              </RouterMetaInfo>
            </StatementV2RouteGuard>
          }
        />
      </Route>

      {/* Protect by <ClusterGuard/> component */}
      <Route path='clusters/:cid' element={<ClusterGuard />}>
        {/*
        <Route index element={<Navigate to='diagnosis' replace={true} />} />
        <Route
          path='diagnosis'
          element={
            <RouterMetaInfo title='Cluster Diagnosis'>
              <ClusterPage />
            </RouterMetaInfo>
          }
        />
        */}
        <Route
          index
          element={
            <RouterMetaInfo title='Cluster Diagnosis'>
              <ClusterPage />
            </RouterMetaInfo>
          }
        />
        <Route
          path='metrics'
          element={
            <RouterMetaInfo title='Cluster Metrics'>
              <ClusterMetricsPage />
            </RouterMetaInfo>
          }
        />
        <Route
          path='top-ru'
          element={
            <RouterMetaInfo title='Top RU'>
              <UIKitProvider>
                <TopRUPage />
              </UIKitProvider>
            </RouterMetaInfo>
          }
        />
        <Route
          path='settings'
          element={
            <EditClusterPermissionGuard>
              <RouterMetaInfo title='Cluster Settings'>
                <ClusterSettingsPage />
              </RouterMetaInfo>
            </EditClusterPermissionGuard>
          }
        />
        <Route
          path='configurations'
          element={
            <RouterMetaInfo title='Cluster Configurations'>
              <ConfigurationsPage />
            </RouterMetaInfo>
          }
        />
        <Route
          path='change-events'
          element={
            <RouterMetaInfo title='Cluster Change Events'>
              <div>Change Events</div>
            </RouterMetaInfo>
          }
        />
        <Route path='event-center/*' element={<EventCenterPages />} />
        <Route
          path='sql-repository'
          element={
            <RouterMetaInfo title='SQL Repository'>
              <StatementListPage />
            </RouterMetaInfo>
          }
        />
        <Route
          path='sql-repository/:digest'
          element={
            <RouterMetaInfo title='SQL Repository Detail'>
              <StatementDetailPage />
            </RouterMetaInfo>
          }
        />
        <Route
          path='drill-test'
          element={
            <DeployTypeGuard deployType={ClusterDeployType.Dedicated}>
              <RouterMetaInfo title='Drill Test'>
                <DrillTestPage />
              </RouterMetaInfo>
            </DeployTypeGuard>
          }
        ></Route>
        <Route
          path='drill-test/:eid'
          element={
            <DeployTypeGuard deployType={ClusterDeployType.Dedicated}>
              <RouterMetaInfo title='Drill Test'>
                <DrillTestDetailPage />
              </RouterMetaInfo>
            </DeployTypeGuard>
          }
        ></Route>
        <Route
          path='health-check'
          element={
            <RouterMetaInfo title='Health Check'>
              <UIKitProvider>
                <HealthCheckPage />
              </UIKitProvider>
            </RouterMetaInfo>
          }
        />
        <Route
          path='health-check/strategies'
          element={
            <RouterMetaInfo title='Strategy Management'>
              <UIKitProvider>
                <StrategyManagementPage />
              </UIKitProvider>
            </RouterMetaInfo>
          }
        />
        <Route
          path='health-check/strategies/create'
          element={
            <RouterMetaInfo title='Create Strategy'>
              <UIKitProvider>
                <CreateStrategyPage />
              </UIKitProvider>
            </RouterMetaInfo>
          }
        />
        <Route
          path='health-check/:taskId'
          element={
            <RouterMetaInfo title='Health Check Report'>
              <UIKitProvider>
                <HealthCheckDetail />
              </UIKitProvider>
            </RouterMetaInfo>
          }
        />
        <Route
          path='files'
          element={
            <RouterMetaInfo title='Cluster Files'>
              <ClusterFilesPage />
            </RouterMetaInfo>
          }
        />
        <Route
          path={`report/${ReportType.Comparison}`}
          element={
            <RouterMetaInfo
              title={`${ReportTypeName[ReportType.Comparison]} List`}
            >
              <ComparisonReportListPage />
            </RouterMetaInfo>
          }
        />
        <Route
          path={`report/${ReportType.Benchmark}`}
          element={
            <RouterMetaInfo
              title={`${ReportTypeName[ReportType.Benchmark]} List`}
            >
              <ReportEntry reportType={ReportType.Benchmark} />
            </RouterMetaInfo>
          }
        />
        {/* <Route
          path={`report/${ReportType.Infra}`}
          element={
            <RouterMetaInfo title={`${ReportTypeName[ReportType.Infra]} List`}>
              <ReportEntry reportType={ReportType.Infra} />
            </RouterMetaInfo>
          }
        /> */}
        <Route
          path={`report/${ReportType.Workload}`}
          element={
            <RouterMetaInfo
              title={`${ReportTypeName[ReportType.Workload]} List`}
            >
              <ReportEntry reportType={ReportType.Workload} />
            </RouterMetaInfo>
          }
        />
        <Route
          path={`report/${ReportType.SlowLogVisual}`}
          element={
            <RouterMetaInfo
              title={`${ReportTypeName[ReportType.SlowLogVisual]} List`}
            >
              <ReportEntry reportType={ReportType.SlowLogVisual} />
            </RouterMetaInfo>
          }
        />
        <Route
          path={`report/${ReportType.TrafficMirror}`}
          element={
            <RouterMetaInfo
              title={`${ReportTypeName[ReportType.TrafficMirror]} List`}
            >
              <TrafficMirrorReportPage />
            </RouterMetaInfo>
          }
        />
      </Route>

      <Route
        path={`clusters/:cid/report/${ReportType.Health}/:reportId`}
        element={
          <RouterMetaInfo title={`${ReportTypeName[ReportType.Health]} Detail`}>
            <ReportGuard>
              <HealthReport />
            </ReportGuard>
          </RouterMetaInfo>
        }
      />
      <Route
        path={`clusters/:cid/report/${ReportType.Comparison}/:rid`}
        element={
          <RouterMetaInfo
            title={`${ReportTypeName[ReportType.Comparison]} Detail`}
          >
            <ReportGuard>
              <ComparisonReportPage />
            </ReportGuard>
          </RouterMetaInfo>
        }
      />
      <Route
        path={`clusters/:cid/report/${ReportType.Benchmark}/:rid`}
        element={
          <RouterMetaInfo
            title={`${ReportTypeName[ReportType.Benchmark]} Detail`}
          >
            <ReportGuard>
              <HealthReportPage />
            </ReportGuard>
          </RouterMetaInfo>
        }
      />
      {/* <Route
        path={`clusters/:cid/report/${ReportType.Infra}/:rid`}
        element={
          <RouterMetaInfo title={`${ReportTypeName[ReportType.Infra]} Detail`}>
            <ReportGuard>
              <InfraReportPage />
            </ReportGuard>
          </RouterMetaInfo>
        }
      /> */}
      <Route
        path={`clusters/:cid/report/${ReportType.Workload}/:rid`}
        element={
          <RouterMetaInfo
            title={`${ReportTypeName[ReportType.Workload]} Detail`}
          >
            <ReportGuard>
              <WorkloadReportPage />
            </ReportGuard>
          </RouterMetaInfo>
        }
      />
      <Route
        path={`clusters/:cid/report/${ReportType.OOM}/:rid`}
        element={
          <RouterMetaInfo title={`${ReportTypeName[ReportType.OOM]} Detail`}>
            <ReportGuard>
              <OOMPage />
            </ReportGuard>
          </RouterMetaInfo>
        }
      />
      <Route
        path={`clusters/:cid/report/${ReportType.SlowLogVisual}/:rid`}
        element={
          <RouterMetaInfo
            title={`${ReportTypeName[ReportType.SlowLogVisual]} Detail`}
          >
            <ReportGuard>
              <SlowLogVisPage />
            </ReportGuard>
          </RouterMetaInfo>
        }
      />
      <Route
        path={`clusters/:cid/report/${ReportType.TrafficMirror}/:rid`}
        element={
          <RouterMetaInfo
            title={`${ReportTypeName[ReportType.TrafficMirror]} Detail`}
          >
            <ReportGuard>
              <TrafficMirrorReportDetail />
            </ReportGuard>
          </RouterMetaInfo>
        }
      />

      {/* redirect */}
      <Route
        path={`clusters/:cid/${ReportType.Comparison}`}
        element={
          <Redirect
            to={`/orgs/:orgId/clusters/:cid/report/${ReportType.Comparison}`}
          />
        }
      />
      <Route
        path={`clusters/:cid/${ReportType.Comparison}/:rid`}
        element={
          <Redirect
            to={`/orgs/:orgId/clusters/:cid/report/${ReportType.Comparison}/:rid`}
          />
        }
      />
      <Route
        path={`clusters/:cid/${ReportType.Benchmark}`}
        element={
          <Redirect
            to={`/orgs/:orgId/clusters/:cid/report/${ReportType.Benchmark}`}
          />
        }
      />
      <Route
        path={`clusters/:cid/${ReportType.Benchmark}/:rid`}
        element={
          <Redirect
            to={`/orgs/:orgId/clusters/:cid/report/${ReportType.Benchmark}/:rid`}
          />
        }
      />
      {/* <Route
        path={`clusters/:cid/${ReportType.Infra}`}
        element={
          <Redirect
            to={`/orgs/:orgId/clusters/:cid/report/${ReportType.Infra}`}
          />
        }
      /> */}
      {/* <Route
        path={`clusters/:cid/${ReportType.Infra}/:rid`}
        element={
          <Redirect
            to={`/orgs/:orgId/clusters/:cid/report/${ReportType.Infra}/:rid`}
          />
        }
      /> */}
      <Route
        path={`clusters/:cid/${ReportType.Workload}`}
        element={
          <Redirect
            to={`/orgs/:orgId/clusters/:cid/report/${ReportType.Workload}`}
          />
        }
      />
      <Route
        path={`clusters/:cid/${ReportType.Workload}/:rid`}
        element={
          <Redirect to={`clusters/:cid/report/${ReportType.Workload}/:rid`} />
        }
      />
      <Route
        path={`clusters/:cid/${ReportType.SlowLogVisual}`}
        element={
          <Redirect
            to={`/orgs/:orgId/clusters/:cid/report/${ReportType.SlowLogVisual}`}
          />
        }
      />
      <Route
        path={`clusters/:cid/${ReportType.SlowLogVisual}/:rid`}
        element={
          <Redirect
            to={`/orgs/:orgId/clusters/:cid/report/${ReportType.SlowLogVisual}/:rid`}
          />
        }
      />
      <Route path='*' element={<Navigate replace to='/' />} />
    </Routes>
  )
}

const Redirect = ({ to }: { to: string }) => {
  const params = useParams()
  let toStr = to
  Object.entries(params).forEach(([k, v]) => {
    if (!v) {
      return
    }
    toStr = toStr.replaceAll(`:${k}`, v)
  })
  return <Navigate replace to={toStr} />
}

export default OrgPages