import { Redirect, Stack } from 'expo-router';
import { useTranslation } from 'react-i18next';
import { useAuth } from '@/src/context/AuthContext';
import { useAppearance } from '@/src/context/AppearanceContext';
import { Screen } from '@/src/components/Screen';

export default function MainLayout() {
  const { isAuthenticated, isLoading } = useAuth();
  const { colors } = useAppearance();
  const { t } = useTranslation();

  if (isLoading) {
    return <Screen loading />;
  }

  if (!isAuthenticated) {
    return <Redirect href="/(auth)/login" />;
  }

  return (
    <Stack
      screenOptions={{
        headerStyle: { backgroundColor: colors.surface },
        headerTintColor: colors.brand,
        headerTitleStyle: { color: colors.text },
        contentStyle: { backgroundColor: colors.background },
      }}
    >
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      <Stack.Screen name="recipe/[id]" options={{ title: t('recipes.allMealsTitle') }} />
      <Stack.Screen name="recipe/edit/[id]" options={{ title: t('manage.editRecipe') }} />
      <Stack.Screen name="ingredients" options={{ title: t('nav.ingredientCatalog') }} />
      <Stack.Screen name="diet-generator" options={{ title: t('nav.dietGenerator') }} />
      <Stack.Screen name="recipe-generator" options={{ title: t('nav.recipeGenerator') }} />
      <Stack.Screen name="category/[category]" />
    </Stack>
  );
}