import { Navigate, Route, Routes } from 'react-router-dom'
import { AppShell } from '../components/layout/AppShell'
import { ProtectedRoute } from '../components/routes/ProtectedRoute'
import { renderPublicRoutes } from './PublicRoutes'
import { Suspense, lazy } from 'react'
import { GeneralPageLoader } from '../components/ui/Skeletons'

const DashboardOverviewPage = lazy(() => import('../pages/app-pages').then((m) => ({ default: m.DashboardOverviewPage })))
const ProtectedLaunchStatusPage = lazy(() => import('../pages/app-pages').then((m) => ({ default: m.ProtectedLaunchStatusPage })))
const DownloadCenterPage = lazy(() => import('../pages/app-pages').then((m) => ({ default: m.DownloadCenterPage })))
const BrowserAccessPage = lazy(() => import('../pages/app-pages').then((m) => ({ default: m.BrowserAccessPage })))
const AccountPage = lazy(() => import('../pages/app-pages').then((m) => ({ default: m.AccountPage })))
const NoticesPage = lazy(() => import('../pages/app-pages').then((m) => ({ default: m.NoticesPage })))

const protectedAppLoaders = {
  dashboard: {
    title: 'Loading dashboard...',
    eyebrow: 'Signed-in dashboard',
    description:
      'Restoring your account, release status, desktop pairing, and download readiness.',
  },
  downloads: {
    title: 'Loading downloads...',
    eyebrow: 'Signed-in downloads',
    description:
      'Preparing your available desktop builds, package checks, and release notes.',
  },
  launchStatus: {
    title: 'Loading launch status...',
    eyebrow: 'Launch status',
    description:
      'Restoring the current release checklist, launch notes, and package proof.',
  },
  browserAccess: {
    title: 'Loading browser access...',
    eyebrow: 'Browser companion',
    description:
      'Restoring the signed-in website experience and the current web-versus-desktop guide.',
  },
  account: {
    title: 'Loading account...',
    eyebrow: 'Account',
    description:
      'Refreshing your plan, access, and release details.',
  },
  notices: {
    title: 'Loading notices...',
    eyebrow: 'Release notices',
    description:
      'Restoring notices, source links, and release references for the current desktop build.',
  },
} as const

function withAppLoader(
  loader: {
    title: string
    eyebrow: string
    description: string
  },
  element: React.ReactNode,
) {
  return (
    <Suspense
      fallback={
        <GeneralPageLoader
          title={loader.title}
          eyebrow={loader.eyebrow}
          description={loader.description}
        />
      }
    >
      {element}
    </Suspense>
  )
}

export function AppRouteTree() {
  return (
    <Routes>
      {renderPublicRoutes()}

      <Route element={<ProtectedRoute />}>
        <Route path="/app" element={<AppShell />}>
          <Route index element={withAppLoader(protectedAppLoaders.dashboard, <DashboardOverviewPage />)} />
          <Route path="launch-status" element={withAppLoader(protectedAppLoaders.launchStatus, <ProtectedLaunchStatusPage />)} />
          <Route path="downloads" element={withAppLoader(protectedAppLoaders.downloads, <DownloadCenterPage />)} />
          <Route path="browser-access" element={withAppLoader(protectedAppLoaders.browserAccess, <BrowserAccessPage />)} />
          <Route path="account" element={withAppLoader(protectedAppLoaders.account, <AccountPage />)} />
          <Route path="notices" element={withAppLoader(protectedAppLoaders.notices, <NoticesPage />)} />
        </Route>
      </Route>

      <Route path="*" element={<Navigate to="/" replace />} />
    </Routes>
  )
}
