AgentHub/client/src/components/config/ConfirmDeleteModal.tsx

/**
 * @file ConfirmDeleteModal.tsx
 * @description Confirmation modal for deleting a config artifact. Tool-
 * agnostic — the caller supplies the async delete action; the modal only
 * tracks the busy state and Escape-to-cancel behavior.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { useCallback, useRef, useState } from "react";
import { useDialog } from "../../hooks/useDialog";
import { useTranslation } from "react-i18next";
import { ShieldAlert, Trash2 } from "lucide-react";
import type { CcArtifactType } from "../../lib/api";

/** See EditorModal.tsx's `DefaultScope` — same reasoning: Codex instantiates
 *  `TScope` as `"user" | "project"` instead of casting into Claude's wider
 *  default. */
export type ConfirmDeleteState<
  TType extends string = CcArtifactType,
  TScope extends string = "user" | "project" | "auto-memory",
> = {
  type: TType;
  scope: TScope;
  name?: string;
  path: string;
  project?: string; // set for type === "auto-memory"
} | null;

interface ConfirmDeleteModalProps<
  TType extends string = CcArtifactType,
  TScope extends string = "user" | "project" | "auto-memory",
> {
  state: NonNullable<ConfirmDeleteState<TType, TScope>>;
  onCancel: () => void;
  onConfirm: () => Promise<void>;
}

export function ConfirmDeleteModal<
  TType extends string = CcArtifactType,
  TScope extends string = "user" | "project" | "auto-memory",
>({ state, onCancel, onConfirm }: ConfirmDeleteModalProps<TType, TScope>) {
  const { t } = useTranslation("ccConfig");
  const [busy, setBusy] = useState(false);

  const panelRef = useRef<HTMLDivElement>(null);
  const cancelRef = useRef<HTMLButtonElement>(null);
  // Focus starts on Cancel — the safe answer — and Escape cancels.
  useDialog(true, panelRef, busy ? undefined : onCancel, cancelRef);

  const handleConfirm = useCallback(async () => {
    setBusy(true);
    try {
      await onConfirm();
    } finally {
      setBusy(false);
    }
  }, [onConfirm]);

  return (
    <div
      className="fixed inset-0 bg-surface-0/70 z-50 flex items-center justify-center p-4"
      onClick={busy ? undefined : onCancel}
    >
      <div
        ref={panelRef}
        role="alertdialog"
        aria-modal="true"
        aria-labelledby="cc-confirm-delete-title"
        aria-describedby="cc-confirm-delete-body"
        className="relative w-full max-w-lg rounded-xl border border-status-danger/40 bg-surface-1"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="border-b border-border px-4 py-2.5 flex items-center gap-2">
          <ShieldAlert className="w-4 h-4 text-status-danger" />
          <span id="cc-confirm-delete-title" className="text-sm font-medium text-fg-primary flex-1">
            {t("edit.confirmDelete")}
          </span>
        </div>
        <div className="p-4 space-y-3">
          <p id="cc-confirm-delete-body" className="text-xs text-fg-secondary leading-relaxed">
            {t("edit.confirmDeleteBody")}
          </p>
          <div className="rounded-md border border-border bg-surface-2 px-3 py-2 font-mono text-[11px] text-fg-secondary break-all">
            {t("edit.confirmDeletePath", { path: state.path })}
          </div>
        </div>
        <div className="border-t border-border px-4 py-3 flex items-center justify-end gap-2">
          <button
            ref={cancelRef}
            type="button"
            onClick={onCancel}
            disabled={busy}
            className="text-[12px] font-medium px-3 py-1.5 rounded-md border border-border bg-surface-2 hover:bg-surface-3 text-fg-secondary disabled:opacity-60"
          >
            {t("edit.cancel")}
          </button>
          <button
            type="button"
            onClick={handleConfirm}
            disabled={busy}
            className="text-[12px] font-medium px-3 py-1.5 rounded-md border border-status-danger/50 bg-status-danger/15 hover:bg-status-danger/25 text-status-danger inline-flex items-center gap-1.5 disabled:opacity-60"
          >
            <Trash2 className="w-3.5 h-3.5" />
            {busy ? t("edit.deleting") : t("edit.confirmDeleteAction")}
          </button>
        </div>
      </div>
    </div>
  );
}