import { describe, expect, test } from "vitest";
import { screen } from "@testing-library/react";
import { userEvent } from "@testing-library/user-event";
import { Unsubscribe } from "../../pages/Unsubscribe.tsx";
import { calls, fail, route } from "../fetch.ts";
import { renderWithContexts } from "../render.tsx";
import { makeJwt } from "../fixtures.ts";

describe("Unsubscribe", () => {
  function setup(token: string) {
    const user = userEvent.setup();
    renderWithContexts(<Unsubscribe />, {
      route: `/unsubscribe?token=${encodeURIComponent(token)}`,
      path: "/unsubscribe",
    });
    return user;
  }

  test("asks first, then turns the named digest off", async () => {
    const token = makeJwt({
      purpose: "unsubscribe",
      userId: "u",
      cadence: "monthly",
    });
    route("POST /api/unsubscribe", () => ({ cadence: "monthly" }));
    const user = setup(token);
    expect(
      screen.getByRole("heading", { name: "Turn off the monthly recap?" }),
    ).toBeInTheDocument();
    expect(calls("POST /api/unsubscribe")).toHaveLength(0);

    await user.click(
      screen.getByRole("button", { name: "Turn off monthly recaps" }),
    );
    expect(await screen.findByRole("heading", { name: "Unsubscribed" }))
      .toBeInTheDocument();
    expect(
      calls("POST /api/unsubscribe")[0].url.searchParams.get("token"),
    )
      .toBe(token);
  });

  test("a refusal shows why", async () => {
    route(
      "POST /api/unsubscribe",
      () => fail("Invalid unsubscribe link", 400),
    );
    const user = setup(
      makeJwt({ purpose: "unsubscribe", userId: "u", cadence: "weekly" }),
    );
    await user.click(
      screen.getByRole("button", { name: "Turn off weekly digests" }),
    );
    expect(await screen.findByText("Invalid unsubscribe link"))
      .toBeInTheDocument();
  });

  test("a token that isn't an unsubscribe one is refused before asking", () => {
    setup(makeJwt({ purpose: "media", userId: "u" }));
    expect(screen.getByRole("heading", { name: "Invalid link" }))
      .toBeInTheDocument();
  });
});