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

// 导入移动端页面 - 使用Web版本
import HomeScreen from '@/screens/HomeScreen.web';
import CallScreen from '@/screens/CallScreen.web';
import DocumentScreen from '@/screens/DocumentScreen.web';
import SettingsScreen from '@/screens/SettingsScreen.web';
import MobileNavigation from '@/components/MobileNavigation.web';

// 导入视频通话页面
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="/dashboard" 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 MobileLayout = ({ children }: { children: React.ReactNode }) => (
  <div style={{ 
    width: '100%', 
    height: '100vh', 
    backgroundColor: '#f5f5f5',
    overflow: 'hidden',
    position: 'relative'
  }}>
    <div style={{ 
      height: 'calc(100vh - 80px)', 
      overflow: 'auto' 
    }}>
      {children}
    </div>
    <MobileNavigation />
  </div>
);

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

      {/* 移动端路由 */}
      <Route 
        path="/mobile/*" 
        element={
          <PrivateRoute>
            <MobileLayout>
              <Routes>
                <Route path="/" element={<Navigate to="/mobile/home" replace />} />
                <Route path="/home" element={<HomeScreen />} />
                <Route path="/call" element={<CallScreen />} />
                <Route path="/documents" element={<DocumentScreen />} />
                <Route path="/settings" element={<SettingsScreen />} />
                <Route path="*" element={<NotFoundPage />} />
              </Routes>
            </MobileLayout>
          </PrivateRoute>
        } 
      />

      {/* 私有路由 - Web管理后台 */}
      <Route 
        path="/*" 
        element={
          <PrivateRoute>
            <AppLayout>
              <Routes>
                {/* 默认重定向到仪表板 */}
                <Route path="/" element={<Navigate to="/dashboard" replace />} />
                
                {/* 仪表板 */}
                <Route path="/dashboard" element={<Dashboard />} />
                
                {/* 用户管理 */}
                <Route path="/users" element={<UserList />} />
                
                {/* 通话记录 */}
                <Route path="/calls" element={<CallList />} />
                
                {/* 文档管理 - 待实现 */}
                <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;