import { Tabs } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import type { ComponentProps } from 'react';
import { StyleSheet, Text } from 'react-native';
import type { ColorValue } from 'react-native';
import { colors } from '../../src/theme';

type IconName = ComponentProps<typeof Ionicons>['name'];

/**
 * 根据选中状态返回实心/描边图标
 */
function tabIcon(filled: IconName, outline: IconName) {
  return ({ color, size, focused }: { color: ColorValue; size: number; focused: boolean }) => (
    <Ionicons name={focused ? filled : outline} size={size} color={color} />
  );
}

/**
 * 底部 Tab 导航：首页默认选中，蓝色高亮
 */
export default function TabLayout() {
  return (
    <Tabs
      screenOptions={{
        headerShown: false,
        tabBarActiveTintColor: colors.primary,
        tabBarInactiveTintColor: colors.textSecondary,
        tabBarLabel: ({ color, children }) => (
          <Text style={[styles.labelText, { color }]}>{children}</Text>
        ),
      }}
    >
      <Tabs.Screen
        name="index"
        options={{ title: '首页', tabBarIcon: tabIcon('home', 'home-outline') }}
      />
      <Tabs.Screen
        name="jobs"
        options={{ title: '岗位', tabBarIcon: tabIcon('briefcase', 'briefcase-outline') }}
      />
      <Tabs.Screen
        name="chat"
        options={{ title: '沟通', tabBarIcon: tabIcon('chatbubbles', 'chatbubbles-outline') }}
      />
      <Tabs.Screen
        name="growth"
        options={{ title: '成长', tabBarIcon: tabIcon('trending-up', 'trending-up-outline') }}
      />
      <Tabs.Screen
        name="profile"
        options={{ title: '我的', tabBarIcon: tabIcon('person', 'person-outline') }}
      />
    </Tabs>
  );
}

const styles = StyleSheet.create({
  labelText: {
    fontSize: 11,
  },
});