"use client";

import { useRouter } from "next/navigation";
import { ArrowRightIcon } from "@heroicons/react/24/outline";
import { useStartAddressMatching } from "@/lib/bulkUpload/client";

interface Props {
  portfolioId: string;
  uploadId: string;
  filename: string;
}

export default function StartAddressMatchingButton({ portfolioId, uploadId }: Props) {
  const router = useRouter();
  const { mutate, isPending, error } = useStartAddressMatching(portfolioId, uploadId);

  return (
    <div className="mt-4">
      <button
        onClick={() => mutate(undefined, { onSuccess: () => router.refresh() })}
        disabled={isPending}
        className={`inline-flex items-center gap-2 px-5 py-2 rounded-xl bg-gradient-to-br from-[#14163d] to-[#15173e] text-white text-sm font-bold transition-opacity ${
          isPending ? "opacity-50 cursor-not-allowed" : "hover:opacity-90"
        }`}
      >
        {isPending ? (
          <>
            <span className="w-4 h-4 rounded-full border-2 border-white border-t-transparent animate-spin" />
            Starting…
          </>
        ) : (
          <>
            Start Onboarding
            <ArrowRightIcon className="h-4 w-4" />
          </>
        )}
      </button>
      {error && (
        <p className="mt-2 text-xs text-red-500">
          {error.message}
        </p>
      )}
    </div>
  );
}
