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

export function LockOverrideModal() {
  const {
    showLockOverrideModal,
    setShowLockOverrideModal,
    lockInfo,
    lockCountdown,
    handleLockOverrideConfirm,
  } = useApp();

  return (
    <Modal visible={showLockOverrideModal} transparent={true} animationType="fade">
      <View style={styles.centeredView}>
        <View style={styles.lockOverrideModal}>
          <Text style={styles.lockOverrideTitle}>⚠️ Order Locked</Text>
          <Text style={styles.lockOverrideMessage}>
            This order is being packed by <Text style={{ fontWeight: 'bold' }}>{lockInfo}</Text>
          </Text>
          <Text style={styles.lockOverrideSubtitle}>
            Please confirm they are not currently packing...
          </Text>
          <View style={styles.lockCountdownBox}>
            <Text style={styles.lockCountdownText}>
              {lockCountdown > 0 ? `${lockCountdown}s` : 'READY'}
            </Text>
          </View>
          {lockCountdown === 0 ? (
            <TouchableOpacity
              style={[styles.packBtn, { backgroundColor: '#c0392b' }]}
              onPress={handleLockOverrideConfirm}
            >
              <Text style={{ color: '#fff', fontWeight: 'bold' }}>CONFIRM & PACK ANYWAY</Text>
            </TouchableOpacity>
          ) : (
            <TouchableOpacity
              style={[styles.packBtn, { backgroundColor: '#95a5a6', opacity: 0.6 }]}
              disabled
            >
              <Text style={{ color: '#fff', fontWeight: 'bold' }}>Please wait...</Text>
            </TouchableOpacity>
          )}
          <TouchableOpacity onPress={() => setShowLockOverrideModal(false)}>
            <Text style={{ color: '#3498db', fontWeight: 'bold', textAlign: 'center', marginTop: 10 }}>CANCEL</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Modal>
  );
}
