import React, { Suspense } from 'react'
import { Routes, Route, Navigate } from 'react-router-dom'
import { Spin, Layout } from 'antd'

const { Content } = Layout

// 懒加载页面组件
const ProjectsPage = React.lazy(() => import('./pages/projects/ProjectsPage'))
const ProjectDetail = React.lazy(() => import('./pages/projects/ProjectDetail'))

// 施工管理页面
const ConstructionList = React.lazy(() => import('./pages/construction/ConstructionList'))
const ConstructionLog = React.lazy(() => import('./pages/construction/ConstructionLog'))
const ConstructionMilestones = React.lazy(() => import('./pages/construction/ConstructionMilestones'))
const BudgetProjectList = React.lazy(() => import('./pages/budget/BudgetProjectList'))
const BudgetProjectCreate = React.lazy(() => import('./pages/budget/BudgetProjectCreate'))

// 加载中组件
const LoadingFallback = () => (
  <div style={{ 
    display: 'flex', 
    justifyContent: 'center', 
    alignItems: 'center', 
    height: '100vh' 
  }}>
    <Spin size="large" />
  </div>
)

// 简单布局
const SimpleLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <Layout style={{ minHeight: '100vh' }}>
    <Content style={{ background: '#f0f2f5' }}>
      {children}
    </Content>
  </Layout>
)

const App: React.FC = () => {
  return (
    <SimpleLayout>
      <Suspense fallback={<LoadingFallback />}>
        <Routes>
          {/* 项目管理路由 */}
          <Route path="/projects" element={<ProjectsPage />} />
          <Route path="/projects/:id" element={<ProjectDetail />} />
          
          {/* 预算报价路由 */}
          <Route path="/budget-projects" element={<BudgetProjectList />} />
          <Route path="/budget-projects/create" element={<BudgetProjectCreate />} />
          <Route path="/budget-projects/:id" element={<BudgetProjectList />} />
          
          {/* 施工管理路由 */}
          <Route path="/construction" element={<ConstructionList />} />
          <Route path="/construction/:id/logs" element={<ConstructionLog />} />
          <Route path="/construction/:id/milestones" element={<ConstructionMilestones />} />
          
          {/* 默认重定向到项目列表 */}
          <Route path="/" element={<Navigate to="/projects" replace />} />
          
          {/* 404页面 */}
          <Route path="*" element={
            <div style={{ 
              display: 'flex', 
              justifyContent: 'center', 
              alignItems: 'center', 
              height: '100vh',
              flexDirection: 'column',
              gap: 16
            }}>
              <h1>404 - 页面未找到</h1>
              <p>您访问的页面不存在或已被移除。</p>
              <a href="/">返回首页</a>
            </div>
          } />
        </Routes>
      </Suspense>
    </SimpleLayout>
  )
}

export default App