"use client";

/**
 * EventExplorer (TASK-0130) — the developer-hub "Events" tab.
 *
 * Driven ENTIRELY by `WEBHOOK_EVENT_CATALOG` in @factory/shared (the single
 * source of truth that also drives dispatcher matching, API validation and
 * the completeness test) — never a hand-kept list. Each event renders its
 * description, a rendered payload schema (zod → display) and a copyable
 * example payload.
 *
 * A11y: each event is a labelled group with a copy button that announces via
 * an aria-live region. Mobile: rows stack; the schema/example toggle is a
 * per-row expand.
 */
import { useState } from "react";
import { z } from "zod";
import { Check, ChevronDown, ChevronRight, Copy } from "lucide-react";
// Browser-safe subpath (the root barrel re-exports node:crypto — the
// Developers page 500'd bundling the barrel; catalog.ts is zod-only).
import {
  WEBHOOK_EVENT_CATALOG,
  type WebhookEventCatalogEntry,
} from "@factory/shared/events/catalog";
import { cn } from "@/lib/utils";

/** A rendered schema line: `name: type (optional)`. */
function zodToLines(schema: z.ZodTypeAny, depth = 0): { name: string; type: string; optional: boolean }[] {
  const out: { name: string; type: string; optional: boolean }[] = [];
  const push = (name: string, type: string, optional: boolean) =>
    out.push({ name: depth === 0 ? name : `${name}`, type, optional });

  let s = schema as z.ZodTypeAny;
  const isOptional = (t: z.ZodTypeAny): boolean =>
    t instanceof z.ZodOptional || (typeof t._def !== "undefined" && (t as unknown as { _def?: { typeName?: string } })._def?.typeName === "ZodOptional");
  if (isOptional(s)) {
    const inner = (s as z.ZodOptional<z.ZodTypeAny>)._def.innerType;
    return zodToLines(inner, depth).map((l) => ({ ...l, optional: true }));
  }

  if (s instanceof z.ZodObject) {
    const entries = Object.entries(s.shape as Record<string, z.ZodTypeAny>);
    for (const [key, value] of entries) {
      if (value instanceof z.ZodObject) {
        // Inline nested objects as `key: object { … }` (one level) so the
        // explorer stays scannable.
        const nested = Object.entries(value.shape as Record<string, z.ZodTypeAny>)
          .map(([k, v]) => `${k}: ${typeOf(v)}`)
          .join(", ");
        push(key, `object { ${nested} }`, isOptional(value));
      } else {
        push(key, typeOf(value), isOptional(value));
      }
    }
  } else {
    push("", typeOf(s), false);
  }
  return out;
}

function typeOf(t: z.ZodTypeAny): string {
  if (t instanceof z.ZodString) return "string";
  if (t instanceof z.ZodNumber) return "number";
  if (t instanceof z.ZodBoolean) return "boolean";
  if (t instanceof z.ZodArray) return `${typeOf(t.element)}[]`;
  if (t instanceof z.ZodNullable) return `${typeOf(t._def.innerType)} | null`;
  if (t instanceof z.ZodOptional) return `${typeOf(t._def.innerType)}?`;
  if (t instanceof z.ZodEnum) return t.options.join(" | ");
  if (t instanceof z.ZodUnion)
    return (t.options as z.ZodTypeAny[]).map((o) => typeOf(o)).join(" | ");
  if (t instanceof z.ZodLiteral) return JSON.stringify(t._def.value);
  if (t instanceof z.ZodRecord) return "object";
  if (t instanceof z.ZodAny || t instanceof z.ZodUnknown) return "any";
  return "object";
}

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;
    }
  }
}

function EventRow({ entry }: { entry: WebhookEventCatalogEntry }) {
  const [open, setOpen] = useState(false);
  const [copied, setCopied] = useState(false);
  const lines = zodToLines(entry.payloadSchema);

  const doCopy = async () => {
    const ok = await copyText(JSON.stringify(entry.example, null, 2));
    setCopied(ok);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <li className="rounded-md border border-border">
      <button
        type="button"
        aria-expanded={open}
        onClick={() => setOpen((v) => !v)}
        className="flex w-full items-center gap-2 px-3 py-2 text-left"
      >
        {open ? (
          <ChevronDown className="size-4 shrink-0 text-muted-foreground" aria-hidden />
        ) : (
          <ChevronRight className="size-4 shrink-0 text-muted-foreground" aria-hidden />
        )}
        <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">{entry.name}</code>
        <span className="min-w-0 flex-1 truncate text-xs text-muted-foreground">
          {entry.description}
        </span>
      </button>
      {open ? (
        <div className="space-y-2 border-t border-border px-3 py-2">
          <div>
            <p className="mb-1 text-[11px] font-medium text-muted-foreground">
              Payload schema (<code className="font-mono">data</code>)
            </p>
            <table className="w-full text-left text-xs">
              <caption className="sr-only">Payload fields for {entry.name}</caption>
              <tbody>
                {lines.map((l, i) => (
                  <tr key={i} className="border-b border-border/50 last:border-0">
                    <th scope="row" className="py-0.5 pr-3 font-mono font-normal text-foreground">
                      {l.name}
                    </th>
                    <td className="py-0.5 font-mono text-muted-foreground">{l.type}</td>
                    <td className="py-0.5 text-right text-muted-foreground">
                      {l.optional ? "optional" : ""}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <div>
            <div className="mb-1 flex items-center justify-between">
              <p className="text-[11px] font-medium text-muted-foreground">Example</p>
              <button
                type="button"
                onClick={doCopy}
                aria-label={`Copy example payload for ${entry.name}`}
                className="inline-flex items-center gap-1 rounded-md border border-border px-2 py-0.5 text-[11px] hover:bg-accent"
              >
                {copied ? (
                  <Check className="size-3 text-emerald-600" aria-hidden />
                ) : (
                  <Copy className="size-3" aria-hidden />
                )}
                {copied ? "Copied" : "Copy"}
              </button>
            </div>
            <span role="status" className="sr-only">
              {copied ? `${entry.name} example copied` : ""}
            </span>
            <pre className="overflow-x-auto rounded-md bg-muted/50 p-2 font-mono text-[11px] leading-relaxed">
              {JSON.stringify(entry.example, null, 2)}
            </pre>
          </div>
          <p className="text-[11px] text-muted-foreground">
            Fired by: <span className="font-mono">{entry.firedBy}</span>
          </p>
        </div>
      ) : null}
    </li>
  );
}

export function EventExplorer() {
  // Group by the leading segment (page.*, record.*, …) for scannability.
  const groups = new Map<string, WebhookEventCatalogEntry[]>();
  for (const e of WEBHOOK_EVENT_CATALOG) {
    const g = e.name.split(".")[0] ?? "other";
    const arr = groups.get(g) ?? [];
    arr.push(e);
    groups.set(g, arr);
  }

  return (
    <div className="space-y-4">
      {Array.from(groups.entries()).map(([group, events]) => (
        <div key={group}>
          <p className="mb-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
            {group}
          </p>
          <ul className="space-y-1.5">
            {events.map((e) => (
              <EventRow key={e.name} entry={e} />
            ))}
          </ul>
        </div>
      ))}
      <p className={cn("text-xs text-muted-foreground")}>
        Subscriptions accept exact event names or the <code className="font-mono">*</code> wildcard.
        Payloads are JSON, signed with{" "}
        <code className="font-mono">X-Factory-Signature: t=…,v1=HMAC-SHA256(secret, "&lt;t&gt;.&lt;body&gt;")</code>.
      </p>
    </div>
  );
}