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

import { Header } from "./pages/template/Header.tsx"
import "./style/app.css"
import { lazy } from "react"

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() {
    return (
        <div id="app">
            <BrowserRouter>
                <Outlet />

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

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

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

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

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