import { useEffect } from 'react';
import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { useAuth } from '../src/state/auth';
import { useLocale } from '../src/state/locale';
import { useOnboarding } from '../src/state/onboarding';
import { ErrorBoundaryView } from '../src/components/ErrorBoundaryView';
import '../src/i18n';

const queryClient = new QueryClient({
  defaultOptions: { queries: { staleTime: 30_000, retry: 1 } },
});

/**
 * Expo Router renders this when any descendant route throws.
 * Keep it dependency-light — we never want the error screen to crash.
 */
export function ErrorBoundary({ error, retry }: { error: Error; retry: () => void }) {
  return <ErrorBoundaryView error={error} retry={retry} />;
}

export default function RootLayout() {
  const hydrateAuth = useAuth((s) => s.hydrate);
  const hydrateLocale = useLocale((s) => s.hydrate);
  const hydrateOnboarding = useOnboarding((s) => s.hydrate);

  useEffect(() => {
    void hydrateAuth();
    void hydrateLocale();
    void hydrateOnboarding();
  }, [hydrateAuth, hydrateLocale, hydrateOnboarding]);

  return (
    <QueryClientProvider client={queryClient}>
      <StatusBar style="dark" />
      <Stack screenOptions={{ headerShown: false }} />
    </QueryClientProvider>
  );
}