import { Tabs } from 'expo-router';
import { Icon } from '../../components/Icon';

export default function AppLayout() {
  return (
    <Tabs
      screenOptions={{
        headerShown: false,
        tabBarActiveTintColor: '#0891B2',
        tabBarInactiveTintColor: '#94A3B8',
        tabBarStyle: {
          backgroundColor: '#FFFFFF',
          borderTopColor: '#F1F5F9',
          borderTopWidth: 1,
          paddingBottom: 8,
          paddingTop: 8,
          height: 64,
        },
        tabBarLabelStyle: {
          fontSize: 12,
          fontWeight: '600',
          marginTop: 2,
        },
      }}
    >
      <Tabs.Screen
        name="dashboard"
        options={{ title: 'Home', tabBarIcon: ({ color }) => <Icon name="home" size={22} color={color} /> }}
      />
      <Tabs.Screen
        name="clients"
        options={{ title: 'Clients', tabBarIcon: ({ color }) => <Icon name="users" size={22} color={color} /> }}
        listeners={({ navigation }: any) => ({
          tabPress: () => { navigation.navigate('clients', { screen: 'index' }); },
        })}
      />
      <Tabs.Screen
        name="payments"
        options={{ title: 'Collect', tabBarIcon: ({ color }) => <Icon name="collect" size={22} color={color} /> }}
      />
      <Tabs.Screen
        name="tasks"
        options={{ title: 'Tickets', tabBarIcon: ({ color }) => <Icon name="ticket" size={22} color={color} /> }}
        listeners={({ navigation }: any) => ({
          tabPress: () => { navigation.navigate('tasks', { screen: 'index' }); },
        })}
      />
      <Tabs.Screen
        name="profile"
        options={{ title: 'Profile', tabBarIcon: ({ color }) => <Icon name="user" size={22} color={color} /> }}
      />
      {/* Hidden — accessed programmatically */}
      <Tabs.Screen name="remittances" options={{ href: null }} />
      <Tabs.Screen name="users" options={{ href: null }} />
    </Tabs>
  );
}