"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { useT } from "@open-mercato/shared/lib/i18n/context";
import { cn } from "@open-mercato/shared/lib/utils";
import { Badge } from "../primitives/badge.js";
import { Button } from "../primitives/button.js";
import { ChevronDown, ChevronRight, Globe, Webhook } from "lucide-react";
function WebhookSetupGuide({
  guide,
  buttonLabel,
  className
}) {
  const t = useT();
  const [isOpen, setIsOpen] = React.useState(false);
  const [appOrigin, setAppOrigin] = React.useState("http://localhost:3000");
  const resolvedButtonLabel = buttonLabel ?? t("ui.webhookGuide.showDetails", "Show details");
  React.useEffect(() => {
    if (typeof window !== "undefined" && window.location?.origin) {
      setAppOrigin(window.location.origin);
    }
  }, []);
  const endpointUrl = `${appOrigin}${guide.endpointPath}`;
  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), children: [
    /* @__PURE__ */ jsxs(
      Button,
      {
        type: "button",
        variant: "link",
        size: "sm",
        className: "h-auto px-0 text-xs font-medium",
        onClick: () => setIsOpen((current) => !current),
        children: [
          isOpen ? /* @__PURE__ */ jsx(ChevronDown, { className: "mr-1 h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "mr-1 h-3.5 w-3.5" }),
          isOpen ? t("ui.webhookGuide.hideDetails", "Hide details") : resolvedButtonLabel
        ]
      }
    ),
    isOpen ? /* @__PURE__ */ jsxs("div", { className: "space-y-4 rounded-lg border bg-muted/20 p-4", children: [
      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
          /* @__PURE__ */ jsx(Webhook, { className: "h-4 w-4 text-muted-foreground" }),
          /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold", children: guide.title })
        ] }),
        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: guide.summary })
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
        /* @__PURE__ */ jsx("p", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: t("ui.webhookGuide.dashboardPath", "Dashboard path") }),
        /* @__PURE__ */ jsx("div", { className: "rounded-md border bg-background/70 px-3 py-2 text-sm", children: guide.dashboardPathLabel })
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
        /* @__PURE__ */ jsx("p", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: t("ui.webhookGuide.steps", "Setup steps") }),
        /* @__PURE__ */ jsx("ol", { className: "list-decimal space-y-2 pl-5 text-sm text-muted-foreground", children: guide.steps.map((step) => /* @__PURE__ */ jsx("li", { children: step }, step)) })
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
        /* @__PURE__ */ jsx("p", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: t("ui.webhookGuide.endpointUrl", "Webhook endpoint URL") }),
        /* @__PURE__ */ jsx("div", { className: "rounded-md border bg-background/70 px-3 py-2 font-mono text-xs break-all", children: endpointUrl })
      ] }),
      guide.events && guide.events.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
        /* @__PURE__ */ jsx("p", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: t("ui.webhookGuide.recommendedEvents", "Recommended events") }),
        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: guide.events.map((eventName) => /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "font-mono text-[11px]", children: eventName }, eventName)) })
      ] }) : null,
      guide.localDevelopment ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
        /* @__PURE__ */ jsx("p", { className: "text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: t("ui.webhookGuide.localDevelopment", "Local development") }),
        guide.localDevelopment.note ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: guide.localDevelopment.note }) : null,
        /* @__PURE__ */ jsx("div", { className: "rounded-md border bg-background/70 px-3 py-2 font-mono text-xs", children: guide.localDevelopment.tunnelCommand }),
        /* @__PURE__ */ jsx("div", { className: "rounded-md border bg-background/70 px-3 py-2 font-mono text-xs break-all", children: guide.localDevelopment.publicUrlExample })
      ] }) : null,
      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
        /* @__PURE__ */ jsx(Globe, { className: "h-3.5 w-3.5" }),
        /* @__PURE__ */ jsx("span", { children: t("ui.webhookGuide.publicUrlNote", "Use your public application URL in Stripe, not a localhost address.") })
      ] })
    ] }) : null
  ] });
}
export {
  WebhookSetupGuide
};
//# sourceMappingURL=WebhookSetupGuide.js.map
