import { useEffect } from "react";
import { Stack, router, SplashScreen } from "expo-router";
import { StatusBar } from "expo-status-bar";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import "../global.css";
import { Colors } from "@/constants/theme";
import { useSettings } from "@/hooks/useSettings";

export default function RootLayout() {
  const { settings, ready } = useSettings();

  useEffect(() => {
    if (!ready) return;
    SplashScreen.hideAsync();
  }, [ready]);

  useEffect(() => {
    if (!ready) return;
    if (!settings.onboardingDone) {
      router.replace("/onboarding");
    }
  }, [ready, settings.onboardingDone]);

  return (
    <GestureHandlerRootView style={{ flex: 1, backgroundColor: Colors.bg }}>
      <StatusBar style="light" />
      <Stack
        screenOptions={{
          headerStyle: { backgroundColor: Colors.surface },
          headerTintColor: Colors.text1,
          headerTitleStyle: { color: Colors.text1 },
          contentStyle: { backgroundColor: Colors.bg },
          animation: "slide_from_right",
        }}
      >
        <Stack.Screen name="index" options={{ title: "SheetHappens" }} />
        <Stack.Screen name="new" options={{ title: "New Incident", presentation: "modal" }} />
        <Stack.Screen name="incident/[id]" options={{ title: "Incident" }} />
        <Stack.Screen name="settings" options={{ title: "Settings" }} />
        <Stack.Screen name="onboarding" options={{ headerShown: false }} />
      </Stack>
    </GestureHandlerRootView>
  );
}