import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { GestureDetector, usePanGesture } from 'react-native-gesture-handler';

// Repro / verification screen for the orphaned-touch-event fix (follow-up to
// #4316).
//
// Purple box ("flip"): touch callbacks are attached conditionally, so
// `needsPointerData` flips false -> true mid-gesture (the onBegin re-render
// attaches onTouchesUp). Press, hold ~300ms, release:
// - without the fix: an orphaned onTouchesUp fires for a pointer that never
//   reported a down (Android: numberOfTouches -1, iOS: changed touch id -1;
//   on pre-#4316 builds this crashed the pan change calculator instead)
// - with the fix: the orphaned up event is skipped - counter stays 0
//
// Green box ("static"): touch callbacks attached from the start - the normal
// path. Each tap must count down+up (counter += 2) with and without the fix.
export default function OrphanedTouchRepro() {
  const [flipTouches, setFlipTouches] = useState(0);
  const [staticTouches, setStaticTouches] = useState(0);
  const [lastOrphan, setLastOrphan] = useState('none');
  const [pressed, setPressed] = useState(false);

  const flipPan = usePanGesture({
    onBegin: () => setPressed(true),
    onFinalize: () => setPressed(false),
    onUpdate: () => {},
    runOnJS: true,
    onTouchesUp: pressed
      ? (e) => {
          setFlipTouches((c) => c + 1);
          setLastOrphan(
            `numberOfTouches: ${e.numberOfTouches}, ` +
              `changed id: ${e.changedTouches[0]?.id ?? 'none'}`
          );
        }
      : undefined,
  });

  const staticPan = usePanGesture({
    onTouchesDown: () => setStaticTouches((c) => c + 1),
    onTouchesUp: () => setStaticTouches((c) => c + 1),
    onUpdate: () => {},
    runOnJS: true,
  });

  return (
    <View style={styles.container}>
      <Text style={styles.counter}>
        flip: {flipTouches} static: {staticTouches}
      </Text>
      <Text style={styles.orphanInfo}>last orphaned up: {lastOrphan}</Text>
      <GestureDetector gesture={flipPan}>
        <View style={[styles.box, styles.flipBox]} testID="flipBox">
          <Text style={styles.boxLabel}>flip: hold ~300ms (expect 0)</Text>
        </View>
      </GestureDetector>
      <GestureDetector gesture={staticPan}>
        <View style={[styles.box, styles.staticBox]} testID="staticBox">
          <Text style={styles.boxLabel}>static (expect +2 per tap)</Text>
        </View>
      </GestureDetector>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  counter: {
    fontSize: 16,
    marginBottom: 8,
  },
  orphanInfo: {
    fontSize: 13,
    opacity: 0.6,
    marginBottom: 24,
  },
  box: {
    width: 260,
    height: 150,
    borderRadius: 16,
    justifyContent: 'center',
    alignItems: 'center',
    marginVertical: 12,
  },
  flipBox: {
    backgroundColor: 'mediumpurple',
  },
  staticBox: {
    backgroundColor: 'mediumseagreen',
  },
  boxLabel: {
    color: 'white',
    fontSize: 16,
  },
});