import { lazy, Suspense, memo } from 'react'
import { Routes, Route, Navigate } from 'react-router'
import { Toaster } from '@/components/ui/sonner'
import { LoadingSpinner } from '@/components/LoadingSpinner'

// 路由守卫组件 - 独立定义，便于复用
const RequireAuth = memo(function RequireAuth({ children }: { children: React.ReactNode }) {
  const token = localStorage.getItem('token')
  if (!token) {
    return <Navigate to="/login" replace />
  }
  // 动态导入Layout以避免在登录页面加载它
  return <LazyLayout>{children}</LazyLayout>
})

// 懒加载页面组件 - 实现代码分割
const Login = lazy(() => import('@/pages/Login'))
const Dashboard = lazy(() => import('@/pages/Dashboard'))
const Clusters = lazy(() => import('@/pages/Clusters'))
const Hosts = lazy(() => import('@/pages/Hosts'))
const Storage = lazy(() => import('@/pages/Storage'))
const Deployments = lazy(() => import('@/pages/Deployments'))
const Collectors = lazy(() => import('@/pages/Collectors'))
const Settings = lazy(() => import('@/pages/Settings'))
const Layout = lazy(() => import('@/components/Layout'))

// 懒加载布局包装器
function LazyLayout({ children }: { children: React.ReactNode }) {
  return (
    <Suspense fallback={<PageLoadingFallback />}>
      <Layout>{children}</Layout>
    </Suspense>
  )
}

// 页面加载中占位
function PageLoadingFallback() {
  return (
    <div className="h-screen w-screen flex items-center justify-center bg-slate-50 dark:bg-slate-950">
      <LoadingSpinner size="lg" text="页面加载中..." />
    </div>
  )
}

// 路由配置 - 集中管理路由定义
interface RouteConfig {
  path: string
  element: React.ReactNode
  auth?: boolean
}

const routes: RouteConfig[] = [
  { path: '/login', element: <Login />, auth: false },
  { path: '/', element: <Dashboard />, auth: true },
  { path: '/clusters', element: <Clusters />, auth: true },
  { path: '/hosts', element: <Hosts />, auth: true },
  { path: '/storage', element: <Storage />, auth: true },
  { path: '/deployments', element: <Deployments />, auth: true },
  { path: '/collectors', element: <Collectors />, auth: true },
  { path: '/settings', element: <Settings />, auth: true },
]

/**
 * App 根组件
 * 
 * 优化点：
 * 1. 所有页面使用 React.lazy 懒加载，实现代码分割
 * 2. 路由守卫独立为 memo 组件
 * 3. Suspense 统一处理加载状态
 * 4. 路由配置集中管理
 */
const App = memo(function App() {
  return (
    <>
      <Routes>
        {routes.map((route) => (
          <Route
            key={route.path}
            path={route.path}
            element={
              route.auth ? (
                <RequireAuth>{route.element}</RequireAuth>
              ) : (
                <Suspense fallback={<PageLoadingFallback />}>
                  {route.element}
                </Suspense>
              )
            }
          />
        ))}
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
      <Toaster />
    </>
  )
})

export default App