import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import { View, Text, StyleSheet } from 'react-native';

// 导入屏幕组件
import HomeScreen from '@/screens/HomeScreen';
import CallScreen from '@/screens/CallScreen';
import DocumentScreen from '@/screens/DocumentScreen';
import SettingsScreen from '@/screens/SettingsScreen';

// 导航类型定义
export type RootStackParamList = {
  MainTabs: undefined;
};

export type TabParamList = {
  Home: undefined;
  Call: undefined;
  Documents: undefined;
  Settings: undefined;
};

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

// 图标组件
const TabIcon: React.FC<{ name: string; focused: boolean }> = ({ name, focused }) => {
  const getIcon = (iconName: string) => {
    switch (iconName) {
      case 'home':
        return '🏠';
      case 'call':
        return '📞';
      case 'documents':
        return '📄';
      case 'settings':
        return '👤';
      default:
        return '❓';
    }
  };

  return (
    <View style={styles.tabIcon}>
      <Text style={[styles.tabIconText, { opacity: focused ? 1 : 0.6 }]}>
        {getIcon(name)}
      </Text>
    </View>
  );
};

// 底部标签导航器
const TabNavigator: React.FC = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused }) => (
          <TabIcon name={route.name.toLowerCase()} focused={focused} />
        ),
        tabBarActiveTintColor: '#2196F3',
        tabBarInactiveTintColor: '#666',
        tabBarStyle: styles.tabBar,
        tabBarLabelStyle: styles.tabBarLabel,
        headerShown: false,
      })}
    >
      <Tab.Screen 
        name="Home" 
        component={HomeScreen}
        options={{
          tabBarLabel: '首页',
        }}
      />
      <Tab.Screen 
        name="Call" 
        component={CallScreen}
        options={{
          tabBarLabel: '通话',
        }}
      />
      <Tab.Screen 
        name="Documents" 
        component={DocumentScreen}
        options={{
          tabBarLabel: '文档',
        }}
      />
      <Tab.Screen 
        name="Settings" 
        component={SettingsScreen}
        options={{
          tabBarLabel: '我的',
        }}
      />
    </Tab.Navigator>
  );
};

// 主导航器
const AppNavigator: React.FC = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="MainTabs"
        screenOptions={{
          headerShown: false,
        }}
      >
        <Stack.Screen 
          name="MainTabs" 
          component={TabNavigator}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  tabBar: {
    backgroundColor: '#fff',
    borderTopWidth: 1,
    borderTopColor: '#e0e0e0',
    paddingTop: 8,
    paddingBottom: 8,
    height: 60,
  },
  tabBarLabel: {
    fontSize: 12,
    fontWeight: '500',
    marginTop: 4,
  },
  tabIcon: {
    alignItems: 'center',
    justifyContent: 'center',
    width: 24,
    height: 24,
  },
  tabIconText: {
    fontSize: 20,
  },
});

export default AppNavigator;