import { DarkTheme, Stack, ThemeProvider } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import { SessionProvider } from '@/lib/session';
import { colors } from '@/theme/tokens';
import '../global.css';

/**
 * Wurzel-Navigation. Bewusst ein Stack und nicht direkt die Tabs: laut
 * app-aufbau.md §3 liegen Willkommen/Anmelden **vor** den Tabs und das
 * Onboarding als Modal **über** ihnen. Beide brauchen eine Ebene, auf der die
 * Tab-Leiste nicht existiert – die gibt es nur, wenn die Tabs eine Gruppe
 * innerhalb eines Stacks sind.
 */
const navTheme = {
  ...DarkTheme,
  colors: {
    ...DarkTheme.colors,
    background: colors.bg,
    card: colors.sheet,
    text: colors.txt,
    border: colors.border,
    primary: colors.accent,
  },
};

export default function RootLayout() {
  return (
    <SafeAreaProvider>
      <SessionProvider>
        <ThemeProvider value={navTheme}>
          <StatusBar style="light" />
          <Stack
            screenOptions={{
              headerShown: false,
              contentStyle: { backgroundColor: colors.bg },
            }}>
            <Stack.Screen name="(auth)" />
            <Stack.Screen name="(tabs)" />
            {/* E3: onboarding als presentation: 'modal' */}
          </Stack>
        </ThemeProvider>
      </SessionProvider>
    </SafeAreaProvider>
  );
}
