be-components 7.6.3 → 7.6.5

package/src/NotificationManager/components/GroupManagement.tsx

@@ -0,0 +1,854 @@
+import React, { useState, useEffect } from 'react';
+import { FlatList, ActivityIndicator, TouchableOpacity, ScrollView } from 'react-native';
+import { View, Text, Button, TextInput } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
+import { NotificationApi } from '../api';
+import { showConfirmAlert } from '../../Components/ConfirmAlert';
+import { Icons } from '../../Components';
+import type { NotificationGroupProps, GroupFormData, FocusPositionProps } from '../../types';
+import DropDown from '../../Components/Dropdown';
+import Pagination from '../../Components/Pagination';
+
+interface GroupManagementProps {
+    onFocusPosition?: (pos: FocusPositionProps) => void;
+}
+
+const GROUPING_FUNCTIONS = [
+    { label: 'Flash Bettors', value: 'flashBettors' },
+    // Add more as they're implemented in the backend
+];
+
+type ListItemType =
+    | { type: 'header' }
+    | { type: 'search' }
+    | { type: 'results-count' }
+    | { type: 'group'; data: NotificationGroupProps }
+    | { type: 'empty' }
+    | { type: 'loading' }
+    | { type: 'pagination' };
+
+const GroupManagement = ({ onFocusPosition }: GroupManagementProps) => {
+    const Colors = useColors();
+    const [loading, setLoading] = useState(false);
+    const [groups, setGroups] = useState<NotificationGroupProps[]>([]);
+    const [showFormModal, setShowFormModal] = useState(false);
+    const [showManageMembersModal, setShowManageMembersModal] = useState(false);
+    const [editingGroup, setEditingGroup] = useState<NotificationGroupProps | null>(null);
+    const [selectedGroupForMembers, setSelectedGroupForMembers] = useState<NotificationGroupProps | null>(null);
+
+    // Pagination state
+    const [currentPage, setCurrentPage] = useState(0);
+    const pageSize = 20;
+    const [hasMore, setHasMore] = useState(false);
+
+    // Search state
+    const [searchQuery, setSearchQuery] = useState('');
+
+    // Manage Members modal state
+    const [manageMembersMode, setManageMembersMode] = useState<'reset' | 'edit'>('reset');
+    const [editMode, setEditMode] = useState<'replace' | 'append'>('replace');
+    const [csvInput, setCsvInput] = useState('');
+    const [memberSearchQuery, setMemberSearchQuery] = useState('');
+    const [existingPlayerIds, setExistingPlayerIds] = useState<string[]>([]);
+    const [removedPlayerIds, setRemovedPlayerIds] = useState<Set<string>>(new Set());
+
+    const [formData, setFormData] = useState<GroupFormData>({
+        name: '',
+        description: '',
+        grouping_function: undefined,
+        status: 'active'
+    });
+
+    useEffect(() => {
+        loadGroups();
+    }, []);
+
+    useEffect(() => {
+        // Reload groups when search or current page changes
+        loadGroups();
+    }, [searchQuery, currentPage]);
+
+    const loadGroups = async () => {
+        setLoading(true);
+        const offset = currentPage * pageSize;
+
+        const fetchedGroups = await NotificationApi.getAllNotificationGroups(pageSize, offset, searchQuery || undefined);
+
+        console.log('=== LOADED GROUPS ===');
+        console.log('Total groups fetched:', fetchedGroups.length);
+        console.log('Full groups data:', fetchedGroups);
+        if (fetchedGroups && fetchedGroups.length > 0) {
+            console.log('First group sample:', fetchedGroups[0]);
+            console.log('Does first group have members?', !!fetchedGroups[0]?.members);
+            if (fetchedGroups[0]?.members) {
+                console.log('First group members:', fetchedGroups[0].members);
+            }
+        }
+        console.log('=====================');
+
+        // Check if there are more results
+        setHasMore(fetchedGroups.length === pageSize);
+
+        setGroups(fetchedGroups);
+        setLoading(false);
+    };
+
+    const handleSearchChange = (text: string) => {
+        setSearchQuery(text);
+        setCurrentPage(0); // Reset to first page when search changes
+    };
+
+    const handlePreviousPage = () => {
+        if (currentPage > 0) {
+            setCurrentPage(currentPage - 1);
+        }
+    };
+
+    const handleNextPage = () => {
+        if (hasMore) {
+            setCurrentPage(currentPage + 1);
+        }
+    };
+
+    const handleSelectPage = (page: number) => {
+        setCurrentPage(page);
+    };
+
+    // Build list data for FlatList
+    const listData: ListItemType[] = React.useMemo(() => {
+        const data: ListItemType[] = [];
+
+        // Always add header and search sections
+        data.push({ type: 'header' });
+        data.push({ type: 'search' });
+
+        // If loading, show loading indicator
+        if (loading) {
+            data.push({ type: 'loading' });
+            return data;
+        }
+
+        // If no groups, show empty state
+        if (groups.length === 0) {
+            data.push({ type: 'empty' });
+            return data;
+        }
+
+        // Show results count
+        data.push({ type: 'results-count' });
+
+        // Add all group items
+        groups.forEach(group => {
+            data.push({ type: 'group', data: group });
+        });
+
+        // Add pagination
+        data.push({ type: 'pagination' });
+
+        return data;
+    }, [loading, groups, currentPage, searchQuery]);
+
+    const handleCreateNew = () => {
+        setEditingGroup(null);
+        setFormData({
+            name: '',
+            description: '',
+            grouping_function: undefined,
+            status: 'active'
+        });
+        setShowFormModal(true);
+    };
+
+    const handleEdit = (group: NotificationGroupProps) => {
+        setEditingGroup(group);
+        setFormData({
+            notification_group_id: group.notification_group_id,
+            name: group.name,
+            description: group.description,
+            grouping_function: group.grouping_function,
+            status: group.status
+        });
+        setShowFormModal(true);
+    };
+
+    const handleSave = async () => {
+        try {
+            setLoading(true);
+
+            if (editingGroup) {
+                // Update existing group
+                await NotificationApi.updateNotificationGroup({
+                    ...editingGroup,
+                    name: formData.name,
+                    description: formData.description,
+                    grouping_function: formData.grouping_function,
+                    status: formData.status
+                });
+            } else {
+                // Create new group
+                await NotificationApi.createNotificationGroup(formData);
+            }
+
+            setShowFormModal(false);
+            await loadGroups();
+        } catch (error) {
+            console.error('Error saving group:', error);
+            alert('Failed to save group. Please try again.');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleDelete = (group: NotificationGroupProps) => {
+        showConfirmAlert(
+            'Inactivate Group',
+            `Are you sure you want to inactivate "${group.name}"? This will not delete members, but the group will no longer be available for new notifications.`,
+            async () => {
+                try {
+                    setLoading(true);
+                    await NotificationApi.inactivateNotificationGroup(group.notification_group_id);
+                    await loadGroups();
+                } catch (error) {
+                    console.error('Error inactivating group:', error);
+                    alert('Failed to inactivate group. Please try again.');
+                } finally {
+                    setLoading(false);
+                }
+            }
+        );
+    };
+
+    const handleOpenManageMembers = async (group: NotificationGroupProps) => {
+        setSelectedGroupForMembers(group);
+        setManageMembersMode(group.grouping_function ? 'reset' : 'edit');
+        setEditMode('replace');
+        setCsvInput('');
+        setMemberSearchQuery('');
+        setRemovedPlayerIds(new Set());
+
+        // Extract existing player IDs from members if available
+        if (group.members && group.members.length > 0) {
+            console.log('Using members from group object:', group.members);
+            const allPlayerIds = group.members
+                .filter(m => m.status === 'active')
+                .flatMap(m => m.player_ids);
+            setExistingPlayerIds(allPlayerIds);
+        } else {
+            // Fallback: fetch members separately if not included in group
+            console.log('Members not in group object, fetching separately for:', group.notification_group_id);
+            try {
+                const members = await NotificationApi.getNotificationGroupMembersByGroup(group.notification_group_id);
+                console.log('Fetched members separately:', members);
+                if (members && members.length > 0) {
+                    const allPlayerIds = members
+                        .filter(m => m.status === 'active')
+                        .flatMap(m => m.player_ids);
+                    setExistingPlayerIds(allPlayerIds);
+                } else {
+                    setExistingPlayerIds([]);
+                }
+            } catch (error) {
+                console.error('Error fetching group members:', error);
+                setExistingPlayerIds([]);
+            }
+        }
+
+        setShowManageMembersModal(true);
+    };
+
+    const handleResetMembers = () => {
+        if (!selectedGroupForMembers) return;
+
+        showConfirmAlert(
+            'Reset Group Members',
+            `This will run the grouping function to update members for "${selectedGroupForMembers.name}". Continue?`,
+            async () => {
+                try {
+                    setLoading(true);
+                    await NotificationApi.updateGroupMembers(selectedGroupForMembers.notification_group_id);
+                    await loadGroups();
+                    setShowManageMembersModal(false);
+                    alert('Group members reset successfully!');
+                } catch (error) {
+                    console.error('Error resetting members:', error);
+                    alert('Failed to reset members. Please try again.');
+                } finally {
+                    setLoading(false);
+                }
+            }
+        );
+    };
+
+    const handleEditMembers = () => {
+        if (!selectedGroupForMembers) return;
+
+        // Parse CSV - handle commas, newlines, spaces, and semicolons
+        const newPlayerIds = csvInput
+            .split(/[,\n;\s]+/)
+            .map(id => id.trim())
+            .filter(id => id.length > 0);
+
+        let finalPlayerIds: string[];
+
+        if (editMode === 'replace') {
+            // Replace mode: must have CSV input
+            if (!csvInput.trim()) {
+                alert('Please enter player IDs to replace members');
+                return;
+            }
+            // Replace mode: use only new player IDs (dedupe)
+            finalPlayerIds = [...new Set(newPlayerIds)];
+        } else {
+            // Append mode: combine existing (minus removed) with new
+            const remainingExisting = existingPlayerIds.filter(id => !removedPlayerIds.has(String(id)));
+
+            console.log('=== EDIT MEMBERS DEBUG ===');
+            console.log('existingPlayerIds:', existingPlayerIds);
+            console.log('removedPlayerIds:', Array.from(removedPlayerIds));
+            console.log('remainingExisting:', remainingExisting);
+            console.log('newPlayerIds:', newPlayerIds);
+
+            // Convert all to strings for consistent comparison and dedupe
+            const remainingExistingStrings = remainingExisting.map(id => String(id));
+            const newPlayerIdsStrings = newPlayerIds.map(id => String(id));
+
+            // Combine and dedupe
+            finalPlayerIds = [...new Set([...remainingExistingStrings, ...newPlayerIdsStrings])];
+
+            console.log('finalPlayerIds:', finalPlayerIds);
+
+            // Check if there are any changes (removed IDs or new IDs added)
+            const hasRemovedIds = removedPlayerIds.size > 0;
+            const hasNewIds = newPlayerIds.length > 0;
+
+            console.log('hasRemovedIds:', hasRemovedIds);
+            console.log('hasNewIds:', hasNewIds);
+
+            if (!hasRemovedIds && !hasNewIds) {
+                alert('Please add new player IDs or remove existing ones');
+                return;
+            }
+
+            // Additional check: verify the final list is actually different
+            const originalSet = new Set(existingPlayerIds.map(id => String(id)));
+            const finalSet = new Set(finalPlayerIds);
+
+            console.log('originalSet:', Array.from(originalSet));
+            console.log('finalSet:', Array.from(finalSet));
+            console.log('originalSet.size:', originalSet.size);
+            console.log('finalSet.size:', finalSet.size);
+
+            // Check if sets are equal (same size and all elements match)
+            const hasChanges = originalSet.size !== finalSet.size ||
+                               ![...originalSet].every(id => finalSet.has(id));
+
+            console.log('hasChanges:', hasChanges);
+            console.log('========================');
+
+            if (!hasChanges) {
+                alert('No changes detected. The member list is the same.');
+                return;
+            }
+        }
+
+        if (finalPlayerIds.length === 0) {
+            alert('No player IDs to save');
+            return;
+        }
+
+        // Calculate stats for confirmation message
+        const duplicatesRemoved = editMode === 'append'
+            ? (existingPlayerIds.length - removedPlayerIds.size + newPlayerIds.length) - finalPlayerIds.length
+            : newPlayerIds.length - finalPlayerIds.length;
+
+        let actionText = editMode === 'replace'
+            ? `replace all members with ${finalPlayerIds.length} player(s)`
+            : `update members (${finalPlayerIds.length} total after changes)`;
+
+        if (duplicatesRemoved > 0) {
+            actionText += `. ${duplicatesRemoved} duplicate(s) removed`;
+        }
+
+        showConfirmAlert(
+            'Update Members',
+            `This will ${actionText} for "${selectedGroupForMembers.name}". Continue?`,
+            async () => {
+                try {
+                    setLoading(true);
+                    await NotificationApi.updateGroupMembers(selectedGroupForMembers.notification_group_id, finalPlayerIds);
+                    await loadGroups();
+                    setShowManageMembersModal(false);
+                    setCsvInput('');
+                    alert(`Successfully updated members!`);
+                } catch (error) {
+                    console.error('Error updating members:', error);
+                    alert('Failed to update members. Please try again.');
+                } finally {
+                    setLoading(false);
+                }
+            }
+        );
+    };
+
+    const handleRemovePlayerId = (playerId: string | number) => {
+        // Always store as string for consistent comparison
+        setRemovedPlayerIds(prev => new Set(prev).add(String(playerId)));
+    };
+
+    // Filter existing player IDs by search query
+    const filteredExistingPlayerIds = React.useMemo(() => {
+        const filtered = memberSearchQuery
+            ? existingPlayerIds.filter(id => String(id).includes(memberSearchQuery))
+            : existingPlayerIds.slice(0, 5); // Show only first 5 unless searching
+        return filtered;
+    }, [existingPlayerIds, memberSearchQuery]);
+
+    // Render functions for each section type
+    const renderHeader = () => (
+        <View type='header' style={{ flexDirection: 'row', alignItems: 'center', padding: 10 }}>
+            <View transparent style={{ flex: 1 }}>
+                <Text theme='h1'>Manage Groups</Text>
+                <Text theme='description' style={{ marginTop: 3 }}>
+                    Create and manage notification groups
+                </Text>
+            </View>
+            <Button type="action" onPress={handleCreateNew} style={{ padding: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
+                <Icons.PlusCircleIcon size={14} color={Colors.text.white} />
+                <Text theme="h1" color={Colors.text.white} style={{ marginLeft: 6 }}>
+                    New Group
+                </Text>
+            </Button>
+        </View>
+    );
+
+    const renderSearch = () => (
+        <View type='row' style={{ padding: 10, margin: 10, marginBottom: 5 }}>
+            <View transparent style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
+                <Icons.SearchIcon size={16} color={Colors.text.h2} />
+                <TextInput
+                    placeholder="Search groups by name or description..."
+                    value={searchQuery}
+                    onFocusPosition={onFocusPosition}
+                    onChangeText={handleSearchChange}
+                    style={{ flex: 1, padding: 10, fontSize: 14, marginLeft:5 }}
+                />
+                {searchQuery.length > 0 && (
+                    <TouchableOpacity onPress={() => handleSearchChange('')} style={{ padding: 8 }}>
+                        <Icons.CloseIcon size={14} color={Colors.text.h2} />
+                    </TouchableOpacity>
+                )}
+            </View>
+        </View>
+    );
+
+    const renderResultsCount = () => (
+        <View transparent style={{ paddingHorizontal: 20, paddingVertical: 5 }}>
+            <Text theme="description" style={{ fontSize: 12 }}>
+                Showing {groups.length} result{groups.length !== 1 ? 's' : ''} on page {currentPage + 1}
+                {searchQuery && ` (filtered by search)`}
+            </Text>
+        </View>
+    );
+
+    const renderGroupCard = (group: NotificationGroupProps) => {
+
+        return (
+            <View
+                float
+                style={{ margin: 10 }}
+            >
+                <View type='header' style={{ flexDirection: 'row', alignItems: 'center', padding: 10, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
+                    <View transparent style={{ flex: 1 }}>
+                        <Text theme='h1'>{group.name}</Text>
+                        <Text theme='description' style={{ marginTop: 3 }}>
+                            Members: {group.player_count?.toLocaleString() || 0} | Function: {group.grouping_function || 'Manual'}
+                        </Text>
+                    </View>
+                    <Button
+                        type="text"
+                        onPress={() => handleEdit(group)}
+                        style={{ padding: 10 }}
+                    >
+                        <Icons.EditIcon size={14} color={Colors.text.white} />
+                    </Button>
+                    <Button
+                        type="text"
+                        onPress={() => handleOpenManageMembers(group)}
+                        style={{ padding: 10 }}
+                    >
+                        <Icons.UserIcon size={14} color={Colors.text.white} />
+                    </Button>
+                </View>
+
+                <View transparent style={{ flexDirection: 'row', padding: 10 }}>
+                    <Button
+                        type="error"
+                        onPress={() => handleDelete(group)}
+                        style={{ flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', padding: 10, marginRight: 4, marginBottom: 4 }}
+                    >
+                        <Icons.CloseIcon size={10} color={Colors.text.white} />
+                        <Text theme="description" color={Colors.text.white} style={{ marginLeft: 6 }}>
+                            Inactivate
+                        </Text>
+                    </Button>
+                </View>
+            </View>
+        );
+    };
+
+    const renderEmpty = () => (
+        <View style={{ padding: 40, alignItems: 'center' }}>
+            <Text theme="description">
+                {searchQuery
+                    ? 'No groups match your search query.'
+                    : 'No groups found. Create your first group!'}
+            </Text>
+        </View>
+    );
+
+    const renderLoading = () => (
+        <View style={{ padding: 40, justifyContent: 'center', alignItems: 'center' }}>
+            <ActivityIndicator size="large" color={Colors.text.action} />
+        </View>
+    );
+
+    const renderPagination = () => (
+        <View transparent style={{ padding: 15, paddingBottom: 20 }}>
+            <Pagination
+                offset={currentPage}
+                pages={hasMore ? currentPage + 2 : currentPage + 1}
+                onPrevious={handlePreviousPage}
+                onNext={handleNextPage}
+                onSelectPage={handleSelectPage}
+            />
+        </View>
+    );
+
+    // Main render item function with switch statement
+    const renderItem = ({ item }: { item: ListItemType }) => {
+        switch (item.type) {
+            case 'header':
+                return renderHeader();
+            case 'search':
+                return renderSearch();
+            case 'results-count':
+                return renderResultsCount();
+            case 'group':
+                return renderGroupCard(item.data);
+            case 'empty':
+                return renderEmpty();
+            case 'loading':
+                return renderLoading();
+            case 'pagination':
+                return renderPagination();
+            default:
+                return null;
+        }
+    };
+
+    const getItemKey = (item: ListItemType, index: number) => {
+        if (item.type === 'group') {
+            return item.data.notification_group_id;
+        }
+        return `${item.type}-${index}`;
+    };
+
+    return (
+        <View style={{ flex: 1 }}>
+            {/* Single FlatList for entire component */}
+            <FlatList
+                data={listData}
+                keyExtractor={getItemKey}
+                renderItem={renderItem}
+                showsVerticalScrollIndicator={true}
+            />
+
+            {/* Form Modal */}
+            {showFormModal && (
+                <View type='blur' style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, padding: 20 }}>
+                    <View float style={{ maxWidth: 600, alignSelf: 'center', width: '100%' }}>
+                        <View type='header' style={{ flexDirection: 'row', alignItems: 'center', padding: 10, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
+                            <View transparent style={{ flex: 1 }}>
+                                <Text theme='h1'>{editingGroup ? 'Edit Group' : 'Create New Group'}</Text>
+                                <Text theme='description' style={{ marginTop: 3 }}>
+                                    {editingGroup ? 'Update group details' : 'Set up a new notification group'}
+                                </Text>
+                            </View>
+                        </View>
+                        <ScrollView style={{ maxHeight: 500 }}>
+                            <View style={{ padding: 15 }}>
+                                {/* Name */}
+                                <View transparent style={{ marginBottom: 15 }}>
+                                    <Text theme="h2" style={{ marginBottom: 8 }}>Group Name</Text>
+                                    <TextInput
+                                        value={formData.name}
+                                        onFocusPosition={onFocusPosition}
+                                        placeholder="Enter group name"
+                                        onChangeText={(name) => setFormData({ ...formData, name })}
+                                        style={{ padding: 12, borderRadius: 8 }}
+                                    />
+                                </View>
+
+                                {/* Description */}
+                                <View transparent style={{ marginBottom: 15 }}>
+                                    <Text theme="h2" style={{ marginBottom: 8 }}>Description</Text>
+                                    <TextInput
+                                        value={formData.description}
+                                        onFocusPosition={onFocusPosition}
+                                        placeholder="Describe this group"
+                                        onChangeText={(description) => setFormData({ ...formData, description })}
+                                        multiline
+                                        numberOfLines={3}
+                                        style={{ padding: 12, borderRadius: 8, minHeight: 80 }}
+                                    />
+                                </View>
+
+                                {/* Grouping Function */}
+                                <View type='row' style={{ marginBottom: 15, padding: 10 }}>
+                                    <Text theme="h2" style={{ flex: 1 }}>Grouping Function</Text>
+                                    <DropDown
+                                        selected_value={
+                                            GROUPING_FUNCTIONS.find((f) => f.value === formData.grouping_function)?.label ?? ''
+                                        }
+                                        dropdown_options={[
+                                            { value: 'function', eligible_options: GROUPING_FUNCTIONS.map((f) => f.label) },
+                                        ]}
+                                        onOptionSelect={(selected) => {
+                                            const func = GROUPING_FUNCTIONS.find((f) => f.label === selected)?.value;
+                                            if (func) {
+                                                setFormData({ ...formData, grouping_function: func });
+                                            }
+                                        }}
+                                    />
+                                </View>
+
+                                {/* Status */}
+                                <View type='row' style={{ marginBottom: 15, padding: 10 }}>
+                                    <Text theme="h2" style={{ flex: 1 }}>Status</Text>
+                                    <DropDown
+                                        selected_value={formData.status === 'active' ? 'Active' : 'Inactive'}
+                                        dropdown_options={[
+                                            { value: 'status', eligible_options: ['Active', 'Inactive'] },
+                                        ]}
+                                        onOptionSelect={(selected) => {
+                                            setFormData({ ...formData, status: selected.toLowerCase() as 'active' | 'inactive' });
+                                        }}
+                                    />
+                                </View>
+                            </View>
+                        </ScrollView>
+                        <View type='footer' style={{ flexDirection: 'row', alignItems: 'center', padding: 10, borderBottomRightRadius: 8, borderBottomLeftRadius: 8 }}>
+                            <Button
+                                style={{ flex: 1, marginRight: 5 }}
+                                type='close'
+                                title='CANCEL'
+                                onPress={() => setShowFormModal(false)}
+                            />
+                            <Button
+                                style={{ flex: 1, marginLeft: 5 }}
+                                type='action'
+                                title={editingGroup ? 'UPDATE' : 'CREATE'}
+                                onPress={handleSave}
+                                disabled={!formData.name || !formData.description}
+                            />
+                        </View>
+                    </View>
+                </View>
+            )}
+
+            {/* Manage Members Modal */}
+            {showManageMembersModal && selectedGroupForMembers && (
+                <View type='blur' style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, padding: 20 }}>
+                    <View float style={{ maxWidth: 600, alignSelf: 'center', width: '100%', maxHeight: '90%' }}>
+                        <View type='header' style={{ flexDirection: 'row', alignItems: 'center', padding: 10, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
+                            <View transparent style={{ flex: 1 }}>
+                                <Text theme='h1'>Manage Members - {selectedGroupForMembers.name}</Text>
+                                <Text theme='description' style={{ marginTop: 3 }}>
+                                    Choose how to manage this group's members
+                                </Text>
+                            </View>
+                        </View>
+                        <ScrollView style={{ flex: 1 }}>
+                            <View style={{ padding: 15 }}>
+                                {/* Mode Selection */}
+                                <View transparent style={{ marginBottom: 20 }}>
+                                    <Text theme="h2" style={{ marginBottom: 10 }}>Management Mode</Text>
+                                    <View transparent style={{ flexDirection: 'row' }}>
+                                        {selectedGroupForMembers.grouping_function && (
+                                            <TouchableOpacity
+                                                onPress={() => setManageMembersMode('reset')}
+                                                style={{ flexDirection: 'row', alignItems: 'center', marginRight: 20 }}
+                                            >
+                                                <View style={{
+                                                    width: 20,
+                                                    height: 20,
+                                                    borderRadius: 10,
+                                                    borderWidth: 2,
+                                                    borderColor: Colors.text.action,
+                                                    backgroundColor: manageMembersMode === 'reset' ? Colors.text.action : 'transparent',
+                                                    marginRight: 8
+                                                }} />
+                                                <Text theme="h2">Reset Members</Text>
+                                            </TouchableOpacity>
+                                        )}
+                                        <TouchableOpacity
+                                            onPress={() => setManageMembersMode('edit')}
+                                            style={{ flexDirection: 'row', alignItems: 'center' }}
+                                        >
+                                            <View style={{
+                                                width: 20,
+                                                height: 20,
+                                                borderRadius: 10,
+                                                borderWidth: 2,
+                                                borderColor: Colors.text.action,
+                                                backgroundColor: manageMembersMode === 'edit' ? Colors.text.action : 'transparent',
+                                                marginRight: 8
+                                            }} />
+                                            <Text theme="h2">Edit Members</Text>
+                                        </TouchableOpacity>
+                                    </View>
+                                </View>
+
+                                {/* Reset Members Mode */}
+                                {manageMembersMode === 'reset' && (
+                                    <View transparent>
+                                        <Text theme="description" style={{ marginBottom: 10 }}>
+                                            This will run the grouping function "{selectedGroupForMembers.grouping_function}" to recalculate and update all members for this group.
+                                        </Text>
+                                        <Text theme="description" style={{ fontSize: 11, fontStyle: 'italic' }}>
+                                            Current member count: {selectedGroupForMembers.player_count || 0}
+                                        </Text>
+                                    </View>
+                                )}
+
+                                {/* Edit Members Mode */}
+                                {manageMembersMode === 'edit' && (
+                                    <View transparent>
+                                        {/* Edit Mode Selection */}
+                                        <View transparent style={{ marginBottom: 15 }}>
+                                            <Text theme="h2" style={{ marginBottom: 10 }}>Edit Mode</Text>
+                                            <View transparent style={{ flexDirection: 'row' }}>
+                                                <TouchableOpacity
+                                                    onPress={() => setEditMode('replace')}
+                                                    style={{ flexDirection: 'row', alignItems: 'center', marginRight: 20 }}
+                                                >
+                                                    <View style={{
+                                                        width: 20,
+                                                        height: 20,
+                                                        borderRadius: 10,
+                                                        borderWidth: 2,
+                                                        borderColor: Colors.text.action,
+                                                        backgroundColor: editMode === 'replace' ? Colors.text.action : 'transparent',
+                                                        marginRight: 8
+                                                    }} />
+                                                    <Text theme="h2">Replace All</Text>
+                                                </TouchableOpacity>
+                                                <TouchableOpacity
+                                                    onPress={() => setEditMode('append')}
+                                                    style={{ flexDirection: 'row', alignItems: 'center' }}
+                                                >
+                                                    <View style={{
+                                                        width: 20,
+                                                        height: 20,
+                                                        borderRadius: 10,
+                                                        borderWidth: 2,
+                                                        borderColor: Colors.text.action,
+                                                        backgroundColor: editMode === 'append' ? Colors.text.action : 'transparent',
+                                                        marginRight: 8
+                                                    }} />
+                                                    <Text theme="h2">Update Existing</Text>
+                                                </TouchableOpacity>
+                                            </View>
+                                        </View>
+
+                                        {/* Existing Members Search (only in append mode) */}
+                                        {editMode === 'append' && existingPlayerIds.length > 0 && (
+                                            <View transparent style={{ marginBottom: 15 }}>
+                                                <Text theme="h2" style={{ marginBottom: 8 }}>
+                                                    Current Members ({existingPlayerIds.length - removedPlayerIds.size} of {existingPlayerIds.length})
+                                                </Text>
+                                                <TextInput
+                                                    value={memberSearchQuery}
+                                                    placeholder="Search player IDs to find and remove..."
+                                                    onChangeText={setMemberSearchQuery}
+                                                    onFocusPosition={onFocusPosition}
+                                                    style={{ padding: 10, borderRadius: 8, marginBottom: 8 }}
+                                                />
+                                                {!memberSearchQuery && existingPlayerIds.length > 5 && (
+                                                    <Text theme="description" style={{ fontSize: 11, marginBottom: 8, fontStyle: 'italic' }}>
+                                                        Showing first 5 of {existingPlayerIds.length}. Use search to find specific player IDs.
+                                                    </Text>
+                                                )}
+                                                <ScrollView style={{ maxHeight: 150, borderRadius: 8, backgroundColor: Colors.views.background, padding: 10 }}>
+                                                    {filteredExistingPlayerIds
+                                                        .filter(id => !removedPlayerIds.has(String(id)))
+                                                        .map((playerId) => (
+                                                            <View
+                                                                key={playerId}
+                                                                transparent
+                                                                style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingVertical: 4 }}
+                                                            >
+                                                                <Text theme="description">{playerId}</Text>
+                                                                <TouchableOpacity onPress={() => handleRemovePlayerId(playerId)}>
+                                                                    <Icons.CloseIcon size={14} color={Colors.text.error} />
+                                                                </TouchableOpacity>
+                                                            </View>
+                                                        ))}
+                                                    {filteredExistingPlayerIds.filter(id => !removedPlayerIds.has(String(id))).length === 0 && (
+                                                        <Text theme="description" style={{ textAlign: 'center', paddingVertical: 10 }}>
+                                                            {memberSearchQuery ? 'No matching player IDs' : 'No members'}
+                                                        </Text>
+                                                    )}
+                                                </ScrollView>
+                                            </View>
+                                        )}
+
+                                        {/* CSV Input */}
+                                        <View transparent style={{ marginBottom: 15 }}>
+                                            <Text theme="h2" style={{ marginBottom: 8 }}>
+                                                {editMode === 'replace' ? 'New Player IDs (CSV)' : 'Add Player IDs (CSV)'}
+                                            </Text>
+                                            <TextInput
+                                                value={csvInput}
+                                                onFocusPosition={onFocusPosition}
+                                                placeholder="e.g. player1, player2, player3&#10;or one per line"
+                                                onChangeText={setCsvInput}
+                                                multiline
+                                                numberOfLines={8}
+                                                style={{ padding: 12, borderRadius: 8, minHeight: 150, textAlignVertical: 'top' }}
+                                            />
+                                            <Text theme="description" style={{ marginTop: 6, fontSize: 11 }}>
+                                                Accepts comma, space, semicolon, or newline separated values
+                                            </Text>
+                                        </View>
+                                    </View>
+                                )}
+                            </View>
+                        </ScrollView>
+                        <View type='footer' style={{ flexDirection: 'row', alignItems: 'center', padding: 10, borderBottomRightRadius: 8, borderBottomLeftRadius: 8 }}>
+                            <Button
+                                style={{ flex: 1, marginRight: 5 }}
+                                type='close'
+                                title='CANCEL'
+                                onPress={() => {
+                                    setShowManageMembersModal(false);
+                                    setCsvInput('');
+                                    setMemberSearchQuery('');
+                                    setRemovedPlayerIds(new Set());
+                                }}
+                            />
+                            <Button
+                                style={{ flex: 1, marginLeft: 5 }}
+                                type='action'
+                                title={manageMembersMode === 'reset' ? 'RESET' : 'UPDATE'}
+                                onPress={manageMembersMode === 'reset' ? handleResetMembers : handleEditMembers}
+                            />
+                        </View>
+                    </View>
+                </View>
+            )}
+        </View>
+    );
+};
+
+export default GroupManagement;