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 DashboardLayout from "./layouts/DashboardLayout"
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 { Box, CircularProgress } from "@mui/material"
import Documents from "./pages/Documents"
import Reports from "./pages/Reports"
import Boilers from "./pages/Boilers"
import Servers from "./pages/Servers"
import { Api, Assignment, Cloud, Factory, Home, Login, Map, MonitorHeart, Password, People, Settings as SettingsIcon, Shield, Storage, Warning } from "@mui/icons-material"
import Settings from "./pages/Settings"
import PasswordReset from "./pages/auth/PasswordReset"
import MapTest from "./pages/MapTest"
import MonitorPage from "./pages/MonitorPage"
import ChunkedUpload from "./components/map/ChunkedUpload"

// Определение страниц с путями и компонентом для рендера
export const pages = [
  {
    label: "",
    path: "/auth/signin",
    icon: <Login />,
    component: <SignIn />,
    drawer: false,
    dashboard: false,
  },
  {
    label: "",
    path: "/auth/signup",
    icon: <Login />,
    component: <SignUp />,
    drawer: false,
    dashboard: false,
  },
  {
    label: "",
    path: "/auth/password-reset",
    icon: <Password />,
    component: <PasswordReset />,
    drawer: false,
    dashboard: false,
  },
  {
    label: "Настройки",
    path: "/settings",
    icon: <SettingsIcon />,
    component: <Settings />,
    drawer: false,
    dashboard: true,
  },
  {
    label: "Главная",
    path: "/",
    icon: <Home />,
    component: <Main />,
    drawer: true,
    dashboard: true
  },
  {
    label: "Пользователи",
    path: "/user",
    icon: <People />,
    component: <Users />,
    drawer: true,
    dashboard: true
  },
  {
    label: "Роли",
    path: "/role",
    icon: <Shield />,
    component: <Roles />,
    drawer: true,
    dashboard: true
  },
  {
    label: "Документы",
    path: "/documents",
    icon: <Storage />,
    component: <Documents />,
    drawer: true,
    dashboard: true
  },
  {
    label: "Отчеты",
    path: "/reports",
    icon: <Assignment />,
    component: <Reports />,
    drawer: true,
    dashboard: true
  },
  {
    label: "Серверы",
    path: "/servers",
    icon: <Cloud />,
    component: <Servers />,
    drawer: true,
    dashboard: true
  },
  {
    label: "Котельные",
    path: "/boilers",
    icon: <Factory />,
    component: <Boilers />,
    drawer: true,
    dashboard: true
  },
  {
    label: "API Test",
    path: "/api-test",
    icon: <Api />,
    component: <ApiTest />,
    drawer: true,
    dashboard: true
  },
  {
    label: "Карта",
    path: "/map-test",
    icon: <Map />,
    component: <MapTest />,
    drawer: true,
    dashboard: true
  },
  {
    label: "Chunk test",
    path: "/chunk-test",
    icon: <Warning />,
    component: <ChunkedUpload />,
    drawer: true,
    dashboard: true
  },
  {
    label: "Монитор",
    path: "/monitor",
    icon: <MonitorHeart />,
    component: <MonitorPage />,
    drawer: true,
    dashboard: 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 (
      <CircularProgress />
    )
  } else {
    return (
      <Box sx={{
        width: "100%",
        height: "100vh"
      }}>
        <Router>
          <Routes>
            <Route element={<MainLayout />}>
              {pages.filter((page) => !page.dashboard).map((page, index) => (
                <Route key={`ml-${index}`} path={page.path} element={page.component} />
              ))}
            </Route>

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

export default App