import { BrowserRouter, Route, Routes } from "react-router-dom";
import { ROLES } from "./constants/roles";
import { AuthProvider } from "./context/AuthContext.jsx";
import { ConfigProvider } from "./context/ConfigContext.jsx";

import AdminPanel from "./pages/AdminPanel.jsx";
import GroceryList from "./pages/GroceryList.jsx";
import Login from "./pages/Login.jsx";
import Register from "./pages/Register.jsx";

import AppLayout from "./components/layout/AppLayout.jsx";
import PrivateRoute from "./utils/PrivateRoute.jsx";

import RoleGuard from "./utils/RoleGuard.jsx";


function App() {
  return (
    <ConfigProvider>
      <AuthProvider>
        <BrowserRouter>
          <Routes>

            {/* Public route */}
            <Route path="/login" element={<Login />} />
            <Route path="/register" element={<Register />} />

            {/* Private routes with layout */}
            <Route
              element={
                <PrivateRoute>
                  <AppLayout />
                </PrivateRoute>
              }
            >
              <Route path="/" element={<GroceryList />} />

              <Route
                path="/admin"
                element={
                  <RoleGuard allowed={[ROLES.ADMIN]}>
                    <AdminPanel />
                  </RoleGuard>
                }
              />
            </Route>

          </Routes>
        </BrowserRouter>
      </AuthProvider>
    </ConfigProvider>
  );
}

export default App;