import { useState } from 'react'
import './App.css'
import AppHeader from './components/AppHeader';
import Footer from './components/Footer';
import Box from '@mui/material/Box';

import Products from './private/products/Products';
import Clients from './private/clients/Clients';
import Providers from './private/providers/Providers';
import Categories from './private/categories/Categories';
import Admin from './private/mongo/Admin';

import LoginPage from './private/LoginPage';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { useAuth } from './context/AuthContext';

function PrivateRoute({ children }) {
  const { user } = useAuth();
  return user ? children : <Navigate to="/login" replace />;
}

function App() {
  const [zone, setZone] = useState('public'); // public | restricted | private
  const [currentView, setCurrentView] = useState('Products');

  return (
    <>
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          minHeight: '100vh', // full height of the viewport
        }}
      >

        <AppHeader zone={zone} onSelectMenuItem={(view) => setCurrentView(view)} />

        <Box component="main" sx={{ flex: 1, p: 2 }}>
          <Routes>
            <Route path="/login" element={<LoginPage />} />

            <Route
              path="/"
              element={
                <PrivateRoute>
                  {zone === 'private' && <Clients />}
                  {zone === 'restricted' && <Clients />}

                  {zone === 'public' && currentView === 'Products' && <Products />}
                  {zone === 'public' && currentView === 'Clients' && <Clients />}
                  {zone === 'public' && currentView === 'Providers' && <Providers />}
                  {zone === 'public' && currentView === 'Categories' && <Categories />}
                  {zone === 'public' && currentView === 'Admin' && <Admin />}
                </PrivateRoute>
              }
            />
          </Routes>
        </Box>


        <Footer zone={zone} />
      </Box>

    </>
  )
}

export default App
