import { lazy, Suspense } from 'react'
import { Route, Routes } from 'react-router-dom'
import { MainLayout } from '@/app/layout/MainLayout'
import { usePageTitleReset } from '@/shared/lib/use-page-title'
import { SkeletonPage } from '@/shared/ui/SkeletonPage'

const AdminLayoutPage = lazy(() => import('@/pages/admin-layout').then((m) => ({ default: m.AdminLayoutPage })))
const MeLayoutPage = lazy(() => import('@/pages/me').then((m) => ({ default: m.MeLayoutPage })))

const HomePage = lazy(() => import('@/pages/home').then((m) => ({ default: m.HomePage })))
const AuthPage = lazy(() => import('@/pages/auth').then((m) => ({ default: m.AuthPage })))
const AuthCallbackPage = lazy(() => import('@/pages/auth').then((m) => ({ default: m.AuthCallbackPage })))
const CartPage = lazy(() => import('@/pages/cart').then((m) => ({ default: m.CartPage })))
const CheckoutPage = lazy(() => import('@/pages/checkout').then((m) => ({ default: m.CheckoutPage })))
const AboutPage = lazy(() => import('@/pages/about').then((m) => ({ default: m.AboutPage })))
const InfoPage = lazy(() => import('@/pages/info').then((m) => ({ default: m.InfoPage })))
const PrivacyPolicyPage = lazy(() => import('@/pages/privacy-policy').then((m) => ({ default: m.PrivacyPolicyPage })))
const TermsPage = lazy(() => import('@/pages/terms').then((m) => ({ default: m.TermsPage })))
const ProductPage = lazy(() => import('@/pages/product').then((m) => ({ default: m.ProductPage })))
const NotFoundPage = lazy(() => import('@/pages/not-found').then((m) => ({ default: m.NotFoundPage })))

export function AppRoutes() {
  usePageTitleReset()

  return (
    <MainLayout>
      <Routes>
        <Route
          path="/"
          element={
            <Suspense fallback={<SkeletonPage />}>
              <HomePage />
            </Suspense>
          }
        />
        <Route
          path="/admin/*"
          element={
            <Suspense fallback={<SkeletonPage />}>
              <AdminLayoutPage />
            </Suspense>
          }
        />
        <Route
          path="/auth"
          element={
            <Suspense fallback={<SkeletonPage />}>
              <AuthPage />
            </Suspense>
          }
        />
        <Route
          path="/auth/callback"
          element={
            <Suspense fallback={<SkeletonPage />}>
              <AuthCallbackPage />
            </Suspense>
          }
        />
        <Route
          path="/cart"
          element={
            <Suspense fallback={<SkeletonPage />}>
              <CartPage />
            </Suspense>
          }
        />
        <Route
          path="/checkout"
          element={
            <Suspense fallback={<SkeletonPage />}>
              <CheckoutPage />
            </Suspense>
          }
        />
        <Route
          path="/about"
          element={
            <Suspense fallback={<SkeletonPage />}>
              <AboutPage />
            </Suspense>
          }
        />
        <Route
          path="/info"
          element={
            <Suspense fallback={<SkeletonPage />}>
              <InfoPage />
            </Suspense>
          }
        />
        <Route
          path="/privacy"
          element={
            <Suspense fallback={<SkeletonPage />}>
              <PrivacyPolicyPage />
            </Suspense>
          }
        />
        <Route
          path="/terms"
          element={
            <Suspense fallback={<SkeletonPage />}>
              <TermsPage />
            </Suspense>
          }
        />
        <Route
          path="/me/*"
          element={
            <Suspense fallback={<SkeletonPage />}>
              <MeLayoutPage />
            </Suspense>
          }
        />
        <Route
          path="/products/:id"
          element={
            <Suspense fallback={<SkeletonPage />}>
              <ProductPage />
            </Suspense>
          }
        />
        <Route
          path="*"
          element={
            <Suspense fallback={<SkeletonPage />}>
              <NotFoundPage />
            </Suspense>
          }
        />
      </Routes>
    </MainLayout>
  )
}