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

import PageIntro from "./PageIntro";

jest.mock("react-dom", () => ({
  ...jest.requireActual("react-dom"),
  createPortal: (children: ReactNode) => children,
}));

jest.mock("framer-motion", () => {
  const React = require("react");
  const motion = new Proxy(
    {},
    {
      get:
        (_target, tag: string) =>
        ({ children, ...props }: { children?: ReactNode }) =>
          React.createElement(tag, props, children),
    },
  );

  return {
    AnimatePresence: ({ children }: { children: ReactNode }) => children,
    motion,
    useReducedMotion: () => false,
  };
});

describe("PageIntro", () => {
  it("renders the compact signal loading state without a fake percentage", () => {
    render(<PageIntro />);

    expect(
      screen.getByRole("heading", { name: /EVANDRO.*DEV/ }),
    ).toBeInTheDocument();
    expect(screen.getByText("SINAL DE ENTRADA")).toBeInTheDocument();
    expect(screen.getByText("Preparando o portfólio")).toBeInTheDocument();
    expect(screen.queryByText("000")).not.toBeInTheDocument();
  });

  it("stays visible long enough to be perceived on a fast page load", () => {
    jest.useFakeTimers();
    render(<PageIntro />);

    act(() => jest.advanceTimersByTime(900));
    expect(screen.getByText("Preparando o portfólio")).toBeInTheDocument();

    act(() => jest.runAllTimers());
    expect(screen.queryByText("Preparando o portfólio")).not.toBeInTheDocument();
    jest.useRealTimers();
  });
});