import { render, screen } from "@testing-library/react";
import { setNavigation } from "@/__mocks__/next/navigation";
import { getServiceOffer, getServicePage } from "@/lib/site-content";
import ServicePage from "./page";

/**
 * Caminhos-base de ServicePage (CC 4, contado à mão: serviço que não existe | bloco menor `alsoCases` | oferta com
 * "O que você recebe") nas combinações do bloco menor e da oferta, que page.test.tsx só mostra juntas ou separadas com
 * dados reais:
 *   - nem bloco menor nem oferta (a base: tauri-rust);
 *   - bloco menor SEM oferta (nenhum serviço real é assim: montado trocando `alsoCases` de consultoria-nextjs);
 *   - bloco menor E oferta (criacao-de-sites): a ordem na página é cases, bloco menor, "O que você recebe".
 * O slug desconhecido está em page.paths.test.tsx.
 */

beforeEach(() => {
  setNavigation({ pathname: "/servicos" });
});

async function renderService(slug: string) {
  const ui = await ServicePage({ params: Promise.resolve({ slug }) });
  return render(ui);
}

const ALSO_TITLE = "Também faço sites institucionais";
const ALSO_HEADING = { level: 2, name: ALSO_TITLE } as const;
const DELIVERABLES_HEADING = {
  level: 2,
  name: "O que você recebe",
} as const;

describe("ServicePage: bloco menor e oferta", () => {
  it("path: no smaller block and no offer -> neither 'Também faço' nor 'O que você recebe', and the rest of the page stays", async () => {
    expect(getServicePage("tauri-rust")?.alsoCases).toBeUndefined();
    expect(getServiceOffer("tauri-rust")).toBeUndefined();

    await renderService("tauri-rust");

    expect(screen.queryByRole("heading", ALSO_HEADING)).toBeNull();
    expect(screen.queryByRole("heading", DELIVERABLES_HEADING)).toBeNull();
    expect(
      screen.getByRole("heading", { level: 2, name: "Como trabalhamos" }),
    ).toBeVisible();
  });

  it("path: a smaller block on a service that is not an offer -> the block shows, 'O que você recebe' does not", async () => {
    const service = getServicePage("consultoria-nextjs");
    if (!service) throw new Error("Missing service consultoria-nextjs");
    expect(getServiceOffer(service.slug)).toBeUndefined();
    const original = service.alsoCases;
    service.alsoCases = { title: "Também faço isto", caseIds: ["sc-plus"] };
    try {
      await renderService(service.slug);

      const block = screen
        .getByRole("heading", { level: 2, name: "Também faço isto" })
        .closest("section") as HTMLElement;
      expect(block).toHaveTextContent("SC Plus");
      expect(screen.queryByRole("heading", DELIVERABLES_HEADING)).toBeNull();
    } finally {
      service.alsoCases = original;
    }
  });

  it("path: a smaller block on an offer -> the cases come first, then the block, then 'O que você recebe'", async () => {
    await renderService("criacao-de-sites");

    const cases = document.getElementById("casos-relacionados");
    const also = screen
      .getByRole("heading", ALSO_HEADING)
      .closest("section") as HTMLElement;
    const deliverables = screen
      .getByRole("heading", DELIVERABLES_HEADING)
      .closest("section") as HTMLElement;
    expect(cases).not.toBeNull();
    const follows = Node.DOCUMENT_POSITION_FOLLOWING;
    expect(
      (cases as HTMLElement).compareDocumentPosition(also) & follows,
    ).toBeTruthy();
    expect(also.compareDocumentPosition(deliverables) & follows).toBeTruthy();
  });
});