import {
  DarkTheme,
  DefaultTheme,
  ThemeProvider,
  Theme,
} from "@react-navigation/native";
import { Stack, useRouter } from "expo-router";
import { StatusBar } from "expo-status-bar";
import { useEffect, useMemo } from "react";
import { View, StyleSheet } from "react-native";
import "react-native-reanimated";

import { toastConfig } from "@/config";
import { setRouterInstance } from "@/config/auth";
import "@/global.css";
import { I18nProvider } from "@/hooks/use-i18n";
import {
  ThemeProvider as AppThemeProvider,
  useThemeContext,
} from "@/hooks/use-theme-context";
import { Colors } from "@/constants/theme";
import Toast from "react-native-toast-message";
import "../global.css";
function AppContent() {
  const router = useRouter();
  const { colorScheme, colors } = useThemeContext();

  useEffect(() => {
    setRouterInstance(router);
  }, [router]);

  // Create custom navigation theme that uses our app colors
  // This ensures the navigation container background matches our theme
  const navigationTheme: Theme = useMemo(() => {
    const baseTheme = colorScheme === "dark" ? DarkTheme : DefaultTheme;
    return {
      ...baseTheme,
      colors: {
        ...baseTheme.colors,
        background: colors.background,
        card: colors.card,
        text: colors.text,
        border: colors.border,
        primary: colors.primary,
      },
    };
  }, [colorScheme, colors]);

  return (
    // Wrap entire app with View that has themed background
    // This prevents any white flash during screen transitions
    <View style={[styles.container, { backgroundColor: colors.background }]}>
      <ThemeProvider value={navigationTheme}>
        <Stack
          screenOptions={{
            headerShown: false,
            // Set content background to match theme
            contentStyle: {
              backgroundColor: colors.background,
            },
            // Animation settings for smoother transitions
            animation: "slide_from_right",
          }}
          initialRouteName="auth/login"
        >
          <Stack.Screen
            name="auth/login"
            options={{
              title: "Login",
              headerShown: false,
            }}
          />

          <Stack.Screen
            name="(tabs)"
            options={{
              title: "Home",
              headerShown: false,
            }}
          />

          <Stack.Screen
            name="trip-detail"
            options={{
              title: "Trip Detail",
              headerShown: false,
            }}
          />

          <Stack.Screen
            name="trip-crew"
            options={{
              title: "Trip Crew",
              headerShown: false,
            }}
          />

          <Stack.Screen
            name="modal"
            options={{ presentation: "formSheet", title: "Modal" }}
          />
        </Stack>
        <StatusBar style={colorScheme === "dark" ? "light" : "dark"} />
        <Toast config={toastConfig} visibilityTime={2000} topOffset={60} />
      </ThemeProvider>
    </View>
  );
}

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

export default function RootLayout() {
  return (
    <I18nProvider>
      <AppThemeProvider>
        <AppContent />
      </AppThemeProvider>
    </I18nProvider>
  );
}