/**
 * Flow / Trace page — verifies the telemetry-driven waterfall: backfilled
 * records group into a trace, render as a depth-ordered waterfall with a
 * failure badge, and selecting a span drives the metadata inspector.
 */
import { describe, it, expect, beforeEach, vi } from "vitest";
import { mount, flushPromises } from "@vue/test-utils";
import { createRouter, createMemoryHistory } from "vue-router";
import Trace from "../Trace.vue";

const env = (messageId: string, causationId: string) => ({
  messageId,
  causationId,
  correlationId: "c1",
});

const backfill = [
  { kind: "action.dispatched", name: "orders.place", durationMs: 10, envelope: env("m1", "m1") },
  { kind: "query.executed", name: "orders.lookup", durationMs: 90, envelope: env("m2", "m1") },
  {
    kind: "action.failed",
    name: "orders.charge",
    error: { name: "E", message: "declined" },
    envelope: env("m3", "m1"),
  },
];

// What the SSE stream replays on open. The server backfills the current run
// over the live stream (no separate `/recent` fetch), so the fake emits these
// as `message` events once the page has wired its `onmessage`.
let streamRecords: unknown[] = [];

// A fake live stream — on connect it replays `streamRecords` as message events,
// mirroring `/__nwire/telemetry/live`'s open-time backfill.
class FakeEventSource {
  onopen: (() => void) | null = null;
  onerror: (() => void) | null = null;
  onmessage: ((m: { data: string }) => void) | null = null;
  listeners: Record<string, Array<(ev: { data: string }) => void>> = {};
  constructor(public readonly url: string) {
    queueMicrotask(() => {
      this.onopen?.();
      for (const rec of streamRecords) this.onmessage?.({ data: JSON.stringify(rec) });
    });
  }
  addEventListener(type: string, fn: (ev: { data: string }) => void): void {
    (this.listeners[type] ??= []).push(fn);
  }
  removeEventListener(): void {}
  close(): void {}
}

beforeEach(() => {
  streamRecords = backfill;
  (globalThis as unknown as { EventSource: typeof FakeEventSource }).EventSource = FakeEventSource;
  // Live mode backfills over SSE; the only fetch is the run-list for the picker.
  globalThis.fetch = vi.fn((url: string | URL) => {
    const u = String(url);
    if (u.includes("/__nwire/telemetry/runs")) {
      return Promise.resolve(new Response(JSON.stringify({ runs: [] }), { status: 200 }));
    }
    return Promise.resolve(new Response("", { status: 404 }));
  }) as typeof fetch;
});

function makeRouter() {
  return createRouter({
    history: createMemoryHistory(),
    routes: [
      { path: "/trace", name: "trace", component: Trace },
      { path: "/", name: "home", component: { template: "<div/>" } },
    ],
  });
}

describe("Flow / Trace", () => {
  it("renders the trace picker with a failure count and a waterfall row per span", async () => {
    const router = makeRouter();
    router.push("/trace?correlationId=c1");
    await router.isReady();

    const wrapper = mount(Trace, { global: { plugins: [router] } });
    await flushPromises();

    expect(wrapper.find('[data-testid="trace-row"]').exists()).toBe(true);
    expect(wrapper.get('[data-testid="trace-failures"]').text()).toContain("1");
    expect(wrapper.findAll('[data-testid="waterfall-row"]')).toHaveLength(3);
    // The failed span gets the red treatment.
    expect(wrapper.find('[data-failed="true"]').exists()).toBe(true);
  });

  it("drives the metadata inspector from the selected span", async () => {
    const router = makeRouter();
    router.push("/trace?correlationId=c1");
    await router.isReady();

    const wrapper = mount(Trace, { global: { plugins: [router] } });
    await flushPromises();

    await wrapper.findAll('[data-testid="waterfall-row"]')[1]!.trigger("click");
    const inspector = wrapper.get('[data-testid="metadata-inspector"]');
    expect(inspector.text()).toContain("orders.lookup");
    expect(inspector.text()).toContain("envelope.messageId");
  });

  it("shows the empty state when no trace is selected", async () => {
    const router = makeRouter();
    router.push("/trace");
    await router.isReady();
    streamRecords = [];

    const wrapper = mount(Trace, { global: { plugins: [router] } });
    await flushPromises();

    expect(wrapper.find('[data-testid="empty-state"]').exists()).toBe(true);
  });
});