Passcode Lock

const PasscodeGate: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const passcode = useSettingsStore((state) => state.passcode);
  const [unlocked, setUnlocked] = useState(!passcode);

  useEffect(() => {
    if (!passcode) setUnlocked(true);
  }, [passcode]);

  if (passcode && !unlocked) {
    return <PasscodeScreen passcode={passcode} onSuccess={() => setUnlocked(true)} />;
  }

  return <>{children}</>;
};

const PasscodeScreen: React.FC<Props> = ({ passcode, onSuccess }) => {
  const { keys: nostrKeys } = useNostrKeysContext();
  const [value, setValue] = useState('');
  const [keyIdx, setKeyIdx] = useState(0);
  const opacity = useRef(new Animated.Value(1)).current;
  const shake = useRef(new Animated.Value(0)).current;

  const handlePress = (val: string) => {
    if (val.length > passcode.length) return;
    setValue(val);
    
    if (val.length === passcode.length) {
      if (val === passcode) {
        // Success: fade out and unlock
        Animated.timing(opacity, {
          toValue: 0,
          duration: 300,
          useNativeDriver: true,
        }).start(() => onSuccess());
      } else {
        // Failure: shake animation and reset
        Animated.sequence([
          Animated.timing(shake, { toValue: -10, duration: 50, useNativeDriver: true }),
          Animated.timing(shake, { toValue: 10, duration: 50, useNativeDriver: true }),
          Animated.timing(shake, { toValue: -10, duration: 50, useNativeDriver: true }),
          Animated.timing(shake, { toValue: 0, duration: 50, useNativeDriver: true }),
        ]).start();
        
        setTimeout(() => {
          setValue('');
          setKeyIdx((k) => k + 1);
        }, 200);
      }
    }
  };

  return (
    <BlurView className="bg-background flex-1">
      <Animated.View style={{ opacity, transform: [{ translateX: shake }] }}>
        <VStack align="center" justify="center" flex={1}>
          <Avatar seed={nostrKeys?.pubkey} size={80} />
          <Text>Welcome back, {getUsername(nostrKeys?.pubkey || '')}</Text>
          
          {/* Dot indicators */}
          <HStack>
            {Array.from({ length: passcode.length }).map((_, i) => (
              <View
                key={i}
                className={`mx-1.5 h-3 w-3 rounded-full ${
                  value.length > i ? 'bg-foreground' : 'border-foreground border'
                }`}
              />
            ))}
          </HStack>
          
          <NumericKeyboard onKeyPress={handlePress} />
        </VStack>
      </Animated.View>
    </BlurView>
  );
};

const NumericKeyboard: React.FC<Props> = ({ onKeyPress }) => {
  const inputRef = useRef('');

  const handlePress = useCallback(
    (value: KeyVal) => {
      let newValue: string;
      if (String(value) === '<') {
        EnhancedHaptics.actionHaptic();
        newValue = inputRef.current.slice(0, -1);
      } else {
        EnhancedHaptics.buttonHaptic();
        newValue = inputRef.current + String(value);
      }
      inputRef.current = newValue;
      onKeyPress(newValue);
    },
    [onKeyPress]
  );

  const buttons: KeyVal[][] = [
    ['1', '2', '3'],
    ['4', '5', '6'],
    ['7', '8', '9'],
    ['', '0', '<'],
  ];

  return (
    <VStack align="center">
      {buttons.map((row, rowIndex) => (
        <HStack key={rowIndex} justify="space-between">
          {row.map(renderButton)}
        </HStack>
      ))}
    </VStack>
  );
};