import { render, screen } from "@testing-library/react";
import { getShowcaseAssets } from "@/lib/project-showcase";
import { CaseMedia } from "./CaseMedia";
import { getCaseMedia } from "./case-media";

/**
 * Testes de caminhos-base de CaseMedia: com computador e celular, só um dos dois, ou nenhum.
 * A existência dos arquivos em disco é simulada em getCaseMedia, para o teste não depender de public/.
 */

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

const mockedGetCaseMedia = jest.mocked(getCaseMedia);

function withCaptures(devices: ReadonlyArray<"desktop" | "mobile">) {
  mockedGetCaseMedia.mockImplementation((id, device) =>
    devices.includes(device) ? getShowcaseAssets(id, device) : undefined,
  );
}

const props = {
  id: "sev-modaintima",
  title: "SEV Moda Íntima",
  demoUrl: "https://sevmodaintima.com.br",
};
const desktopLabel = `Vídeo do site ${props.title} no computador`;
const mobileLabel = `Vídeo do site ${props.title} no celular`;

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

describe("CaseMedia", () => {
  it("path: desktop and mobile captures -> both frames, the browser bar shows the real domain", () => {
    withCaptures(["desktop", "mobile"]);
    const { container } = render(<CaseMedia {...props} />);

    expect(container.querySelector(".ds-bframe")).toContainElement(
      screen.getByLabelText(desktopLabel),
    );
    expect(container.querySelector(".ds-phone")).toContainElement(
      screen.getByLabelText(mobileLabel),
    );
    expect(container.querySelector(".ds-bframe-url")).toHaveTextContent(
      "sevmodaintima.com.br",
    );
    expect(
      screen.getByText(`O site ${props.title} no computador.`),
    ).toBeVisible();
    expect(screen.getByText("No celular.")).toBeVisible();
    expect(mockedGetCaseMedia).toHaveBeenCalledWith(props.id, "desktop");
    expect(mockedGetCaseMedia).toHaveBeenCalledWith(props.id, "mobile");
  });

  it("path: no capture at all -> renders nothing", () => {
    withCaptures([]);
    const { container } = render(<CaseMedia {...props} />);

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

  it("path: only the mobile capture -> phone frame without the browser frame", () => {
    withCaptures(["mobile"]);
    const { container } = render(<CaseMedia {...props} />);

    expect(screen.getByLabelText(mobileLabel)).toBeInTheDocument();
    expect(screen.queryByLabelText(desktopLabel)).toBeNull();
    expect(container.querySelector(".ds-bframe")).toBeNull();
    expect(container.querySelector(".ds-phone")).not.toBeNull();
    expect(screen.queryByText(/no computador\./)).toBeNull();
  });

  it("path: only the desktop capture -> browser frame without the phone frame", () => {
    withCaptures(["desktop"]);
    const { container } = render(<CaseMedia {...props} />);

    expect(screen.getByLabelText(desktopLabel)).toBeInTheDocument();
    expect(screen.queryByLabelText(mobileLabel)).toBeNull();
    expect(container.querySelector(".ds-phone")).toBeNull();
    expect(container.querySelector(".ds-bframe")).not.toBeNull();
    expect(screen.queryByText("No celular.")).toBeNull();
  });

  it("path: no demo address -> the browser bar falls back to the project title", () => {
    withCaptures(["desktop"]);
    const { container } = render(
      <CaseMedia id={props.id} title={props.title} demoUrl={null} />,
    );

    expect(container.querySelector(".ds-bframe-url")).toHaveTextContent(
      props.title,
    );
  });
});