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>
  );
}