import { InteractionProvider } from '@/aesthetics/InteractionProvider';
import { SplashScreen } from '@/aesthetics/SplashScreen';
import { useAppLifecycle } from '@/common/hooks/useAppLifecycle';
import { AuthProvider } from '@/profile/auth/context';
import { PreferencesProvider } from '@/profile/preferences';
import { ProfileProvider } from '@/profile/ProfileProvider';
import { DatabaseProvider } from '@/remote/database';
import { MonitorProvider } from '@/remote/monitor/context';
import { awakenAddLog } from '@/add-log/food-detection/awakenAddLog';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Stack } from 'expo-router';

const queryClient = new QueryClient();
awakenAddLog();

export default function RootLayout() {
  const { splashVisible, fadeAnim } = useAppLifecycle();

  return (
    <PreferencesProvider>
      <InteractionProvider>
        <QueryClientProvider client={queryClient}>
          <DatabaseProvider>
            <AuthProvider>
              <ProfileProvider>
                <MonitorProvider>
                  <Stack screenOptions={{ headerShown: false }}>
                    <Stack.Screen name="(tabs)" />
                    <Stack.Screen
                      name="add-log/index"
                      options={{
                        presentation: 'fullScreenModal',
                        animation: 'slide_from_bottom',
                      }}
                    />
                    <Stack.Screen name="see-log/[id]" />
                    <Stack.Screen name="signin" options={{ presentation: 'modal' }} />
                    <Stack.Screen name="castle" />
                  </Stack>
                  {splashVisible && <SplashScreen fadeAnim={fadeAnim} />}
                </MonitorProvider>
              </ProfileProvider>
            </AuthProvider>
          </DatabaseProvider>
        </QueryClientProvider>
      </InteractionProvider>
    </PreferencesProvider>
  );
}