import '../global.css'

import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'
import { Stack } from 'expo-router'
import { StatusBar } from 'expo-status-bar'
import 'react-native-reanimated'
import { GestureHandlerRootView } from 'react-native-gesture-handler'

import { useColorScheme } from '@/hooks/use-color-scheme'
import { KeyboardProvider } from 'react-native-keyboard-controller'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { ModalPortal } from '@/components/ui'
import '@/lib/i18n'

export const unstable_settings = {
    anchor: '(tabs)',
}

// 路由层
export default function RootLayout() {
    return (
        <Providers>
            <Stack>
                <Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />
                <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
                <Stack.Screen name="channels" options={{ headerShown: false }} />
                <Stack.Screen name="searchTemplate" options={{ headerShown: false }} />
                <Stack.Screen name="searchResults" options={{ headerShown: false }} />
                <Stack.Screen name="generationRecord" options={{ headerShown: false }} />
                <Stack.Screen name="generateVideo" options={{ headerShown: false }} />
                <Stack.Screen name="templateDetail" options={{ headerShown: false }} />
                <Stack.Screen name="membership" options={{ headerShown: false }} />
                <Stack.Screen name="terms" options={{ headerShown: false }} />
                <Stack.Screen name="privacy" options={{ headerShown: false }} />
                <Stack.Screen name="worksList" options={{ headerShown: false }} />
                <Stack.Screen name="searchWorks" options={{ headerShown: false }} />
                <Stack.Screen name="searchWorksResults" options={{ headerShown: false }} />
                <Stack.Screen name="changePassword" options={{ headerShown: false }} />
            </Stack>
            <StatusBar style="auto" />
        </Providers>
    )
}

function Providers({ children }: { children: React.ReactNode }) {
    const colorScheme = useColorScheme()
    return (
        <SafeAreaProvider>
            <GestureHandlerRootView style={{ flex: 1 }}>
                <KeyboardProvider>
                    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
                        {children}
                        {/* modals */}

                        {/* 挂载全局方法 */}
                        <ModalPortal ref={(ref) => ((global as any).actionSheet = ref)} />
                        <ModalPortal ref={(ref) => ((global as any).modal = ref)} />
                        <ModalPortal ref={(ref) => ((global as any).loading = ref)} />
                        <ModalPortal ref={(ref) => ((global as any).toast = ref)} />
                    </ThemeProvider>
                </KeyboardProvider>
            </GestureHandlerRootView>
        </SafeAreaProvider>
    )
}