import { lazy, Suspense } from 'react';
import { Navigate, Route, Routes } from 'react-router-dom';
import { AppShell } from '@/components/layout/AppShell';
import { TimelinePage } from '@/pages/timeline/TimelinePage';

// 非首屏页面懒加载：echarts 等重依赖仅在进入对应路由时拉取
const RecordsPage = lazy(() => import('@/pages/records/RecordsPage').then(m => ({ default: m.RecordsPage })));
const DashboardPage = lazy(() => import('@/pages/dashboard/DashboardPage').then(m => ({ default: m.DashboardPage })));
const GradesPage = lazy(() => import('@/pages/grades/GradesPage').then(m => ({ default: m.GradesPage })));
const TypesPage = lazy(() => import('@/pages/types/TypesPage').then(m => ({ default: m.TypesPage })));
const TaxonomyPage = lazy(() => import('@/pages/taxonomy/TaxonomyPage').then(m => ({ default: m.TaxonomyPage })));
const AdminPage = lazy(() => import('@/pages/admin/AdminPage').then(m => ({ default: m.AdminPage })));
const ProfilePage = lazy(() => import('@/pages/profile/ProfilePage').then(m => ({ default: m.ProfilePage })));
const ResumePage = lazy(() => import('@/pages/resume/ResumePage').then(m => ({ default: m.ResumePage })));
const AssessmentPage = lazy(() => import('@/pages/assessment/AssessmentPage').then(m => ({ default: m.AssessmentPage })));

function PageLoading() {
  return <div className="py-16 text-center text-[13px] text-ink-3">加载中…</div>;
}

export default function App() {
  return (
    <Routes>
      <Route element={<AppShell />}>
        <Route path="/" element={<Navigate to="/timeline" replace />} />
        <Route path="/timeline" element={<TimelinePage />} />
        <Route path="/records" element={<Suspense fallback={<PageLoading />}><RecordsPage /></Suspense>} />
        <Route path="/grades" element={<Suspense fallback={<PageLoading />}><GradesPage /></Suspense>} />
        <Route path="/dashboard" element={<Suspense fallback={<PageLoading />}><DashboardPage /></Suspense>} />
        <Route path="/types" element={<Suspense fallback={<PageLoading />}><TypesPage /></Suspense>} />
        <Route path="/taxonomy" element={<Suspense fallback={<PageLoading />}><TaxonomyPage /></Suspense>} />
        <Route path="/admin" element={<Suspense fallback={<PageLoading />}><AdminPage /></Suspense>} />
        <Route path="/profile" element={<Suspense fallback={<PageLoading />}><ProfilePage /></Suspense>} />
        <Route path="/resume" element={<Suspense fallback={<PageLoading />}><ResumePage /></Suspense>} />
        <Route path="/assessment" element={<Suspense fallback={<PageLoading />}><AssessmentPage /></Suspense>} />
        <Route path="*" element={<Navigate to="/timeline" replace />} />
      </Route>
    </Routes>
  );
}