import { render, screen, within } from "@testing-library/react";
import { clientCases } from "@/lib/site-content";
import { getCaseMedia } from "./_components/case-media";
import CasesPage from "./page";

/**
 * Teste de caminhos-base da lista de cases de cliente em CasesPage:
 * o caminho "case de cliente sem captura gravada" (a página principal só vê cases com captura).
 */

jest.mock("./_components/case-media", () => {
  const actual = jest.requireActual("./_components/case-media");
  return { ...actual, getCaseMedia: jest.fn(actual.getCaseMedia) };
});

const actualGetCaseMedia = jest.requireActual<
  typeof import("./_components/case-media")
>("./_components/case-media").getCaseMedia;
const mockedGetCaseMedia = jest.mocked(getCaseMedia);

afterEach(() => {
  mockedGetCaseMedia.mockImplementation(actualGetCaseMedia);
});

function clientCard(container: HTMLElement, id: string) {
  const card = container
    .querySelector(`a[href="/cases/${id}"]`)
    ?.closest("article");
  if (!card) throw new Error(`Missing client card ${id}`);
  return card;
}

describe("CasesPage: cases de cliente", () => {
  it("path: client case without a desktop capture -> card keeps text and links but no cover", () => {
    const [withoutCapture, withCapture] = clientCases;
    mockedGetCaseMedia.mockImplementation((id, device) =>
      id === withoutCapture.id ? undefined : actualGetCaseMedia(id, device),
    );

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

    const bare = clientCard(container, withoutCapture.id);
    expect(bare.querySelector(".ds-bframe")).toBeNull();
    expect(bare.querySelector("img")).toBeNull();
    expect(
      within(bare).queryByRole("link", {
        name: `Ver o case ${withoutCapture.title}`,
      }),
    ).toBeNull();
    expect(within(bare).getByText(withoutCapture.headline)).toBeVisible();
    expect(
      within(bare).getByRole("link", { name: "Ver o case" }),
    ).toHaveAttribute("href", `/cases/${withoutCapture.id}`);

    // os outros cases de cliente continuam com a capa
    const covered = clientCard(container, withCapture.id);
    expect(covered.querySelector(".ds-bframe img")).toHaveAttribute(
      "alt",
      `Captura de tela do site ${withCapture.title}`,
    );
    expect(screen.getAllByRole("link", { name: "Ver o case" })).toHaveLength(
      clientCases.length,
    );
  });
});

describe("CasesPage: topo com mosaico de pôsteres", () => {
  it("path: captures found -> two columns with three posters of the other clients, not the first card's", () => {
    const { container } = render(<CasesPage />);

    const hero = container.querySelector("section");
    expect(hero?.querySelector(".ds-section-shell")).toHaveClass("grid");
    expect(hero?.className).not.toContain("md:!pb-sp-12");
    const posters = Array.from(hero?.querySelectorAll("img") ?? []).map(
      (image) => decodeURIComponent(image.getAttribute("src") ?? ""),
    );
    expect(posters).toHaveLength(3);
    expect(posters.join(" ")).not.toContain(clientCases[0].id);
    for (const [index, { id }] of clientCases.slice(1).entries()) {
      expect(posters[index]).toContain(`/videos/${id}/desktop.webp`);
    }
  });

  it("path: no capture for the other clients -> no mosaic, a lower one-column strip, and the first card cover takes the priority", () => {
    mockedGetCaseMedia.mockImplementation((id, device) =>
      id === clientCases[0].id ? actualGetCaseMedia(id, device) : undefined,
    );

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

    const hero = container.querySelector("section");
    expect(hero?.querySelector("img")).toBeNull();
    expect(hero?.querySelector(".ds-section-shell")).not.toHaveClass("grid");
    expect(hero?.className).toContain("md:!pb-sp-12");
    const firstCover = clientCard(container, clientCases[0].id).querySelector(
      ".ds-bframe img",
    );
    expect(firstCover).toHaveAttribute("loading", "eager");
    expect(firstCover).toHaveAttribute("fetchpriority", "high");
  });
});

describe("CasesPage: prioridade da capa do primeiro cartão", () => {
  it("path: mosaic at the top -> the first card cover stays lazy, the priority is the mosaic's first poster", () => {
    const { container } = render(<CasesPage />);

    const hero = container.querySelector("section");
    expect(hero?.querySelector("img")).toHaveAttribute("loading", "eager");
    for (const { id } of clientCases) {
      const cover = clientCard(container, id).querySelector(".ds-bframe img");
      expect(cover).toHaveAttribute("loading", "lazy");
      expect(cover).not.toHaveAttribute("fetchpriority");
    }
  });
});