import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import TaskListScreen from '../screens/TaskListScreen';
import TaskEditScreen from '../screens/TaskEditScreen';
import RunScreen from '../screens/RunScreen';
import EditScreen from '../screens/EditScreen';
import SettingsScreen from '../screens/SettingsScreen';

const HomeStack = createStackNavigator();
const Tab = createBottomTabNavigator();

function HomeStackNavigator() {
  return (
    <HomeStack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: '#1a1a1a',
        },
        headerTintColor: '#ffffff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}
    >
      <HomeStack.Screen
        name="TaskList"
        component={TaskListScreen}
        options={{ title: '任务列表' }}
      />
      <HomeStack.Screen
        name="TaskEdit"
        component={TaskEditScreen}
        options={{ title: '编辑任务' }}
      />
    </HomeStack.Navigator>
  );
}

export default function AppNavigator() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarStyle: {
          backgroundColor: '#1a1a1a',
          borderTopColor: '#333',
        },
        tabBarIcon: ({ color, size }) => {
          let iconName: string;

          if (route.name === '主页') {
            iconName = 'home';
          } else if (route.name === '运行') {
            iconName = 'play-arrow';
          } else if (route.name === '编辑') {
            iconName = 'edit';
          } else if (route.name === '设置') {
            iconName = 'settings';
          } else {
            iconName = 'help';
          }

          return <MaterialIcons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: '#2196F3',
        tabBarInactiveTintColor: 'gray',
        headerShown: false,
      })}
    >
      <Tab.Screen
        name="主页"
        component={HomeStackNavigator}
        options={{ headerShown: false }}
      />
      <Tab.Screen name="运行" component={RunScreen} />
      <Tab.Screen name="编辑" component={EditScreen} />
      <Tab.Screen name="设置" component={SettingsScreen} />
    </Tab.Navigator>
  );
}