import { Suspense, lazy, type ReactNode } from 'react'
import { Route } from 'react-router-dom'
import { GeneralPageLoader } from '../components/ui/Skeletons'
import { publicRouteRegistry, type PublicRouteDefinition } from '../public-route-registry'

const HomeLanding = lazy(() => import('../pages/public-pages-marketing').then((m) => ({ default: m.HomeLanding })))
const BrowserExperiencePage = lazy(() => import('../pages/public-pages-guides').then((m) => ({ default: m.BrowserExperiencePage })))
const FeaturesPage = lazy(() => import('../pages/public-pages-features').then((m) => ({ default: m.FeaturesPage })))
const AboutPage = lazy(() => import('../pages/public-pages-marketing').then((m) => ({ default: m.AboutPage })))
const ResourcesPage = lazy(() => import('../pages/public-pages-marketing').then((m) => ({ default: m.ResourcesPage })))
const HelpCenterPage = lazy(() => import('../pages/public-pages-guides').then((m) => ({ default: m.HelpCenterPage })))
const GettingStartedPage = lazy(() => import('../pages/public-pages-marketing').then((m) => ({ default: m.GettingStartedPage })))
const LaunchStatusPage = lazy(() => import('../pages/public-pages-launch').then((m) => ({ default: m.LaunchStatusPage })))
const DocsPage = lazy(() => import('../pages/public-pages-marketing').then((m) => ({ default: m.DocsPage })))
const SupportPage = lazy(() => import('../pages/public-pages-marketing').then((m) => ({ default: m.SupportPage })))
const ContactPage = lazy(() => import('../pages/public-pages-guides').then((m) => ({ default: m.ContactPage })))
const ChangelogPage = lazy(() => import('../pages/public-pages-marketing').then((m) => ({ default: m.ChangelogPage })))
const PricingPage = lazy(() => import('../pages/public-pages-commerce').then((m) => ({ default: m.PricingPage })))
const DownloadPage = lazy(() => import('../pages/public-pages-commerce').then((m) => ({ default: m.DownloadPage })))
const OpenSourceNoticesPage = lazy(() => import('../pages/public-pages-commerce').then((m) => ({ default: m.OpenSourceNoticesPage })))
const PrivacyPage = lazy(() => import('../pages/public-pages-commerce').then((m) => ({ default: m.PrivacyPage })))
const TermsPage = lazy(() => import('../pages/public-pages-commerce').then((m) => ({ default: m.TermsPage })))
const ShippingPaymentPage = lazy(() => import('../pages/public-pages-commerce').then((m) => ({ default: m.ShippingPaymentPage })))
const LoginPage = lazy(() => import('../pages/auth-pages').then((m) => ({ default: m.LoginPage })))
const RegisterPage = lazy(() => import('../pages/auth-pages').then((m) => ({ default: m.RegisterPage })))

const publicRouteElements: Record<string, ReactNode> = {
  '/': <HomeLanding />,
  '/browser': <BrowserExperiencePage />,
  '/features': <FeaturesPage />,
  '/about': <AboutPage />,
  '/resources': <ResourcesPage />,
  '/help': <HelpCenterPage />,
  '/getting-started': <GettingStartedPage />,
  '/launch-status': <LaunchStatusPage />,
  '/docs': <DocsPage />,
  '/support': <SupportPage />,
  '/contact': <ContactPage />,
  '/changelog': <ChangelogPage />,
  '/pricing': <PricingPage />,
  '/download': <DownloadPage />,
  '/open-source-notices': <OpenSourceNoticesPage />,
  '/privacy': <PrivacyPage />,
  '/terms': <TermsPage />,
  '/shipping-payment': <ShippingPaymentPage />,
  '/login': <LoginPage />,
  '/register': <RegisterPage />,
}

function withGeneralLoader(route: PublicRouteDefinition, element: ReactNode) {
  const isAuthRoute = route.path === '/login' || route.path === '/register'

  return (
    <Suspense
      fallback={
        <GeneralPageLoader
          title={route.loaderTitle}
          eyebrow={route.loaderEyebrow}
          description={route.loaderDescription}
          fullscreen={isAuthRoute}
          showBrand
        />
      }
    >
      {element}
    </Suspense>
  )
}

export function renderPublicRoutes() {
  return (
    <>
      {publicRouteRegistry.map((route) => (
        <Route
          key={route.path}
          path={route.path}
          element={withGeneralLoader(route, publicRouteElements[route.path])}
        />
      ))}
    </>
  )
}
