import React, { useEffect, useState } from "react";
import { StyleSheet, View, Text } from "react-native";
import { DarkTheme, DefaultTheme, ThemeProvider } from "@react-navigation/native";
import { Stack, useRouter } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import NetInfo from "@react-native-community/netinfo";
import { useFonts } from "expo-font";
import { useColorScheme } from "@/hooks/useColorScheme";
import { getAsyncItem } from "@/middleware/AuthService";
import { ToastProvider } from "../components/GlobalComponent/ToastContainer/ToastContext";
import ToastContainer from "../components/GlobalComponent/ToastContainer/ToastContainer";

// Prevent auto-hiding of the splash screen
SplashScreen.preventAutoHideAsync();

export default function AppLayout() {
  const colorScheme = useColorScheme();
  const [areFontsLoaded] = useFonts({
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
  });
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [isAppReady, setIsAppReady] = useState(false);
  const [isConnected, setIsConnected] = useState(true);
  const router = useRouter();

  // Internet connection checker
  useEffect(() => {
    const unsubscribe = NetInfo.addEventListener((state) => {
      setIsConnected(state.isConnected);
    });
    return () => unsubscribe();
  }, []);

  // Prevent auto-hiding of the splash screen
  useEffect(() => {
    const preventAutoHide = async () => {
      await SplashScreen.preventAutoHideAsync();
    };
    preventAutoHide();
  }, []);

  // App initialization
  useEffect(() => {
    const initializeApp = async () => {
      try {
        const authToken = await getAsyncItem(btoa("authToken"));
        setIsLoggedIn(!!authToken);

        // Wait for fonts to load
        if (areFontsLoaded) {
          setIsAppReady(true);
          await SplashScreen.hideAsync(); // Hide splash screen after app is ready
        }
      } catch (error) {
        console.error("Initialization error:", error);
      }
    };

    initializeApp();
  }, [areFontsLoaded]);

  // Route redirection
  useEffect(() => {
    if (isAppReady && isConnected) {
      router.replace(isLoggedIn ? "/home" : "/");
    }
  }, [isAppReady, isConnected, isLoggedIn, router]);

  // Render no internet screen
  if (!isConnected) {
    return (
      <View style={styles.errorContainer}>
        <Text style={styles.errorText}>No Internet Connection</Text>
        <Text style={styles.errorSubText}>Please check your network and try again.</Text>
      </View>
    );
  }

  // Prevent rendering until the app is ready
  if (!isAppReady) {
    return <View style={{ flex: 1, backgroundColor: "#ffffff" }} />;
  }

  return (
    <ToastProvider>
      <ToastContainer />
      <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
        <Stack screenOptions={{ headerShown: false }}>
          <Stack.Screen name={isLoggedIn ? "(tabs)" : "index"} />
          <Stack.Screen name="+not-found" />
        </Stack>
      </ThemeProvider>
    </ToastProvider>
  );
}

const styles = StyleSheet.create({
  errorContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f8d7da",
  },
  errorText: {
    fontSize: 24,
    fontWeight: "bold",
    color: "#721c24",
    marginBottom: 10,
  },
  errorSubText: {
    fontSize: 16,
    color: "#721c24",
  },
});