Webhooks

"use client";
import * as React from "react";
import { Plus } from "lucide-react";
import { EndpointDialog, type EventGroup, WebhookList, type WebhookRow } from "@/components/ui/notchset/blocks/webhook-list";
import { Button } from "@/components/ui/notchset/button";
import { Card } from "@/components/ui/notchset/card";

const HOOKS: WebhookRow[] = [
  { id: "w1", url: "https://api.larkspur-ops.com/hooks/crm", events: ["deal.stage_changed", "deal.won", "deal.lost"], status: "active", last: { code: 200, when: "54 min ago" } },
  { id: "w2", url: "https://ledger.halcyon-finance.io/notchset", events: ["quote.accepted", "deal.won"], status: "failing", last: { code: 503, when: "2h ago" } },
  { id: "w3", url: "https://staging.larkspur.dev/webhooks", events: ["company.created"], status: "disabled", last: null },
];
const GROUPS: EventGroup[] = [
  ["Deals", [["deal.created", "A deal is created"], ["deal.stage_changed", "A deal moves stage"], ["deal.won", "A deal is won"], ["deal.lost", "A deal is lost"]]],
  ["Companies", [["company.created", "A company is added"]]],
  ["Quotes", [["quote.sent", "A quote is sent"], ["quote.accepted", "A quote is accepted"]]],
];

/* a working local copy: add, edit, enable, delete and test change only the row they were asked about. The test is
   simulated here (Halcyon's endpoint is the one that answers 503); nothing is sent anywhere */
export default function WebhookListDemo() {
  const [hooks, setHooks] = React.useState(HOOKS);
  const [editing, setEditing] = React.useState<string | null>(null);
  const [open, setOpen] = React.useState(false);
  const seq = React.useRef(0);
  const cur = editing ? hooks.find((h) => h.id === editing) : undefined;
  const patch = (id: string, f: (h: WebhookRow) => WebhookRow) => setHooks((xs) => xs.map((h) => (h.id === id ? f(h) : h)));
  const show = (id: string | null) => (setEditing(id), setOpen(true));
  return (
    <div className="flex w-full max-w-[760px] flex-col gap-3">
      <Card>
        <WebhookList
          hooks={hooks}
          onTest={(id) => patch(id, (h) => ({ ...h, status: h.url.includes("halcyon") ? "failing" : "active", last: { code: h.url.includes("halcyon") ? 503 : 200, when: "Just now · simulated" } }))}
          onToggle={(id, on) => patch(id, (h) => ({ ...h, status: on ? (h.last && h.last.code >= 400 ? "failing" : "active") : "disabled" }))}
          onEdit={(id) => show(id)}
          onDelete={(id) => (setHooks((xs) => xs.filter((h) => h.id !== id)), true)}
        />
      </Card>
      <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
        <Button onClick={() => show(null)}>
          <Plus />
          Add endpoint
        </Button>
        {/* said where it's seen, not only in this comment: the example's deliveries are made up on this page */}
        <p className="m-0 min-w-0 flex-1 text-[length:var(--ns-text-small)] text-[var(--ns-ink-3)]">A local example: Send test event shows a simulated answer. No request is sent.</p>
      </div>
      <EndpointDialog
        open={open}
        onOpenChange={setOpen}
        title={cur ? "Edit endpoint" : "Add an endpoint"}
        verb={cur ? "Save endpoint" : "Add endpoint"}
        initial={cur ? { url: cur.url, events: cur.events } : undefined}
        groups={GROUPS}
        /* return the words for what's wrong, or null once it's saved */
        onSave={(url, events) => {
          if (!/^https:\/\//.test(url)) return { url: "Use an https:// address" };
          if (!events.length) return { events: "Pick at least one event" };
          /* a new address is a new destination: it has no delivery history yet */
          if (cur) patch(cur.id, (h) => ({ ...h, url, events, ...(h.url !== url ? { last: null, status: h.status === "disabled" ? "disabled" : "active" } : {}) }));
          else setHooks((xs) => [...xs, { id: `new-${++seq.current}`, url, events, status: "active", last: null }]);
          return null;
        }}
      />
    </div>
  );
}