import React, { lazy, Suspense } from 'react';
import type { RouteObject } from 'react-router-dom';
import { Navigate } from 'react-router-dom';
import { Spin } from 'antd';
import MainLayout from './layouts/MainLayout';

const CaseList = lazy(() => import('./pages/cases/CaseList'));
const Workspace = lazy(() => import('./pages/workspace/Workspace'));
const Screenshots = lazy(() => import('./pages/screenshots/Screenshots'));
const Transactions = lazy(() => import('./pages/transactions/Transactions'));
const Analysis = lazy(() => import('./pages/analysis/Analysis'));
const Review = lazy(() => import('./pages/review/Review'));
const Reports = lazy(() => import('./pages/reports/Reports'));

const Loading = () => (
  <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 120 }}>
    <Spin size="large" />
  </div>
);

function withSuspense(Component: React.LazyExoticComponent<React.ComponentType>) {
  return (
    <Suspense fallback={<Loading />}>
      <Component />
    </Suspense>
  );
}

export const routes: RouteObject[] = [
  {
    path: '/',
    element: <MainLayout />,
    children: [
      { index: true, element: <Navigate to="/cases" replace /> },
      { path: 'cases', element: withSuspense(CaseList) },
      { path: 'cases/:id/workspace', element: withSuspense(Workspace) },
      { path: 'cases/:id/screenshots', element: withSuspense(Screenshots) },
      { path: 'cases/:id/transactions', element: withSuspense(Transactions) },
      { path: 'cases/:id/analysis', element: withSuspense(Analysis) },
      { path: 'cases/:id/review', element: withSuspense(Review) },
      { path: 'cases/:id/reports', element: withSuspense(Reports) },
    ],
  },
];