CBS-Mobile-App/src/modules/agent/screens/CustomerListScreen.tsx

import React, { useEffect, useState } from 'react';
import { View, StyleSheet, FlatList, RefreshControl, TextInput, Pressable, Text } from 'react-native';
import { CompositeNavigationProp } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
import Ionicons from '@react-native-vector-icons/ionicons';
import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';

import { ScreenShell } from '../../../components';
import { useTheme } from '../../../theme';
import { TAB_BAR_HEIGHT } from '../../../utils/layoutConstants';
import { useAppDispatch, useAppSelector } from '../../../app/hooks';
import type { AgentTabParamList, AgentCustomersStackParamList } from '../navigation/agentNavigationTypes';
import { useGetAgentCustomersQuery } from '../services/agentApi';
import { agentActions } from '../store/agentSlice';
import { selectFilteredCustomers, selectCustomerFilter, selectCustomerSearch } from '../store/agentSelectors';
import { CUSTOMER_FILTERS } from '../constants/agentConstants';
import type { CustomerFilter } from '../types/agentTypes';

import { CustomerCard } from '../components/CustomerCard';
import { AgentSkeletonLoader } from '../components/AgentSkeletonLoader';
import { AgentEmptyState } from '../components/AgentEmptyState';

type NavigationProp = CompositeNavigationProp<
  NativeStackNavigationProp<AgentCustomersStackParamList, 'CustomerList'>,
  BottomTabNavigationProp<AgentTabParamList>
>;

export default function CustomerListScreen({ navigation }: { navigation: NavigationProp }) {
  const theme = useTheme();
  const dispatch = useAppDispatch();
  
  const customers = useAppSelector(selectFilteredCustomers);
  const activeFilter = useAppSelector(selectCustomerFilter);
  const searchQuery = useAppSelector(selectCustomerSearch);

  const { data, isLoading, isFetching, refetch, error } = useGetAgentCustomersQuery(undefined, {
    refetchOnMountOrArgChange: true,
  });

  const [refreshing, setRefreshing] = useState(false);

  useEffect(() => {
    if (data) {
      dispatch(agentActions.setCustomers(data));
    }
  }, [data, dispatch]);

  const handleRefresh = async () => {
    setRefreshing(true);
    await refetch();
    setRefreshing(false);
  };

  const handleSearch = (text: string) => {
    dispatch(agentActions.setCustomerSearch(text));
  };

  const handleFilter = (filter: CustomerFilter) => {
    dispatch(agentActions.setCustomerFilter(filter));
  };

  return (
    <ScreenShell title="Customers" scrollable={false}>
      {/* Search Bar */}
      <View style={styles.headerArea}>
        <View style={[styles.searchBar, { backgroundColor: theme.colors.surface, borderColor: theme.colors.cardBorder }]}>
          <Ionicons name="search-outline" size={20} color={theme.colors.textMuted} />
          <TextInput
            style={[styles.searchInput, { color: theme.colors.textPrimary }]}
            placeholder="Search by name or phone..."
            placeholderTextColor={theme.colors.textMuted}
            value={searchQuery}
            onChangeText={handleSearch}
          />
          {searchQuery.length > 0 && (
            <Pressable onPress={() => handleSearch('')} style={styles.clearBtn}>
              <Ionicons name="close-circle" size={16} color={theme.colors.textMuted} />
            </Pressable>
          )}
        </View>

        {/* Filters */}
        <View style={styles.filterArea}>
          <FlatList
            data={CUSTOMER_FILTERS}
            horizontal
            showsHorizontalScrollIndicator={false}
            keyExtractor={item => item.id}
            contentContainerStyle={styles.filterList}
            renderItem={({ item }) => {
              const isActive = activeFilter === item.id;
              return (
                <Pressable
                  style={[
                    styles.filterChip,
                    { 
                      backgroundColor: isActive ? theme.colors.primary : theme.colors.surface,
                      borderColor: isActive ? theme.colors.primary : theme.colors.cardBorder,
                    }
                  ]}
                  onPress={() => handleFilter(item.id)}
                >
                  <Text style={[
                    styles.filterText,
                    { color: isActive ? theme.colors.white : theme.colors.textSecondary }
                  ]}>
                    {item.label}
                  </Text>
                </Pressable>
              );
            }}
          />
        </View>
      </View>

      {/* List Area */}
      <View style={styles.listArea}>
        {isLoading && customers.length === 0 ? (
          <AgentSkeletonLoader type="list" />
        ) : error && customers.length === 0 ? (
          <AgentEmptyState
            title="Unable to load customers"
            description="We encountered an error while fetching your customer list."
            actionTitle="Retry"
            onAction={handleRefresh}
          />
        ) : (
          <FlatList
            data={customers}
            keyExtractor={item => item.id}
            contentContainerStyle={styles.listContent}
            showsVerticalScrollIndicator={false}
            refreshControl={
              <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} colors={[theme.colors.primary]} />
            }
            ListEmptyComponent={() => (
              <AgentEmptyState
                title="No customers found"
                description={searchQuery ? `No matches for "${searchQuery}"` : "You don't have any customers in this category yet."}
                icon="people-outline"
                actionTitle={searchQuery ? "Clear Search" : undefined}
                onAction={searchQuery ? () => handleSearch('') : undefined}
              />
            )}
            renderItem={({ item, index }) => (
              <Animated.View entering={FadeIn.delay(Math.min(index * 50, 500))} exiting={FadeOut}>
                <CustomerCard 
                  customer={item}
                  onPress={() => navigation.navigate('CustomerDetail', { customerId: item.id })}
                />
              </Animated.View>
            )}
          />
        )}
      </View>

      {/* FAB to add new customer */}
      <Pressable 
        style={[styles.fab, { backgroundColor: theme.colors.primary }]}
        onPress={() => navigation.navigate('AddEditCustomer', {})}
      >
        <Ionicons name="add" size={24} color={theme.colors.white} />
      </Pressable>
    </ScreenShell>
  );
}

const styles = StyleSheet.create({
  headerArea: {
    paddingHorizontal: 16,
    paddingTop: 16,
    paddingBottom: 8,
    zIndex: 10,
  },
  searchBar: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 48,
    borderRadius: 24,
    borderWidth: 1,
    paddingHorizontal: 16,
    marginBottom: 16,
  },
  searchInput: {
    flex: 1,
    height: '100%',
    marginLeft: 8,
    fontSize: 15,
  },
  clearBtn: {
    padding: 4,
  },
  filterArea: {
    marginBottom: 8,
  },
  filterList: {
    gap: 8,
  },
  filterChip: {
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 16,
    borderWidth: 1,
  },
  filterText: {
    fontSize: 13,
    fontWeight: '600',
  },
  listArea: {
    flex: 1,
  },
  listContent: {
    padding: 16,
    paddingBottom: TAB_BAR_HEIGHT + 16,
  },
  fab: {
    position: 'absolute',
    right: 20,
    bottom: TAB_BAR_HEIGHT + 20, // above tab bar
    width: 56,
    height: 56,
    borderRadius: 28,
    alignItems: 'center',
    justifyContent: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.2,
    shadowRadius: 8,
    elevation: 5,
  },
});