// Cloud (browser): a failed API request is reported as a titled error.
//
// The console reports handled UI failures to the crash reporter, and every
// producer of one starts from an Effect `Cause` — a plain object with no name,
// message or stack. Handed that directly, the reporter has nothing to title
// the report with, so it files a message-less one and groups it on the
// reporting frame: unrelated frontend failures all land in a single nameless
// bucket that says only which function did the reporting, never what broke.
//
// The report is the product surface here, so this scenario reads it the way
// the outside world does. The browser SDK is configured to POST its envelopes
// same-origin (`tunnel`), so the suite intercepts that request and asserts on
// the payload the page actually tried to send.
import { expect } from "@effect/vitest";
import { Effect } from "effect";

import { scenario } from "../src/scenario";
import { Browser, Target } from "../src/services";
import { revisit, visit } from "../src/surfaces/browser";

type ReportedException = {
  readonly type?: string;
  readonly value?: string;
  // The reporter marks an exception `synthetic` when it was handed something
  // that was not a real error and had to invent a stack for it — the stack of
  // whatever frame did the reporting.
  readonly mechanism?: { readonly synthetic?: boolean };
};

type ReportedEvent = {
  readonly tags?: Record<string, string>;
  readonly exception?: { readonly values?: ReadonlyArray<ReportedException> };
};

/**
 * An envelope is newline-delimited JSON — a header, then `{type}` / payload
 * pairs. Only the error payloads matter here and they are the ones carrying
 * `exception`, so pick those out rather than modelling the whole format.
 */
const errorEventsIn = (body: string): ReadonlyArray<ReportedEvent> =>
  body
    .split("\n")
    .filter((line) => line.trim().startsWith("{"))
    .flatMap((line) => {
      try {
        const parsed = JSON.parse(line) as ReportedEvent;
        return parsed.exception ? [parsed] : [];
      } catch {
        return [];
      }
    });

scenario(
  "Frontend errors · a failed API request is reported with a real message",
  { timeout: 120_000 },
  Effect.gen(function* () {
    const browser = yield* Browser;
    const target = yield* Target;
    const identity = yield* target.newIdentity();

    yield* browser.session(identity, async ({ page, step }) => {
      const reports: Array<ReportedEvent> = [];
      await page.route("**/api/sentry-tunnel*", async (route) => {
        reports.push(...errorEventsIn(route.request().postData() ?? ""));
        await route.fulfill({ status: 200, body: "" });
      });

      // Everything the UI reports about a request it made itself.
      const reportedFailures = (): ReadonlyArray<ReportedException> =>
        reports
          .filter((event) => event.tags?.["executor.ui.surface"] === "api_client")
          .flatMap((event) => event.exception?.values ?? []);

      await step("Open the integrations console", async () => {
        await visit(page, "/integrations");
        await page.getByRole("button", { name: "Connect" }).first().waitFor();
      });

      let faulted = 0;
      await step("Reload it with the integrations API failing", async () => {
        await page.route("**/api/integrations", async (route) => {
          if (route.request().method() !== "GET") {
            await route.continue();
            return;
          }
          faulted += 1;
          await route.fulfill({
            status: 500,
            contentType: "text/plain",
            body: "upstream exploded",
          });
        });
        await revisit(page);
      });

      expect(faulted, "the integrations request really did fail").toBeGreaterThan(0);

      // The report must name the failure. Reports are sent as the page
      // notices failures, so wait for one rather than sleeping.
      await expect
        .poll(() => reportedFailures().map((failure) => failure.value ?? ""), {
          message: "the reported failure says which request failed, and how",
          timeout: 20_000,
        })
        .toContainEqual(expect.stringMatching(/500 .*\/api\/integrations/));

      for (const failure of reportedFailures()) {
        // A report with no message is the bug: it cannot be titled, so it
        // groups on the reporting frame and swallows every other failure.
        expect(failure.value ?? "", "every report carries a message").not.toBe("");
        expect(failure.type ?? "", "every report carries an error name").not.toBe("");
        // What a reporter falls back to when it is handed something that is
        // not an error at all — the shape every message-less report had.
        expect(failure.value ?? "", "no report is a bag of keys").not.toMatch(
          /captured as exception with keys/,
        );
        // The other half of the bug, and the half a readable message can hide:
        // handed a non-error, the reporter still has no stack of its own to
        // group on and invents one from the reporting frame, so unrelated
        // failures keep merging into a single bucket. Only a real error clears
        // this flag.
        expect(
          failure.mechanism?.synthetic ?? false,
          "the report carries the failure's own stack, not the reporter's frame",
        ).toBe(false);
      }

      await page.unroute("**/api/integrations");
      await page.unroute("**/api/sentry-tunnel*");
    });
  }),
);