import { BrowserRouter as Router, Route, Routes, Navigate } from "react-router-dom"
import Main from "./pages/Main"
import Users from "./pages/Users"
import Roles from "./pages/Roles"
import NotFound from "./pages/NotFound"
import MainLayout from "./layouts/MainLayout"
import SignIn from "./pages/auth/SignIn"
import ApiTest from "./pages/ApiTest"
import SignUp from "./pages/auth/SignUp"
import { initAuth, useAuthStore } from "./store/auth"
import { useEffect, useState } from "react"
import Documents from "./pages/Documents"
import Reports from "./pages/Reports"
import Boilers from "./pages/Boilers"
import Servers from "./pages/Servers"
import Settings from "./pages/Settings"
import PasswordReset from "./pages/auth/PasswordReset"
import MapTest from "./pages/MapTest"
import MonitorPage from "./pages/MonitorPage"
import DashboardLayout from "./layouts/DashboardLayout"
import { IconApi, IconBuildingFactory2, IconComponents, IconDeviceDesktopAnalytics, IconFiles, IconHome, IconLogin, IconLogin2, IconMap, IconPassword, IconReport, IconServer, IconSettings, IconShield, IconTable, IconUsers } from "@tabler/icons-react"
import { Box, Loader } from "@mantine/core"
import TableTest from "./pages/TableTest"
import ComponentTest from "./pages/ComponentTest"

// Определение страниц с путями и компонентом для рендера
export const pages = [
  {
    label: "",
    path: "/auth/signin",
    icon: <IconLogin2 />,
    component: <SignIn />,
    drawer: false,
    dashboard: false,
    enabled: true,
  },
  {
    label: "",
    path: "/auth/signup",
    icon: <IconLogin />,
    component: <SignUp />,
    drawer: false,
    dashboard: false,
    enabled: false,
  },
  {
    label: "",
    path: "/auth/password-reset",
    icon: <IconPassword />,
    component: <PasswordReset />,
    drawer: false,
    dashboard: false,
    enabled: true,
  },
  {
    label: "Настройки",
    path: "/settings",
    icon: <IconSettings />,
    component: <Settings />,
    drawer: false,
    dashboard: true,
    enabled: true,
  },
  {
    label: "Главная",
    path: "/",
    icon: <IconHome />,
    component: <Main />,
    drawer: true,
    dashboard: true,
    enabled: true,
  },
  {
    label: "Пользователи",
    path: "/user",
    icon: <IconUsers />,
    component: <Users />,
    drawer: true,
    dashboard: true,
    enabled: true,
  },
  {
    label: "Роли",
    path: "/role",
    icon: <IconShield />,
    component: <Roles />,
    drawer: true,
    dashboard: true,
    enabled: true,
  },
  {
    label: "Документы",
    path: "/documents",
    icon: <IconFiles />,
    component: <Documents />,
    drawer: true,
    dashboard: true,
    enabled: true,
  },
  {
    label: "Отчеты",
    path: "/reports",
    icon: <IconReport />,
    component: <Reports />,
    drawer: true,
    dashboard: true,
    enabled: true,
  },
  {
    label: "Серверы",
    path: "/servers",
    icon: <IconServer />,
    component: <Servers />,
    drawer: true,
    dashboard: true,
    enabled: true,
  },
  {
    label: "Котельные",
    path: "/boilers",
    icon: <IconBuildingFactory2 />,
    component: <Boilers />,
    drawer: true,
    dashboard: true,
    enabled: true,
  },
  {
    label: "API Test",
    path: "/api-test",
    icon: <IconApi />,
    component: <ApiTest />,
    drawer: true,
    dashboard: true,
    enabled: false,
  },
  {
    label: "ИКС",
    path: "/map-test",
    icon: <IconMap />,
    component: <MapTest />,
    drawer: true,
    dashboard: true,
    enabled: true,
  },
  {
    label: "Монитор",
    path: "/monitor",
    icon: <IconDeviceDesktopAnalytics />,
    component: <MonitorPage />,
    drawer: true,
    dashboard: true,
    enabled: true,
  },
  {
    label: "Table test",
    path: "/table-test",
    icon: <IconTable />,
    component: <TableTest />,
    drawer: true,
    dashboard: true,
    enabled: true,
  },
  {
    label: "Component test",
    path: "/component-test",
    icon: <IconComponents />,
    component: <ComponentTest />,
    drawer: true,
    dashboard: true,
    enabled: true,
  },
]

function App() {
  const auth = useAuthStore()
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    initAuth()
  }, [])

  // Once auth is there, set loading to false and render the app
  useEffect(() => {
    if (auth) {
      setIsLoading(false)
    }
  }, [auth])

  if (isLoading) {
    return (
      <Loader />
    )
  } else {
    return (
      <Box w='100%' h='100vh'>
        <Router>
          <Routes>
            <Route element={<MainLayout />}>
              {pages.filter((page) => !page.dashboard).filter((page) => page.enabled).map((page, index) => (
                <Route key={`ml-${index}`} path={page.path} element={page.component} />
              ))}
            </Route>

            <Route element={auth.isAuthenticated ? <DashboardLayout></DashboardLayout> : <Navigate to={"/auth/signin"} />}>
              {pages.filter((page) => page.dashboard).filter((page) => page.enabled).map((page, index) => (
                <Route key={`dl-${index}`} path={page.path} element={page.component} />
              ))}
              <Route path="*" element={<NotFound />} />
            </Route>
          </Routes>
        </Router>
      </Box>
    )
  }
}

export default App