"use client";

import { useRouter } from "next/navigation";
import { useState, type ReactNode } from "react";

import { buttonVariants } from "@/components/ui/button";
import { AUTH_NEXT_CHECKOUT } from "@/lib/auth/safe-next-path";
import { cn } from "@/lib/utils";

type Props = {
  className?: string;
  children?: ReactNode;
};

/** Requires sign-in before Razorpay checkout; returns to checkout after login. */
export function ProceedToCheckoutButton({
  className,
  children = "Checkout",
}: Props) {
  const router = useRouter();
  const [loading, setLoading] = useState(false);

  async function onClick() {
    setLoading(true);
    try {
      const res = await fetch("/api/auth/session");
      const data = res.ok ? ((await res.json()) as { user?: { email: string } }) : null;
      if (data?.user?.email) {
        router.push("/checkout");
        return;
      }
      router.push(`/login?next=${encodeURIComponent(AUTH_NEXT_CHECKOUT)}`);
    } catch {
      router.push(`/login?next=${encodeURIComponent(AUTH_NEXT_CHECKOUT)}`);
    } finally {
      setLoading(false);
    }
  }

  return (
    <button
      type="button"
      disabled={loading}
      onClick={onClick}
      className={cn(buttonVariants({ variant: "default" }), className)}
    >
      {loading ? "Checking…" : children}
    </button>
  );
}