"use client";

/**
 * WebhooksTab (TASK-0130) — the developer-hub "Webhooks" tab.
 *
 * - List (GET …/webhooks → { data: [shape] }; shape never carries the secret).
 * - Create (POST …/webhooks) — returns {…shape, secret, warning}; the secret
 *   is revealed ONCE in WebhookSecretDialog (never persisted, like the API-key
 *   reveal). Events come from the SHARED catalog (+ the `*` wildcard).
 * - Rotate (PATCH …/webhooks/:id { rotateSecret: true }) — new secret revealed
 *   once; in-flight old-signature deliveries will fail verification.
 * - Pause/resume (PATCH …/webhooks/:id { active }), delete (DELETE, 204).
 * - DeliveryInspector (per-webhook log + drawer + test-send + resubmit).
 */
import { useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
  Check,
  Copy,
  Loader2,
  Pause,
  Play,
  Plus,
  RefreshCw,
  ShieldAlert,
  Trash2,
  Webhook as WebhookIcon
} from "lucide-react";
// Browser-safe subpath (the root barrel re-exports node:crypto — see
// packages/shared/src/events/catalog.ts; the Developers page 500'd bundling it).
import { WEBHOOK_EVENT_CATALOG, WEBHOOK_EVENT_NAMES } from "@factory/shared/events/catalog";
import { toast } from "@/stores/ui-store";
import { apiFetch } from "@/lib/api";
import { Dialog } from "@/components/dialogs/dialog";
import { Field, inputCls } from "@/components/settings/settings-shell";
import { cn } from "@/lib/utils";
import { DeliveryInspector } from "./DeliveryInspector";

interface WebhookRow {
  id: string;
  url: string;
  events: string[];
  active: boolean;
  secretPrefix: string;
  createdAt: string;
}

function unwrap<T>(body: unknown): T[] {
  const b = body as { data?: T[] } | T[] | null;
  if (Array.isArray(b)) return b;
  if (b && typeof b === "object" && Array.isArray((b as { data?: T[] }).data))
    return (b as { data: T[] }).data;
  return [];
}

async function copyText(text: string): Promise<boolean> {
  try {
    await navigator.clipboard.writeText(text);
    return true;
  } catch {
    try {
      const ta = document.createElement("textarea");
      ta.value = text;
      ta.setAttribute("readonly", "");
      ta.style.position = "fixed";
      ta.style.opacity = "0";
      document.body.appendChild(ta);
      ta.select();
      const ok = document.execCommand("copy");
      document.body.removeChild(ta);
      return ok;
    } catch {
      return false;
    }
  }
}

/** The one-time secret reveal (create + rotate share it). */
function WebhookSecretDialog({
  open,
  secret,
  url,
  mode,
  onConfirmed
}: {
  open: boolean;
  secret: string | null;
  url: string;
  mode: "create" | "rotate";
  onConfirmed: () => void;
}) {
  const [copied, setCopied] = useState(false);
  const [storeChecked, setStoreChecked] = useState(false);
  const doCopy = async () => {
    if (!secret) return;
    const ok = await copyText(secret);
    setCopied(ok);
    setTimeout(() => setCopied(false), 2500);
  };
  return (
    <Dialog
      open={open}
      title={mode === "create" ? "Your webhook signing secret" : "New signing secret"}
      description={`Endpoint ${url}`}
      onClose={onConfirmed}
      footer={
        <button
          type="button"
          disabled={!storeChecked}
          onClick={onConfirmed}
          className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
        >
          I have stored it
        </button>
      }
    >
      <div className="space-y-3">
        <div className="flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/5 p-2.5 text-xs text-destructive">
          <ShieldAlert className="mt-0.5 size-4 shrink-0" aria-hidden />
          <span>
            <strong className="font-semibold">
              {mode === "create"
                ? "This secret will not be shown again."
                : "In-flight deliveries signed with the old secret will fail verification."}
            </strong>{" "}
            {mode === "create"
              ? "Store it securely — the Factory only keeps an encrypted copy for signing."
              : "Store the new secret and rotate your verifier."}
          </span>
        </div>
        <div>
          <label className="mb-1 block text-xs font-medium text-muted-foreground" htmlFor="wh-sec-raw">
            Signing secret
          </label>
          <div className="flex flex-col gap-1.5 md:flex-row md:items-center">
            <input
              id="wh-sec-raw"
              readOnly
              value={secret ?? ""}
              onFocus={(e) => e.currentTarget.select()}
              aria-label="Webhook signing secret (shown once)"
              data-testid="webhook-secret-raw"
              className="min-w-0 w-full rounded-md border border-input bg-background px-2.5 py-1.5 font-mono text-xs outline-none focus-visible:ring-1 focus-visible:ring-ring"
            />
            <button
              type="button"
              onClick={doCopy}
              data-testid="webhook-secret-copy"
              aria-label="Copy signing secret"
              className="inline-flex shrink-0 items-center justify-center gap-1 rounded-md border border-border px-3 py-1.5 text-xs font-medium hover:bg-accent"
            >
              {copied ? (
                <Check className="size-3.5 text-emerald-600" />
              ) : (
                <Copy className="size-3.5" />
              )}
              {copied ? "Copied" : "Copy"}
            </button>
          </div>
          <span role="status" className="sr-only">
            {copied ? "Signing secret copied to clipboard" : ""}
          </span>
        </div>
        <label className="flex cursor-pointer items-start gap-2 text-sm">
          <input
            type="checkbox"
            className="mt-0.5 accent-primary"
            checked={storeChecked}
            onChange={(e) => setStoreChecked(e.target.checked)}
          />
          <span>I have stored this secret securely.</span>
        </label>
      </div>
    </Dialog>
  );
}

