"use client";

import { useTransition } from "react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import { updateCommissionStatus } from "./actions";
import { Button } from "@/components/ui/button";

export function CommissionStatusAction({
  id,
  status,
}: {
  id: string;
  status: string;
}) {
  const router = useRouter();
  const [pending, startTransition] = useTransition();

  if (status === "received") {
    return <span className="text-xs text-muted-foreground">—</span>;
  }

  function markReceived() {
    startTransition(async () => {
      const res = await updateCommissionStatus(id, "received");
      if (res.error) {
        toast.error(res.error);
        return;
      }
      toast.success("Marked as received");
      router.refresh();
    });
  }

  return (
    <Button
      size="sm"
      variant="outline"
      onClick={markReceived}
      disabled={pending}
    >
      {pending ? "Saving…" : "Mark received"}
    </Button>
  );
}