be-components 7.6.3 → 7.6.4

package/lib/module/NotificationManager/components/GroupManagement.js

@@ -0,0 +1,1030 @@
+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 DropDown from '../../Components/Dropdown';
+import Pagination from '../../Components/Pagination';
+const GROUPING_FUNCTIONS = [{
+  label: 'Flash Bettors',
+  value: 'flashBettors'
+}
+// Add more as they're implemented in the backend
+];
+const GroupManagement = ({
+  onFocusPosition
+}) => {
+  const Colors = useColors();
+  const [loading, setLoading] = useState(false);
+  const [groups, setGroups] = useState([]);
+  const [showFormModal, setShowFormModal] = useState(false);
+  const [showManageMembersModal, setShowManageMembersModal] = useState(false);
+  const [editingGroup, setEditingGroup] = useState(null);
+  const [selectedGroupForMembers, setSelectedGroupForMembers] = useState(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');
+  const [editMode, setEditMode] = useState('replace');
+  const [csvInput, setCsvInput] = useState('');
+  const [memberSearchQuery, setMemberSearchQuery] = useState('');
+  const [existingPlayerIds, setExistingPlayerIds] = useState([]);
+  const [removedPlayerIds, setRemovedPlayerIds] = useState(new Set());
+  const [formData, setFormData] = useState({
+    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 => {
+    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 => {
+    setCurrentPage(page);
+  };
+
+  // Build list data for FlatList
+  const listData = React.useMemo(() => {
+    const data = [];
+
+    // 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 => {
+    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 => {
+    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 => {
+    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;
+    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 => {
+    // 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 = () => /*#__PURE__*/React.createElement(View, {
+    type: "header",
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 10
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h1"
+  }, "Manage Groups"), /*#__PURE__*/React.createElement(Text, {
+    theme: "description",
+    style: {
+      marginTop: 3
+    }
+  }, "Create and manage notification groups")), /*#__PURE__*/React.createElement(Button, {
+    type: "action",
+    onPress: handleCreateNew,
+    style: {
+      padding: 10,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Icons.PlusCircleIcon, {
+    size: 14,
+    color: Colors.text.white
+  }), /*#__PURE__*/React.createElement(Text, {
+    theme: "h1",
+    color: Colors.text.white,
+    style: {
+      marginLeft: 6
+    }
+  }, "New Group")));
+  const renderSearch = () => /*#__PURE__*/React.createElement(View, {
+    type: "row",
+    style: {
+      padding: 10,
+      margin: 10,
+      marginBottom: 5
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Icons.SearchIcon, {
+    size: 16,
+    color: Colors.text.h2
+  }), /*#__PURE__*/React.createElement(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 && /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: () => handleSearchChange(''),
+    style: {
+      padding: 8
+    }
+  }, /*#__PURE__*/React.createElement(Icons.CloseIcon, {
+    size: 14,
+    color: Colors.text.h2
+  }))));
+  const renderResultsCount = () => /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      paddingHorizontal: 20,
+      paddingVertical: 5
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "description",
+    style: {
+      fontSize: 12
+    }
+  }, "Showing ", groups.length, " result", groups.length !== 1 ? 's' : '', " on page ", currentPage + 1, searchQuery && ` (filtered by search)`));
+  const renderGroupCard = group => {
+    return /*#__PURE__*/React.createElement(View, {
+      float: true,
+      style: {
+        margin: 10
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      type: "header",
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 10,
+        borderTopRightRadius: 8,
+        borderTopLeftRadius: 8
+      }
+    }, /*#__PURE__*/React.createElement(View, {
+      transparent: true,
+      style: {
+        flex: 1
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      theme: "h1"
+    }, group.name), /*#__PURE__*/React.createElement(Text, {
+      theme: "description",
+      style: {
+        marginTop: 3
+      }
+    }, "Members: ", group.player_count?.toLocaleString() || 0, " | Function: ", group.grouping_function || 'Manual')), /*#__PURE__*/React.createElement(Button, {
+      type: "text",
+      onPress: () => handleEdit(group),
+      style: {
+        padding: 10
+      }
+    }, /*#__PURE__*/React.createElement(Icons.EditIcon, {
+      size: 14,
+      color: Colors.text.white
+    })), /*#__PURE__*/React.createElement(Button, {
+      type: "text",
+      onPress: () => handleOpenManageMembers(group),
+      style: {
+        padding: 10
+      }
+    }, /*#__PURE__*/React.createElement(Icons.UserIcon, {
+      size: 14,
+      color: Colors.text.white
+    }))), /*#__PURE__*/React.createElement(View, {
+      transparent: true,
+      style: {
+        flexDirection: 'row',
+        padding: 10
+      }
+    }, /*#__PURE__*/React.createElement(Button, {
+      type: "error",
+      onPress: () => handleDelete(group),
+      style: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 10,
+        marginRight: 4,
+        marginBottom: 4
+      }
+    }, /*#__PURE__*/React.createElement(Icons.CloseIcon, {
+      size: 10,
+      color: Colors.text.white
+    }), /*#__PURE__*/React.createElement(Text, {
+      theme: "description",
+      color: Colors.text.white,
+      style: {
+        marginLeft: 6
+      }
+    }, "Inactivate"))));
+  };
+  const renderEmpty = () => /*#__PURE__*/React.createElement(View, {
+    style: {
+      padding: 40,
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "description"
+  }, searchQuery ? 'No groups match your search query.' : 'No groups found. Create your first group!'));
+  const renderLoading = () => /*#__PURE__*/React.createElement(View, {
+    style: {
+      padding: 40,
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(ActivityIndicator, {
+    size: "large",
+    color: Colors.text.action
+  }));
+  const renderPagination = () => /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      padding: 15,
+      paddingBottom: 20
+    }
+  }, /*#__PURE__*/React.createElement(Pagination, {
+    offset: currentPage,
+    pages: hasMore ? currentPage + 2 : currentPage + 1,
+    onPrevious: handlePreviousPage,
+    onNext: handleNextPage,
+    onSelectPage: handleSelectPage
+  }));
+
+  // Main render item function with switch statement
+  const renderItem = ({
+    item
+  }) => {
+    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, index) => {
+    if (item.type === 'group') {
+      return item.data.notification_group_id;
+    }
+    return `${item.type}-${index}`;
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(FlatList, {
+    data: listData,
+    keyExtractor: getItemKey,
+    renderItem: renderItem,
+    showsVerticalScrollIndicator: true
+  }), showFormModal && /*#__PURE__*/React.createElement(View, {
+    type: "blur",
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      padding: 20
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    float: true,
+    style: {
+      maxWidth: 600,
+      alignSelf: 'center',
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    type: "header",
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 10,
+      borderTopRightRadius: 8,
+      borderTopLeftRadius: 8
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h1"
+  }, editingGroup ? 'Edit Group' : 'Create New Group'), /*#__PURE__*/React.createElement(Text, {
+    theme: "description",
+    style: {
+      marginTop: 3
+    }
+  }, editingGroup ? 'Update group details' : 'Set up a new notification group'))), /*#__PURE__*/React.createElement(ScrollView, {
+    style: {
+      maxHeight: 500
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      padding: 15
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      marginBottom: 15
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h2",
+    style: {
+      marginBottom: 8
+    }
+  }, "Group Name"), /*#__PURE__*/React.createElement(TextInput, {
+    value: formData.name,
+    onFocusPosition: onFocusPosition,
+    placeholder: "Enter group name",
+    onChangeText: name => setFormData({
+      ...formData,
+      name
+    }),
+    style: {
+      padding: 12,
+      borderRadius: 8
+    }
+  })), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      marginBottom: 15
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h2",
+    style: {
+      marginBottom: 8
+    }
+  }, "Description"), /*#__PURE__*/React.createElement(TextInput, {
+    value: formData.description,
+    onFocusPosition: onFocusPosition,
+    placeholder: "Describe this group",
+    onChangeText: description => setFormData({
+      ...formData,
+      description
+    }),
+    multiline: true,
+    numberOfLines: 3,
+    style: {
+      padding: 12,
+      borderRadius: 8,
+      minHeight: 80
+    }
+  })), /*#__PURE__*/React.createElement(View, {
+    type: "row",
+    style: {
+      marginBottom: 15,
+      padding: 10
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h2",
+    style: {
+      flex: 1
+    }
+  }, "Grouping Function"), /*#__PURE__*/React.createElement(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
+        });
+      }
+    }
+  })), /*#__PURE__*/React.createElement(View, {
+    type: "row",
+    style: {
+      marginBottom: 15,
+      padding: 10
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h2",
+    style: {
+      flex: 1
+    }
+  }, "Status"), /*#__PURE__*/React.createElement(DropDown, {
+    selected_value: formData.status === 'active' ? 'Active' : 'Inactive',
+    dropdown_options: [{
+      value: 'status',
+      eligible_options: ['Active', 'Inactive']
+    }],
+    onOptionSelect: selected => {
+      setFormData({
+        ...formData,
+        status: selected.toLowerCase()
+      });
+    }
+  })))), /*#__PURE__*/React.createElement(View, {
+    type: "footer",
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 10,
+      borderBottomRightRadius: 8,
+      borderBottomLeftRadius: 8
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    style: {
+      flex: 1,
+      marginRight: 5
+    },
+    type: "close",
+    title: "CANCEL",
+    onPress: () => setShowFormModal(false)
+  }), /*#__PURE__*/React.createElement(Button, {
+    style: {
+      flex: 1,
+      marginLeft: 5
+    },
+    type: "action",
+    title: editingGroup ? 'UPDATE' : 'CREATE',
+    onPress: handleSave,
+    disabled: !formData.name || !formData.description
+  })))), showManageMembersModal && selectedGroupForMembers && /*#__PURE__*/React.createElement(View, {
+    type: "blur",
+    style: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      padding: 20
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    float: true,
+    style: {
+      maxWidth: 600,
+      alignSelf: 'center',
+      width: '100%',
+      maxHeight: '90%'
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    type: "header",
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 10,
+      borderTopRightRadius: 8,
+      borderTopLeftRadius: 8
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h1"
+  }, "Manage Members - ", selectedGroupForMembers.name), /*#__PURE__*/React.createElement(Text, {
+    theme: "description",
+    style: {
+      marginTop: 3
+    }
+  }, "Choose how to manage this group's members"))), /*#__PURE__*/React.createElement(ScrollView, {
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      padding: 15
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      marginBottom: 20
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h2",
+    style: {
+      marginBottom: 10
+    }
+  }, "Management Mode"), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flexDirection: 'row'
+    }
+  }, selectedGroupForMembers.grouping_function && /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: () => setManageMembersMode('reset'),
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginRight: 20
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      width: 20,
+      height: 20,
+      borderRadius: 10,
+      borderWidth: 2,
+      borderColor: Colors.text.action,
+      backgroundColor: manageMembersMode === 'reset' ? Colors.text.action : 'transparent',
+      marginRight: 8
+    }
+  }), /*#__PURE__*/React.createElement(Text, {
+    theme: "h2"
+  }, "Reset Members")), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: () => setManageMembersMode('edit'),
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      width: 20,
+      height: 20,
+      borderRadius: 10,
+      borderWidth: 2,
+      borderColor: Colors.text.action,
+      backgroundColor: manageMembersMode === 'edit' ? Colors.text.action : 'transparent',
+      marginRight: 8
+    }
+  }), /*#__PURE__*/React.createElement(Text, {
+    theme: "h2"
+  }, "Edit Members")))), manageMembersMode === 'reset' && /*#__PURE__*/React.createElement(View, {
+    transparent: true
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "description",
+    style: {
+      marginBottom: 10
+    }
+  }, "This will run the grouping function \"", selectedGroupForMembers.grouping_function, "\" to recalculate and update all members for this group."), /*#__PURE__*/React.createElement(Text, {
+    theme: "description",
+    style: {
+      fontSize: 11,
+      fontStyle: 'italic'
+    }
+  }, "Current member count: ", selectedGroupForMembers.player_count || 0)), manageMembersMode === 'edit' && /*#__PURE__*/React.createElement(View, {
+    transparent: true
+  }, /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      marginBottom: 15
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h2",
+    style: {
+      marginBottom: 10
+    }
+  }, "Edit Mode"), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      flexDirection: 'row'
+    }
+  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: () => setEditMode('replace'),
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginRight: 20
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      width: 20,
+      height: 20,
+      borderRadius: 10,
+      borderWidth: 2,
+      borderColor: Colors.text.action,
+      backgroundColor: editMode === 'replace' ? Colors.text.action : 'transparent',
+      marginRight: 8
+    }
+  }), /*#__PURE__*/React.createElement(Text, {
+    theme: "h2"
+  }, "Replace All")), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: () => setEditMode('append'),
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      width: 20,
+      height: 20,
+      borderRadius: 10,
+      borderWidth: 2,
+      borderColor: Colors.text.action,
+      backgroundColor: editMode === 'append' ? Colors.text.action : 'transparent',
+      marginRight: 8
+    }
+  }), /*#__PURE__*/React.createElement(Text, {
+    theme: "h2"
+  }, "Update Existing")))), editMode === 'append' && existingPlayerIds.length > 0 && /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      marginBottom: 15
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h2",
+    style: {
+      marginBottom: 8
+    }
+  }, "Current Members (", existingPlayerIds.length - removedPlayerIds.size, " of ", existingPlayerIds.length, ")"), /*#__PURE__*/React.createElement(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 && /*#__PURE__*/React.createElement(Text, {
+    theme: "description",
+    style: {
+      fontSize: 11,
+      marginBottom: 8,
+      fontStyle: 'italic'
+    }
+  }, "Showing first 5 of ", existingPlayerIds.length, ". Use search to find specific player IDs."), /*#__PURE__*/React.createElement(ScrollView, {
+    style: {
+      maxHeight: 150,
+      borderRadius: 8,
+      backgroundColor: Colors.views.background,
+      padding: 10
+    }
+  }, filteredExistingPlayerIds.filter(id => !removedPlayerIds.has(String(id))).map(playerId => /*#__PURE__*/React.createElement(View, {
+    key: playerId,
+    transparent: true,
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingVertical: 4
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "description"
+  }, playerId), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: () => handleRemovePlayerId(playerId)
+  }, /*#__PURE__*/React.createElement(Icons.CloseIcon, {
+    size: 14,
+    color: Colors.text.error
+  })))), filteredExistingPlayerIds.filter(id => !removedPlayerIds.has(String(id))).length === 0 && /*#__PURE__*/React.createElement(Text, {
+    theme: "description",
+    style: {
+      textAlign: 'center',
+      paddingVertical: 10
+    }
+  }, memberSearchQuery ? 'No matching player IDs' : 'No members'))), /*#__PURE__*/React.createElement(View, {
+    transparent: true,
+    style: {
+      marginBottom: 15
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    theme: "h2",
+    style: {
+      marginBottom: 8
+    }
+  }, editMode === 'replace' ? 'New Player IDs (CSV)' : 'Add Player IDs (CSV)'), /*#__PURE__*/React.createElement(TextInput, {
+    value: csvInput,
+    onFocusPosition: onFocusPosition,
+    placeholder: "e.g. player1, player2, player3\nor one per line",
+    onChangeText: setCsvInput,
+    multiline: true,
+    numberOfLines: 8,
+    style: {
+      padding: 12,
+      borderRadius: 8,
+      minHeight: 150,
+      textAlignVertical: 'top'
+    }
+  }), /*#__PURE__*/React.createElement(Text, {
+    theme: "description",
+    style: {
+      marginTop: 6,
+      fontSize: 11
+    }
+  }, "Accepts comma, space, semicolon, or newline separated values"))))), /*#__PURE__*/React.createElement(View, {
+    type: "footer",
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 10,
+      borderBottomRightRadius: 8,
+      borderBottomLeftRadius: 8
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    style: {
+      flex: 1,
+      marginRight: 5
+    },
+    type: "close",
+    title: "CANCEL",
+    onPress: () => {
+      setShowManageMembersModal(false);
+      setCsvInput('');
+      setMemberSearchQuery('');
+      setRemovedPlayerIds(new Set());
+    }
+  }), /*#__PURE__*/React.createElement(Button, {
+    style: {
+      flex: 1,
+      marginLeft: 5
+    },
+    type: "action",
+    title: manageMembersMode === 'reset' ? 'RESET' : 'UPDATE',
+    onPress: manageMembersMode === 'reset' ? handleResetMembers : handleEditMembers
+  })))));
+};
+export default GroupManagement;
+//# sourceMappingURL=GroupManagement.js.map