App.tsx

import React, { useState, useEffect } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { TouchableOpacity, StyleSheet, ActivityIndicator, View, Platform } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { ThemeProvider, useTheme } from './src/context/ThemeContext';
import { authApi, tokenStorage } from './src/api';
import LoginScreen from './src/screens/LoginScreen';
import RegisterScreen from './src/screens/RegisterScreen';
import DiaryListScreen from './src/screens/DiaryListScreen';
import EditScreen from './src/screens/EditScreen';
import StatsScreen from './src/screens/StatsScreen';
import SettingsScreen from './src/screens/SettingsScreen';

// 在 Web 平台注册 Service Worker
if (Platform.OS === 'web' && 'serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then((registration) => {
        console.log('[PWA] Service Worker 注册成功:', registration.scope);
      })
      .catch((error) => {
        console.log('[PWA] Service Worker 注册失败:', error);
      });
  });
}

const Stack = createStackNavigator();

const AppContent: React.FC<{
  isAuthenticated: boolean;
  showLogin: boolean;
  setShowLogin: (show: boolean) => void;
  handleLogin: () => void;
  handleLogout: () => void;
}> = ({ isAuthenticated, showLogin, setShowLogin, handleLogin, handleLogout }) => {
  const { theme, toggleTheme } = useTheme();

  if (!isAuthenticated) {
    return showLogin ? (
      <LoginScreen
        onLogin={handleLogin}
        onSwitchToRegister={() => setShowLogin(false)}
      />
    ) : (
      <RegisterScreen
        onRegister={handleLogin}
        onSwitchToLogin={() => setShowLogin(true)}
      />
    );
  }

  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="List"
        screenOptions={{
          headerStyle: {
            backgroundColor: theme.colors.primary,
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: '600',
          },
        }}
      >
        <Stack.Screen
          name="List"
          options={({ navigation }: any) => ({
            title: '我的日记',
            headerLeft: () => (
              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                <TouchableOpacity
                  onPress={() => navigation.navigate('Settings')}
                  style={styles.headerButton}
                  testID="settings-button"
                >
                  <Ionicons name="settings-outline" size={24} color="#fff" />
                </TouchableOpacity>
                <TouchableOpacity
                  onPress={() => navigation.navigate('Stats')}
                  style={styles.headerButton}
                  testID="stats-button"
                >
                  <Ionicons name="stats-chart" size={24} color="#fff" />
                </TouchableOpacity>
              </View>
            ),
            headerRight: () => (
              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                <TouchableOpacity
                  onPress={toggleTheme}
                  style={styles.headerButton}
                  testID="theme-toggle"
                >
                  <Ionicons name={theme.isDark ? 'sunny-outline' : 'moon-outline'} size={24} color="#fff" />
                </TouchableOpacity>
                <TouchableOpacity
                  onPress={() => navigation.navigate('Edit')}
                  style={styles.headerButton}
                  testID="add-button"
                >
                  <Ionicons name="add" size={24} color="#fff" />
                </TouchableOpacity>
                <TouchableOpacity
                  onPress={handleLogout}
                  style={styles.headerButton}
                  testID="logout-button"
                >
                  <Ionicons name="log-out-outline" size={24} color="#fff" />
                </TouchableOpacity>
              </View>
            ),
          })}
        >
          {(props) => <DiaryListScreen {...props} />}
        </Stack.Screen>
        <Stack.Screen
          name="Stats"
          options={{
            title: '统计',
          }}
        >
          {(props) => <StatsScreen {...props} />}
        </Stack.Screen>
        <Stack.Screen
          name="Settings"
          options={{
            title: '设置',
          }}
        >
          {(props) => <SettingsScreen {...props} />}
        </Stack.Screen>
        <Stack.Screen
          name="Edit"
          options={({ route }: any) => ({
            title: route?.params?.entry ? '编辑日记' : '新日记',
          })}
        >
          {(props) => <EditScreen {...props} />}
        </Stack.Screen>
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
  const [showLogin, setShowLogin] = useState(true);

  useEffect(() => {
    checkAuth();
  }, []);

  const checkAuth = async () => {
    try {
      const token = await tokenStorage.getItem('token');
      setIsAuthenticated(!!token);
    } catch (error) {
      console.error('Auth check error:', error);
    } finally {
      setIsLoading(false);
    }
  };

  const handleLogin = () => {
    setIsAuthenticated(true);
  };

  const handleLogout = async () => {
    try {
      await authApi.logout();
      setIsAuthenticated(false);
    } catch (error) {
      console.error('Logout error:', error);
    }
  };

  if (isLoading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" color="#007aff" />
      </View>
    );
  }

  return (
    <ThemeProvider>
      <AppContent
        isAuthenticated={isAuthenticated}
        showLogin={showLogin}
        setShowLogin={setShowLogin}
        handleLogin={handleLogin}
        handleLogout={handleLogout}
      />
    </ThemeProvider>
  );
}

const styles = StyleSheet.create({
  headerButton: {
    marginRight: 16,
  },
});