import type { ErrorBoundaryProps } from 'expo-router'
import { ToastProvider } from '@gluestack-ui/core/toast/creator'
import { useFonts } from 'expo-font'
import { Stack, useRouter } 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 { AButton } from '@/components/common/ao'
import EmptyState from '@/components/common/EmptyStatus'
import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider'
import { useMoneyCategoryStore } from '@/store/moneyCategory'
import { useUserStore } from '@/store/user'
import { ToastProviderWrapper } from '@/utils/toast'
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} leftIcon={{ icon: 'RotateCcw', size: 18, color: '#fff' }}>
            再试一下
          </AButton>
        )}
      />
    </GluestackUIProvider>
  )
}

export default function RootLayout() {
  const router = useRouter()
  const userStore = useUserStore()
  const moneyCategoryStore = useMoneyCategoryStore()

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

  // splash screen 隐藏 & 登录跳转
  useEffect(() => {
    if (fontsLoaded) {
      SplashScreen.hideAsync()
    }
  }, [fontsLoaded])

  if (!fontsLoaded) {
    // 字体未加载，显示空白或 Splash
    return null
  }

  if (!userStore.isLoggedIn()) {
    router.replace('/auth/index')
    return null
  }

  moneyCategoryStore.init()

  return (
    <MenuProvider>
      <KeyboardProvider>
        <GluestackUIProvider>
          <ToastProvider>
            <ToastProviderWrapper>
              <GestureHandlerRootView>

                <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" />
              </GestureHandlerRootView>
            </ToastProviderWrapper>
          </ToastProvider>
        </GluestackUIProvider>
      </KeyboardProvider>
    </MenuProvider>
  )
}