App.js

import React, { useState, useEffect, useCallback } from "react";
import { View, StyleSheet, StatusBar, Platform, Alert } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { PaperProvider } from "react-native-paper";
import * as SplashScreen from "expo-splash-screen";
import { useFonts } from "expo-font";
import NetInfo from "@react-native-community/netinfo";
import NoInternetModal from "./components/NoInternetModal";
import messaging from "@react-native-firebase/messaging";
import notifee, { EventType, AndroidImportance } from "@notifee/react-native";
import axios from "axios";
import * as SecureStore from "expo-secure-store";

// Import your screens here
import OnboardingScreen from "./screens/Onboarding";
import LoginScreen from "./screens/Login";
import SignupScreen from "./screens/Signup";
import HomeScreen from "./screens/Home";
import BottomNav from "./components/BottomNav";
import { Colors } from "./styles/styles";
import CollectionsScreen from "./screens/Collections";
import CollectionScreen from "./screens/Collection";
import DiscoverScreen from "./screens/Discover";
import TopAuthors from "./screens/TopAuthors";
import ProfileScreen from "./screens/Profile";
import FindFriends from "./screens/FindFriends";
import ScanScreen from "./screens/Scan";
import { TrivioContexts } from "./Contexts/TrivioContexts";
import NotificationsScreen from "./screens/Notifications";
import InviteScreen from "./screens/InviteScreen";
import ChallengeInitiateScreen from "./screens/ChallengeInitiateScreen";
import QuizScreen from "./screens/QuizScreen";
import ResultsScreen from "./screens/ResultsScreen";
import ChallengeOnboardScreen from "./screens/ChallengeOnboardScreen";
import Config from "./utils/Config";
import Settings from "./screens/settings/Settings";
import ArticleScreen from "./screens/Article";
import ConversationsScreen from "./screens/Conversations";
import ConversationScreen from "./screens/Conversation";
import CommentsScreen from "./screens/CommentsScreen";
import ExploreScreen from "./screens/Explore";
import LeaderboardScreen from "./screens/Leaderboard";
import StatusScreen from "./screens/StatusScreen";
import ArticlesHome from "./screens/ArticlesHome";

const Stack = createNativeStackNavigator();

