frontend/src/navigation/RootNavigator.tsx

/**
 * 根导航器
 * 处理整个应用的顶级导航，包括认证状态切换
 */
import React, { useEffect, useState } from 'react';
import { View, ActivityIndicator, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import type { RootStackParamList } from './types';
import { colors } from '../theme';
import { navigationService } from '../infrastructure/navigation/navigationService';

import { AuthNavigator } from './AuthNavigator';
import { SimpleMobileTabNavigator } from './SimpleMobileTabNavigator';
import { DesktopNavigator } from './DesktopNavigator';

import { useResponsive } from '../hooks';
import { useTotalUnreadCount } from '../stores';

// 导入全局屏幕组件
import { PostDetailScreen } from '../screens/home';
import { UserScreen } from '../screens/profile';
import FollowListScreen from '../screens/profile/FollowListScreen';
import { CreatePostScreen } from '../screens/create';
import {
  ChatScreen,
  CreateGroupScreen,
  JoinGroupScreen,
  GroupInfoScreen,
  GroupMembersScreen,
  GroupRequestDetailScreen,
  GroupInviteDetailScreen,
  PrivateChatInfoScreen,
} from '../screens/message';

const RootStack = createNativeStackNavigator<RootStackParamList>();

interface RootNavigatorProps {
  isAuthenticated: boolean;
  isInitializing: boolean;
}

// 未认证时可访问的屏幕
const PublicScreens = () => (
  <>
    <RootStack.Screen
      name="PostDetail"
      component={PostDetailScreen}
      options={{
        headerShown: true,
        title: '',
        headerStyle: { backgroundColor: colors.background.paper },
        headerTintColor: colors.text.primary,
        animation: 'slide_from_right',
      }}
    />
    <RootStack.Screen
      name="UserProfile"
      component={UserScreen}
      options={{
        headerShown: true,
        title: '用户主页',
        headerStyle: { backgroundColor: colors.background.paper },
        headerTintColor: colors.text.primary,
      }}
    />
  </>
);

// 认证后可访问的屏幕
const AuthenticatedScreens = () => (
  <>
    <RootStack.Screen
      name="PostDetail"
      component={PostDetailScreen}
      options={{
        headerShown: true,
        title: '',
        headerStyle: { backgroundColor: colors.background.paper },
        headerTintColor: colors.text.primary,
        animation: 'slide_from_right',
      }}
    />
    <RootStack.Screen
      name="UserProfile"
      component={UserScreen}
      options={{
        headerShown: true,
        title: '用户主页',
        headerStyle: { backgroundColor: colors.background.paper },
        headerTintColor: colors.text.primary,
      }}
    />
    <RootStack.Screen
      name="CreatePost"
      component={CreatePostScreen}
      options={{
        headerShown: true,
        title: '发布帖子',
        headerStyle: { backgroundColor: colors.background.paper },
        headerTintColor: colors.text.primary,
        presentation: 'modal',
      }}
    />
    <RootStack.Screen
      name="Chat"
      component={ChatScreen}
      options={{
        headerShown: false,
        animation: 'slide_from_right',
      }}
    />
    <RootStack.Screen
      name="FollowList"
      component={FollowListScreen}
      options={{
        headerShown: true,
        title: '关注列表',
        headerStyle: { backgroundColor: colors.background.paper },
        headerTintColor: colors.text.primary,
        animation: 'slide_from_right',
      }}
    />
    <RootStack.Screen
      name="CreateGroup"
      component={CreateGroupScreen}
      options={{
        headerShown: true,
        title: '创建群聊',
        headerStyle: { backgroundColor: colors.background.paper },
        headerTintColor: colors.text.primary,
        presentation: 'modal',
      }}
    />
    <RootStack.Screen
      name="JoinGroup"
      component={JoinGroupScreen}
      options={{
        headerShown: true,
        title: '搜索群聊',
        headerStyle: { backgroundColor: colors.background.paper },
        headerTintColor: colors.text.primary,
        animation: 'slide_from_right',
      }}
    />
    <RootStack.Screen
      name="GroupInfo"
      component={GroupInfoScreen}
      options={{
        headerShown: true,
        title: '群信息',
        headerStyle: { backgroundColor: colors.background.paper },
        headerTintColor: colors.text.primary,
        animation: 'slide_from_right',
      }}
    />
    <RootStack.Screen
      name="GroupMembers"
      component={GroupMembersScreen}
      options={{
        headerShown: true,
        title: '群成员',
        headerStyle: { backgroundColor: colors.background.paper },
        headerTintColor: colors.text.primary,
        animation: 'slide_from_right',
      }}
    />
    <RootStack.Screen
      name="GroupRequestDetail"
      component={GroupRequestDetailScreen}
      options={{
        headerShown: true,
        title: '入群审批',
        headerStyle: { backgroundColor: colors.background.paper },
        headerTintColor: colors.text.primary,
        animation: 'slide_from_right',
      }}
    />
    <RootStack.Screen
      name="GroupInviteDetail"
      component={GroupInviteDetailScreen}
      options={{
        headerShown: true,
        title: '群聊邀请',
        headerStyle: { backgroundColor: colors.background.paper },
        headerTintColor: colors.text.primary,
        animation: 'slide_from_right',
      }}
    />
    <RootStack.Screen
      name="PrivateChatInfo"
      component={PrivateChatInfoScreen}
      options={{
        headerShown: true,
        title: '聊天信息',
        headerStyle: { backgroundColor: colors.background.paper },
        headerTintColor: colors.text.primary,
        animation: 'slide_from_right',
      }}
    />
  </>
);

export function RootNavigator({ isAuthenticated, isInitializing }: RootNavigatorProps) {
  const { isMobile } = useResponsive();
  const unreadCount = useTotalUnreadCount();

  // 设置导航引用
  const setNavigationRef = (ref: any) => {
    navigationService.setNavigationRef(ref);
  };

  // 加载中显示
  if (isInitializing) {
    return (
      <View style={styles.loadingContainer}>
        <ActivityIndicator size="large" color={colors.primary.main} />
      </View>
    );
  }

  return (
    <NavigationContainer ref={setNavigationRef}>
      <RootStack.Navigator
        screenOptions={{
          headerShown: false,
        }}
      >
        {isAuthenticated ? (
          <>
            <RootStack.Screen name="Main">
              {() =>
                isMobile ? (
                  <SimpleMobileTabNavigator />
                ) : (
                  <DesktopNavigator unreadCount={unreadCount} />
                )
              }
            </RootStack.Screen>
            <AuthenticatedScreens />
          </>
        ) : (
          <>
            <RootStack.Screen
              name="Auth"
              component={AuthNavigator}
              options={{ headerShown: false }}
            />
            <PublicScreens />
          </>
        )}
      </RootStack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: colors.background.default,
  },
});