import { act, render, screen } from "@testing-library/react";
import CinematicOverlays from "./CinematicOverlays";

/**
 * Testes de caminhos-base de CinematicOverlays (complemento de CinematicOverlays.test.tsx): a troca de página
 * com a página montada (de fora da home para a home e de volta) e as duas condições do grão juntas.
 */

let mockPathname = "/";
jest.mock("next/navigation", () => ({ usePathname: () => mockPathname }));

const mockLoaded = jest.fn();
jest.mock("./FilmGrain", () => {
  mockLoaded();
  return {
    __esModule: true,
    default: function MockGrain() {
      return <div data-testid="grain" />;
    },
  };
});

/** O import dinâmico do grão resolve em microtarefas. */
const loaded = () =>
  act(async () => {
    for (let i = 0; i < 5; i++) await Promise.resolve();
  });

const original = window.matchMedia;

function mockMedia(active: string[] = []) {
  window.matchMedia = jest.fn().mockImplementation((query: string) => ({
    matches: active.includes(query),
    media: query,
    addEventListener() {},
    removeEventListener() {},
  }));
}

beforeEach(() => {
  mockPathname = "/";
  mockLoaded.mockClear();
  mockMedia();
});

afterEach(() => {
  window.matchMedia = original;
});

describe("CinematicOverlays: troca de página", () => {
  it("path: arriving on the home from another page with a mouse -> the grain and the progress bar appear", async () => {
    mockPathname = "/cases";
    const { container, rerender } = render(<CinematicOverlays />);
    await loaded();
    expect(container).toBeEmptyDOMElement();

    mockPathname = "/";
    rerender(<CinematicOverlays />);
    await loaded();

    expect(screen.getByTestId("grain")).toBeInTheDocument();
    expect(container.querySelector(".ds-scroll-bar")).toBeInTheDocument();
  });

  it("path: leaving the home after the grain loaded -> everything goes away, and comes back on return", async () => {
    const { container, rerender } = render(<CinematicOverlays />);
    await loaded();
    expect(screen.getByTestId("grain")).toBeInTheDocument();

    mockPathname = "/servicos";
    rerender(<CinematicOverlays />);
    expect(screen.queryByTestId("grain")).toBeNull();
    expect(container).toBeEmptyDOMElement();

    mockPathname = "/";
    rerender(<CinematicOverlays />);
    await loaded();
    expect(screen.getByTestId("grain")).toBeInTheDocument();
    expect(container.querySelector(".ds-scroll-bar")).toBeInTheDocument();
  });

  it("path: a sub-route that merely starts like the home path -> not the home", async () => {
    mockPathname = "/cases/sev-modaintima";
    const { container } = render(<CinematicOverlays />);
    await loaded();

    expect(container).toBeEmptyDOMElement();
    expect(screen.queryByTestId("grain")).toBeNull();
  });
});

describe("CinematicOverlays: condições do grão juntas", () => {
  it("path: touch screen and reduced motion together -> no grain, the progress bar stays", async () => {
    mockMedia(["(pointer: coarse)", "(prefers-reduced-motion: reduce)"]);
    const { container } = render(<CinematicOverlays />);
    await loaded();

    expect(screen.queryByTestId("grain")).toBeNull();
    expect(container.querySelector(".ds-scroll-bar")).toBeInTheDocument();
  });

  it("path: no matchMedia in the browser -> counts as mouse with motion allowed: the grain loads", async () => {
    window.matchMedia = undefined as unknown as typeof window.matchMedia;
    render(<CinematicOverlays />);
    await loaded();

    expect(screen.getByTestId("grain")).toBeInTheDocument();
  });
});