import { lazy, Suspense } from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'

// webpack / Vite sees import() and creates a separate chunk for each module.
// The magic comment gives the chunk a readable name in DevTools.
const Home      = lazy(() => import(/* webpackChunkName: "page-home" */      './pages/Home'))
const Dashboard = lazy(() => import(/* webpackChunkName: "page-dashboard" */ './pages/Dashboard'))
const Settings  = lazy(() => import(/* webpackChunkName: "page-settings" */  './pages/Settings'))
const Reports   = lazy(() => import(/* webpackChunkName: "page-reports" */   './pages/Reports'))

export default function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<PageLoader />}>
        <Routes>
          <Route path="/"           element={<Home />} />
          <Route path="/dashboard"  element={<Dashboard />} />
          <Route path="/settings"   element={<Settings />} />
          <Route path="/reports"    element={<Reports />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  )
}

function PageLoader() {
  return <div style={{ textAlign: 'center', padding: 64 }}>Loading…</div>
}

import { lazy, Suspense, useState } from 'react'

// These libraries are large — don't pay the cost until they're needed
const DataGrid   = lazy(() => import(/* webpackChunkName: "data-grid" */  './DataGrid'))
const PDFViewer  = lazy(() => import(/* webpackChunkName: "pdf-viewer" */ './PDFViewer'))
const VideoPlayer = lazy(() => import(/* webpackChunkName: "video" */     './VideoPlayer'))

function ContentPage({ type, src }) {
  return (
    <Suspense fallback={<div>Loading viewer…</div>}>
      {type === 'grid'  && <DataGrid src={src} />}
      {type === 'pdf'   && <PDFViewer src={src} />}
      {type === 'video' && <VideoPlayer src={src} />}
    </Suspense>
  )
}

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // Rarely-changing libraries — long-lived cache
          'vendor-react':  ['react', 'react-dom', 'react-router-dom'],
          'vendor-ui':     ['@mui/material', '@emotion/react', '@emotion/styled'],
          'vendor-charts': ['recharts', 'd3'],
        },
      },
    },
  },
})

// Named chunk — appears as "heavy-editor.js" in the network tab
const Editor = lazy(() => import(/* webpackChunkName: "heavy-editor" */ './Editor'))

// Prefetch — browser downloads this chunk during idle time (low priority)
// Use for routes the user is likely to visit next
const Settings = lazy(() => import(/* webpackPrefetch: true */ './Settings'))

// Preload — browser downloads this chunk at high priority in parallel
// Use for resources needed very soon
const Modal = lazy(() => import(/* webpackPreload: true */ './Modal'))

// Combine name + prefetch
const Analytics = lazy(() => import(
  /* webpackChunkName: "analytics", webpackPrefetch: true */
  './Analytics'
))

// In Vite, this is all you need — no plugin config required
const AdminPanel = lazy(() => import('./AdminPanel'))
// Vite creates: dist/assets/AdminPanel-[hash].js automatically

// Vite also splits node_modules automatically.
// You can inspect the output with:
// npx vite build --report  (opens a bundle visualizer)