partner-risk-indicator.tsx

import { FRAUD_SEVERITY_CONFIG } from "@/lib/api/fraud/constants";
import { useFraudGroupCount } from "@/lib/swr/use-fraud-groups-count";
import { FraudGroupCountByPartner } from "@/lib/types";
import { ButtonLink } from "@/ui/placeholders/button-link";
import { DynamicTooltipWrapper, Flag } from "@dub/ui";
import { cn } from "@dub/utils";
import { useParams, usePathname } from "next/navigation";

interface PartnerRiskIndicatorProps {
  partnerId: string;
}

export function PartnerRiskIndicator({ partnerId }: PartnerRiskIndicatorProps) {
  const { slug } = useParams();
  const pathname = usePathname();

  const { fraudGroupCount, loading } = useFraudGroupCount<
    FraudGroupCountByPartner[]
  >({
    query: {
      groupBy: "partnerId",
      status: "pending",
    },
    enabled: !!partnerId,
    ignoreParams: true,
  });

  if (loading) {
    return null;
  }

  const currentPartnerFraudEvents = fraudGroupCount?.find(
    (event) => event.partnerId === partnerId,
  );

  if (!currentPartnerFraudEvents || currentPartnerFraudEvents._count === 0) {
    return null;
  }

  const source = pathname?.includes("/applications")
    ? "applications"
    : "partners";

  const tooltipContent = (
    <div className="grid max-w-44 gap-2 rounded-2xl p-3 text-center">
      {source === "applications" ? (
        <span className="text-xs font-medium leading-4 text-neutral-600">
          This partner has been flagged for potential risk.
        </span>
      ) : (
        <span className="text-sm leading-4 text-neutral-600">
          Risk events detected
        </span>
      )}

      <ButtonLink
        variant="secondary"
        className="h-6 w-full items-center justify-center rounded-md px-1.5 py-2 text-sm font-medium"
        href={`/${slug}/program/risks?partnerId=${partnerId}`}
        target="_blank"
      >
        Review events
      </ButtonLink>
    </div>
  );

  return (
    <DynamicTooltipWrapper
      tooltipProps={{
        content: tooltipContent,
      }}
    >
      <Flag
        variant="fill"
        className={cn(
          "size-3.5 cursor-pointer",
          FRAUD_SEVERITY_CONFIG["high"].fg,
        )}
      />
    </DynamicTooltipWrapper>
  );
}