import { fireEvent, render, screen } from "@testing-library/react";
import FilmGrain from "./FilmGrain";
import ScrollVelocityText from "./ScrollVelocityText";
import SectionDivider from "./SectionDivider";

function mockReducedMotion(matches: boolean) {
  Object.defineProperty(window, "matchMedia", {
    writable: true,
    value: jest.fn().mockImplementation((query: string) => ({
      matches: query.includes("prefers-reduced-motion") ? matches : false,
      media: query,
      onchange: null,
      addListener: jest.fn(),
      removeListener: jest.fn(),
      addEventListener: jest.fn(),
      removeEventListener: jest.fn(),
      dispatchEvent: jest.fn(),
    })),
  });
}

describe("static cinematic effects", () => {
  beforeEach(() => mockReducedMotion(false));

  it("renders grain and every divider without a canvas", () => {
    const grain = render(<FilmGrain />);
    expect(grain.container.firstElementChild).toHaveAttribute(
      "aria-hidden",
      "true",
    );
    expect(grain.container.querySelector("canvas")).not.toBeInTheDocument();
    grain.unmount();

    for (const variant of ["gradient", "pulse", "waveform"] as const) {
      const divider = render(<SectionDivider variant={variant} />);
      expect(divider.container.firstElementChild).toHaveAttribute(
        "aria-hidden",
        "true",
      );
      expect(divider.container.querySelector("canvas")).not.toBeInTheDocument();
      expect(divider.container.firstElementChild).not.toHaveAttribute(
        "tabindex",
      );
      divider.unmount();
    }
  });

  it("exposes a persistent pause control for an automatic marquee", () => {
    render(<ScrollVelocityText text="SOFTWARE ENGINEERING" direction="left" />);

    const pause = screen.getByRole("button", { name: "Pausar animação" });
    const track = document.getElementById(
      pause.getAttribute("aria-controls") ?? "",
    );
    expect(pause).toHaveAttribute("aria-pressed", "false");
    expect(track).not.toHaveStyle({ animationPlayState: "paused" });
    expect(
      screen.getByText("SOFTWARE ENGINEERING", {
        selector: '[aria-hidden="false"]',
      }),
    ).toBeVisible();
    expect(screen.getAllByText("SOFTWARE ENGINEERING")).toHaveLength(2);
    expect(
      screen
        .getAllByText("SOFTWARE ENGINEERING")
        .slice(1)
        .every((copy) => copy.getAttribute("aria-hidden") === "true"),
    ).toBe(true);

    fireEvent.click(pause);

    const resume = screen.getByRole("button", { name: "Retomar animação" });
    expect(resume).toHaveAttribute("aria-pressed", "true");
    expect(track).toHaveStyle({ animationPlayState: "paused" });

    fireEvent.click(resume);
    expect(
      screen.getByRole("button", { name: "Pausar animação" }),
    ).toHaveAttribute("aria-pressed", "false");
    expect(track).not.toHaveStyle({ animationPlayState: "paused" });
  });

  it("starts static under reduced motion without a redundant control", () => {
    mockReducedMotion(true);
    render(<ScrollVelocityText text="VAMOS CONVERSAR" direction="right" />);

    expect(
      screen.queryByRole("button", { name: /animação/i }),
    ).not.toBeInTheDocument();
    const copies = screen.getAllByText("VAMOS CONVERSAR");
    expect(copies).toHaveLength(2);
    expect(copies[0]).toBeVisible();
    expect(copies[0]).toHaveAttribute("aria-hidden", "false");
    expect(copies[0].closest("[style]")).toHaveStyle({
      animationPlayState: "paused",
    });
    expect(
      copies
        .slice(1)
        .every((copy) => copy.getAttribute("aria-hidden") === "true"),
    ).toBe(true);
  });
});