"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { BILLING_REGISTRY } from "@nextsparkjs/registries/billing-registry";
import { useSubscription } from "../../hooks/useSubscription";
import { Button } from "../ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card";
import { Badge } from "../ui/badge";
import { Check, X } from "lucide-react";
import { useTranslations } from "next-intl";
import { cn } from "../../lib/utils";
function PricingTable({ onSelectPlan, className }) {
  const t = useTranslations("billing");
  const { planSlug: currentPlanSlug } = useSubscription();
  const visiblePlans = BILLING_REGISTRY.plans.filter(
    (p) => p.visibility === "public" || p.visibility === void 0
  );
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: cn("grid gap-6 md:grid-cols-2 lg:grid-cols-3", className),
      "data-cy": "pricing-table",
      children: visiblePlans.map((plan) => {
        var _a;
        const isCurrentPlan = plan.slug === currentPlanSlug;
        const priceMonthly = ((_a = plan.price) == null ? void 0 : _a.monthly) ? plan.price.monthly / 100 : 0;
        return /* @__PURE__ */ jsxs(
          Card,
          {
            className: cn(
              "relative flex flex-col",
              isCurrentPlan && "border-primary border-2"
            ),
            "data-cy": `pricing-plan-${plan.slug}`,
            children: [
              isCurrentPlan && /* @__PURE__ */ jsx("div", { className: "absolute -top-3 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx(Badge, { variant: "default", "data-cy": "pricing-current-badge", children: t("currentPlan") }) }),
              /* @__PURE__ */ jsxs(CardHeader, { children: [
                /* @__PURE__ */ jsx(CardTitle, { className: "text-2xl", "data-cy": "pricing-plan-name", children: t(`plans.${plan.slug}.name`) }),
                /* @__PURE__ */ jsx(CardDescription, { "data-cy": "pricing-plan-description", children: t(`plans.${plan.slug}.description`) }),
                /* @__PURE__ */ jsx("div", { className: "mt-4", "data-cy": "pricing-plan-price", children: priceMonthly > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
                  /* @__PURE__ */ jsxs("span", { className: "text-4xl font-bold", children: [
                    "$",
                    priceMonthly.toFixed(0)
                  ] }),
                  /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "/mo" })
                ] }) : plan.type === "enterprise" ? /* @__PURE__ */ jsx("span", { className: "text-2xl font-bold", children: t("contactUs") }) : /* @__PURE__ */ jsx("span", { className: "text-4xl font-bold", children: t("plans.free.name") }) })
              ] }),
              /* @__PURE__ */ jsxs(CardContent, { className: "flex-1 flex flex-col", children: [
                /* @__PURE__ */ jsxs("div", { className: "space-y-3 mb-6", "data-cy": "pricing-plan-features", children: [
                  /* @__PURE__ */ jsx("h4", { className: "font-semibold text-sm text-muted-foreground", children: t("features.title") || "Features" }),
                  /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: Object.entries(BILLING_REGISTRY.features).map(([slug, feature]) => {
                    const hasFeature = plan.features.includes("*") || plan.features.includes(slug);
                    return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", "data-cy": `feature-${slug}`, children: [
                      hasFeature ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-green-600 flex-shrink-0" }) : /* @__PURE__ */ jsx(X, { className: "h-4 w-4 text-muted-foreground flex-shrink-0" }),
                      /* @__PURE__ */ jsx("span", { className: cn("text-sm", !hasFeature && "text-muted-foreground"), children: t(`features.${slug}`) })
                    ] }, slug);
                  }) })
                ] }),
                /* @__PURE__ */ jsxs("div", { className: "space-y-3 mb-6", "data-cy": "pricing-plan-limits", children: [
                  /* @__PURE__ */ jsx("h4", { className: "font-semibold text-sm text-muted-foreground", children: t("limits.title") || "Limits" }),
                  /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: Object.entries(BILLING_REGISTRY.limits).map(([slug, limit]) => {
                    const value = plan.limits[slug];
                    const displayValue = value === -1 ? t("unlimited") : value !== void 0 ? value.toString() : "-";
                    return /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between text-sm", "data-cy": `limit-${slug}`, children: [
                      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t(`limits.${slug}`) }),
                      /* @__PURE__ */ jsx("span", { className: "font-medium", children: displayValue })
                    ] }, slug);
                  }) })
                ] }),
                /* @__PURE__ */ jsx("div", { className: "mt-auto", children: /* @__PURE__ */ jsx(
                  Button,
                  {
                    className: "w-full",
                    variant: isCurrentPlan ? "outline" : "default",
                    disabled: isCurrentPlan,
                    onClick: () => onSelectPlan == null ? void 0 : onSelectPlan(plan.slug),
                    "data-cy": `pricing-select-${plan.slug}`,
                    children: isCurrentPlan ? t("currentPlan") : plan.type === "enterprise" ? t("contactSales") : t("selectPlan")
                  }
                ) })
              ] })
            ]
          },
          plan.slug
        );
      })
    }
  );
}
export {
  PricingTable
};
