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

export function PickList() {
  const {
    showPickList,
    setShowPickList,
    getPickList,
    masterSettings,
    themeColor,
    handlePickMaster,
    handleResetMaster,
    masterPickScannerAllowed,
    setIsScanning,
  } = useApp();

  return (
    <Modal visible={showPickList} animationType="slide">
      <View style={[styles.container, { paddingBottom: 40, paddingTop: 0 }]}>
        <View style={styles.modalHeader}>
          <Text style={styles.modalHeaderTitle}>Master Pick List</Text>
          <TouchableOpacity onPress={() => setShowPickList(false)}>
            <Text style={{ fontSize: 24, color: '#333', padding: 5 }}>✕</Text>
          </TouchableOpacity>
        </View>

        <FlatList
          data={getPickList()}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({ item }) => {
            const isP = item.picked >= item.qty;
            const pickedByOther = isP && item.pickedBy.length > 0;
            const isLowStock =
              masterSettings.showLowStockWarning &&
              item.stock_level !== null &&
              item.stock_level <= masterSettings.lowStockThreshold;

            return (
              <TouchableOpacity
                style={[styles.itemRow, isP && (pickedByOther ? styles.itemPickedOther : styles.itemPicked)]}
                pressRetentionOffset={{ top: 20, left: 20, right: 20, bottom: 20 }}
                onPress={() => handlePickMaster(item.sku)}
                onLongPress={() => handleResetMaster(item.sku)}
                delayPressIn={0}
              >
                {masterSettings.showProductImages ? (
                  <Image source={{ uri: item.img }} style={styles.thumb} />
                ) : null}
                <View style={{ flex: 1 }}>
                  <Text style={[styles.itemName, isP && !pickedByOther && styles.strikethrough]}>{item.name}</Text>
                  <Text style={{ fontSize: 12, color: '#666' }}>{item.sku}</Text>
                  {isLowStock && (
                    <Text style={styles.lowStockWarning}>⚠️ Only {item.stock_level} left in stock!</Text>
                  )}
                  {pickedByOther && (
                    <Text style={styles.otherPickerBadge}>👤 Picked by {item.pickedBy.join(', ')}</Text>
                  )}
                </View>
                <View style={[styles.qtyBadge, isP ? [styles.qtyBadgeDone, { backgroundColor: themeColor }] : styles.qtyBadgePending]}>
                  <Text style={[styles.itemQty, { color: themeColor }, isP && { color: '#fff' }]}>
                    {item.picked} / {item.qty}
                  </Text>
                </View>
              </TouchableOpacity>
            );
          }}
        />

        <View style={{ padding: 20 }}>
          {masterSettings.enableScanner && (
            <TouchableOpacity
              style={[styles.packBtn, { backgroundColor: masterPickScannerAllowed ? '#007ace' : '#95a5a6' }]}
              onPress={() => {
                if (!masterPickScannerAllowed) {
                  Alert.alert('Scanner Disabled', 'This pick list has items without SKU. Pick by name instead.');
                  return;
                }
                setIsScanning(true);
              }}
            >
              <Text style={{ color: '#fff', fontWeight: 'bold', fontSize: 18 }}>SCAN ITEM</Text>
            </TouchableOpacity>
          )}
        </View>
      </View>
    </Modal>
  );
}
