import { Modal, Text, TouchableOpacity, View } from 'react-native';
import { useApp } from '../context/AppContext';
import { useAuth } from '../context/AuthContext';
import styles from '../styles/index';

export function WhoIsPackingModal() {
  const { staffList, themeColor } = useApp();
  const { staffName, showLogin, securityMode, selectStaff } = useAuth();

  if (securityMode !== 'shared_honor') return null;

  const activeStaff = staffList.filter(s => s.is_active);

  return (
    <Modal visible={showLogin} transparent animationType="fade">
      <View style={styles.modalOverlay}>
        <View style={styles.modalContent}>
          <Text style={{ fontSize: 22, fontWeight: 'bold', marginBottom: 20, textAlign: 'center' }}>
            Who is packing?
          </Text>
          <View style={styles.rosterGrid}>
            {activeStaff.map(s => (
              <TouchableOpacity
                key={s.id}
                style={[styles.rosterBtn, staffName === s.name && [styles.rosterBtnActive, { backgroundColor: themeColor }]]}
                onPress={() => selectStaff(s)}
              >
                <Text style={[styles.rosterBtnText, staffName === s.name && { color: '#fff' }]}>
                  {s.name}
                </Text>
              </TouchableOpacity>
            ))}
            {activeStaff.length === 0 && (
              <Text style={{ color: '#999', textAlign: 'center', width: '100%', marginBottom: 10 }}>
                No active staff members. Contact your administrator.
              </Text>
            )}
          </View>
        </View>
      </View>
    </Modal>
  );
}
