"use client";

import { useState } from "react";
import { ApiError, api } from "@/lib/api";
import { Button } from "@/components/Button";

/* Opens Paddle's hosted customer portal in a new tab. The account learns its
 * paddle_customer_id from its first paid subscription's webhook, so this reports
 * a plain message rather than erroring when there is no billing account yet. */
export function ManageBillingButton() {
    const [busy, setBusy] = useState(false);
    const [note, setNote] = useState<string | null>(null);

    async function open() {
        setBusy(true);
        setNote(null);
        try {
            const { url } = await api.billingPortal();
            window.open(url, "_blank", "noopener");
        } catch (e) {
            setNote(e instanceof ApiError ? e.message : "Could not open billing.");
        } finally {
            setBusy(false);
        }
    }

    return (
        <span className="inline-flex items-center gap-2">
            <Button type="button" variant="line" onClick={open} disabled={busy}>
                {busy ? "Opening…" : "Manage billing"}
            </Button>
            {note && <span className="text-[0.78rem] text-ink-3">{note}</span>}
        </span>
    );
}