shoc-frontend-new/src/app/(protected)/completion-docs/_components/delete-completion-template-dialog.tsx

import { CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material";
import { useNavigate } from "react-router";
import { Button } from "@/components/ui/button";
import { DialogCancelButton } from "@/components/ui/dialog-cancel-button";
import { Text } from "@/components/ui/text";
import type {
  CompletionTemplate,
  LinkedWorkOrders,
} from "@/domain/completion-templates/types/completion-template";
import { useDeleteCompletionTemplate } from "@/domain/completion-templates/use-cases/use-completion-template-mutations";
import { useLinkedWorkOrders } from "@/domain/completion-templates/use-cases/use-completion-templates";
import { buildWorkOrderIdsHref } from "@/domain/work-orders/utils/work-order-ids-filter";

type DeleteCompletionTemplateDialogProps = {
  template: CompletionTemplate;
  open: boolean;
  onClose: () => void;
  onDeleted: () => void;
};

function deleteMessage(name: string, linked: LinkedWorkOrders): string {
  if (linked.count === 0) return `This will permanently remove "${name}". This cannot be undone.`;
  const plural = linked.count === 1 ? "" : "s";
  return (
    `This will permanently remove "${name}". It's still linked to ${linked.count} open work ` +
    `order${plural} through its Service — deleting it won't change that Service, but new ` +
    "documents generated for those work orders will fall back to a generic procedure until " +
    "reassigned. This cannot be undone."
  );
}

function LinkedWorkOrdersMessage({
  name,
  linked,
}: {
  name: string;
  linked: ReturnType<typeof useLinkedWorkOrders>;
}) {
  if (linked.isPending) {
    return (
      <div className="flex items-center gap-2" role="status">
        <CircularProgress size={16} />
        <Text variant="description" tone="muted">
          Checking linked work orders…
        </Text>
      </div>
    );
  }
  if (linked.isError) {
    return (
      <Text variant="error">
        Couldn't check which work orders use this template. Close this and try again.
      </Text>
    );
  }
  return <Text variant="description">{deleteMessage(name, linked.data)}</Text>;
}

/** Deleting always asks first, and names the open work orders that still depend on the template. */
export function DeleteCompletionTemplateDialog({
  template,
  open,
  onClose,
  onDeleted,
}: DeleteCompletionTemplateDialogProps) {
  const navigate = useNavigate();
  const linked = useLinkedWorkOrders(open ? template.id : null);
  const remove = useDeleteCompletionTemplate();
  const linkedIds = linked.data?.workOrderIds ?? [];

  function confirmDelete() {
    remove.mutate(template.id, { onSuccess: onDeleted });
  }

  return (
    <Dialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
      <DialogTitle>Delete this template?</DialogTitle>
      <DialogContent>
        <LinkedWorkOrdersMessage name={template.name} linked={linked} />
      </DialogContent>
      <DialogActions>
        <DialogCancelButton onClick={onClose} />
        {linkedIds.length > 0 && (
          <Button variant="outline" onClick={() => void navigate(buildWorkOrderIdsHref(linkedIds))}>
            View linked work orders
          </Button>
        )}
        <Button
          variant="destructive"
          onClick={confirmDelete}
          disabled={!linked.isSuccess || remove.isPending}
        >
          Delete
        </Button>
      </DialogActions>
    </Dialog>
  );
}