import {createBrowserRouter, Navigate, RouterProvider} from "react-router-dom";
import {UserProvider} from '@/common/contexts/UserContext.jsx';
import {ToastProvider} from '@/common/contexts/ToastContext.jsx';
import "@/common/styles/main.sass";
import Root from "@/common/layouts/Root.jsx";
import UserManagement from "@/pages/UserManagement";
import SystemSettings from "@/pages/SystemSettings";
import Machines from "@/pages/Machines";
import MachineDetails from "@/pages/MachineDetails";
import "@fontsource/plus-jakarta-sans/300.css";
import "@fontsource/plus-jakarta-sans/400.css";
import "@fontsource/plus-jakarta-sans/600.css";
import "@fontsource/plus-jakarta-sans/700.css";
import "@fontsource/plus-jakarta-sans/800.css";

const Placeholder = ({title}) => <div className="content"><h2 style={{fontSize: '1rem'}}>{title}</h2><p
    className="muted">Content coming soon.</p></div>;

const App = () => {
    const router = createBrowserRouter([
        {
            path: "/",
            element: <Root/>,
            children: [
                {path: "/", element: <Navigate to="/dashboard"/>},
                {path: "/dashboard", element: <Placeholder title="Dashboard"/>},
                {path: "/machines", element: <Machines/>},
                {path: "/machines/:id", element: <MachineDetails/>},
                {path: "/servers", element: <Placeholder title="Servers"/>},
                {path: "/settings", element: <Placeholder title="Settings"/>},
                {path: "/admin/users", element: <UserManagement/>},
                {path: "/admin/settings", element: <SystemSettings/>},
            ],
        },
    ]);

    return <UserProvider><ToastProvider><RouterProvider router={router}/></ToastProvider></UserProvider>;
};

export default App;