import type { FC } from "react";

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

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

const CardPage = lazy(async () => {
	const { CardPage } = await import("@/pages/card");

	return { default: CardPage };
});

const CardsPage = lazy(async () => {
	const { CardsPage } = await import("@/pages/cards");

	return { default: CardsPage };
});

const BondPage = lazy(async () => {
	const { BondPage } = await import("@/pages/bond");

	return { default: BondPage };
});

const BondsPage = lazy(async () => {
	const { BondsPage } = await import("@/pages/bonds");

	return { default: BondsPage };
});

const StockPage = lazy(async () => {
	const { StockPage } = await import("@/pages/stock");

	return { default: StockPage };
});

const StocksPage = lazy(async () => {
	const { StocksPage } = await import("@/pages/stocks");

	return { default: StocksPage };
});

const AccountPage = lazy(async () => {
	const { AccountPage } = await import("@/pages/account");

	return { default: AccountPage };
});

const AccountEventsPage = lazy(async () => {
	const { AccountEventsPage } = await import("@/pages/account-events");

	return { default: AccountEventsPage };
});

const AccountOperationsPage = lazy(async () => {
	const { AccountOperationsPage } = await import("@/pages/account-operations");

	return { default: AccountOperationsPage };
});

const AccountIncomePage = lazy(async () => {
	const { AccountIncomePage } = await import("@/pages/account-income");

	return { default: AccountIncomePage };
});

const AccountsPage = lazy(async () => {
	const { AccountsPage } = await import("@/pages/accounts");

	return { default: AccountsPage };
});

const LoginPage = lazy(async () => {
	const { LoginPage } = await import("@/pages/login");

	return { default: LoginPage };
});

const NotFoundPage = lazy(async () => {
	const { NotFoundPage } = await import("@/pages/not-found");

	return { default: NotFoundPage };
});

const RegisterPage = lazy(async () => {
	const { RegisterPage } = await import("@/pages/register");

	return { default: RegisterPage };
});

const SettingsPage = lazy(async () => {
	const { SettingsPage } = await import("@/pages/settings");

	return { default: SettingsPage };
});

const ProtectedLayout = lazy(async () => {
	const { ProtectedLayout } = await import("../ProtectedLayout");

	return { default: 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 };