import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { View } from 'react-native';
import { AuthProvider, useAuth } from '../lib/api';
import { C } from '../lib/theme';
import { LoginScreen } from '../components/login';

function Gate() {
  const { ready, authed } = useAuth();
  if (!ready) return <View style={{ flex: 1, backgroundColor: C.bg }} />;
  if (!authed) return <LoginScreen />;
  return (
    <Stack
      screenOptions={{
        headerStyle: { backgroundColor: C.bg },
        headerTintColor: C.text,
        headerTitleStyle: { fontWeight: '600', fontSize: 17 },
        headerShadowVisible: false,
        contentStyle: { backgroundColor: C.bg },
      }}>
      <Stack.Screen name="index" options={{ title: 'Health' }} />
      <Stack.Screen name="blood" options={{ title: 'Bloodwork' }} />
      <Stack.Screen name="sleep" options={{ title: 'Sleep' }} />
      <Stack.Screen name="train" options={{ title: 'Training' }} />
      <Stack.Screen name="body" options={{ title: 'Body Composition' }} />
      <Stack.Screen name="mind" options={{ title: 'Meditation' }} />
      <Stack.Screen name="dna" options={{ title: 'Genetic Traits' }} />
    </Stack>
  );
}

export default function RootLayout() {
  return (
    <AuthProvider>
      <StatusBar style="light" />
      <Gate />
    </AuthProvider>
  );
}
