"use client";

import { Loader2 } from "lucide-react";
import { useState } from "react";
import { cn } from "@/lib/utils";

export function ManageSubscriptionButton({
  className,
}: {
  className?: string;
}) {
  const [isPending, setIsPending] = useState(false);

  async function handleOpenPortal() {
    if (isPending) {
      return;
    }

    setIsPending(true);

    try {
      const response = await fetch("/api/billing/portal", {
        method: "POST",
      });

      const data = (await response.json()) as { error?: string; url?: string };

      if (!response.ok || !data.url) {
        window.alert(data.error || "打开订阅管理失败，请稍后重试。");
        return;
      }

      window.location.assign(data.url);
    } catch (error) {
      console.error("[ManageSubscriptionButton] portal error", error);
      window.alert("打开订阅管理失败，请稍后重试。");
    } finally {
      setIsPending(false);
    }
  }

  return (
    <button
      className={cn(
        "inline-flex items-center justify-center gap-2 rounded-xl border border-white/20 px-4 py-2 text-sm text-zinc-100 hover:border-white/40",
        isPending && "cursor-not-allowed opacity-70",
        className
      )}
      disabled={isPending}
      onClick={handleOpenPortal}
      type="button"
    >
      {isPending ? (
        <>
          <Loader2 className="h-4 w-4 animate-spin" />
          正在跳转...
        </>
      ) : (
        "管理订阅"
      )}
    </button>
  );
}