import { Button } from "@repo/shadcn-ui/components/button";
import { FormActions, FormDialog } from "@repo/shadcn-ui/components/form-dialog";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useTranslation } from "react-i18next";

import type { RelationshipDTO } from "../common";

import { inventoryApi, inventoryKeys } from "./inventory-api";
import { InventoryFeedback } from "./inventory-feedback";

export function EndRelationshipDialog({
  relationship,
  companyId,
  csrfToken,
  sourceName,
  targetName,
  onClose,
}: {
  relationship: RelationshipDTO;
  companyId: string;
  csrfToken: string;
  sourceName: string;
  targetName: string;
  onClose: () => void;
}) {
  const { t } = useTranslation("assets");
  const client = useQueryClient();
  const mutation = useMutation({
    mutationFn: () => inventoryApi.endRelationship(companyId, relationship.id, csrfToken),
    onSuccess: () => client.invalidateQueries({ queryKey: inventoryKeys.company(companyId) }),
  });
  return (
    <FormDialog
      cancelLabel={t("cancel")}
      formActions
      onOpenChange={(open) => {
        if (!open) {
          onClose();
        }
      }}
      open
      title={t("endRelationship")}
    >
      <p className="text-sm">
        {relationship.values.name} · {sourceName} → {targetName}
      </p>
      <p className="text-sm text-muted-foreground">{t("endRelationshipConfirm")}</p>
      <InventoryFeedback error={mutation.error} />
      <FormActions>
        <Button
          disabled={mutation.isPending}
          onClick={() => mutation.mutate(undefined, { onSuccess: onClose })}
          type="button"
        >
          {t("endRelationship")}
        </Button>
      </FormActions>
    </FormDialog>
  );
}