import { render } from "@testing-library/react";
import { renderToString } from "react-dom/server";
import { isLowPowerDevice } from "@/lib/device";
import HeroBackground from "./HeroBackground";

/**
 * Testes de caminhos-base de HeroBackground: movimento reduzido (nada), aparelho fraco (só as camadas escuras,
 * sem baixar a cena 3D), aparelho capaz (cena montada depois do efeito) e o HTML do servidor (sem cena).
 */

let reducedMotion = false;
jest.mock("@/app/hooks/useReducedMotion", () => ({
  useReducedMotion: () => reducedMotion,
}));
jest.mock("@/lib/device", () => ({ isLowPowerDevice: jest.fn() }));
jest.mock("next/dynamic", () => ({
  __esModule: true,
  default: () =>
    function MockScene() {
      return require("react").createElement("canvas", {
        "data-testid": "hero-scene",
      });
    },
}));

const lowPower = jest.mocked(isLowPowerDevice);

beforeEach(() => {
  reducedMotion = false;
  lowPower.mockReset();
  lowPower.mockReturnValue(false);
});

describe("HeroBackground", () => {
  it("path: reduced motion -> renders nothing, even on a capable device", () => {
    reducedMotion = true;

    const { container } = render(<HeroBackground />);

    expect(container).toBeEmptyDOMElement();
  });

  it("path: capable device -> the 3D scene plus the three dark layers", () => {
    const { container, getByTestId } = render(<HeroBackground />);

    expect(getByTestId("hero-scene")).toBeInTheDocument();
    expect(container.querySelectorAll(".pointer-events-none")).toHaveLength(3);
  });

  it("path: low-power device -> only the dark layers, the 3D scene is never mounted", () => {
    lowPower.mockReturnValue(true);

    const { container, queryByTestId } = render(<HeroBackground />);

    expect(queryByTestId("hero-scene")).toBeNull();
    expect(container.querySelectorAll(".pointer-events-none")).toHaveLength(3);
    expect(lowPower).toHaveBeenCalledTimes(1);
  });

  it("path: server HTML -> layers without the scene (capability is only known in the browser)", () => {
    const html = renderToString(<HeroBackground />);

    expect(html).not.toContain("canvas");
    expect(html).toContain("pointer-events-none");
    expect(lowPower).not.toHaveBeenCalled();
  });
});