import '../global.css'
import { useEffect } from 'react'
import { Stack, SplashScreen } from 'expo-router'
import { useAuthStore } from '@/store/auth.store'
import { TRPCProvider } from '@/lib/trpc'

import { LoadingScreen } from '@/components/ui/LoadingScreen'

SplashScreen.preventAutoHideAsync()

export default function RootLayout() {
  const initAuth = useAuthStore((s) => s.initialize)
  const isInitialized = useAuthStore((s) => s.isInitialized)

  useEffect(() => {
    initAuth().finally(() => SplashScreen.hideAsync())
  }, [initAuth])

  if (!isInitialized) return <LoadingScreen />

  return (
    <TRPCProvider>
      <Stack screenOptions={{ headerShown: false }}>
        <Stack.Screen name="index" />
        <Stack.Screen name="(auth)" options={{ animation: 'fade' }} />
        <Stack.Screen name="(app)" options={{ animation: 'fade' }} />
        <Stack.Screen name="stellen-public/index" />
      </Stack>
    </TRPCProvider>
  )
}