import { Routes, Route, Navigate } from 'react-router-dom';
import { useAuth } from './context/AuthContext';
import Layout from './components/Layout';
import Login from './pages/Login';
import Supplier from './pages/Supplier';
import Shipment from './pages/Shipment';
import Delivery from './pages/Delivery';
import Reports from './pages/Reports';

function PrivateRoute({ children }) {
  const { user, loading } = useAuth();

  if (loading) {
    return (
      <div className="flex min-h-screen items-center justify-center">
        <p className="text-gray-500">Loading...</p>
      </div>
    );
  }

  return user ? children : <Navigate to="/login" replace />;
}

export default function App() {
  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route
        path="/supplier"
        element={
          <PrivateRoute>
            <Layout>
              <Supplier />
            </Layout>
          </PrivateRoute>
        }
      />
      <Route
        path="/shipment"
        element={
          <PrivateRoute>
            <Layout>
              <Shipment />
            </Layout>
          </PrivateRoute>
        }
      />
      <Route
        path="/delivery"
        element={
          <PrivateRoute>
            <Layout>
              <Delivery />
            </Layout>
          </PrivateRoute>
        }
      />
      <Route
        path="/reports"
        element={
          <PrivateRoute>
            <Layout>
              <Reports />
            </Layout>
          </PrivateRoute>
        }
      />
      <Route path="/" element={<Navigate to="/supplier" replace />} />
      <Route path="*" element={<Navigate to="/supplier" replace />} />
    </Routes>
  );
}
