import type { ReactElement } from 'react';
import { Stack } from 'expo-router';
import { RealtimeProvider } from '@/ws';
import { useTheme } from '@/theme';
import { usePush } from '@/services/usePush';

// Authenticated area: everything here has a live realtime connection.
export default function AppLayout(): ReactElement {
  const { colors } = useTheme();
  usePush();
  return (
    <RealtimeProvider>
      <Stack
        screenOptions={{
          headerShown: false,
          contentStyle: { backgroundColor: colors.background },
        }}
      >
        <Stack.Screen name="(tabs)" />
        <Stack.Screen name="chat/[id]" />
        <Stack.Screen name="profile/[username]" options={{ presentation: 'card' }} />
        <Stack.Screen name="group/[id]" options={{ presentation: 'card' }} />
        <Stack.Screen name="new/group" options={{ presentation: 'modal' }} />
        <Stack.Screen name="new/channel" options={{ presentation: 'modal' }} />
        <Stack.Screen name="forward" options={{ presentation: 'modal' }} />
      </Stack>
    </RealtimeProvider>
  );
}