import {
  DarkTheme,
  DefaultTheme,
  Stack,
  ThemeProvider,
} from 'expo-router'
import * as SplashScreen from 'expo-splash-screen'
import {Platform, useColorScheme} from 'react-native'
import {GestureHandlerRootView} from 'react-native-gesture-handler'
import {KeyboardProvider} from 'react-native-keyboard-controller'
import {SafeAreaProvider} from 'react-native-safe-area-context'

import {OfflineBanner} from '@/components/offline-banner'
import {Splash} from '@/components/splash'
import {stackScreenOptions} from '@/components/ui/layout'
import {UnsupportedPlatform} from '@/components/unsupported-platform'
import {useTimeoutFlag} from '@/hooks/use-timeout-flag'
import {SprinklesProvider} from '@/sprinkles'
import {useAuthReady} from '@/stores/auth'

// register the offline replay handlers these stores own at launch, so queue
// entries persisted from a prior session sync without waiting for their
// screens to load
import '@/stores/trail-crumbs'
import '@/stores/trail-posts'

// keep native splash up until we hide it ourselves
void SplashScreen.preventAutoHideAsync()

const LAUNCH_TIMEOUT_MS = 5000

export default function RootLayout() {
  const colorScheme = useColorScheme()

  const authReady = useAuthReady()
  const timedOut = useTimeoutFlag(LAUNCH_TIMEOUT_MS)

  // fonts are embedded natively (expo-font plugin) so only auth gates the
  // splash, forced by the safety timeout
  const isReady = authReady || timedOut

  if (Platform.OS !== 'ios') return <UnsupportedPlatform />

  return (
    <GestureHandlerRootView>
      <SafeAreaProvider>
        <KeyboardProvider preload={false}>
          <SprinklesProvider>
            <ThemeProvider
              value={
                colorScheme === 'dark' ? DarkTheme : DefaultTheme
              }
            >
              <Splash isReady={isReady}>
                <Stack
                  screenOptions={{
                    ...stackScreenOptions,
                    headerShown: false,
                  }}
                >
                  <Stack.Screen
                    name="trail/new"
                    options={{presentation: 'modal'}}
                  />
                  <Stack.Screen
                    name="trail/post/[trailId]"
                    options={{presentation: 'modal'}}
                  />
                  <Stack.Screen
                    name="(modal)"
                    options={{presentation: 'formSheet'}}
                  />
                  <Stack.Screen
                    name="feed"
                    options={{headerShown: true, title: 'Activity'}}
                  />
                  <Stack.Screen
                    name="planned"
                    options={{headerShown: true, title: 'Coming up'}}
                  />
                  <Stack.Screen
                    name="trails"
                    options={{headerShown: true, title: 'Trails'}}
                  />
                  <Stack.Screen
                    name="settings"
                    options={{headerShown: true, title: 'Settings'}}
                  />
                  <Stack.Screen
                    name="pending-changes"
                    options={{
                      headerShown: true,
                      title: 'Unsynced changes',
                    }}
                  />
                </Stack>
                <OfflineBanner />
              </Splash>
            </ThemeProvider>
          </SprinklesProvider>
        </KeyboardProvider>
      </SafeAreaProvider>
    </GestureHandlerRootView>
  )
}
