"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useSubscription } from "../../hooks/useSubscription";
import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
import { Badge } from "../ui/badge";
import { Button } from "../ui/button";
import { useTranslations } from "next-intl";
import { Calendar, CreditCard } from "lucide-react";
import { Skeleton } from "../ui/skeleton";
import { ManageBillingButton } from "./ManageBillingButton";
function SubscriptionStatus({ onUpgrade, className }) {
  const { plan, subscription, status, isTrialing, isLoading } = useSubscription();
  const t = useTranslations("billing");
  if (isLoading) {
    return /* @__PURE__ */ jsxs(Card, { className, "data-cy": "subscription-status-loading", children: [
      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-32" }) }),
      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-3", children: [
        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
        /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })
      ] })
    ] });
  }
  if (!plan || !subscription) {
    return null;
  }
  const statusVariant = status === "active" ? "default" : status === "trialing" ? "secondary" : status === "past_due" ? "destructive" : status === "canceled" ? "outline" : "secondary";
  return /* @__PURE__ */ jsxs(Card, { className, "data-cy": "subscription-status", children: [
    /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
      /* @__PURE__ */ jsx(CardTitle, { "data-cy": "subscription-status-plan", children: t(`plans.${plan.slug}.name`) }),
      /* @__PURE__ */ jsx(Badge, { variant: statusVariant, "data-cy": "subscription-status-badge", children: status })
    ] }) }),
    /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
      subscription.currentPeriodEnd && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", "data-cy": "subscription-status-period", children: [
        /* @__PURE__ */ jsx(Calendar, { className: "h-4 w-4" }),
        /* @__PURE__ */ jsx("span", { children: isTrialing ? `Trial ends ${new Date(subscription.currentPeriodEnd).toLocaleDateString()}` : `Next billing: ${new Date(subscription.currentPeriodEnd).toLocaleDateString()}` })
      ] }),
      subscription.paymentProvider && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", "data-cy": "subscription-payment-provider", children: [
        /* @__PURE__ */ jsx(CreditCard, { className: "h-4 w-4" }),
        /* @__PURE__ */ jsx("span", { className: "capitalize", children: subscription.paymentProvider })
      ] }),
      plan.type !== "enterprise" && onUpgrade && /* @__PURE__ */ jsx(
        Button,
        {
          variant: "default",
          className: "w-full",
          onClick: onUpgrade,
          "data-cy": "subscription-status-upgrade",
          children: t("upgrade")
        }
      ),
      subscription.externalCustomerId && /* @__PURE__ */ jsx("div", { "data-cy": "subscription-manage-billing", children: /* @__PURE__ */ jsx(ManageBillingButton, { className: "w-full" }) })
    ] })
  ] });
}
export {
  SubscriptionStatus
};
