import React, { useEffect, useRef } from "react";
import { Trash } from "@phosphor-icons/react";
import { Modal } from "./ui.jsx";

export function ConfirmationDialog({
  request,
  busy,
  error,
  onClose,
  onAccept,
}) {
  const cancelButton = useRef(null);
  const lastSummary = useRef(null);
  useEffect(() => {
    if (request) {
      const { title, description, detail, label } = request;
      lastSummary.current = { title, description, detail, label };
    }
  }, [request]);
  // Radix keeps the closing dialog mounted for its exit animation.
  const summary = request || lastSummary.current;
  return (
    <Modal
      open={!!request}
      onOpenChange={(open) => {
        if (!open) onClose();
      }}
      title={summary?.title || "Confirm deletion"}
      description={summary?.description}
      onOpenAutoFocus={(event) => {
        event.preventDefault();
        cancelButton.current?.focus();
      }}
    >
      <div className="confirmation-summary">
        <span className="confirmation-icon">
          <Trash size={24} />
        </span>
        <p>{summary?.detail || "This action cannot be undone."}</p>
      </div>
      {error && (
        <p className="error" role="alert">
          {error}
        </p>
      )}
      <div className="form-actions">
        <button
          ref={cancelButton}
          type="button"
          onClick={onClose}
          disabled={busy}
        >
          Cancel
        </button>
        <button
          type="button"
          className="destructive"
          onClick={onAccept}
          disabled={busy}
        >
          <Trash size={16} /> {busy ? "Deleting…" : summary?.label || "Delete"}
        </button>
      </div>
    </Modal>
  );
}