import { render } from "@testing-library/react";
import "@testing-library/jest-dom/vitest";

import { Megamenu, MegamenuBlog } from "../";

describe("Megamenu logo markup", () => {
  it("separates top links from the language switcher without a spacer item", () => {
    const { container } = render(<Megamenu notSticky />);
    const topContent = container.querySelector(".megamenu__top-content");
    const lists = topContent?.querySelectorAll(":scope > ul");

    expect(lists).toHaveLength(2);
    expect(lists?.[1]).toHaveAttribute("aria-label", "Výber jazyka");
    expect(
      topContent?.querySelector(".megamenu__nav-spacer"),
    ).not.toBeInTheDocument();
    expect(
      topContent?.querySelector(".megamenu__nav-item--push"),
    ).toHaveTextContent("Velké firmy");
  });

  it("pushes mobile utility controls after the main logo", () => {
    const { container, rerender } = render(<Megamenu notSticky />);
    const mainLogoItem = container.querySelector(
      ".megamenu__main .megamenu__nav-item--main:first-child",
    );

    expect(mainLogoItem).toHaveClass("megamenu__nav-item--push");

    rerender(<MegamenuBlog notSticky />);

    expect(
      container.querySelector(
        ".megamenu__main .megamenu__nav-item--main:first-child",
      ),
    ).toHaveClass("megamenu__nav-item--push");
  });

  it("is sticky by default and supports disabling stickiness", () => {
    const { container, rerender } = render(<Megamenu />);
    const nav = container.querySelector("[data-megamenu]");

    expect(nav).not.toHaveClass("non-sticky");

    rerender(<Megamenu notSticky />);

    expect(nav).toHaveClass("non-sticky");
  });

  it("renders brand-mark wrapper for default Megamenu logo swap", () => {
    const { container } = render(<Megamenu notSticky />);

    const logo = container.querySelector(".megamenu__nav-logo");
    const brandMark = logo?.querySelector(
      ":scope > [data-megamenu-brand-mark]",
    );

    expect(brandMark).toBeInTheDocument();
    expect(
      brandMark?.querySelector("[data-megamenu-logo-full]"),
    ).toBeInTheDocument();
    expect(
      brandMark?.querySelector("[data-megamenu-logo-compact]"),
    ).toBeInTheDocument();
  });

  it("keeps compactLogoOnly output without brand-mark wrapper", () => {
    const { container } = render(<MegamenuBlog compactLogoOnly notSticky />);

    const logo = container.querySelector(".megamenu__nav-logo");

    expect(
      logo?.querySelector(":scope > [data-megamenu-brand-mark]"),
    ).not.toBeInTheDocument();
    expect(
      logo?.querySelector("[data-megamenu-logo-full]"),
    ).not.toBeInTheDocument();
    expect(
      logo?.querySelector("[data-megamenu-logo-compact]"),
    ).not.toBeInTheDocument();
  });

  it("renders desktop CTA link in default megamenu", () => {
    const { container } = render(<Megamenu notSticky />);

    const cta = container.querySelector(
      ".megamenu__nav-item--main .megamenu__nav-link--cta",
    );

    expect(cta).toBeInTheDocument();
    expect(cta).toHaveTextContent("Prejdite k nám");
    expect(cta.querySelector(".megamenu__nav-icon--cta")).toBeInTheDocument();
  });

  it("renders mobile CTA before quick-access links", () => {
    const { container } = render(<Megamenu notSticky />);

    const mobileCta = container.querySelector(".megamenu__mobile-cta");
    const quickAccess = container.querySelector("#mobile-quick-access-heading");

    expect(mobileCta).toBeInTheDocument();
    expect(mobileCta).toHaveTextContent("Prejdite k nám");
    expect(mobileCta.compareDocumentPosition(quickAccess)).toBe(
      Node.DOCUMENT_POSITION_FOLLOWING,
    );
  });

  it("renders quick-access tiles below menu content", () => {
    const { container } = render(<Megamenu notSticky />);

    expect(container.querySelectorAll(".megamenu__tile")).toHaveLength(18);
    expect(
      container.querySelectorAll(".megamenu__tile .megamenu__tag"),
    ).toHaveLength(12);
    expect(
      container.querySelector('.megamenu__tile[href="/"]'),
    ).toHaveTextContent("Chcem nové číslo");
  });

  it("renders empty cart by default", () => {
    const { container } = render(<Megamenu notSticky />);

    const cart = container.querySelector(
      ".megamenu__nav-cart-icon:not([data-items-in-cart]):not([data-cart-has-items])",
    );

    expect(cart).toBeInTheDocument();
    expect(cart?.parentElement).toHaveAttribute("aria-label", "Košík");
    expect(cart?.nextElementSibling).not.toBeInTheDocument();
  });

  it("renders optional orange cart dot", () => {
    const { container } = render(<Megamenu cartHasItems notSticky />);

    const cart = container.querySelector(
      ".megamenu__nav-cart-icon[data-cart-has-items]",
    );

    expect(cart).toBeInTheDocument();
    expect(cart).toHaveAttribute("data-cart-has-items", "true");
  });

  it("renders logged-out My Orange panel content", () => {
    const { container } = render(<Megamenu isLoggedIn={false} notSticky />);

    expect(container).toHaveTextContent("Prihlásenie");
    expect(container).not.toHaveTextContent("Odhlásiť");
    expect(container).not.toHaveTextContent("0905 123 456");
  });

  it("renders optional cart item count", () => {
    const { container } = render(<Megamenu cartItems={3} notSticky />);

    const cart = container.querySelector(
      ".megamenu__nav-cart-icon[data-items-in-cart]",
    );

    expect(cart).toHaveAttribute("data-items-in-cart", "3");
    expect(cart?.parentElement).toHaveAttribute(
      "aria-label",
      "Košík, 3 položka",
    );
    expect(cart?.nextElementSibling).toHaveTextContent("3 položka v košíku");
  });

  it("renders empty cart without a badge", () => {
    const { container } = render(<Megamenu cartItems={0} notSticky />);

    const cart = container.querySelector(
      ".megamenu__nav-cart-icon:not([data-items-in-cart])",
    );

    expect(cart).toBeInTheDocument();
    expect(cart?.parentElement).toHaveAttribute("aria-label", "Košík");
    expect(cart?.nextElementSibling).not.toBeInTheDocument();
  });
});