import { useEffect } from 'react';
import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { useAuthStore } from '../store/authStore';

const queryClient = new QueryClient();

export default function RootLayout() {
  const { checkAuth } = useAuthStore();

  useEffect(() => {
    checkAuth();
  }, []);

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <QueryClientProvider client={queryClient}>
        <Stack>
          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
          <Stack.Screen 
            name="medicine/[id]" 
            options={{ 
              title: 'Medicamento',
              headerTintColor: '#007AFF',
            }} 
          />
          <Stack.Screen 
            name="pharmacy/[id]" 
            options={{ 
              title: 'Farmacia',
              headerTintColor: '#007AFF',
            }} 
          />
          <Stack.Screen 
            name="auth/login" 
            options={{ 
              title: 'Iniciar Sesión',
              headerShown: false,
            }} 
          />
          <Stack.Screen 
            name="auth/register" 
            options={{ 
              title: 'Registrarse',
              headerShown: false,
            }} 
          />
        </Stack>
        <StatusBar style="auto" />
      </QueryClientProvider>
    </GestureHandlerRootView>
  );
}