import { useEffect } from "react";
import { Pressable, Text } from "react-native";
import { Stack, router } 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;
    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",
            headerRight: () => (
              <Pressable
                onPress={() => router.push("/settings")}
                style={{ paddingLeft: 12, paddingRight: 4, paddingVertical: 6 }}
              >
                <Text style={{ color: Colors.primary, fontSize: 22, lineHeight: 26 }}>⚙</Text>
              </Pressable>
            ),
          }}
        />
        <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>
  );
}