import React, { Suspense, lazy } from 'react';
import { createRoot } from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import './styles.css';
import { AppLayout } from './modules/app/AppLayout.jsx';
import { HomePage } from './modules/home/HomePage.jsx';
import { seoPages } from './modules/seo/pages.jsx';

const lazyNamed = (loader, exportName) => lazy(() => loader().then((module) => ({ default: module[exportName] })));

const UploadPage = lazyNamed(() => import('./modules/photos/UploadPage.jsx'), 'UploadPage');
const UploadSuccessPage = lazyNamed(() => import('./modules/photos/UploadSuccessPage.jsx'), 'UploadSuccessPage');
const RatePage = lazyNamed(() => import('./modules/photos/RatePage.jsx'), 'RatePage');
const CompareCreatePage = lazyNamed(() => import('./modules/photos/CompareCreatePage.jsx'), 'CompareCreatePage');
const ComparePage = lazyNamed(() => import('./modules/photos/ComparePage.jsx'), 'ComparePage');
const ProfilePage = lazyNamed(() => import('./modules/users/ProfilePage.jsx'), 'ProfilePage');
const AdminPage = lazyNamed(() => import('./modules/admin/AdminPage.jsx'), 'AdminPage');
const InboxPage = lazyNamed(() => import('./modules/messages/InboxPage.jsx'), 'InboxPage');
const ThreadPage = lazyNamed(() => import('./modules/messages/ThreadPage.jsx'), 'ThreadPage');
const WalletPage = lazyNamed(() => import('./modules/wallet/WalletPage.jsx'), 'WalletPage');
const SettingsPage = lazyNamed(() => import('./modules/users/SettingsPage.jsx'), 'SettingsPage');
const PasswordResetPage = lazyNamed(() => import('./modules/auth/PasswordResetPage.jsx'), 'PasswordResetPage');
const PasswordResetConfirmPage = lazyNamed(() => import('./modules/auth/PasswordResetConfirmPage.jsx'), 'PasswordResetConfirmPage');
const Top10Page = lazyNamed(() => import('./modules/home/Top10Page.jsx'), 'Top10Page');

const RouteFallback = () => (
	<div className="mx-auto max-w-6xl px-4 py-10">
		<div className="h-32 animate-pulse rounded-3xl bg-slate-100" />
	</div>
);

const lazyRoute = (element) => <Suspense fallback={<RouteFallback />}>{element}</Suspense>;

const router = createBrowserRouter([
	{
		path: '/',
		element: <AppLayout />,
		children: [
			{ index: true, element: <HomePage /> },
			{ path: 'upload', element: lazyRoute(<UploadPage />) },
			{ path: 'upload/success/:id', element: lazyRoute(<UploadSuccessPage />) },
			{ path: 'rate/:id', element: lazyRoute(<RatePage />) },
			{ path: 'compare/new', element: lazyRoute(<CompareCreatePage />) },
			{ path: 'compare/:id', element: lazyRoute(<ComparePage />) },
			{ path: 'u/:username', element: lazyRoute(<ProfilePage />) },
			{ path: 'settings', element: lazyRoute(<SettingsPage />) },
			{ path: 'messages', element: lazyRoute(<InboxPage />) },
			{ path: 'messages/:id', element: lazyRoute(<ThreadPage />) },
			{ path: 'wallet', element: lazyRoute(<WalletPage />) },
			{ path: 'admin', element: lazyRoute(<AdminPage />) },
			{ path: 'top10', element: lazyRoute(<Top10Page />) },
			{ path: 'password-reset', element: lazyRoute(<PasswordResetPage />) },
			{ path: 'password-reset/confirm', element: lazyRoute(<PasswordResetConfirmPage />) },
			...seoPages.map((p) => ({ path: p.slug, element: p.element({}) }))
		]
	}
]);

createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>
);