import { fireEvent, 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.
 * Cada quadro mostra o pôster com um botão de play; o vídeo só aparece depois do clique.
 * 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 desktopPlay = `Reproduzir o vídeo do site ${props.title} no computador`;
const mobilePlay = `Reproduzir o vídeo do site ${props.title} no celular`;
const desktopVideo = `Vídeo do site ${props.title} no computador`;
const mobileVideo = `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.getByRole("button", { name: desktopPlay }),
    );
    expect(container.querySelector(".ds-phone")).toContainElement(
      screen.getByRole("button", { name: mobilePlay }),
    );
    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.getByRole("button", { name: mobilePlay }),
    ).toBeInTheDocument();
    expect(screen.queryByRole("button", { name: desktopPlay })).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.getByRole("button", { name: desktopPlay }),
    ).toBeInTheDocument();
    expect(screen.queryByRole("button", { name: mobilePlay })).toBeNull();
    expect(container.querySelector(".ds-phone")).toBeNull();
    expect(container.querySelector(".ds-bframe")).not.toBeNull();
    expect(screen.queryByText("No celular.")).toBeNull();
  });

  it("path: both captures -> no video until play, then only the pressed frame plays", () => {
    withCaptures(["desktop", "mobile"]);
    const { container } = render(<CaseMedia {...props} />);

    expect(container.querySelector("video")).toBeNull();
    // o pôster do computador vem com texto alternativo vazio: o botão já descreve o quadro
    expect(container.querySelector(".ds-bframe img")).toHaveAttribute(
      "alt",
      "",
    );

    fireEvent.click(screen.getByRole("button", { name: mobilePlay }));

    const phone = screen.getByLabelText(mobileVideo);
    expect(container.querySelector(".ds-phone")).toContainElement(phone);
    expect(phone).toHaveAttribute("poster", `/videos/${props.id}/mobile.webp`);
    expect(phone.querySelectorAll("source")).toHaveLength(2);
    expect(screen.queryByLabelText(desktopVideo)).toBeNull();
    expect(
      screen.getByRole("button", { name: desktopPlay }),
    ).toBeInTheDocument();
    expect(container.querySelectorAll("video")).toHaveLength(1);

    fireEvent.click(screen.getByRole("button", { name: desktopPlay }));
    expect(screen.getByLabelText(desktopVideo)).toHaveAttribute(
      "poster",
      `/videos/${props.id}/desktop.webp`,
    );
    expect(container.querySelectorAll("video")).toHaveLength(2);
    expect(screen.queryByRole("button")).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,
    );
  });
});