export function WebhooksTab({ workspaceId }: { workspaceId: string }) {
  const qc = useQueryClient();
  const [url, setUrl] = useState("");
  const [events, setEvents] = useState<string[]>(["*"]);
  const [secret, setSecret] = useState("");
  const [reveal, setReveal] = useState<{ secret: string; url: string; mode: "create" | "rotate" } | null>(null);
  const [inspectorFor, setInspectorFor] = useState<string | null>(null);

  const hooks = useQuery({
    queryKey: ["workspaces", workspaceId, "webhooks"],
    queryFn: async (): Promise<WebhookRow[]> =>
      unwrap<WebhookRow>(await apiFetch(`/workspaces/${workspaceId}/webhooks`)),
    enabled: !!workspaceId
  });

  const create = useMutation({
    mutationFn: async () => {
      const out = await apiFetch<{ secret?: string }>(`/workspaces/${workspaceId}/webhooks`, {
        method: "POST",
        body: {
          url: url.trim(),
          events,
          ...(secret.trim() ? { secret: secret.trim() } : {})
        }
      });
      const b = out as { data?: { secret?: string }; secret?: string };
      return { secret: b.secret ?? b.data?.secret ?? "" };
    },
    onSuccess: (r) => {
      setUrl("");
      setEvents(["*"]);
      setSecret("");
      qc.invalidateQueries({ queryKey: ["workspaces", workspaceId, "webhooks"] });
      if (r.secret) setReveal({ secret: r.secret, url: url, mode: "create" });
    },
    onError: (e) => toast("error", (e as Error).message || "Could not create the webhook.")
  });

  const patch = useMutation({
    mutationFn: (input: { id: string; body: Record<string, unknown> }) =>
      apiFetch(`/workspaces/${workspaceId}/webhooks/${input.id}`, {
        method: "PATCH",
        body: input.body
      }),
    onSuccess: () => qc.invalidateQueries({ queryKey: ["workspaces", workspaceId, "webhooks"] }),
    onError: (e) => toast("error", (e as Error).message || "Update failed.")
  });

  const rotate = useMutation({
    mutationFn: async (id: string) => {
      const out = await apiFetch<{ secret?: string }>(`/workspaces/${workspaceId}/webhooks/${id}`, {
        method: "PATCH",
        body: { rotateSecret: true }
      });
      const b = out as { data?: { secret?: string }; secret?: string };
      return { secret: b.secret ?? b.data?.secret ?? "" };
    },
    onSuccess: (r, id) => {
      const row = (hooks.data ?? []).find((h) => h.id === id);
      qc.invalidateQueries({ queryKey: ["workspaces", workspaceId, "webhooks"] });
      if (r.secret) setReveal({ secret: r.secret, url: row?.url ?? "", mode: "rotate" });
    },
    onError: (e) => toast("error", (e as Error).message || "Could not rotate the secret.")
  });

  const remove = useMutation({
    mutationFn: (id: string) =>
      apiFetch(`/workspaces/${workspaceId}/webhooks/${id}`, { method: "DELETE" }),
    onSuccess: () => qc.invalidateQueries({ queryKey: ["workspaces", workspaceId, "webhooks"] })
  });

  const toggleEvent = (ev: string) =>
    setEvents((prev) => (prev.includes(ev) ? prev.filter((x) => x !== ev) : [...prev, ev]));

  const eventOptions: string[] = ["*", ...WEBHOOK_EVENT_NAMES];

  return (
    <div className="space-y-4">
      <div className="rounded-lg border border-border p-4">
        <h3 className="text-sm font-semibold">New webhook</h3>
        <div className="mt-3 grid gap-2 sm:grid-cols-2">
          <Field label="URL" hint="http(s) endpoint that accepts POST JSON. Private addresses are blocked unless WEBHOOK_ALLOW_PRIVATE is set.">
            <input
              className={inputCls}
              placeholder="https://example.com/hook"
              value={url}
              onChange={(e) => setUrl(e.target.value)}
            />
          </Field>
          <Field label="Signing secret (optional)" hint="HMAC-SHA256 signing (X-Factory-Signature). Auto-generated if empty.">
            <input
              className={inputCls}
              type="password"
              placeholder="auto-generated if empty"
              value={secret}
              onChange={(e) => setSecret(e.target.value)}
            />
          </Field>
        </div>
        <div className="mt-2">
          <p className="mb-1 text-xs font-medium text-muted-foreground">Events</p>
          <div className="flex flex-wrap gap-1.5">
            {eventOptions.map((ev) => (
              <label
                key={ev}
                className={cn(
                  "inline-flex cursor-pointer items-center gap-1 rounded-full border px-2 py-0.5 text-[11px]",
                  events.includes(ev)
                    ? "border-primary/50 bg-primary/10 text-foreground"
                    : "border-border text-muted-foreground"
                )}
              >
                <input
                  type="checkbox"
                  className="sr-only"
                  checked={events.includes(ev)}
                  onChange={() => toggleEvent(ev)}
                />
                {ev}
              </label>
            ))}
          </div>
          <p className="mt-1 text-[11px] text-muted-foreground">
            <code className="font-mono">*</code> subscribes to every event. A prefix wildcard
            (e.g. <code className="font-mono">page.*</code>) is also supported.
          </p>
        </div>
        <div className="mt-3 flex justify-end">
          <button
            type="button"
            disabled={!url.trim() || events.length === 0 || create.isPending}
            onClick={() => create.mutate()}
            className="inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
          >
            {create.isPending ? (
              <Loader2 className="size-3.5 animate-spin" />
            ) : (
              <Plus className="size-3.5" />
            )}
            Create webhook
          </button>
        </div>
      </div>

      <ul className="space-y-2">
        {(hooks.data ?? []).map((h) => (
          <li key={h.id} className="rounded-md border border-border px-3 py-2">
            <div className="flex flex-wrap items-center gap-2">
              <WebhookIcon className="size-4 shrink-0 text-muted-foreground" aria-hidden />
              <p className="min-w-0 flex-1 truncate text-sm font-medium">{h.url}</p>
              <span
                className={cn(
                  "rounded-full px-1.5 py-0.5 text-[10px] font-medium",
                  h.active
                    ? "bg-emerald-500/15 text-emerald-600"
                    : "bg-muted text-muted-foreground"
                )}
              >
                {h.active ? "active" : "paused"}
              </span>
              <button
                type="button"
                onClick={() => setInspectorFor(h.id)}
                className="rounded-md border px-2 py-1 text-xs"
              >
                Deliveries
              </button>
              <button
                type="button"
                onClick={() => rotate.mutate(h.id)}
                disabled={rotate.isPending}
                title="Rotate signing secret"
                className="inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs disabled:opacity-50"
              >
                <RefreshCw className="size-3" aria-hidden />
                Rotate
              </button>
              <button
                type="button"
                onClick={() =>
                  patch.mutate({ id: h.id, body: { active: !h.active } })
                }
                disabled={patch.isPending}
                className="rounded-md border px-2 py-1 text-xs"
              >
                {h.active ? (
                  <>
                    <Pause className="mr-1 inline size-3" aria-hidden /> Pause
                  </>
                ) : (
                  <>
                    <Play className="mr-1 inline size-3" aria-hidden /> Resume
                  </>
                )}
              </button>
              <button
                type="button"
                onClick={() => {
                  if (window.confirm(`Delete webhook ${h.url}?`)) remove.mutate(h.id);
                }}
                aria-label={`Delete ${h.url}`}
                className="rounded-md p-1 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
              >
                <Trash2 className="size-4" />
              </button>
            </div>
            <p className="mt-1 truncate text-xs text-muted-foreground">
              <code className="font-mono">{h.secretPrefix}</code> · {h.events.join(", ")}
            </p>
            {inspectorFor === h.id ? (
              <div className="mt-2">
                <DeliveryInspector workspaceId={workspaceId} webhookId={h.id} />
              </div>
            ) : null}
          </li>
        ))}
        {hooks.data && hooks.data.length === 0 && (
          <li className="text-sm text-muted-foreground">No webhooks yet.</li>
        )}
      </ul>

      {reveal ? (
        <WebhookSecretDialog
          open
          secret={reveal.secret}
          url={reveal.url}
          mode={reveal.mode}
          onConfirmed={() => setReveal(null)}
        />
      ) : null}
    </div>
  );
}