import { fireEvent, render, screen } from "@testing-library/react";
import Hero from "./Hero";

/**
 * Testes de caminhos-base de Hero (complemento de Hero.test.tsx): anos de experiência (sem stats, sem anos, zero anos, com anos),
 * links sociais (externo x mailto, com rastreio) e faixa de clientes.
 */

jest.mock("./cinematic/HeroField", () => ({
  __esModule: true,
  default: () => <div data-testid="hero-field" />,
}));

beforeEach(() => {
  jest.replaceProperty(process.env, "NODE_ENV", "production");
  localStorage.setItem("evandro.analytics-consent.v1", "granted");
  window.gtag = jest.fn();
});

afterEach(() => {
  jest.restoreAllMocks();
  localStorage.clear();
  delete window.gtag;
});

describe("Hero: anos de experiência (na linha de clientes)", () => {
  it.each([
    ["no stats at all", undefined],
    ["stats without years", {}],
    ["zero years", { years: 0 }],
  ])("path: %s -> no experience text", (_label, stats) => {
    const { container } = render(<Hero stats={stats} />);

    expect(container.querySelector("dl")).toBeNull();
    expect(screen.queryByText("anos de experiência")).toBeNull();
  });

  it("path: years given -> the number and its label sit in the same line as the clients", () => {
    const { container } = render(
      <Hero
        stats={{ years: 7 }}
        clients={[{ id: "lavacao-047", name: "Lavação 047" }]}
      />,
    );

    expect(container.querySelector("dl")).toBeNull();
    const strip = screen.getByText("Já entregue para:").parentElement;
    expect(strip).toHaveTextContent("Lavação 047");
    expect(strip).toHaveTextContent("7 anos de experiência");
  });

  it("path: years given but no clients -> only the experience text, with no 'Já entregue para'", () => {
    render(<Hero stats={{ years: 7 }} />);

    expect(screen.getByText("anos de experiência")).toBeInTheDocument();
    expect(screen.queryByText("Já entregue para:")).toBeNull();
  });
});

describe("Hero: links sociais", () => {
  it("path: LinkedIn (http link) -> new tab with noopener and a social_click", () => {
    render(<Hero />);
    const link = screen.getByRole("link", { name: "LinkedIn" });

    expect(link).toHaveAttribute("target", "_blank");
    expect(link).toHaveAttribute("rel", "noopener noreferrer");
    fireEvent.click(link, { button: 0 });

    expect(window.gtag).toHaveBeenCalledWith(
      "event",
      "social_click",
      expect.objectContaining({ network: "linkedin" }),
    );
  });

  it("path: e-mail (mailto link) -> same tab, no rel, and an email_click from the hero", () => {
    render(<Hero />);
    const link = screen.getByRole("link", { name: "Email" });

    expect(link).not.toHaveAttribute("target");
    expect(link).not.toHaveAttribute("rel");
    link.addEventListener("click", (event) => event.preventDefault());
    fireEvent.click(link, { button: 0 });

    expect(window.gtag).toHaveBeenCalledWith(
      "event",
      "email_click",
      expect.objectContaining({ placement: "hero" }),
    );
  });
});

describe("Hero: faixa de clientes e trabalho em destaque", () => {
  it("path: clients given -> the strip links each client to its case", () => {
    render(<Hero clients={[{ id: "lavacao-047", name: "Lavação 047" }]} />);

    expect(screen.getByText("Já entregue para:")).toBeInTheDocument();
    expect(screen.getByRole("link", { name: "Lavação 047" })).toHaveAttribute(
      "href",
      "/cases/lavacao-047",
    );
  });

  it("path: no clients -> no strip", () => {
    render(<Hero />);

    expect(screen.queryByText("Já entregue para:")).toBeNull();
  });

  it("path: the WhatsApp link carries the id that hides the floating WhatsApp; the form button does not", () => {
    render(<Hero />);

    expect(
      screen.getByRole("link", { name: "Chamar no WhatsApp" }),
    ).toHaveAttribute("id", "hero-contact-cta");
    expect(
      screen.getByRole("link", { name: /Falar sobre meu projeto/ }),
    ).not.toHaveAttribute("id");
  });
});

describe("Hero: contato", () => {
  it("path: 'Chamar no WhatsApp' -> a whatsapp_open from the hero, with the home subject", () => {
    render(<Hero />);
    const link = screen.getByRole("link", { name: "Chamar no WhatsApp" });
    link.addEventListener("click", (event) => event.preventDefault());
    fireEvent.click(link, { button: 0 });

    expect(window.gtag).toHaveBeenCalledWith(
      "event",
      "whatsapp_open",
      expect.objectContaining({
        placement: "hero",
        service: "um site ou sistema para a minha empresa",
      }),
    );
  });

  it("path: 'Falar sobre meu projeto' -> the form, with no WhatsApp event", () => {
    render(<Hero />);
    const link = screen.getByRole("link", { name: /Falar sobre meu projeto/ });
    link.addEventListener("click", (event) => event.preventDefault());
    fireEvent.click(link, { button: 0 });

    expect(link).toHaveAttribute("href", "/#contact-form");
    expect(window.gtag).not.toHaveBeenCalledWith(
      "event",
      "whatsapp_open",
      expect.anything(),
    );
  });
});