import * as React from 'react';
import { Platform, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { BottomNavigation, BottomNavigationTab, Icon } from '@ui-kitten/components';
import { getFocusedRouteNameFromRoute } from '@react-navigation/native';
import { useAuth } from '../context/AuthContext';

// 导入页面组件
import LoginScreen from '../views/Login/Login';
import ResetPasswordScreen from '../views/Login/ResetPassword';
import ProfileScreens from '../views/ProfileScreen';
import HomeStack from './HomeStack';

import { RootStackParamList, MainTabParamList } from './types';

const Stack = createStackNavigator<RootStackParamList>();
const Tab = createBottomTabNavigator<MainTabParamList>();

// 定义需要显示底部导航栏的路由名称
const showTabBarRoutes = ['爱车', '个人中心'];
const MainNavigator = () => {
  return (
    <Tab.Navigator 
      screenOptions={{ 
        headerShown: false,
        tabBarHideOnKeyboard: true,
      }}
      tabBar={props => {
        // 获取当前路由名称和路由状态
        const currentRoute = props.state.routes[props.state.index];
        const routeName = getFocusedRouteNameFromRoute(currentRoute);
        
        // 只在主页面（爱车）和个人中心显示底部导航栏
        const showTabBarRoutes = ['Home', undefined];  // undefined 表示在根路由时显示
        
        // 如果不是主页面或个人中心，则隐藏底部导航栏
        if (routeName && !showTabBarRoutes.includes(routeName)) {
          return null;
        }

        return (
          <BottomNavigation
            selectedIndex={props.state.index}
            onSelect={index => props.navigation.navigate(props.state.routeNames[index])}
            appearance='noIndicator'
            style={{
              marginBottom: Platform.OS === 'ios' ? 20 : 0,
              borderTopWidth: 1,
              borderTopColor: '#E8E8E8',
              elevation: 8,
              shadowColor: '#000',
              shadowOffset: {
                width: 0,
                height: -2,
              },
              shadowOpacity: 0.1,
              shadowRadius: 3,
              height: 60,
              paddingBottom: 8,
              paddingTop: 8,
            }}>
            <BottomNavigationTab
              title='爱车'
              icon={(props) => <Icon {...props} name='car-outline'/>}
            />
            <BottomNavigationTab
              title='个人中心'
              icon={(props) => <Icon {...props} name='person-outline'/>}
            />
          </BottomNavigation>
        );
      }}
    >
      <Tab.Screen
        name="爱车"
        component={HomeStack}
        options={{ tabBarLabel: '爱车' }}
      />
      <Tab.Screen
        name="个人中心"
        component={ProfileScreens}
        options={{ tabBarLabel: '个人中心' }}
      />
    </Tab.Navigator>
  );
};

const AppNavigator = () => {
  const { isLoggedIn } = useAuth();

  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
          cardStyle: { backgroundColor: '#fff' },
        }}
      >
        {!isLoggedIn ? (
          <>
            <Stack.Screen 
              name="Login" 
              component={LoginScreen}
            />
            <Stack.Screen 
              name="ResetPassword" 
              component={ResetPasswordScreen}
              options={{
                presentation: 'card',
                animationEnabled: true,
              }}
            />
          </>
        ) : (
          <Stack.Screen name="Main" component={MainNavigator} />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default AppNavigator;