import React, { lazy, Suspense } from 'react';
import { createBrowserRouter, Navigate } from 'react-router-dom';
import BasicLayout from '../layouts/BasicLayout';
import { AuthPageLoadingFallback, PageLoadingFallback } from '../components/AppLoadingSkeleton';

const Login = lazy(() => import('../pages/Login'));
const Install = lazy(() => import('../pages/Install'));
const Setup = lazy(() => import('../pages/Setup'));
const Settings = lazy(() => import('../pages/Settings'));
const OnlineDesktopUsers = lazy(() => import('../pages/OnlineDesktopUsers'));
const DesktopExecutionTasks = lazy(() => import('../pages/DesktopExecutionTasks'));
const ProductInformation = lazy(() => import('../pages/ProductInformation'));
const OperationPlaceholder = lazy(() => import('../pages/OperationPlaceholder'));
const DevelopmentStylePreview = lazy(() => import('../pages/DevelopmentStylePreview'));

const lazyLoadingElement = <PageLoadingFallback />;

const renderLazyComponent = (lazyView, props = {}, fallback = lazyLoadingElement) => {
  const LazyView = lazyView;

  return (
    <Suspense fallback={fallback}>
      <LazyView {...props} />
    </Suspense>
  );
};

const HOME_URL = '/planning/dev-style-preview';

const router = createBrowserRouter([
  {
    path: '/login',
    element: renderLazyComponent(Login, {}, <AuthPageLoadingFallback />),
  },
  {
    path: '/callback',
    element: renderLazyComponent(Login, {}, <AuthPageLoadingFallback />),
  },
  {
    path: '/setup',
    element: renderLazyComponent(Setup),
  },
  {
    path: '/install',
    element: renderLazyComponent(Install),
  },
  {
    path: '/',
    element: <BasicLayout />,
    children: [
      {
        index: true,
        element: <Navigate to={HOME_URL} replace />,
      },
      {
        path: 'dashboard',
        element: <Navigate to={HOME_URL} replace />,
      },
      {
        path: 'channel',
        element: <Navigate to={HOME_URL} replace />,
      },
      {
        path: 'planning',
        element: <Navigate to={HOME_URL} replace />,
      },
      {
        path: 'planning/operation/product-information',
        element: renderLazyComponent(ProductInformation),
      },
      { path: 'planning/operation/store-checkup', element: <Navigate to={HOME_URL} replace /> },
      { path: 'planning/operation/review-analysis', element: <Navigate to={HOME_URL} replace /> },
      { path: 'planning/operation/customer-service-checkup', element: <Navigate to={HOME_URL} replace /> },
      { path: 'planning/operation/pricing-calculator', element: <Navigate to={HOME_URL} replace /> },
      { path: 'planning/operation/desktop-client-download', element: <Navigate to={HOME_URL} replace /> },
      { path: 'planning/operation/ai-buyer-show', element: <Navigate to={HOME_URL} replace /> },
      { path: 'planning/operation/ai-seeding-video', element: <Navigate to={HOME_URL} replace /> },
      { path: 'settings/desktop-client-releases', element: <Navigate to={HOME_URL} replace /> },
      {
        path: 'planning/operation/:featureKey',
        element: renderLazyComponent(OperationPlaceholder),
      },
      {
        path: 'planning/upload',
        element: <Navigate to={HOME_URL} replace />,
      },
      {
        path: 'planning/dev-style-preview',
        element: renderLazyComponent(DevelopmentStylePreview),
      },
      {
        path: 'settings',
        element: renderLazyComponent(Settings),
      },
      {
        path: 'settings/online-desktop-users',
        element: renderLazyComponent(OnlineDesktopUsers),
      },
      {
        path: 'settings/desktop-execution-tasks',
        element: renderLazyComponent(DesktopExecutionTasks),
      },
      {
        path: '*',
        element: <Navigate to={HOME_URL} replace />,
      },
    ],
  },
]);

export default router;