import React from 'react';
import { Routes, Route, Navigate, useLocation } from 'react-router-dom';
import { useAuth } from './context/AuthContext';
import Layout from './components/Layout';
import Login from './pages/Login';
import Landing from './pages/Landing';
import Dashboard from './pages/Dashboard';
import Maps from './pages/Maps';
import AdminSchedule from './pages/AdminSchedule';
import CustomerProfile from './pages/CustomerProfile';
import ErrorBoundary from './components/ErrorBoundary';
import { Toaster } from 'sonner';
import NotFound from './pages/NotFound';

// Protected Route Component
const ProtectedRoute = ({ children, allowedRoles }) => {
  const { user, isAuthenticated } = useAuth();
  const location = useLocation();

  if (!isAuthenticated) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  if (allowedRoles && !allowedRoles.includes(user.role)) {
    // If user is employee but wrong role, go to their default dashboard
    // For now, just redirect to home or show unauthorized
    return <Navigate to="/" replace />;
  }

  return children;
};

function App() {
  return (
    <ErrorBoundary>
      <Toaster position="top-right" richColors closeButton expand={true} />
      <Routes>
        <Route element={<Layout />}>
          {/* Public Routes */}
          <Route path="/" element={<Landing />} />
          <Route path="/login" element={<Login />} />

          {/* Protected Field Agent Routes */}
          <Route path="/portal/profile" element={
            <ProtectedRoute allowedRoles={['CUSTOMER']}>
              <CustomerProfile />
            </ProtectedRoute>
          } />

          <Route
            path="/emp/fa/dashboard"
            element={
              <ProtectedRoute allowedRoles={['FIELD_AGENT', 'ADMIN']}>
                <Dashboard />
              </ProtectedRoute>
            }
          />
          <Route
            path="/emp/fa/maps"
            element={
              <ProtectedRoute allowedRoles={['FIELD_AGENT', 'ADMIN']}>
                <Maps />
              </ProtectedRoute>
            }
          />

          {/* Protected Admin Routes */}
          <Route
            path="/admin/schedule"
            element={
              <ProtectedRoute allowedRoles={['ADMIN']}>
                <AdminSchedule />
              </ProtectedRoute>
            }
          />
        </Route>

        {/* Catch all */}
        <Route path="*" element={<NotFound />} />
      </Routes>
    </ErrorBoundary>
  );
}

export default App;