import React, { useEffect } from 'react'

import { MantineProvider } from '@mantine/core'
import { NotificationsProvider } from '@mantine/notifications'
import { ConfigProvider } from 'antd'
import { I18nextProvider } from 'react-i18next'
import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom'

import { AuthGuard } from '~/components/Layout'
import { useUserStore } from '~/hooks/state'
import { useRouteGuard } from '~/hooks/use-route-guard'
import {
  RouterMeta,
  RouterMetaInfo,
  useRouterMeta
} from '~/hooks/use-router-meta'
import AcitveQPSPage from '~/pages/active-qps'
import ClustersPage from '~/pages/clusters'
import HomePage from '~/pages/home'
import LoginPage from '~/pages/login'
import OrgsPages from '~/pages/orgs'
import ProfilePage from '~/pages/profile'
import { globalI18n } from '~/translations'
import * as telemetry from '~/utils/telemetry'

import 'metrics-chart/dist/theme/light_theme.css'
import 'metrics-chart/dist/theme/dark_theme.css'
import 'antd/dist/antd.variable.min.css'
import './style.css'

ConfigProvider.config({
  theme: {
    primaryColor: '#0ca6f2'
  }
})

const App: React.FC = () => {
  useEffect(() => {
    document.body.classList.remove('metrics-chart-dark')
    document.body.classList.add('metrics-chart-light')

    return () => {
      document.body.classList.remove('metrics-chart-light')
    }
  }, [])

  return (
    <MantineProvider
      withCSSVariables
      theme={{
        breakpoints: {
          // https://mantine.dev/styles/responsive/
          // https://tailwindcss.com/docs/responsive-design#using-custom-breakpoints
          // make mantine to keep same as tailwind
          xs: 640,
          sm: 768,
          md: 1024,
          lg: 1280,
          xl: 1536
        },
        defaultRadius: 'md', // 8px
        colors: {
          // generated by ant design colors tool
          // https://ant.design/docs/spec/colors-cn#%E8%89%B2%E6%9D%BF%E7%94%9F%E6%88%90%E5%B7%A5%E5%85%B7
          'cc-blue': [
            '#e6fbff',
            '#b0efff',
            '#87e3ff',
            '#5ed4ff',
            '#36c3ff',
            '#0ca6f2', // ant primary color
            '#0081cc',
            '#0063a6',
            '#004880',
            '#003059'
          ]
        },
        primaryColor: 'dark',
        primaryShade: 5,
        fontFamily: `moderat`,
        headings: {
          fontFamily: `moderat`
        }
      }}
    >
      <NotificationsProvider position='top-center'>
        <I18nextProvider i18n={globalI18n}>
          <Router>
            <RouterMeta>
              <AppRoutes />
            </RouterMeta>
          </Router>
        </I18nextProvider>
      </NotificationsProvider>
    </MantineProvider>
  )
}

const InternalRouteGuard: React.FC<React.PropsWithChildren> = ({
  children
}) => {
  const internal = useUserStore((state) => state.user?.internal)
  useRouteGuard(!!internal, '/')

  return <>{children}</>
}

const AppRoutes: React.FC = () => {
  const routerMeta = useRouterMeta()

  useEffect(() => {
    if (!routerMeta.title) {
      return
    }
    telemetry.registerRouter(routerMeta.title)
  }, [routerMeta])

  return (
    <Routes>
      {/* no need auth */}
      <Route path='login' element={<LoginPage />} />

      {/* need auth */}
      <Route path='/' element={<AuthGuard />}>
        <Route index element={<HomePage />} />

        <Route
          path='profile'
          element={
            <RouterMetaInfo title='Profile'>
              <ProfilePage />
            </RouterMetaInfo>
          }
        />

        <Route path='overview' element={<Navigate replace to='/clusters' />} />
        <Route
          path='clusters'
          element={
            <InternalRouteGuard>
              <RouterMetaInfo title='Clusters'>
                <ClustersPage />
              </RouterMetaInfo>
            </InternalRouteGuard>
          }
        />
        <Route
          path='active-qps'
          element={
            <InternalRouteGuard>
              <RouterMetaInfo title='ActiveQPS'>
                <AcitveQPSPage />
              </RouterMetaInfo>
            </InternalRouteGuard>
          }
        />

        {/* https://reactrouter.com/docs/en/v6/getting-started/overview#descendant-routes */}
        <Route path='orgs/*' element={<OrgsPages />} />
      </Route>

      <Route path='*' element={<Navigate replace to='/' />} />
    </Routes>
  )
}

export default App