"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { BILLING_REGISTRY } from "@nextsparkjs/registries/billing-registry";
import { useSubscription } from "../../hooks/useSubscription.js";
import { Button } from "../ui/button.js";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card.js";
import { Badge } from "../ui/badge.js";
import { Skeleton } from "../ui/skeleton.js";
import { Check, X } from "lucide-react";
import { useTranslations } from "next-intl";
import { cn } from "../../lib/utils/index.js";
import { ConfirmPlanChangeModal } from "./ConfirmPlanChangeModal.js";
function PricingCardSkeleton() {
  return /* @__PURE__ */ jsxs(Card, { className: "relative flex flex-col", children: [
    /* @__PURE__ */ jsxs(CardHeader, { children: [
      /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-28" }),
      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-48 mt-2" }),
      /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-20 mt-4" })
    ] }),
    /* @__PURE__ */ jsxs(CardContent, { className: "flex-1 flex flex-col", children: [
      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24 mb-3" }),
      /* @__PURE__ */ jsx("div", { className: "space-y-2.5 mb-6", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4 rounded-full shrink-0" }),
        /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-32" })
      ] }, i)) }),
      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-16 mb-3" }),
      /* @__PURE__ */ jsx("div", { className: "space-y-2.5 mb-6", children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
        /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-24" }),
        /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-16" })
      ] }, i)) }),
      /* @__PURE__ */ jsx("div", { className: "mt-auto", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full rounded-md" }) })
    ] })
  ] });
}
function PricingTable({ onSelectPlan, className }) {
  const t = useTranslations("billing");
  const { planSlug: currentPlanSlug, subscription, isReady } = useSubscription();
  const [confirmModalOpen, setConfirmModalOpen] = useState(false);
  const [targetPlanSlug, setTargetPlanSlug] = useState(null);
  const [changePlanLoading, setChangePlanLoading] = useState(false);
  const hasActiveSubscription = !!(subscription == null ? void 0 : subscription.externalSubscriptionId);
  const handleSelectPlan = (planSlug) => {
    if (hasActiveSubscription && currentPlanSlug && planSlug !== currentPlanSlug) {
      setTargetPlanSlug(planSlug);
      setConfirmModalOpen(true);
    } else {
      onSelectPlan == null ? void 0 : onSelectPlan(planSlug);
    }
  };
  const handleConfirmChange = async () => {
    if (!targetPlanSlug) return;
    setChangePlanLoading(true);
    try {
      onSelectPlan == null ? void 0 : onSelectPlan(targetPlanSlug);
    } finally {
      setChangePlanLoading(false);
      setConfirmModalOpen(false);
      setTargetPlanSlug(null);
    }
  };
  const visiblePlans = BILLING_REGISTRY.plans.filter(
    (p) => p.visibility === "public" || p.visibility === void 0
  );
  if (!isReady) {
    return /* @__PURE__ */ jsx(
      "div",
      {
        className: cn("grid gap-6 md:grid-cols-2 lg:grid-cols-3", className),
        "data-cy": "pricing-table-loading",
        children: visiblePlans.map((plan) => /* @__PURE__ */ jsx(PricingCardSkeleton, {}, plan.slug))
      }
    );
  }
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__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 transition-all duration-200",
                isCurrentPlan ? "border-primary border-2 shadow-md ring-1 ring-primary/20" : "hover:border-border/80 hover:shadow-sm"
              ),
              "data-cy": `pricing-plan-${plan.slug}`,
              "aria-current": isCurrentPlan ? "true" : void 0,
              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 tabular-nums", children: [
                      "$",
                      priceMonthly.toFixed(0)
                    ] }),
                    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: t("perMonth") })
                  ] }) : plan.type === "enterprise" ? /* @__PURE__ */ jsx("span", { className: "text-2xl font-bold", children: t("contactUs") }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                    /* @__PURE__ */ jsx("span", { className: "text-4xl font-bold tabular-nums", children: "$0" }),
                    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: t("perMonth") })
                  ] }) })
                ] }),
                /* @__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: () => handleSelectPlan(plan.slug),
                      "data-cy": `pricing-select-${plan.slug}`,
                      children: isCurrentPlan ? t("currentPlan") : plan.type === "enterprise" ? t("contactSales") : t("selectPlan")
                    }
                  ) })
                ] })
              ]
            },
            plan.slug
          );
        })
      }
    ),
    currentPlanSlug && targetPlanSlug && /* @__PURE__ */ jsx(
      ConfirmPlanChangeModal,
      {
        open: confirmModalOpen,
        onOpenChange: setConfirmModalOpen,
        currentPlanSlug,
        targetPlanSlug,
        onConfirm: handleConfirmChange,
        loading: changePlanLoading
      }
    )
  ] });
}
export {
  PricingTable
};
