import { fireEvent, render, screen } from "@testing-library/react";
import { coverSizes } from "@/app/cases/_components/CaseCover";
import { getCaseMedia } from "@/app/cases/_components/case-media";
import { getShowcaseAssets } from "@/lib/project-showcase";
import { caseStudies } from "@/lib/site-content";
import { ServiceHeroCover } from "./ServiceHeroCover";

/**
 * Capa de destaque do serviço: sem case não mostra nada; com case, é a imagem que abre a página (carga na hora,
 * prioridade alta e a largura real da coluna) e o link só pré-carrega o case quando a pessoa chega nele.
 */

jest.mock("@/app/cases/_components/case-media", () => ({
  getCaseMedia: jest.fn(),
}));
jest.mock("next/link", () => ({
  __esModule: true,
  default: ({
    children,
    prefetch,
    ...props
  }: { children?: React.ReactNode; prefetch?: boolean | null } & Record<
    string,
    unknown
  >) => (
    <a data-prefetch={String(prefetch)} {...props}>
      {children}
    </a>
  ),
}));

const mockedGetCaseMedia = jest.mocked(getCaseMedia);
const sev = caseStudies.filter(({ id }) => id === "sev-modaintima")[0];

afterEach(() => {
  mockedGetCaseMedia.mockReset();
});

describe("ServiceHeroCover", () => {
  it("path: no case -> renders nothing", () => {
    const { container } = render(<ServiceHeroCover />);

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

  it("path: case with a capture -> a link to the case around a cover that loads first", () => {
    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
    render(<ServiceHeroCover caseStudy={sev} />);

    const link = screen.getByRole("link", {
      name: new RegExp(`^Ver o case ${sev.title}`),
    });
    expect(link).toHaveAttribute("href", `/cases/${sev.id}`);
    const image = screen.getByAltText(`Captura de tela do site ${sev.title}`);
    expect(image).toHaveAttribute("loading", "eager");
    expect(image).toHaveAttribute("fetchpriority", "high");
    expect(image).toHaveAttribute("sizes", coverSizes.hero);
  });

  it("path: link -> pre-fetches the case only after the pointer reaches it", () => {
    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
    render(<ServiceHeroCover caseStudy={sev} />);

    const link = screen.getByRole("link");
    expect(link).toHaveAttribute("data-prefetch", "false");
    fireEvent.mouseEnter(link);
    expect(link).toHaveAttribute("data-prefetch", "null");
  });
});