import { Routes, Route, Navigate } from 'react-router-dom';
import {
  Dashboard,
  Orders,
  Team,
  Settings,
  Notifications,
  StudentRequests,
  InstructorRequests,
  Roster,
  NotFound,
  Login,
  Unauthorized,
} from './PageExports';
import { ProtectedRoute } from './auth/ProtectedRoute';

// Define application routes
// Complete with names, paths, icons, element definitions, and permissions
export const routes = [
  {
    name: 'Login',
    path: '/login',
    icon: 'Key',
    element: <Login />,
    allowedUserTypes: ['instructor', 'student', 'ta'],
    sidebar: false,
    layoutHidden: true,
  },
  {
    name: '403 Unauthorized',
    path: '/unauthorized',
    icon: 'PersonLock',
    element: <Unauthorized />,
    allowedUserTypes: ['instructor', 'student', 'ta'],
    sidebar: false,
    layoutHidden: true,
  },
  {
    name: '404 Not Found',
    path: '/not-found',
    icon: 'Ban',
    element: <NotFound />,
    allowedUserTypes: ['instructor', 'student', 'ta'],
    sidebar: false,
    layoutHidden: true,
  },
  {
    name: 'Dashboard',
    path: '/dashboard',
    icon: 'Speedometer',
    element: <Dashboard />,
    allowedUserTypes: ['instructor', 'student', 'ta'],
    sidebar: true,
    layoutHidden: false,
  },
  {
    name: 'Requests',
    path: '/student/requests',
    icon: 'Receipt',
    element: <StudentRequests />,
    allowedUserTypes: ['student'],
    sidebar: true,
    layoutHidden: false,
  },
  {
    name: 'Requests',
    path: '/instructor/requests',
    icon: 'Receipt',
    element: <InstructorRequests />,
    allowedUserTypes: ['instructor', 'ta'],
    sidebar: true,
    layoutHidden: false,
  },
  {
    name: 'Orders',
    path: '/orders',
    icon: 'Cart',
    element: <Orders />,
    allowedUserTypes: ['instructor', 'ta'],
    sidebar: true,
    layoutHidden: false,
  },
  {
    name: 'Roster',
    path: '/roster',
    icon: 'PersonRolodex',
    element: <Roster />,
    allowedUserTypes: ['instructor', 'ta'],
    sidebar: true,
    layoutHidden: false,
  },
  {
    name: 'Roster -> Section',
    path: '/roster/section/:sectionId',
    icon: 'PersonRolodex',
    element: <Roster />,
    allowedUserTypes: ['instructor', 'ta'],
    sidebar: false, // Hide from sidebar since it's a dynamic route
    layoutHidden: false,
  },
  {
    name: 'Roster -> Team',
    path: '/roster/section/:sectionId/team/:teamId',
    icon: 'PersonRolodex',
    element: <Roster />,
    allowedUserTypes: ['instructor', 'ta'],
    sidebar: false,
    layoutHidden: false,
  },
  {
    name: 'Team',
    path: '/team',
    icon: 'People',
    element: <Team />,
    allowedUserTypes: ['student'],
    sidebar: true,
    layoutHidden: false,
  },
  {
    name: 'Notifications',
    path: '/notifications',
    icon: 'Inbox',
    element: <Notifications />,
    allowedUserTypes: ['instructor', 'student'],
    sidebar: true,
    layoutHidden: false,
  },
  {
    name: 'Settings',
    path: '/settings',
    icon: 'Gear',
    element: <Settings />,
    allowedUserTypes: ['instructor', 'student', 'ta'],
    sidebar: true,
    layoutHidden: false,
  },
];

const AppRoutes = () => (
  <Routes>
    <Route path='/' element={<Navigate to='/dashboard' replace />} />
    <Route path='*' element={<Navigate to='/not-found' replace />} />
    <Route path='/login' element={<Login />} />
    {routes.map(({ path, element }) => (
      <Route
        key={path}
        path={path}
        element={<ProtectedRoute>{element}</ProtectedRoute>}
      />
    ))}
  </Routes>
);

export default AppRoutes;
