"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useMemo } from "react";
import { BILLING_REGISTRY } from "@nextsparkjs/registries/billing-registry";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle
} from "../ui/dialog.js";
import { Button } from "../ui/button.js";
import { Badge } from "../ui/badge.js";
import { ArrowRight } from "lucide-react";
import { useTranslations } from "next-intl";
function ConfirmPlanChangeModal({
  open,
  onOpenChange,
  currentPlanSlug,
  targetPlanSlug,
  onConfirm,
  loading = false
}) {
  var _a, _b, _c, _d;
  const t = useTranslations("billing");
  const { currentPlan, targetPlan, isUpgrade, isDowngradeToFree } = useMemo(() => {
    var _a2, _b2;
    const current = BILLING_REGISTRY.plans.find((p) => p.slug === currentPlanSlug);
    const target = BILLING_REGISTRY.plans.find((p) => p.slug === targetPlanSlug);
    const currentPrice = ((_a2 = current == null ? void 0 : current.price) == null ? void 0 : _a2.monthly) ?? 0;
    const targetPrice = ((_b2 = target == null ? void 0 : target.price) == null ? void 0 : _b2.monthly) ?? 0;
    return {
      currentPlan: current,
      targetPlan: target,
      isUpgrade: targetPrice > currentPrice,
      isDowngradeToFree: (target == null ? void 0 : target.type) === "free"
    };
  }, [currentPlanSlug, targetPlanSlug]);
  const currentPriceDisplay = ((_a = currentPlan == null ? void 0 : currentPlan.price) == null ? void 0 : _a.monthly) ? `$${(currentPlan.price.monthly / 100).toFixed(0)}` : t("plans.free.name");
  const targetPriceDisplay = ((_b = targetPlan == null ? void 0 : targetPlan.price) == null ? void 0 : _b.monthly) ? `$${(targetPlan.price.monthly / 100).toFixed(0)}` : t("plans.free.name");
  const description = isDowngradeToFree ? t("changePlan.downgradeToFreeDescription") : isUpgrade ? t("changePlan.upgradeDescription") : t("changePlan.downgradeDescription");
  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", "data-cy": "confirm-plan-change-modal", children: [
    /* @__PURE__ */ jsxs(DialogHeader, { children: [
      /* @__PURE__ */ jsx(DialogTitle, { "data-cy": "confirm-plan-change-title", children: t("changePlan.title") }),
      /* @__PURE__ */ jsx(DialogDescription, { "data-cy": "confirm-plan-change-description", children: description })
    ] }),
    /* @__PURE__ */ jsxs(
      "div",
      {
        className: "flex items-center justify-center gap-3 py-4 px-2 rounded-lg bg-muted/50",
        "data-cy": "confirm-plan-change-plans",
        children: [
          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1.5 min-w-0", children: [
            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("changePlan.from") }),
            /* @__PURE__ */ jsx(Badge, { variant: "outline", "data-cy": "confirm-plan-change-current", children: t(`plans.${currentPlanSlug}.name`) }),
            /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium tabular-nums text-muted-foreground", children: [
              currentPriceDisplay,
              ((_c = currentPlan == null ? void 0 : currentPlan.price) == null ? void 0 : _c.monthly) ? t("perMonth") : ""
            ] })
          ] }),
          /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4 text-muted-foreground shrink-0", "aria-hidden": "true" }),
          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1.5 min-w-0", children: [
            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("changePlan.to") }),
            /* @__PURE__ */ jsx(Badge, { variant: "default", "data-cy": "confirm-plan-change-target", children: t(`plans.${targetPlanSlug}.name`) }),
            /* @__PURE__ */ jsxs("span", { className: "text-sm font-bold tabular-nums", children: [
              targetPriceDisplay,
              ((_d = targetPlan == null ? void 0 : targetPlan.price) == null ? void 0 : _d.monthly) ? t("perMonth") : ""
            ] })
          ] })
        ]
      }
    ),
    /* @__PURE__ */ jsxs(DialogFooter, { children: [
      /* @__PURE__ */ jsx(
        Button,
        {
          variant: "outline",
          onClick: () => onOpenChange(false),
          disabled: loading,
          "data-cy": "confirm-plan-change-cancel",
          children: t("changePlan.cancel")
        }
      ),
      /* @__PURE__ */ jsx(
        Button,
        {
          onClick: onConfirm,
          disabled: loading,
          "aria-busy": loading,
          "data-cy": "confirm-plan-change-confirm",
          children: loading ? t("changePlan.confirming") : t("changePlan.confirm")
        }
      )
    ] })
  ] }) });
}
export {
  ConfirmPlanChangeModal
};
