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

export function AdminModal() {
  const {
    adminVisible,
    setAdminVisible,
    staffList,
    newStaffName,
    setNewStaffName,
    addStaff,
    deleteStaff,
    updateStaffPermission,
    themeColor,
  } = useApp();

  return (
    <Modal visible={adminVisible} animationType="slide">
      <View style={[styles.container, { paddingBottom: 40, paddingTop: 0 }]}>
        <View style={styles.modalHeader}>
          <Text style={styles.modalHeaderTitle}>⚙️ Admin: Staff Roster</Text>
          <TouchableOpacity onPress={() => setAdminVisible(false)}>
            <Text style={{ fontSize: 24, color: '#333', padding: 5 }}>✕</Text>
          </TouchableOpacity>
        </View>

        <View style={{ padding: 20 }}>
          <Text style={{ fontSize: 13, color: '#888', marginBottom: 15 }}>
            Add or remove staff members. Only active staff appear on the login screen.
          </Text>

          <View style={{ flexDirection: 'row', gap: 10, marginBottom: 20 }}>
            <TextInput
              style={[styles.dimInput, { flex: 1, textAlign: 'left', fontSize: 16 }]}
              placeholder="Full name (e.g. Anisha)"
              value={newStaffName}
              onChangeText={setNewStaffName}
              onSubmitEditing={() => addStaff(newStaffName)}
            />
            <TouchableOpacity
              style={[styles.packBtn, { backgroundColor: themeColor, paddingHorizontal: 20 }]}
              onPress={() => addStaff(newStaffName)}
            >
              <Text style={{ color: '#fff', fontWeight: 'bold', fontSize: 15 }}>ADD</Text>
            </TouchableOpacity>
          </View>
        </View>

        <FlatList
          data={staffList}
          keyExtractor={item => item.id.toString()}
          contentContainerStyle={{ paddingHorizontal: 20 }}
          ListEmptyComponent={
            <Text style={{ color: '#aaa', textAlign: 'center', marginTop: 30 }}>
              No staff members yet. Add one above.
            </Text>
          }
          renderItem={({ item }) => (
            <View style={[styles.adminStaffRow, { flexDirection: 'column', gap: 10 }]}>
              <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                <View style={{ flex: 1 }}>
                  <Text style={styles.adminStaffName}>{item.name}</Text>
                  <Text style={{ fontSize: 12, color: '#888', marginTop: 2, textTransform: 'capitalize' }}>
                    {item.role || 'secondary'}
                  </Text>
                </View>
                <TouchableOpacity style={styles.adminTrashBtn} onPress={() => deleteStaff(item.id)}>
                  <Text style={{ fontSize: 20 }}>🗑️</Text>
                </TouchableOpacity>
              </View>
              <View style={{ flexDirection: 'row', gap: 8 }}>
                {[['Pick', 'can_pick'], ['Pack', 'can_pack'], ['Print', 'can_print'], ['Active', 'is_active']].map(([label, field]) => (
                  <TouchableOpacity
                    key={field}
                    onPress={() => updateStaffPermission(item.id, field, !item[field])}
                    style={{
                      flex: 1, alignItems: 'center', paddingVertical: 7, borderRadius: 8,
                      backgroundColor: item[field] ? '#e6f4ef' : '#f4f4f4',
                      borderWidth: 1, borderColor: item[field] ? '#a3d9c3' : '#e0e0e0',
                    }}
                  >
                    <Text style={{ fontSize: 10, fontWeight: '800', color: item[field] ? '#007a58' : '#aaa', textTransform: 'uppercase', letterSpacing: 0.4 }}>
                      {label}
                    </Text>
                    <Text style={{ fontSize: 16, marginTop: 2 }}>{item[field] ? '✅' : '○'}</Text>
                  </TouchableOpacity>
                ))}
              </View>
            </View>
          )}
        />
      </View>
    </Modal>
  );
}
