import { fireEvent, render, screen, within } from "@testing-library/react";
import { type ReactNode, useEffect } from "react";
import { useHomeFragmentNavigation } from "./cinematic/useHomeFragmentNavigation";
import { Header } from "./Header";

jest.mock("motion/react", () => {
  const React = require("react");

  const motion = new Proxy(
    {},
    {
      get: (_, tag: string) => {
        const Component = ({
          children,
          animate: _animate,
          transition: _transition,
          whileHover: _whileHover,
          ...props
        }: { children?: ReactNode } & Record<string, unknown>) =>
          React.createElement(tag, props, children);
        Component.displayName = `motion.${tag}`;
        return Component;
      },
    },
  );

  return { motion, useReducedMotion: () => false };
});

function HomeWithHeader() {
  const onLayoutReady = useHomeFragmentNavigation();
  useEffect(() => {
    onLayoutReady();
  }, [onLayoutReady]);
  return (
    <>
      <Header />
      <section id="about" aria-label="Sobre">
        <h2>Sobre</h2>
      </section>
    </>
  );
}

describe("Header", () => {
  it("exposes the primary navigation and the existing CV asset", () => {
    render(<Header />);

    expect(screen.getByRole("link", { name: "Home" })).toHaveAttribute(
      "href",
      "/#home",
    );
    expect(screen.getByRole("link", { name: "Casos" })).toHaveAttribute(
      "href",
      "/cases",
    );
    expect(screen.getByRole("link", { name: "Serviços" })).toHaveAttribute(
      "href",
      "/servicos",
    );
    expect(screen.getByRole("link", { name: "Currículo" })).toHaveAttribute(
      "href",
      "/curriculo",
    );

    const cvLink = screen.getByRole("link", { name: "Download CV" });
    expect(cvLink).toHaveAttribute("href", "/Profile.pdf");
    expect(cvLink).toHaveAttribute("download", "Evandro_Fonseca_Junior_CV.pdf");
    expect(screen.getByRole("link", { name: "Sobre" })).toHaveAttribute(
      "href",
      "/#about",
    );
    expect(screen.getByRole("link", { name: "Contato" })).toHaveAttribute(
      "href",
      "/#contact",
    );
  });

  it("announces and controls the mobile menu", () => {
    render(<Header />);

    const menuButton = screen.getByRole("button", { name: "Abrir menu" });
    expect(menuButton).not.toHaveAttribute("aria-controls");
    expect(menuButton).toHaveAttribute("aria-expanded", "false");
    expect(
      screen.queryByRole("navigation", { name: "Navegação mobile" }),
    ).not.toBeInTheDocument();

    fireEvent.click(menuButton);

    expect(screen.getByRole("button", { name: "Fechar menu" })).toHaveAttribute(
      "aria-expanded",
      "true",
    );
    const mobileNavigation = screen.getByRole("navigation", {
      name: "Navegação mobile",
    });
    expect(
      document.getElementById(menuButton.getAttribute("aria-controls") ?? ""),
    ).toBe(mobileNavigation);

    const mobileLink = within(mobileNavigation).getByRole("link", {
      name: "Sobre",
    });
    mobileLink.focus();
    fireEvent.keyDown(mobileLink, { key: "Escape" });
    const openButton = screen.getByRole("button", { name: "Abrir menu" });
    expect(openButton).toHaveAttribute("aria-expanded", "false");
    expect(document.activeElement).toBe(openButton);
  });

  it("closes the mobile menu without taking focus away from a home destination", () => {
    window.history.replaceState(null, "", "/");
    render(<HomeWithHeader />);

    fireEvent.click(screen.getByRole("button", { name: "Abrir menu" }));
    const mobileNavigation = screen.getByRole("navigation", {
      name: "Navegação mobile",
    });
    const mobileLink = within(mobileNavigation).getByRole("link", {
      name: "Sobre",
    });
    mobileLink.focus();
    fireEvent.click(mobileLink);

    expect(screen.getByRole("button", { name: "Abrir menu" })).toHaveAttribute(
      "aria-expanded",
      "false",
    );
    expect(
      screen.queryByRole("navigation", { name: "Navegação mobile" }),
    ).not.toBeInTheDocument();
    expect(screen.getByRole("region", { name: "Sobre" })).toHaveFocus();
  });
});