import { useEffect } from 'react';
import { Text, View } from 'react-native';
import { Trash2 } from 'lucide-react-native';
import type { Particle } from '@/api/types';
import { useNetwork } from '@/hooks/use-networks';
import { resolveHumanDisplay } from '@/lib/humans';

// How long to linger on a tombstone before auto-advancing. Same cadence as
// desktop — a beat long enough to read "this was deleted," not so long it
// stalls the stream.
const TOMBSTONE_DURATION_MS = 2000;

interface DeletedParticleViewProps {
  particle: Particle;
  networkId: string;
  paused: boolean;
  onEnded: () => void;
}

export function DeletedParticleView({
  particle,
  networkId,
  paused,
  onEnded,
}: DeletedParticleViewProps) {
  const network = useNetwork(networkId);
  const deleterId =
    'deleted_by_human_id' in particle
      ? particle.deleted_by_human_id
      : undefined;
  const deleter = deleterId
    ? resolveHumanDisplay(deleterId, network?.humans)
    : null;

  useEffect(() => {
    if (paused) return;
    const timeout = setTimeout(onEnded, TOMBSTONE_DURATION_MS);
    return () => clearTimeout(timeout);
  }, [paused, onEnded, particle.id]);

  return (
    <View className="flex-1 items-center justify-center px-8">
      <Trash2 color="rgba(255,255,255,0.4)" size={28} strokeWidth={1.5} />
      <Text className="text-white/70 mt-3 text-base font-medium">
        This particle was deleted
      </Text>
      {deleter ? (
        <Text className="text-white/40 mt-1 text-xs">
          by {deleter.displayName}
        </Text>
      ) : null}
    </View>
  );
}
