import { useCallback, useEffect, useState } from "react";
import { createPortal } from "react-dom";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { softDeleteParticle } from "@/lib/firestore-particles";
import { particlePath, toFirestoreDocPath } from "@/lib/particle-path";
import type { Particle } from "@/api/types";

interface DeleteParticleOverlayProps {
  networkId: string;
  streamId: string;
  particle: Particle;
  userId: string;
  onClose: () => void;
}

export function DeleteParticleOverlay({
  networkId,
  streamId,
  particle,
  userId,
  onClose,
}: DeleteParticleOverlayProps) {
  const [deleting, setDeleting] = useState(false);

  const handleDelete = useCallback(async () => {
    if (deleting) return;
    setDeleting(true);
    try {
      const docPath = toFirestoreDocPath(
        particlePath(networkId, [streamId, particle.id]),
      );
      await softDeleteParticle(docPath, userId);
      toast.success("Particle deleted");
      onClose();
    } catch (e) {
      const message = e instanceof Error ? e.message : "Failed to delete particle";
      toast.error(message);
      setDeleting(false);
    }
  }, [deleting, networkId, onClose, particle.id, streamId, userId]);

  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        e.preventDefault();
        e.stopPropagation();
        onClose();
      }
    };
    window.addEventListener("keydown", handler, { capture: true });
    return () => window.removeEventListener("keydown", handler, { capture: true });
  }, [onClose]);

  return createPortal(
    <div className="fixed inset-0 z-[100]">
      <div
        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
        onClick={onClose}
      />
      <div className="absolute left-1/2 top-1/2 w-full max-w-sm -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-white/10 bg-white/5 p-6 shadow-2xl backdrop-blur-xl">
        <div className="mb-3 flex items-center justify-between">
          <h2 className="text-sm font-semibold text-white/70">Delete this particle?</h2>
          <span className="text-xs text-white/30">
            <kbd className="rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs">
              Esc
            </kbd>{" "}
            to close
          </span>
        </div>

        <p className="text-sm text-white/60">
          This cannot be undone. Other viewers will see a "This particle was
          deleted" message in its place.
        </p>

        <div className="mt-5 flex items-center justify-end gap-2">
          <Button variant="ghost" size="sm" onClick={onClose} disabled={deleting}>
            Cancel
          </Button>
          <Button
            variant="destructive"
            size="sm"
            onClick={handleDelete}
            disabled={deleting}
          >
            {deleting ? "Deleting…" : "Delete"}
          </Button>
        </div>
      </div>
    </div>,
    document.body,
  );
}