import { fireEvent, render, screen } from "@testing-library/react";
import { getShowcaseAssets } from "@/lib/project-showcase";
import { CasePlayer } from "./CasePlayer";

const title = "SEV Moda Íntima";

describe("CasePlayer", () => {
  it("shows the poster and an accessible play button instead of a paused video", () => {
    const { container } = render(
      <div className="relative">
        <CasePlayer
          assets={getShowcaseAssets("sev-modaintima", "desktop")}
          title={title}
          device="desktop"
        />
      </div>,
    );

    expect(container.querySelector("video")).toBeNull();
    // a imagem é decorativa: o botão já diz o que o quadro mostra
    const poster = container.querySelector("img");
    expect(poster).toHaveAttribute("alt", "");
    expect(poster?.getAttribute("src")).toContain(
      encodeURIComponent("/videos/sev-modaintima/desktop.webp"),
    );
    const button = screen.getByRole("button", {
      name: `Reproduzir o vídeo do site ${title} no computador`,
    });
    expect(button).toHaveAttribute("type", "button");
    // em repouso o play é escuro, com contorno branco; o limão só vem sob o ponteiro ou no foco, com o círculo maior
    const circle = button.querySelector("[aria-hidden='true']");
    const restClasses = (circle?.className ?? "")
      .split(" ")
      .filter((name) => !name.startsWith("group-"));
    expect(restClasses.join(" ")).not.toContain("--slash");
    expect(circle).toHaveClass(
      "group-hover:scale-108",
      "group-hover:bg-[var(--slash)]",
      "group-focus-visible:scale-108",
      "group-focus-visible:bg-[var(--slash)]",
    );
  });

  it("mounts the video with its sources only after the click, muted and looping, with focus on it", () => {
    const assets = getShowcaseAssets("lavacao-047", "desktop");
    render(
      <div className="relative">
        <CasePlayer assets={assets} title="Lavação 047" device="desktop" />
      </div>,
    );

    fireEvent.click(screen.getByRole("button"));

    const video = screen.getByLabelText(
      "Vídeo do site Lavação 047 no computador",
    );
    expect(video).toHaveFocus();
    expect(video).toHaveAttribute("controls");
    expect(video).toHaveAttribute("poster", assets.poster);
    expect(video).toHaveAttribute("width", String(assets.width));
    expect(video).toHaveAttribute("height", String(assets.height));
    expect((video as HTMLVideoElement).muted).toBe(true);
    expect((video as HTMLVideoElement).loop).toBe(true);
    expect(
      [...video.querySelectorAll("source")].map((source) => [
        source.getAttribute("src"),
        source.getAttribute("type"),
      ]),
    ).toEqual(assets.sources.map(({ src, type }) => [src, type]));
    expect(screen.queryByRole("button")).toBeNull();
  });

  it("leaves the poster to the phone frame on mobile and names the device in the labels", () => {
    const { container } = render(
      <div className="relative">
        <CasePlayer
          assets={getShowcaseAssets("sc-plus", "mobile")}
          title="SC Plus Aquicultura"
          device="mobile"
        />
      </div>,
    );

    expect(container.querySelector("img")).toBeNull();
    fireEvent.click(
      screen.getByRole("button", {
        name: "Reproduzir o vídeo do site SC Plus Aquicultura no celular",
      }),
    );
    expect(
      screen.getByLabelText("Vídeo do site SC Plus Aquicultura no celular"),
    ).toHaveAttribute("poster", "/videos/sc-plus/mobile.webp");
  });
});