import '../global.css'

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

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'
import { useSession } from '@/lib/auth'

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

// 受保护的路由（需要登录才能访问）
const PROTECTED_ROUTES = [
    '/(tabs)',
    '/channels',
    '/generateVideo',
    '/generationRecord',
    '/worksList',
    '/membership',
    '/changePassword',
]

// 公开路由（无需登录）
const PUBLIC_ROUTES = [
    '/auth',
    '/modal',
    '/searchTemplate',
    '/searchResults',
    '/searchWorks',
    '/searchWorksResults',
    '/templateDetail',
    '/terms',
    '/privacy',
]

// 认证守卫组件
function AuthGuard({ children }: { children: React.ReactNode }) {
    const pathname = usePathname()
    const router = useRouter()
    const { data: session, isPending } = useSession()

    useEffect(() => {
        // 加载中不处理
        if (isPending) return

        // 检查是否在受保护路由
        const isProtectedRoute = PROTECTED_ROUTES.some(route => pathname?.startsWith(route))

        // 未登录访问受保护路由 -> 跳转到登录页
        if (isProtectedRoute && !session?.user) {
            router.replace('/auth')
            return
        }

        // 已登录访问登录页 -> 跳转到首页
        if (pathname === '/auth' && session?.user) {
            router.replace('/(tabs)')
            return
        }
    }, [pathname, session, isPending, router])

    // 加载中显示 loading
    if (isPending) {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#090A0B' }}>
                <ActivityIndicator size="large" color="#9966FF" />
            </View>
        )
    }

    return <>{children}</>
}

// 路由层
export default function RootLayout() {
    return (
        <Providers>
            <AuthGuard>
                <Stack>
                    <Stack.Screen name="auth" options={{ headerShown: false }} />
                    <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>
            </AuthGuard>
            <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>
    )
}