Twilioapp/src/routes/index.tsx

import { Routes, Route, Navigate } from 'react-router-dom';
import { AppLayout } from '@/components/Layout';
import { Dashboard, UserList, CallList } from '@/pages';
import { useAuth } from '@/store';

// 导入移动端组件
import MobileLayout from '@/components/MobileLayout';
import MobileHome from '@/pages/mobile/Home';
import MobileCall from '@/pages/mobile/Call';
import MobileDocuments from '@/pages/mobile/Documents';
import MobileSettings from '@/pages/mobile/Settings';
import MobileRecharge from '@/pages/mobile/Recharge';
import MobileAppointment from '@/pages/mobile/Appointment';

// 导入设备重定向组件
import DeviceRedirect from '@/components/DeviceRedirect';

// 导入视频通话测试组件
import VideoCallTest from '@/components/VideoCallTest';

// 导入视频通话页面
import { VideoCallPage } from '@/pages/VideoCall/VideoCallPage';

// 私有路由组件
const PrivateRoute = ({ children }: { children: React.ReactNode }) => {
  const { isAuthenticated } = useAuth();
  
  return isAuthenticated ? <>{children}</> : <Navigate to="/login" replace />;
};

// 公共路由组件
const PublicRoute = ({ children }: { children: React.ReactNode }) => {
  const { isAuthenticated } = useAuth();
  
  return !isAuthenticated ? <>{children}</> : <Navigate to="/" replace />;
};

// 登录页面（临时占位符）
const LoginPage = () => (
  <div style={{ 
    height: '100vh', 
    display: 'flex', 
    alignItems: 'center', 
    justifyContent: 'center',
    fontSize: '24px',
    color: '#666'
  }}>
    登录页面 - 待实现
  </div>
);

// 404页面
const NotFoundPage = () => (
  <div style={{ 
    height: '100vh', 
    display: 'flex', 
    alignItems: 'center', 
    justifyContent: 'center',
    flexDirection: 'column',
    fontSize: '24px',
    color: '#666'
  }}>
    <h1>404</h1>
    <p>页面不存在</p>
  </div>
);

const AppRoutes = () => {
  return (
    <Routes>
      {/* 公共路由 */}
      <Route 
        path="/login" 
        element={
          <PublicRoute>
            <LoginPage />
          </PublicRoute>
        } 
      />

      {/* 视频通话测试路由 - 独立访问 */}
      <Route 
        path="/video-test" 
        element={<VideoCallTest />} 
      />

      {/* 根路径 - 智能重定向 */}
      <Route 
        path="/" 
        element={
          <PrivateRoute>
            <DeviceRedirect />
          </PrivateRoute>
        } 
      />

      {/* 移动端路由 */}
      <Route 
        path="/mobile/*" 
        element={
          <PrivateRoute>
            <MobileLayout>
              <Routes>
                <Route path="/" element={<Navigate to="/mobile/home" replace />} />
                <Route path="/home" element={<MobileHome />} />
                <Route path="/call" element={<MobileCall />} />
                <Route path="/documents" element={<MobileDocuments />} />
                <Route path="/settings" element={<MobileSettings />} />
                <Route path="/recharge" element={<MobileRecharge />} />
                <Route path="/appointment" element={<MobileAppointment />} />
                <Route path="/video-test" element={<VideoCallTest />} />
                <Route path="*" element={<NotFoundPage />} />
              </Routes>
            </MobileLayout>
          </PrivateRoute>
        } 
      />

      {/* 私有路由 - Web管理后台 */}
      <Route 
        path="/*" 
        element={
          <PrivateRoute>
            <AppLayout>
              <Routes>
                {/* 仪表板 */}
                <Route path="/dashboard" element={<Dashboard />} />
                
                {/* 用户管理 */}
                <Route path="/users" element={<UserList />} />
                
                {/* 通话记录 */}
                <Route path="/calls" element={<CallList />} />
                
                {/* 视频通话测试 */}
                <Route path="/video-test" element={<VideoCallTest />} />
                
                {/* 文档管理 - 待实现 */}
                <Route 
                  path="/documents" 
                  element={
                    <div style={{ padding: '24px', textAlign: 'center' }}>
                      文档管理页面 - 待实现
                    </div>
                  } 
                />
                
                {/* 预约管理 - 待实现 */}
                <Route 
                  path="/appointments" 
                  element={
                    <div style={{ padding: '24px', textAlign: 'center' }}>
                      预约管理页面 - 待实现
                    </div>
                  } 
                />
                
                {/* 译员管理 - 待实现 */}
                <Route 
                  path="/translators" 
                  element={
                    <div style={{ padding: '24px', textAlign: 'center' }}>
                      译员管理页面 - 待实现
                    </div>
                  } 
                />
                
                {/* 财务管理 - 待实现 */}
                <Route 
                  path="/finance" 
                  element={
                    <div style={{ padding: '24px', textAlign: 'center' }}>
                      财务管理页面 - 待实现
                    </div>
                  } 
                />
                
                {/* 系统设置 - 待实现 */}
                <Route 
                  path="/settings" 
                  element={
                    <div style={{ padding: '24px', textAlign: 'center' }}>
                      系统设置页面 - 待实现
                    </div>
                  } 
                />
                
                {/* 404页面 */}
                <Route path="*" element={<NotFoundPage />} />
              </Routes>
            </AppLayout>
          </PrivateRoute>
        } 
      />
    </Routes>
  );
};

export default AppRoutes;