import {
  DarkTheme,
  DefaultTheme,
  ThemeProvider,
} from "@react-navigation/native";
import { Stack } from "expo-router";
import { useColorScheme } from "react-native";
import { QueryClientProvider } from "@tanstack/react-query";
import { queryClient } from "@/lib/queryClient";
import { useNotificationObserver } from "@/hooks/useNotificationObserver";
import { AuthProvider } from "@/context/AuthContext";

export const unstable_settings = {
  initialRouteName: "(tabs)",
};

const AppBootstrap = () => {
  useNotificationObserver();
  return null;
};

export default function RootLayout() {
  const colorScheme = useColorScheme();

  return (
    <QueryClientProvider client={queryClient}>
      <ThemeProvider value={DefaultTheme}>
        <AuthProvider>
          <AppBootstrap />
          <Stack>
            <Stack.Screen name="index" options={{ headerShown: false }} />
            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
            <Stack.Screen
              name="auth"
              options={{
                headerShown: false,
                presentation: "modal",
              }}
            />

            <Stack.Screen
              name="profile"
              options={{
                title: "Editar perfil",
              }}
            />

            <Stack.Screen
              name="entry/mood-components"
              options={{
                presentation: "formSheet",
                title: "Editar Componentes",
                sheetAllowedDetents: [0.25, 0.5, 1],
                sheetInitialDetentIndex: 1,
              }}
            />

            <Stack.Screen
              name="sleep/new"
              options={{
                title: "Registrar Sono",
              }}
            />

            <Stack.Screen
              name="triggers/new"
              options={{
                title: "Registrar Gatilho",
              }}
            />

            <Stack.Screen
              name="notifications"
              options={{
                presentation: "modal",
                title: "Notificações",
              }}
            />

            <Stack.Screen
              name="modal"
              options={{ presentation: "modal", title: "Modal" }}
            />
          </Stack>
        </AuthProvider>
      </ThemeProvider>
    </QueryClientProvider>
  );
}