import { readFileSync } from "node:fs";
import { join } from "node:path";
import { render, screen } from "@testing-library/react";
import {
  primaryButton,
  secondaryButtonDark,
} from "@/app/components/button-styles";
import NotFound, { metadata } from "./not-found";

describe("not-found", () => {
  it("has no canonical (the home one does not apply to a 404) and no generic robots tag of its own", () => {
    // o Next já escreve <meta name="robots" content="noindex"> no 404: repeti-lo duplicaria a tag
    expect(metadata.alternates).toEqual({ canonical: null });
    expect(metadata.robots).not.toHaveProperty("index");
    expect(metadata.robots).not.toHaveProperty("follow");
  });

  it("has its own Open Graph and Twitter card, with no url (the home one does not apply to a page that does not exist)", () => {
    expect(metadata.openGraph).toEqual({
      locale: "pt_BR",
      title: "Página não encontrada",
      description: "A página que você procura não existe ou foi movida.",
      siteName: "Evandro.dev.br",
      type: "website",
    });
    expect(metadata.openGraph).not.toHaveProperty("url");
    expect(metadata.twitter).toMatchObject({
      card: "summary_large_image",
      title: "Página não encontrada",
      description: "A página que você procura não existe ou foi movida.",
    });
    expect(metadata.twitter).not.toHaveProperty("url");
  });

  it("keeps Googlebot out, since the root layout lets it index", () => {
    expect(metadata.robots).toEqual({
      googleBot: { index: false, follow: false },
    });
  });

  it("explains the problem and offers a way back, in Portuguese", () => {
    render(<NotFound />);

    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("404");
    expect(
      screen.getByRole("heading", { level: 2, name: "Página não encontrada" }),
    ).toBeVisible();
    expect(
      screen.getByRole("link", { name: "Voltar ao início" }),
    ).toHaveAttribute("href", "/");
    expect(screen.getByRole("link", { name: "Ver os cases" })).toHaveAttribute(
      "href",
      "/cases",
    );
  });

  it("makes 'Voltar ao início' the primary button and 'Ver os cases' the dark outline one, with no icons", () => {
    const { container } = render(<NotFound />);

    expect(
      screen.getByRole("link", { name: "Voltar ao início" }).className,
    ).toBe(primaryButton);
    expect(screen.getByRole("link", { name: "Ver os cases" }).className).toBe(
      secondaryButtonDark,
    );
    expect(container.querySelectorAll("a svg")).toHaveLength(0);
  });

  it("shows the 3D piece as decoration: a looping video with the still as poster, inside an aria-hidden box", () => {
    const { container } = render(<NotFound />);

    const video = container.querySelector("video");
    expect(video).toHaveAttribute("poster", "/3d/peca-404.webp");
    expect(video?.closest('[aria-hidden="true"]')).not.toBeNull();
    expect(
      Array.from(container.querySelectorAll("video source")).map((source) =>
        source.getAttribute("src"),
      ),
    ).toEqual(["/3d/peca-404.webm", "/3d/peca-404.mp4"]);
  });

  it("has no slate colour left in the source", () => {
    const source = readFileSync(join(__dirname, "not-found.tsx"), "utf8");

    expect(source).not.toMatch(/slate/);
  });
});