territory-log/app/(tabs)/contacts.tsx

// app/(tabs)/contacts.tsx
import { View, Text, FlatList, TouchableOpacity, TextInput } from 'react-native';
import { useState, useCallback } from 'react';
import { useFocusEffect } from 'expo-router';
import { Plus, Search, X } from 'lucide-react-native';
import { useContactStore, Contact } from '@/store/useContactStore';
import { getDatabase } from '@/lib/database';
import { ContactCard } from '@/components/contacts/ContactCard';
import { AddContactSheet } from '@/components/contacts/AddContactSheet';
import { EmptyState } from '@/components/ui/EmptyState';
import { dbToContact } from '@/lib/contactHelpers';

export default function ContactsScreen() {
  const { contacts, setContacts } = useContactStore();
  const [search, setSearch] = useState('');
  const [statusFilter, setStatusFilter] = useState<string>('All');
  const [territoryFilter, setTerritoryFilter] = useState<string>('All');
  const [territories, setTerritories] = useState<string[]>([]);
  const [showAdd, setShowAdd] = useState(false);

  const statusOptions = ['All', 'Active', 'Return Visit', 'Bible Study', 'Not Interested', 'Do Not Call'];

  async function loadContacts() {
    const db = await getDatabase();
    const rows = await db.getAllAsync<any>(
      'SELECT * FROM contacts WHERE deleted_at IS NULL ORDER BY full_name ASC'
    );
    setContacts(rows.map(dbToContact));

    const tRows = await db.getAllAsync<any>('SELECT territory_code FROM territories ORDER BY territory_code ASC');
    setTerritories(tRows.map((r: any) => r.territory_code));
  }

  useFocusEffect(useCallback(() => { loadContacts(); }, []));

  const filtered = contacts.filter((c) => {
    const matchSearch = c.fullName.toLowerCase().includes(search.toLowerCase()) ||
      (c.address?.toLowerCase().includes(search.toLowerCase()) ?? false);
    const matchStatus = statusFilter === 'All' || c.status === statusFilter;
    const matchTerritory = territoryFilter === 'All' || c.territoryCode === territoryFilter;
    return matchSearch && matchStatus && matchTerritory;
  });

  const isFiltered = search.length > 0 || statusFilter !== 'All' || territoryFilter !== 'All';

  return (
    <View className="flex-1 bg-secondary">
      {/* Header */}
      <View className="bg-primary pt-14 pb-4 px-4">
        <View className="flex-row justify-between items-center mb-3">
          <Text className="text-white text-2xl font-bold" accessibilityRole="header">Contacts</Text>
          <TouchableOpacity
            onPress={() => setShowAdd(true)}
            className="bg-white/20 rounded-full p-2"
            accessibilityRole="button"
            accessibilityLabel="Add new contact"
            style={{ minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' }}
          >
            <Plus size={22} color="white" />
          </TouchableOpacity>
        </View>
        {/* Search */}
        <View className="flex-row items-center bg-white/20 rounded-xl px-3 py-2">
          <Search size={16} color="rgba(255,255,255,0.7)" />
          <TextInput
            className="flex-1 text-white ml-2"
            placeholder="Search contacts..."
            placeholderTextColor="rgba(255,255,255,0.6)"
            value={search}
            onChangeText={setSearch}
            accessibilityLabel="Search contacts"
          />
          {search ? (
            <TouchableOpacity
              onPress={() => setSearch('')}
              accessibilityRole="button"
              accessibilityLabel="Clear search"
              hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
            >
              <X size={16} color="rgba(255,255,255,0.7)" />
            </TouchableOpacity>
          ) : null}
        </View>
      </View>

      {/* Status Filter */}
      <View className="pt-2">
        <FlatList
          horizontal
          showsHorizontalScrollIndicator={false}
          contentContainerStyle={{ paddingHorizontal: 12, gap: 8 }}
          data={statusOptions}
          keyExtractor={(item) => item}
          renderItem={({ item }) => (
            <TouchableOpacity
              onPress={() => setStatusFilter(item)}
              className={`px-3 py-1.5 rounded-full border ${statusFilter === item ? 'bg-primary border-primary' : 'bg-white border-gray-200'}`}
              accessibilityRole="button"
              accessibilityLabel={`Filter by ${item}`}
              accessibilityState={{ selected: statusFilter === item }}
              style={{ minHeight: 36 }}
            >
              <Text className={`text-sm font-medium ${statusFilter === item ? 'text-white' : 'text-charcoal'}`}>{item}</Text>
            </TouchableOpacity>
          )}
        />
      </View>

      {/* Territory Filter */}
      {territories.length > 0 && (
        <View className="pb-2">
          <FlatList
            horizontal
            showsHorizontalScrollIndicator={false}
            contentContainerStyle={{ paddingHorizontal: 12, gap: 8, paddingTop: 6 }}
            data={['All', ...territories]}
            keyExtractor={(item) => `t-${item}`}
            renderItem={({ item }) => (
              <TouchableOpacity
                onPress={() => setTerritoryFilter(item)}
                className={`px-3 py-1 rounded-full border ${territoryFilter === item ? 'bg-accent border-accent' : 'bg-white border-gray-200'}`}
                accessibilityRole="button"
                accessibilityLabel={`Filter by territory ${item === 'All' ? 'all' : item}`}
                accessibilityState={{ selected: territoryFilter === item }}
                style={{ minHeight: 32 }}
              >
                <Text className={`text-xs font-medium ${territoryFilter === item ? 'text-white' : 'text-gray-500'}`}>{item === 'All' ? 'All Territories' : item}</Text>
              </TouchableOpacity>
            )}
          />
        </View>
      )}

      {/* List */}
      <FlatList
        data={filtered}
        keyExtractor={(item) => item.id}
        contentContainerStyle={{ paddingHorizontal: 16, paddingBottom: 100, paddingTop: 4, gap: 8 }}
        renderItem={({ item }) => <ContactCard contact={item} onRefresh={loadContacts} />}
        ListEmptyComponent={() =>
          isFiltered ? (
            <EmptyState
              icon="Search"
              title="No contacts found"
              message="Try adjusting your search or filters."
            />
          ) : (
            <EmptyState
              icon="Users"
              title="No contacts yet"
              message="Start building your ministry records by adding your first contact."
              actionLabel="Add Contact"
              onAction={() => setShowAdd(true)}
            />
          )
        }
      />

      <AddContactSheet visible={showAdd} onClose={() => setShowAdd(false)} onSaved={() => { setShowAdd(false); loadContacts(); }} />
    </View>
  );
}