import { Loader } from "@mantine/core";
import { lazy, Suspense } from "react";
import { Navigate, Route, Routes, useLocation } from "react-router";
import { useAuth } from "@/features/auth";

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 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 };
});

function LazyPage({ children }: { children: React.ReactNode }) {
	return <Suspense fallback={<Loader />}>{children}</Suspense>;
}

function Protected({ children }: { children: React.ReactNode }) {
	const { user, ready } = useAuth();
	const location = useLocation();
	if (!ready) return null;
	return user ? (
		children
	) : (
		<Navigate
			to="/login"
			state={{ returnTo: `${location.pathname}${location.search}` }}
			replace
		/>
	);
}

function Public({ children }: { children: React.ReactNode }) {
	const { user, ready } = useAuth();
	if (!ready) return null;
	return user ? <Navigate to="/accounts" replace /> : children;
}

export function AppRoutes() {
	return (
		<Routes>
			<Route path="/" element={<Navigate to="/accounts" replace />} />
			<Route
				path="/login"
				element={
					<Public>
						<LazyPage>
							<LoginPage />
						</LazyPage>
					</Public>
				}
			/>
			<Route
				path="/register"
				element={
					<Public>
						<LazyPage>
							<RegisterPage />
						</LazyPage>
					</Public>
				}
			/>
			<Route
				element={
					<Protected>
						<LazyPage>
							<ProtectedLayout />
						</LazyPage>
					</Protected>
				}
			>
				<Route
					path="/accounts"
					element={
						<LazyPage>
							<AccountsPage />
						</LazyPage>
					}
				/>
				<Route
					path="/accounts/:accountId"
					element={
						<LazyPage>
							<AccountPage />
						</LazyPage>
					}
				/>
				<Route
					path="/accounts/:accountId/events"
					element={
						<LazyPage>
							<AccountEventsPage />
						</LazyPage>
					}
				/>
				<Route
					path="/accounts/:accountId/operations"
					element={
						<LazyPage>
							<AccountOperationsPage />
						</LazyPage>
					}
				/>
				<Route
					path="/settings"
					element={
						<LazyPage>
							<SettingsPage />
						</LazyPage>
					}
				/>
			</Route>
			<Route
				path="*"
				element={
					<LazyPage>
						<NotFoundPage />
					</LazyPage>
				}
			/>
		</Routes>
	);
}