import { Routes as BaseRoutes, Navigate, Route } from "react-router-dom";
import React, { lazy, Suspense } from "react";
import LoadingComponent from "./components/Loading";
import DashboardLayout from "./layouts/DashboardLayout";
// import RoleList from "./pages/RoleList";
// import AddEditRolePage from "./pages/AddEditRolePage";
// import VehicleList from "./pages/VehicleList";

// Page imports
const Login = lazy(() => import("./pages/Auth/Login"));
const SignUp = lazy(() => import("./pages/Auth/SignUp"));
const LandingPage = lazy(() => import("./pages/LandingPage"));
const Dashboard = lazy(() => import("./pages/Dashboard"));
const VehicleList = lazy(() => import("./pages/VehicleList"));
const AdminList = lazy(() => import("./pages/AdminList"));
const ProfilePage = lazy(() => import("./pages/ProfilePage"));
const NotFoundPage = lazy(() => import("./pages/NotFound"));
const UserList = lazy(() => import("./pages/UserList"));
const AddEditRolePage = lazy(() => import("./pages/AddEditRolePage"));
const RoleList = lazy(() => import("./pages/RoleList"));
const ManagerList = lazy(() => import("./pages/ManagerList"));
const StationList = lazy(() => import("./pages/StationList"));
const EVSlotManagement = lazy(() => import("./pages/EVSlotManagement"));
const BookingList = lazy(() => import("./pages/BookingList"));
const EvSlotList = lazy(() => import("./pages/EvSlotList"));
const ExternalStationList = lazy(
	() => import("./pages/ExternalStationList/externalStationList.tsx")
);
const AllManagersList = lazy(() => import("./pages/AllMangersList"));
const AvailableSlotsList = lazy(() => import("./pages/AvailableSlotsList"));
interface ProtectedRouteProps {
	// caps: string[];
	component: React.ReactNode;
}

// Protected Route Component
const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ component }) => {
	if (!localStorage.getItem("authToken")) {
		return <Navigate to="/login" replace />;
	}
	return component;
};

// Combined Router Component
export default function AppRouter() {
	return (
		<Suspense fallback={<LoadingComponent />}>
			<BaseRoutes>
				{/* Default Route */}
				<Route path="" element={<LandingPage />} />

				{/* Auth Routes */}
				<Route path="">
					<Route path="login" element={<Login />} />
					<Route path="signup" element={<SignUp />} />
				</Route>

				{/* Dashboard Routes */}
				<Route path="/panel" element={<DashboardLayout />}>
					<Route
						path="dashboard"
						element={<ProtectedRoute component={<Dashboard />} />}
					/>

					<Route
						path="admin-list"
						element={<ProtectedRoute component={<AdminList />} />}
					/>
					<Route
						path="user-list"
						element={<ProtectedRoute component={<UserList />} />}
					/>

					<Route
						path="manager-list"
						element={<ProtectedRoute component={<ManagerList />} />}
					/>

					<Route
						path="role-list"
						element={<ProtectedRoute component={<RoleList />} />}
					/>
					<Route
						path="vehicle-list"
						element={<ProtectedRoute component={<VehicleList />} />}
					/>
					<Route
						path="permissions"
						element={
							<ProtectedRoute component={<AddEditRolePage />} />
						}
					/>
					<Route
						path="station-list"
						element={<ProtectedRoute component={<StationList />} />}
					/>
					<Route
						path="profile"
						element={<ProtectedRoute component={<ProfilePage />} />}
					/>
					<Route
						path="EVslots"
						element={
							<ProtectedRoute component={<EVSlotManagement />} />
						}
					/>
					<Route
						path="booking-list"
						element={<ProtectedRoute component={<BookingList />} />}
					/>
					<Route
						path="slot-list"
						element={<ProtectedRoute component={<EvSlotList />} />}
					/>
					<Route
						path="external-station-list"
						element={
							<ProtectedRoute
								component={<ExternalStationList />}
							/>
						}
					/>
					<Route
						path="all-managers-list"
						element={
							<ProtectedRoute component={<AllManagersList />} />
						}
					/>
					<Route
						path="all-available-slots"
						element={
							<ProtectedRoute
								component={<AvailableSlotsList />}
							/>
						}
					/>
				</Route>

				{/* Catch-all Route */}
				<Route path="*" element={<NotFoundPage />} />
			</BaseRoutes>
		</Suspense>
	);
}