import { render, screen } from "@testing-library/react";
import { getShowcaseAssets } from "@/lib/project-showcase";
import { caseStudies } from "@/lib/site-content";
import { CaseCover, coverSizes } from "./CaseCover";
import { getCaseMedia } from "./case-media";
import { coverTransitionProps } from "./cover-transition";

/**
 * Testes de caminhos-base de CaseCover: sem captura (nada), com captura (moldura + pôster),
 * os valores padrão de `sizes` e `priority` (prioridade = carga imediata e `fetchpriority="high"`)
 * e o pôster como elemento compartilhado da troca de página.
 */

jest.mock("./case-media", () => ({ getCaseMedia: jest.fn() }));

// o dublê do <ViewTransition> põe as props num <div> para o teste ler
jest.mock("react", () =>
  jest.requireActual("@/__mocks__/view-transition-probe").reactWithProbe(),
);

const mockedGetCaseMedia = jest.mocked(getCaseMedia);
const props = {
  id: "sev-modaintima",
  title: "SEV Moda Íntima",
  demoUrl: "https://sevmodaintima.com.br",
};

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

describe("CaseCover", () => {
  it("path: capture found -> the poster is the shared element of the page change (case-<id>, only the pair animates)", () => {
    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
    render(<CaseCover {...props} />);

    const image = screen.getByAltText(`Captura de tela do site ${props.title}`);
    const transition = image.parentElement;
    expect(transition).toHaveAttribute("data-vt-name", `case-${props.id}`);
    expect(transition).toHaveAttribute("data-vt-share", "case-cover");
    expect(transition).toHaveAttribute("data-vt-default", "none");
  });

  it("coverTransitionProps: every case gets its own name, valid as a CSS identifier", () => {
    const names = caseStudies.map(({ id }) => coverTransitionProps(id).name);
    for (const name of names) expect(name).toMatch(/^[a-z][a-z0-9-]*$/);
    expect(new Set(names).size).toBe(names.length);
  });

  it("path: no desktop capture -> renders nothing", () => {
    mockedGetCaseMedia.mockReturnValue(undefined);
    const { container } = render(<CaseCover {...props} />);

    expect(container).toBeEmptyDOMElement();
    expect(mockedGetCaseMedia).toHaveBeenCalledWith(props.id, "desktop");
  });

  it("path: capture found -> poster inside the browser frame, with the real domain in the bar", () => {
    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
    const { container } = render(<CaseCover {...props} />);

    const image = screen.getByAltText(`Captura de tela do site ${props.title}`);
    expect(container.querySelector(".ds-bframe")).toContainElement(image);
    expect(image.getAttribute("src")).toContain(
      encodeURIComponent(`/videos/${props.id}/desktop.webp`),
    );
    expect(container.querySelector(".ds-bframe-url")).toHaveTextContent(
      "sevmodaintima.com.br",
    );
  });

  it("path: sizes and priority omitted -> default sizes and lazy loading", () => {
    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
    render(<CaseCover {...props} />);

    const image = screen.getByAltText(`Captura de tela do site ${props.title}`);
    expect(image).toHaveAttribute("sizes", coverSizes.card);
    expect(image).toHaveAttribute("loading", "lazy");
    expect(image).not.toHaveAttribute("fetchpriority");
  });

  it("path: sizes and priority given -> uses them, with eager loading and high fetch priority", () => {
    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
    render(<CaseCover {...props} sizes="320px" priority />);

    const image = screen.getByAltText(`Captura de tela do site ${props.title}`);
    expect(image).toHaveAttribute("sizes", "320px");
    expect(image).toHaveAttribute("loading", "eager");
    expect(image).toHaveAttribute("fetchpriority", "high");
  });

  it("path: no 100vw sizes -> every preset describes the width the cover really has", () => {
    // 100vw baixava a imagem de 750 px para uma capa de 300 px no celular
    for (const sizes of Object.values(coverSizes)) {
      expect(sizes).not.toMatch(/(^|, )100vw$/);
      expect(sizes).toMatch(/calc\(100vw - \d+px\)$/);
    }
  });
});