export default function App() {
  const [btmcolor, setbtmcolor] = useState("#000");
  const [btmbgcolor, setbtmbgcolor] = useState("#000");
  const [isConnected, setIsConnected] = useState(true);
  const [isRetrying, setIsRetrying] = useState(false);
  const [initialRoute, setInitialRoute] = useState(null);

  const [fontsLoaded, fontError] = useFonts({
    "Mona-Sans": require("./assets/fonts/Mona-Sans.ttf"),
    Cheri: require("./assets/fonts/Cheri.ttf"),
    Dosis: require("./assets/fonts/Dosis.ttf"),
    "Dosis-Bold": require("./assets/fonts/Dosis-Bold.ttf"),
    "Dosis-Book": require("./assets/fonts/Dosis-Book.ttf"),
    "Dosis-ExtraBold": require("./assets/fonts/Dosis-ExtraBold.ttf"),
    "Dosis-ExtraLight": require("./assets/fonts/Dosis-ExtraLight.ttf"),
    "Dosis-Light": require("./assets/fonts/Dosis-Light.ttf"),
    "Dosis-SemiBold": require("./assets/fonts/Dosis-SemiBold.ttf"),
  });

  useEffect(() => {
    const initializeMessaging = async () => {
      await messaging().registerDeviceForRemoteMessages();
      const token = await messaging().getToken();
      console.log("Initial FCM Token:", token);
      await SecureStore.setItemAsync("pushtoken", token);

      messaging().onTokenRefresh(async (newToken) => {
        console.log("FCM Token refreshed:", newToken);
        await SecureStore.setItemAsync("pushtoken", newToken);

        const userToken = await SecureStore.getItemAsync("userToken");
        if (userToken) {
          try {
            const response = await axios.post(
              Config.BASE_URL + "/pushtoken.php",
              {
                token: newToken,
                userId: userToken,
                pass: "test",
              }
            );
            console.log("Token posted successfully:", response.data);
          } catch (error) {
            console.error("Error posting token:", error);
          }
        }
      });

      const userToken = await SecureStore.getItemAsync("userToken");
      if (userToken) {
        try {
          const response = await axios.post(
            Config.BASE_URL + "/pushtoken.php",
            {
              token: token,
              userId: userToken,
              pass: "test",
            }
          );
          console.log("Token posted successfully:", response.data);
        } catch (error) {
          console.error("Error posting token:", error);
        }
      }
    };

    initializeMessaging();

    // Foreground message handler
    const unsubscribe = messaging().onMessage(async (message) => {
      console.log("A new FCM message arrived!", message);
      displayNotification(message);
    });

    // Background and quit state message handler
    messaging().setBackgroundMessageHandler(async (remoteMessage) => {
      console.log("Message handled in the background!", remoteMessage);
      displayNotification(remoteMessage);
    });

    // Notifee event listener
    const unsubscribeNotifee = notifee.onForegroundEvent(({ type, detail }) => {
      switch (type) {
        case EventType.DISMISSED:
          console.log("Notification dismissed:", detail.notification);
          break;
        case EventType.PRESS:
          console.log("Notification pressed:", detail.notification);
          break;
      }
    });

    return () => {
      unsubscribe();
      unsubscribeNotifee();
    };
  }, []);

  const displayNotification = async (message) => {
    // Request permissions on iOS
    await notifee.requestPermission();

    const channelId = await notifee.createChannel({
      id: message.data.android_channel_id || "default",
      name: "Default Channel",
      importance: AndroidImportance.HIGH,
    });

    await notifee.displayNotification({
      title: message.data.title,
      body: message.data.body,
      subtitle: message.data.subtitle,
      android: {
        channelId,
        smallIcon: message.data.small_icon,
        pressAction: {
          id: message.data.press_action
            ? JSON.parse(message.data.press_action).id
            : "default",
        },
      },
    });
  };

  useEffect(() => {
    const unsubscribe = NetInfo.addEventListener((state) => {
      setIsConnected(state.isConnected);
    });

    return () => unsubscribe();
  }, []);

  const handleRetry = () => {
    setIsRetrying(true);
    NetInfo.fetch().then((state) => {
      setIsConnected(state.isConnected);
      setIsRetrying(false);
    });
  };

  const onLayoutRootView = useCallback(async () => {
    if (fontsLoaded || fontError) {
      await SplashScreen.hideAsync();
    }
  }, [fontsLoaded, fontError]);

  useEffect(() => {
    const initializeApp = async () => {
      try {
        // Check for userToken
        const userToken = await SecureStore.getItemAsync("userToken");

        // Set the initial route based on the existence of userToken
        setInitialRoute(userToken ? "HomeScreen" : "Onboarding");

        // Ensure fonts are loaded before hiding the splash screen
        if (fontsLoaded || fontError) {
          await SplashScreen.hideAsync();
        }
      } catch (error) {
        console.error("Error retrieving userToken from SecureStore:", error);
      }
    };

    initializeApp();
  }, [fontsLoaded, fontError]);

  if (!fontsLoaded && !fontError) {
    return null;
  }

  return (
    <TrivioContexts.Provider
      value={{ btmcolor, setbtmbgcolor, btmbgcolor, setbtmcolor }}
    >
      <View onLayout={onLayoutRootView} style={styles.container}>
        <PaperProvider>
          <NavigationContainer>
            <StatusBar
              barStyle="dark-content"
              backgroundColor={Colors.background}
            />
            {initialRoute && (
              <Stack.Navigator
                initialRouteName={initialRoute}
                screenOptions={{
                  headerStyle: {
                    marginTop:
                      Platform.OS === "ios" ? 0 : StatusBar.currentHeight,
                  },
                }}
              >
                <Stack.Screen
                  name="ConversationScreen"
                  component={ConversationScreen}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="Onboarding"
                  component={OnboardingScreen}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="HomeScreen"
                  component={BottomNav}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="ExploreScreen"
                  component={ExploreScreen}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="CommentsScreen"
                  component={CommentsScreen}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="ConversationsScreen"
                  component={ConversationsScreen}
                  options={{ headerShown: false }}
                />

                <Stack.Screen
                  name="ArticleScreen"
                  component={ArticleScreen}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="NotificationsScreen"
                  component={NotificationsScreen}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="LoginScreen"
                  component={LoginScreen}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="SignupScreen"
                  component={SignupScreen}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="CollectionScreen"
                  component={CollectionScreen}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="CollectionsScreen"
                  component={CollectionsScreen}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="LeaderboardScreen"
                  component={LeaderboardScreen}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="DiscoverScreen"
                  component={DiscoverScreen}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="ProfileScreen"
                  component={ProfileScreen}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="FindFriends"
                  component={FindFriends}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="ScanScreen"
                  component={ScanScreen}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="Settings"
                  component={Settings}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="InviteScreen"
                  component={InviteScreen}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="ChallengeOnboardScreen"
                  component={ChallengeOnboardScreen}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="ChallengeInitiateScreen"
                  component={ChallengeInitiateScreen}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="QuizScreen"
                  component={QuizScreen}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="ResultsScreen"
                  component={ResultsScreen}
                  options={{ headerShown: false }}
                />
                <Stack.Screen
                  name="StatusScreen"
                  component={StatusScreen}
                  options={{ headerShown: false }}
                />
                  <Stack.Screen
                  name="ArticlesHome"
                  component={ArticlesHome}
                  options={{ headerShown: false }}
                />
              </Stack.Navigator>
            )}
          </NavigationContainer>
        </PaperProvider>
        {!isConnected && <NoInternetModal />}
      </View>
    </TrivioContexts.Provider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.background,
  },
});