// src/App.js
import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
import { useParams } from 'react-router-dom';
import Login from './components/Login';
import Boxes from './components/Boxes';
import Items from './components/Items';
import Navbar from './components/Navbar';  // Correct import here
import Admin from './components/Admin';  // Correct import here
import { createContext } from 'react';
import ErrorBoundary from './components/ErrorBoundary';
import './styles.css'

export const AppContext = createContext();
export const PRIMARY_COLOR = '#333';
export const SECONDARY_COLOR = '#ffffff';
export const BACKGROUND_COLOR = '#dddddd';

function App() {
  const [token, setToken] = useState(localStorage.getItem('token'));

  useEffect(() => {
    if (token) {
      localStorage.setItem('token', token);
    }
  }, [token]);

  return (
    <AppContext.Provider value={{ token, setToken }}>
      <ErrorBoundary>
        <Router>
          <Navbar />
          <AppRoutes token={token} setToken={setToken} />
        </Router>
      </ErrorBoundary>
    </AppContext.Provider>
  );
}

function AppRoutes({ token, setToken }) {
  const { id } = useParams(); // Move useParams here

  return (
    <>
      <Routes>
        <Route path="/api/v1/login" element={<Login setToken={setToken} />} />
        <Route 
          path="/api/v1/boxes" 
          element={token ? <Boxes token={token} /> : <Navigate to="/api/v1/login" replace />} 
        />
        <Route 
          path="/api/v1/items" 
          element={token ? <Items token={token} /> : <Navigate to="/api/v1/login" replace />} 
        />
        <Route 
          path="/api/v1/boxes/:id/items" 
          element={token ? <Items box_id={id} token={token} /> : <Navigate to="/api/v1/login" replace />} 
        />
        <Route 
          path="/api/v1/admin" 
          element={token ? <Admin token={token}/> : <Navigate to="/api/v1/login" replace />} 
        />
        <Route path="*" element={<Navigate to={token ? "/api/v1/boxes" : "/api/v1/login"} replace />} />
      </Routes>
    </>
  );
}
export default App;