import React from 'react';
import { Image } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

// 页面组件
import LoginScreen from './src/pages/Login';
import TeamScreen from './src/pages/Team';
import DataScreen from './src/pages/Data';
import PlayScreen from './src/pages/Play';
import MatchScreen from './src/pages/Match';
import MeScreen from './src/pages/Me';

// 导入自定义图片（请替换为你的实际图片路径）
import TeamIcon from './src/static/images/common/team.png';
import TeamIconActive from './src/static/images/common/team_active.png';
import DataIcon from './src/static/images/common/data.png';
import DataIconActive from './src/static/images/common/data_active.png';
import PlayIcon from './src/static/images/common/play.png';
import PlayIconActive from './src/static/images/common/play_active.png';
import MatchIcon from './src/static/images/common/match.png';
import MatchIconActive from './src/static/images/common/match_active.png';
import MeIcon from './src/static/images/common/me.png';
import MeIconActive from './src/static/images/common/me_active.png';

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

// 定义底部Tab导航
function TabNavigator() {
  return (
    <Tab.Navigator
      initialRouteName="Team"  // 设置默认显示Team页签
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused }) => {
          if (route.name === 'Team') {
            return (
              <Image
                source={focused ? TeamIconActive : TeamIcon}
                style={{ width: 24, height: 24 }}
                resizeMode="contain"
              />
            );
          } else if (route.name === 'Data') {
            return (
              <Image
                source={focused ? DataIconActive : DataIcon}
                style={{ width: 24, height: 24 }}
                resizeMode="contain"
              />
            );
          } else if (route.name === 'Play') {
            return (
              <Image
                source={focused ? PlayIconActive : PlayIcon}
                style={{ width: 24, height: 24 }}
                resizeMode="contain"
              />
            );
          } else if (route.name === 'Match') {
            return (
              <Image
                source={focused ? MatchIconActive : MatchIcon}
                style={{ width: 24, height: 24 }}
                resizeMode="contain"
              />
            );
          } else if (route.name === 'Me') {
            return (
              <Image
                source={focused ? MeIconActive : MeIcon}
                style={{ width: 24, height: 24 }}
                resizeMode="contain"
              />
            );
          }
          return null;
        },
        tabBarActiveTintColor: '#007AFF',
        tabBarInactiveTintColor: '#999',
        headerShown: false,
        tabBarStyle: {
          height: 58,
          paddingBottom: 8,
          paddingTop: 8,
          backgroundColor: '#fff',
          borderTopWidth: 0,
          elevation: 5,
          shadowColor: '#000',
          shadowOffset: { width: 0, height: -2 },
          shadowOpacity: 0.05,
          shadowRadius: 5,
        },
      })}
    >
      <Tab.Screen name="Team" component={TeamScreen} options={{ title: '球队' }} />
      <Tab.Screen name="Data" component={DataScreen} options={{ title: '数据' }} />
      <Tab.Screen name="Play" component={PlayScreen} options={{ title: 'PLAY' }} />
      <Tab.Screen name="Match" component={MatchScreen} options={{ title: '赛事' }} />
      <Tab.Screen name="Me" component={MeScreen} options={{ title: '我的' }} />
    </Tab.Navigator>
  );
}

function App(): React.JSX.Element {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen
          name="MainTabs"
          component={TabNavigator}
          options={{
            headerBackVisible: false,
            headerShown: false,
          }}
        />
        <Stack.Screen
          name="Login"
          component={LoginScreen}
          options={{
            headerBackVisible: false,
            headerShown: false,
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;