"use client";

import { useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import type { Tier } from "@/lib/subscription/config";

export function PricingClient({ currentTier }: { currentTier: Tier }) {
  const [loading, setLoading] = useState(false);

  if (currentTier === "pro") {
    return (
      <p className="text-muted-foreground text-sm">
        You're on Pro. Manage your subscription through the receipt email link.
      </p>
    );
  }

  const upgrade = async () => {
    setLoading(true);
    try {
      const response = await fetch("/api/billing/checkout", { method: "POST" });
      const data = await response.json();
      if (response.ok && data.url) {
        window.location.href = data.url;
        return;
      }
      toast.error(data.message ?? "Failed to start checkout");
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "Checkout failed");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="flex justify-center">
      <Button
        className="px-6"
        disabled={loading}
        onClick={upgrade}
        size="lg"
      >
        {loading ? "Opening checkout..." : "Upgrade to Pro"}
      </Button>
    </div>
  );
}