import { useEffect } from "react";
import { Trash2 } from "lucide-react";
import type { Particle } from "@/api/types";
import { useNetwork } from "@/hooks/use-networks";

// How long to linger on a tombstone before auto-advancing. Matches the
// "reading" cadence of a short text particle.
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
    ? network?.humans?.find((h) => h.id === deleterId)
    : undefined;

  useEffect(() => {
    if (paused) return;

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

  return (
    <div className="flex h-full w-full items-center justify-center bg-gradient-to-b from-black/40 via-black/20 to-black/40 px-8">
      <div className="flex flex-col items-center gap-3 text-center">
        <Trash2 className="text-white/40 size-6" />
        <p className="text-white/70 text-base font-medium">
          This particle was deleted
        </p>
        {deleter && (
          <p className="text-white/40 text-xs">by {deleter.email_prefix}</p>
        )}
      </div>
    </div>
  );
}