import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom"

import { Header } from "./pages/template/Header.tsx"
import "./style/app.css"
import { lazy, ReactNode, Suspense } from "react"
import { BASE } from "./Constants.ts"

const HomePage = lazy(() => import("./pages/HomePage.tsx"))
const LoginPage = lazy(() => import("./pages/LoginPage.tsx"))
const RegisterPage = lazy(() => import("./pages/RegisterPage.tsx"))
const NotFoundPage = lazy(() => import("./pages/404.tsx"))
const CreateTeamPage = lazy(() => import("./pages/CreateTeamPage.tsx"))
const TeamPanelPage = lazy(() => import("./pages/TeamPanel.tsx"))
const NewTacticPage = lazy(() => import("./pages/NewTacticPage.tsx"))
const Editor = lazy(() => import("./pages/Editor.tsx"))

export default function App() {
    function suspense(node: ReactNode) {
        return (
            <Suspense fallback={<p>Loading, please wait...</p>}>
                {node}
            </Suspense>
        )
    }

    return (
        <div id="app">
            <BrowserRouter basename={BASE}>
                <Outlet />

                <Routes>
                    <Route path={"/login"} element={suspense(<LoginPage />)} />
                    <Route
                        path={"/register"}
                        element={suspense(<RegisterPage />)}
                    />

                    <Route path={"/"} element={suspense(<AppLayout />)}>
                        <Route path={"/"} element={suspense(<HomePage />)} />
                        <Route
                            path={"/home"}
                            element={suspense(<HomePage />)}
                        />

                        <Route
                            path={"/team/new"}
                            element={suspense(<CreateTeamPage />)}
                        />
                        <Route
                            path={"/team/:teamId"}
                            element={suspense(<TeamPanelPage />)}
                        />
                        <Route
                            path={"/tactic/new"}
                            element={suspense(<NewTacticPage />)}
                        />
                        <Route
                            path={"/tactic/:tacticId/edit"}
                            element={suspense(<Editor guestMode={false} />)}
                        />
                        <Route
                            path={"/tactic/edit-guest"}
                            element={suspense(<Editor guestMode={true} />)}
                        />

                        <Route
                            path={"*"}
                            element={suspense(<NotFoundPage />)}
                        />
                    </Route>
                </Routes>
            </BrowserRouter>
        </div>
    )
}

function AppLayout() {
    return (
        <>
            <Header />
            <Outlet />
        </>
    )
}