import type { ErrorBoundaryProps } from 'expo-router'
import { useFonts } from 'expo-font'
import { Stack, usePathname } from 'expo-router'
import * as SplashScreen from 'expo-splash-screen'
import { StatusBar } from 'expo-status-bar'
import { useEffect } from 'react'
import { GestureHandlerRootView } from 'react-native-gesture-handler'
import { KeyboardProvider } from 'react-native-keyboard-controller'
import { MenuProvider } from 'react-native-popup-menu'
import { Toaster } from 'sonner-native'
import { AButton } from '@/components/common/ao'
import EmptyState from '@/components/common/EmptyStatus'
import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider'
import { useAppStore } from '@/store/app'
import { useNavStore } from '@/store/navigation'
import '@/styles/global.css'
import 'react-native-reanimated'

SplashScreen.preventAutoHideAsync()

export const unstable_settings = {
  initialRouteName: 'money',
}

export function ErrorBoundary({ error, retry }: ErrorBoundaryProps) {
  return (
    <GluestackUIProvider>
      <EmptyState
        type="error"
        title="(´･ω･`) 出错啦～"
        description={`发生了一点小问题：\n${error?.message || '请稍后再试'}`}
        footer={(
          <AButton onPress={retry}>
            再试一下
          </AButton>
        )}
      />
    </GluestackUIProvider>
  )
}

export default function RootLayout() {
  const pathname = usePathname()

  const navStore = useNavStore()
  const appStore = useAppStore()

  const [fontsLoaded] = useFonts({
    SpaceMono: require('@/static/fonts/SpaceMono-Regular.ttf'),
  })

  useEffect(() => {
    navStore.setPathname(pathname)
  }, [pathname])

  useEffect(() => {
    if (!fontsLoaded) {
      return
    }
    SplashScreen.hideAsync()
    // appStore.init().finally(() => {
    // })
  }, [fontsLoaded])

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <MenuProvider>
        <KeyboardProvider>
          <GluestackUIProvider>
            <Stack
              screenOptions={{
                headerTitleAlign: 'center',
                animation: 'slide_from_right',
                contentStyle: {
                  backgroundColor: '#fff',
                },
              }}
            >
              <Stack.Screen
                name="(tabs)"
                options={{ headerShown: false }}
              />
              <Stack.Screen name="+not-found" />
            </Stack>

            <StatusBar style="auto" />
          </GluestackUIProvider>
        </KeyboardProvider>
      </MenuProvider>
      <Toaster duration={1000} />
    </GestureHandlerRootView>
  )
}