import React from 'react'
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
import { ConfigProvider } from 'antd'
import dayjs from 'dayjs'

// 样式导入
import './App.css'

// 页面组件
import LoginPage from './pages/auth/LoginPage'
import DashboardPage from './pages/dashboard/DashboardPage'
import ProjectsPage from './pages/projects/ProjectsPage'
import AdvancesPage from './pages/advances/AdvancesPage'
import ReimbursementsPage from './pages/reimbursements/ReimbursementsPage'
import FinancePage from './pages/finance/FinancePage'
import ReportsPage from './pages/reports/ReportsPage'

// 布局组件
import MainLayout from './components/layout/MainLayout'

// 状态管理
import { useAuthStore } from './store/authStore'
import { useLanguageStore } from './store/languageStore'

// 路由守卫组件
const PrivateRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const { isAuthenticated } = useAuthStore()
  
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />
  }
  
  return <>{children}</>
}

function App() {
  const { currentLanguage, getLanguageInfo } = useLanguageStore()
  const languageInfo = getLanguageInfo()
  
  // 设置 dayjs 本地化
  const localeMap: Record<string, string> = {
    'zh-CN': 'zh-cn',
    'th-TH': 'th',
    'lo-LA': 'en',
    'en-US': 'en'
  }
  dayjs.locale(localeMap[currentLanguage] || 'zh-cn')
  
  return (
    <ConfigProvider
      locale={languageInfo.antdLocale}
      theme={{
        token: {
          colorPrimary: '#1890ff',
          borderRadius: 6,
          colorLink: '#1890ff',
        },
        components: {
          Layout: {
            headerBg: '#fff',
            headerPadding: '0 24px',
          },
          Menu: {},
          Card: {
            margin: 16,
          },
        },
      }}
    >
      <Router>
        <Routes>
          <Route path="/login" element={<LoginPage />} />
          <Route path="/" element={<PrivateRoute><MainLayout /></PrivateRoute>}>
            <Route index element={<Navigate to="/dashboard" replace />} />
            <Route path="dashboard" element={<DashboardPage />} />
            <Route path="projects" element={<ProjectsPage />} />
            <Route path="advances" element={<AdvancesPage />} />
            <Route path="reimbursements" element={<ReimbursementsPage />} />
            <Route path="finance" element={<FinancePage />} />
            <Route path="reports" element={<ReportsPage />} />
          </Route>
        </Routes>
      </Router>
    </ConfigProvider>
  )
}

export default App