import { useEffect } from 'react';
import { Trash2 } from 'lucide-react';
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. 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
    ? resolveHumanDisplay(deleterId, network?.humans)
    : null;

  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.displayName}</p>
        )}
      </div>
    </div>
  );
}