import type { ComponentType, FC } from "react";

import { lazy } from "react";
import { Navigate, Route, Routes } from "react-router";

import { LazyPage } from "../RouteFallback";
import { Protected, Public } from "../RouteGuards";

// Pages use named exports; React.lazy needs a default export per dynamic import (one chunk each).
function lazyPage<Name extends string>(
	load: () => Promise<Record<Name, ComponentType>>,
	name: Name,
) {
	return lazy(async () => {
		const page = await load();

		// eslint-disable-next-line security/detect-object-injection -- `name` is a compile-time literal checked against the module's exports.
		return { default: page[name] };
	});
}

const CardPage = lazyPage(async () => import("@/pages/card"), "CardPage");
const CardsPage = lazyPage(async () => import("@/pages/cards"), "CardsPage");
const BondPage = lazyPage(async () => import("@/pages/bond"), "BondPage");
const BondsPage = lazyPage(async () => import("@/pages/bonds"), "BondsPage");
const StockPage = lazyPage(async () => import("@/pages/stock"), "StockPage");
const StocksPage = lazyPage(async () => import("@/pages/stocks"), "StocksPage");
const AccountPage = lazyPage(async () => import("@/pages/account"), "AccountPage");
const AccountEventsPage = lazyPage(async () => import("@/pages/account-events"), "AccountEventsPage");
const AccountOperationsPage = lazyPage(async () => import("@/pages/account-operations"), "AccountOperationsPage");
const AccountIncomePage = lazyPage(async () => import("@/pages/account-income"), "AccountIncomePage");
const AccountsPage = lazyPage(async () => import("@/pages/accounts"), "AccountsPage");
const LoginPage = lazyPage(async () => import("@/pages/login"), "LoginPage");
const NotFoundPage = lazyPage(async () => import("@/pages/not-found"), "NotFoundPage");
const RegisterPage = lazyPage(async () => import("@/pages/register"), "RegisterPage");
const SettingsPage = lazyPage(async () => import("@/pages/settings"), "SettingsPage");
const ProtectedLayout = lazyPage(async () => import("../ProtectedLayout"), "ProtectedLayout");

const AppRoutes: FC = () => (
	<Routes>
		<Route element={<Navigate replace to="/accounts" />} path="/" />

		<Route
			element={(
				<Public>
					<LazyPage variant="auth">
						<LoginPage />
					</LazyPage>
				</Public>
			)}
			path="/login"
		/>

		<Route
			element={(
				<Public>
					<LazyPage variant="auth">
						<RegisterPage />
					</LazyPage>
				</Public>
			)}
			path="/register"
		/>

		<Route
			element={(
				<Protected>
					<LazyPage variant="shell">
						<ProtectedLayout />
					</LazyPage>
				</Protected>
			)}
		>
			<Route
				element={(
					<LazyPage variant="content">
						<CardPage />
					</LazyPage>
				)}
				path="/cards/:cardId"
			/>

			<Route
				element={(
					<LazyPage variant="content">
						<CardsPage />
					</LazyPage>
				)}
				path="/cards"
			/>

			<Route
				element={(
					<LazyPage variant="content">
						<BondsPage />
					</LazyPage>
				)}
				path="/bonds"
			/>

			<Route
				element={(
					<LazyPage variant="content">
						<BondPage />
					</LazyPage>
				)}
				path="/bonds/:bondId"
			/>

			<Route
				element={(
					<LazyPage variant="content">
						<StocksPage />
					</LazyPage>
				)}
				path="/stocks"
			/>

			<Route
				element={(
					<LazyPage variant="content">
						<StockPage />
					</LazyPage>
				)}
				path="/stocks/:stockId"
			/>

			<Route
				element={(
					<LazyPage variant="content">
						<AccountsPage />
					</LazyPage>
				)}
				path="/accounts"
			/>

			<Route
				element={(
					<LazyPage variant="content">
						<AccountPage />
					</LazyPage>
				)}
				path="/accounts/:accountId"
			/>

			<Route
				element={(
					<LazyPage variant="content">
						<AccountEventsPage />
					</LazyPage>
				)}
				path="/accounts/:accountId/events"
			/>

			<Route
				element={(
					<LazyPage variant="content">
						<AccountIncomePage />
					</LazyPage>
				)}
				path="/accounts/:accountId/income"
			/>

			<Route
				element={(
					<LazyPage variant="content">
						<AccountOperationsPage />
					</LazyPage>
				)}
				path="/accounts/:accountId/operations"
			/>

			<Route
				element={(
					<LazyPage variant="content">
						<SettingsPage />
					</LazyPage>
				)}
				path="/settings"
			/>
		</Route>

		<Route
			element={(
				<LazyPage variant="content">
					<NotFoundPage />
				</LazyPage>
			)}
			path="*"
		/>
	</Routes>
);

export { AppRoutes };