import "@testing-library/jest-dom";

import React from "react";
import { Navigation } from "./index";
import { NavigationProps } from "./types";

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

jest.mock("./desktop-link-groups.tsx", () => ({
  DesktopLinkGroups: ({ anchorName, link }: any) => (
    <div data-testid={`desktop-link-group-${anchorName}`}>
      {link?.title || link?.buttonLabel}
    </div>
  ),
}));

jest.mock("./mobile-link-groups.tsx", () => ({
  MobileLinkGroups: ({ link }: any) => (
    <div data-testid="mobile-link-group">
      {link?.title || link?.buttonLabel}
    </div>
  ),
}));

jest.mock("@shared/components/call-button", () => ({
  CallButton: ({ children, href, onClick, className }: any) => (
    <a
      data-testid="call-button"
      href={href}
      className={className}
      onClick={onClick}
    >
      {children}
    </a>
  ),
}));

jest.mock("@shared/components/input", () => ({
  // eslint-disable-next-line react/display-name
  Input: React.forwardRef(
    (
      {
        name,
        value,
        onChange,
        placeholder,
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        className,
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        containerClassName,
      }: any,
      ref: any
    ) => (
      <input
        data-testid={`input-${name}`}
        ref={ref}
        name={name}
        value={value}
        onChange={onChange}
        placeholder={placeholder}
      />
    )
  ),
}));

jest.mock("@shared/components/link", () => ({
  Link: ({ children, href, className, onClick, ...rest }: any) => (
    <a
      data-testid="link"
      href={href}
      className={className}
      onClick={onClick}
      {...rest}
    >
      {children}
    </a>
  ),
}));

jest.mock("@shared/components/material-icon", () => ({
  MaterialIcon: ({ name }: any) => (
    <span data-testid={`icon-${name}`}>{name}</span>
  ),
}));

jest.mock("@shared/components/next-image", () => ({
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  NextImage: ({ src, alt, onClick, ...rest }: any) => (
    <img data-testid="next-image" src={src} alt={alt} onClick={onClick} />
  ),
}));

jest.mock("@shared/components/text", () => ({
  Text: ({ as: Tag = "span", children, className }: any) => (
    <Tag className={className}>{children}</Tag>
  ),
}));

jest.mock("@shared/contentful/blocks/button", () => ({
  Button: ({
    children,
    buttonClassName,
    onClick,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    showButtonAs,
    linkClassName,
    ...rest
  }: any) => (
    <button
      data-testid="contentful-button"
      className={buttonClassName || linkClassName}
      onClick={onClick}
    >
      {children || rest.buttonLabel}
    </button>
  ),
  __esModule: true,
}));

jest.mock("@shared/utils", () => ({
  cx: (...args: any[]) => args.filter(Boolean).join(" "),
}));

const defaultProps: NavigationProps = {
  primaryNavigationLinks: [],
  utilityNavigationLinks: [],
  primaryNavigationLogo: "https://logo.test/logo.png",
  accountNavigationLinks: [],
  supportNavigationLinks: [],
  searchBarIcon: "https://icon.test/search.png",
  invocaPhoneNumberLink: "tel:1234567890",
  invocaPhoneNumberDisplayText: "123-456-7890",
  callNowCtaText: "Call Now",
  displayCartIcon: false,
  cartHref: "/cart",
  cartHasRetention: false,
  cartIconAriaLabel: "Cart",
  onSearch: jest.fn(),
};

// Props that include primaryNavigationLinks so MobileMenu renders
const mobileMenuProps: NavigationProps = {
  ...defaultProps,
  primaryNavigationLinks: [
    { buttonLabel: "Products", href: "/products" },
  ] as any,
};

describe("Navigation", () => {
  beforeEach(() => jest.clearAllMocks());

  describe("Basic rendering", () => {
    it("renders nav with utility and main nav sections", () => {
      const { container } = render(<Navigation {...defaultProps} />);
      expect(container.querySelector(".menu-container")).toBeInTheDocument();
      expect(container.querySelector(".utility-container")).toBeInTheDocument();
      expect(
        container.querySelector(".desktop-nav-section")
      ).toBeInTheDocument();
      expect(
        container.querySelector(".mobile-nav-section")
      ).toBeInTheDocument();
    });

    it("renders logo with string src", () => {
      render(<Navigation {...defaultProps} />);
      const logos = screen.getAllByAltText("Kinetic business logo");
      expect(logos[0]).toHaveAttribute("src", "https://logo.test/logo.png");
    });

    it("renders logo with object src (Asset)", () => {
      render(
        <Navigation
          {...defaultProps}
          primaryNavigationLogo={{ url: "https://logo.test/obj.png" } as any}
        />
      );
      const logos = screen.getAllByAltText("Kinetic business logo");
      expect(logos[0]).toHaveAttribute("src", "https://logo.test/obj.png");
    });

    it("does not render logo when logo url is empty", () => {
      const { container } = render(
        <Navigation {...defaultProps} primaryNavigationLogo={{} as any} />
      );
      // logoUrl is "" so the conditional renders null
      expect(
        container.querySelector("[alt='Kinetic business logo']")
      ).not.toBeInTheDocument();
    });

    it("renders phone number display text", () => {
      render(<Navigation {...defaultProps} />);
      expect(screen.getAllByText("123-456-7890").length).toBeGreaterThan(0);
    });
  });

  describe("Utility navigation links", () => {
    it("renders utility nav links", () => {
      const links = [
        { buttonLabel: "Residential", href: "/residential" },
        { buttonLabel: "Business", href: "/business" },
      ];
      render(
        <Navigation {...defaultProps} utilityNavigationLinks={links as any} />
      );
      const buttons = screen.getAllByTestId("contentful-button");
      expect(buttons.length).toBeGreaterThanOrEqual(2);
    });

    it("applies active class to second link by default (no utilityNavActiveIndex)", () => {
      const links = [
        { buttonLabel: "Residential", href: "/residential" },
        { buttonLabel: "Business", href: "/business" },
      ];
      const { container } = render(
        <Navigation {...defaultProps} utilityNavigationLinks={links as any} />
      );
      const utilityButtons = container.querySelectorAll(
        ".utility-container button"
      );
      expect(utilityButtons[1]?.className).toContain("label4");
    });

    it("applies active class based on utilityNavActiveIndex", () => {
      const links = [
        { buttonLabel: "Residential", href: "/residential" },
        { buttonLabel: "Business", href: "/business" },
      ];
      const { container } = render(
        <Navigation
          {...defaultProps}
          utilityNavigationLinks={links as any}
          utilityNavActiveIndex={0}
        />
      );
      const utilityButtons = container.querySelectorAll(
        ".utility-container button"
      );
      expect(utilityButtons[0]?.className).toContain("label4");
    });
  });

  describe("Cart icon", () => {
    it("renders cart icon when displayCartIcon is true", () => {
      render(<Navigation {...defaultProps} displayCartIcon={true} />);
      expect(
        screen.getAllByTestId("icon-shopping_cart").length
      ).toBeGreaterThan(0);
    });

    it("shows retention dot when cartHasRetention is true", () => {
      const { container } = render(
        <Navigation
          {...defaultProps}
          displayCartIcon={true}
          cartHasRetention={true}
        />
      );
      expect(container.querySelector(".bg-icon-brand")).toBeInTheDocument();
    });

    it("does not render cart icon when displayCartIcon is false", () => {
      render(<Navigation {...defaultProps} displayCartIcon={false} />);
      expect(
        screen.queryByTestId("icon-shopping_cart")
      ).not.toBeInTheDocument();
    });

    it("calls onCartClick when cart is clicked", () => {
      const onCartClick = jest.fn();
      render(
        <Navigation
          {...defaultProps}
          displayCartIcon={true}
          onCartClick={onCartClick}
        />
      );
      const cartLinks = screen.getAllByLabelText("Cart");
      fireEvent.click(cartLinks[0]);
      expect(onCartClick).toHaveBeenCalled();
    });
  });

  describe("Primary navigation links", () => {
    it("renders DesktopLinkGroups for primary nav links", () => {
      const links = [{ title: "Products", items: { items: [] } }];
      render(
        <Navigation {...defaultProps} primaryNavigationLinks={links as any} />
      );
      expect(
        screen.getByTestId("desktop-link-group-main-menu-0")
      ).toBeInTheDocument();
    });
  });

  describe("Account navigation links", () => {
    it("renders DesktopLinkGroups for account links", () => {
      const links = [{ title: "My Account", items: { items: [] } }];
      render(
        <Navigation {...defaultProps} accountNavigationLinks={links as any} />
      );
      expect(
        screen.getByTestId("desktop-link-group-my-account-0")
      ).toBeInTheDocument();
    });
  });

  describe("Support navigation links", () => {
    it("renders DesktopLinkGroups for support links", () => {
      const links = [{ title: "Support", items: { items: [] } }];
      render(
        <Navigation {...defaultProps} supportNavigationLinks={links as any} />
      );
      expect(
        screen.getByTestId("desktop-link-group-support-menu-0")
      ).toBeInTheDocument();
    });
  });

  describe("Search", () => {
    it("renders desktop search input", () => {
      render(<Navigation {...defaultProps} />);
      expect(
        screen.getAllByPlaceholderText("Search...").length
      ).toBeGreaterThan(0);
    });

    it("calls onSearch when desktop search form is submitted", () => {
      const onSearch = jest.fn();
      const { container } = render(
        <Navigation {...defaultProps} onSearch={onSearch} />
      );
      const desktopForm = container.querySelector(".desktop-nav-section form");
      const input = desktopForm?.querySelector("input");
      fireEvent.change(input!, { target: { value: "test query" } });
      fireEvent.submit(desktopForm!);
      expect(onSearch).toHaveBeenCalledWith("test query");
    });

    it("calls onSearch when search icon is clicked", () => {
      const onSearch = jest.fn();
      const { container } = render(
        <Navigation
          {...defaultProps}
          onSearch={onSearch}
          searchBarIcon="https://icon.test/s.png"
        />
      );
      const desktopForm = container.querySelector(".desktop-nav-section form");
      const input = desktopForm?.querySelector("input");
      fireEvent.change(input!, { target: { value: "click search" } });
      const searchIcon = desktopForm?.querySelector("img");
      fireEvent.click(searchIcon!);
      expect(onSearch).toHaveBeenCalledWith("click search");
    });

    it("uses searchBarIcon url from object", () => {
      render(
        <Navigation
          {...defaultProps}
          searchBarIcon={{ url: "https://icon.test/obj.png" } as any}
        />
      );
      const imgs = screen.getAllByAltText("Search icon");
      expect(imgs[0]).toHaveAttribute("src", "https://icon.test/obj.png");
    });
  });

  describe("Mobile menu", () => {
    it("does not render mobile menu when no nav links provided", () => {
      const { container } = render(<Navigation {...defaultProps} />);
      const menuButton = container.querySelector(
        ".mobile-nav-section [data-testid='icon-menu']"
      );
      expect(menuButton).not.toBeInTheDocument();
    });

    it("opens mobile menu on hamburger click", () => {
      const { container } = render(<Navigation {...mobileMenuProps} />);
      const menuButton = container
        .querySelector(".mobile-nav-section [data-testid='icon-menu']")
        ?.closest("button");
      fireEvent.click(menuButton!);
      expect(
        container.querySelector("#mobile-menu-overlay")
      ).toBeInTheDocument();
    });

    it("closes mobile menu on close button click", () => {
      const { container } = render(<Navigation {...mobileMenuProps} />);
      const menuButton = container
        .querySelector(".mobile-nav-section [data-testid='icon-menu']")
        ?.closest("button");
      fireEvent.click(menuButton!);
      const closeButton = container
        .querySelector("#drawer-items [data-testid='icon-close']")
        ?.closest("button");
      fireEvent.click(closeButton!);
      expect(
        container.querySelector("#mobile-menu-overlay")?.className
      ).toContain("-right-96");
    });

    it("renders mobile search input and submits", () => {
      const onSearch = jest.fn();
      const { container } = render(
        <Navigation {...mobileMenuProps} onSearch={onSearch} />
      );
      const menuButton = container
        .querySelector(".mobile-nav-section [data-testid='icon-menu']")
        ?.closest("button");
      fireEvent.click(menuButton!);
      const mobileForm = container.querySelector("#drawer-items form");
      const input = mobileForm?.querySelector("input");
      fireEvent.change(input!, { target: { value: "mobile search" } });
      fireEvent.submit(mobileForm!);
      expect(onSearch).toHaveBeenCalledWith("mobile search");
    });

    it("closes menu when a link is clicked in the drawer", () => {
      const links = [{ buttonLabel: "Link1", href: "/link1" }];
      const { container } = render(
        <Navigation {...defaultProps} primaryNavigationLinks={links as any} />
      );
      const menuButton = container
        .querySelector(".mobile-nav-section [data-testid='icon-menu']")
        ?.closest("button");
      fireEvent.click(menuButton!);
      expect(
        container.querySelector("#mobile-menu-overlay")?.className
      ).toContain("right-0");
      expect(
        container.querySelector("#mobile-menu-overlay")?.className
      ).not.toContain("-right-96");
    });

    it("renders MobileLinkGroups in drawer", () => {
      const links = [{ title: "Products", items: { items: [] } }];
      const { container } = render(
        <Navigation {...defaultProps} primaryNavigationLinks={links as any} />
      );
      const menuButton = container
        .querySelector(".mobile-nav-section [data-testid='icon-menu']")
        ?.closest("button");
      fireEvent.click(menuButton!);
      expect(screen.getAllByTestId("mobile-link-group").length).toBeGreaterThan(
        0
      );
    });

    it("closes menu when an anchor inside the drawer content is clicked", () => {
      const links = [{ buttonLabel: "Internet", href: "/internet" }];
      const { container } = render(
        <Navigation {...defaultProps} primaryNavigationLinks={links as any} />
      );
      const menuButton = container
        .querySelector(".mobile-nav-section [data-testid='icon-menu']")
        ?.closest("button");
      fireEvent.click(menuButton!);
      expect(
        container.querySelector("#mobile-menu-overlay")?.className
      ).toContain("right-0");
      const scrollDiv = container.querySelector(
        "#drawer-items .flex-grow.overflow-y-auto"
      );
      const anchor = document.createElement("a");
      anchor.href = "/internet";
      scrollDiv!.appendChild(anchor);
      fireEvent.click(anchor);
      expect(
        container.querySelector("#mobile-menu-overlay")?.className
      ).toContain("-right-96");
    });

    it("does not close menu when non-anchor element is clicked in drawer", () => {
      const links = [{ title: "Products", items: { items: [] } }];
      const { container } = render(
        <Navigation {...defaultProps} primaryNavigationLinks={links as any} />
      );
      const menuButton = container
        .querySelector(".mobile-nav-section [data-testid='icon-menu']")
        ?.closest("button");
      fireEvent.click(menuButton!);
      const scrollDiv = container.querySelector(
        "#drawer-items .flex-grow.overflow-y-auto"
      );
      fireEvent.click(scrollDiv!);
      expect(
        container.querySelector("#mobile-menu-overlay")?.className
      ).toContain("right-0");
      expect(
        container.querySelector("#mobile-menu-overlay")?.className
      ).not.toContain("-right-96");
    });

    it("traps focus with Tab key - wraps from last to first", () => {
      const links = [{ buttonLabel: "Link1", href: "/link1" }];
      const { container } = render(
        <Navigation {...defaultProps} primaryNavigationLinks={links as any} />
      );
      const menuButton = container
        .querySelector(".mobile-nav-section [data-testid='icon-menu']")
        ?.closest("button");
      fireEvent.click(menuButton!);

      const drawerItems = container.querySelector("#drawer-items");
      const focusableEls = drawerItems!.querySelectorAll(".focus-item");
      const firstEl = focusableEls[0] as HTMLElement;
      const lastEl = focusableEls[focusableEls.length - 1] as HTMLElement;

      lastEl.focus();
      expect(document.activeElement).toBe(lastEl);
      fireEvent.keyDown(window, { key: "Tab", keyCode: 9, shiftKey: false });
      expect(document.activeElement).toBe(firstEl);
    });

    it("traps focus with Shift+Tab - wraps from first to last", () => {
      const links = [{ buttonLabel: "Link1", href: "/link1" }];
      const { container } = render(
        <Navigation {...defaultProps} primaryNavigationLinks={links as any} />
      );
      const menuButton = container
        .querySelector(".mobile-nav-section [data-testid='icon-menu']")
        ?.closest("button");
      fireEvent.click(menuButton!);

      const drawerItems = container.querySelector("#drawer-items");
      const focusableEls = drawerItems!.querySelectorAll(".focus-item");
      const firstEl = focusableEls[0] as HTMLElement;
      const lastEl = focusableEls[focusableEls.length - 1] as HTMLElement;

      firstEl.focus();
      expect(document.activeElement).toBe(firstEl);
      fireEvent.keyDown(window, { key: "Tab", keyCode: 9, shiftKey: true });
      expect(document.activeElement).toBe(lastEl);
    });

    it("does not trap focus for non-Tab keys", () => {
      const links = [{ buttonLabel: "Link1", href: "/link1" }];
      const { container } = render(
        <Navigation {...defaultProps} primaryNavigationLinks={links as any} />
      );
      const menuButton = container
        .querySelector(".mobile-nav-section [data-testid='icon-menu']")
        ?.closest("button");
      fireEvent.click(menuButton!);

      const drawerItems = container.querySelector("#drawer-items");
      const focusableEls = drawerItems!.querySelectorAll(".focus-item");
      const lastEl = focusableEls[focusableEls.length - 1] as HTMLElement;
      lastEl.focus();

      fireEvent.keyDown(window, { key: "Enter", keyCode: 13 });
      expect(document.activeElement).toBe(lastEl);
    });

    it("hides mobile call button when hideMobileCallButton is true", () => {
      const { container } = render(
        <Navigation {...mobileMenuProps} hideMobileCallButton={true} />
      );
      const mobileGapDiv = container.querySelector(
        ".mobile-nav-section .flex.items-center.gap-6"
      );
      const directCallButtons = mobileGapDiv?.querySelectorAll(
        ":scope > [data-testid='call-button']"
      );
      expect(directCallButtons?.length || 0).toBe(0);
    });

    it("shows mobile call button by default", () => {
      const { container } = render(<Navigation {...mobileMenuProps} />);
      const mobileSection = container.querySelector(".mobile-nav-section");
      const callButton = mobileSection?.querySelector(
        "[data-testid='call-button']"
      );
      expect(callButton).toBeInTheDocument();
    });
  });

  describe("checkPlansJSX", () => {
    it("renders checkPlansJSX when provided", () => {
      render(
        <Navigation
          {...defaultProps}
          checkPlansJSX={<div data-testid="check-plans">Plans</div>}
        />
      );
      expect(screen.getByTestId("check-plans")).toBeInTheDocument();
    });

    it("does not render checkPlansJSX when not provided", () => {
      render(<Navigation {...defaultProps} />);
      expect(screen.queryByTestId("check-plans")).not.toBeInTheDocument();
    });
  });

  describe("Logo dimensions", () => {
    it("uses custom logo dimensions", () => {
      render(
        <Navigation
          {...defaultProps}
          primaryNavigationLogoWidth={100}
          primaryNavigationLogoHeight={32}
        />
      );
      const logos = screen.getAllByAltText("Kinetic business logo");
      expect(logos.length).toBeGreaterThan(0);
    });

    it("renders logo from object src in mobile section", () => {
      render(
        <Navigation
          {...defaultProps}
          primaryNavigationLogo={{ url: "https://logo.test/m.png" } as any}
        />
      );
      const logos = screen.getAllByAltText("Kinetic business logo");
      expect(logos[0]).toHaveAttribute("src", "https://logo.test/m.png");
    });
  });

  describe("Null/undefined optional arrays (branch coverage)", () => {
    it("renders without crashing when utilityNavigationLinks is undefined", () => {
      const { container } = render(
        <Navigation
          {...defaultProps}
          utilityNavigationLinks={undefined as any}
        />
      );
      expect(container.querySelector(".menu-container")).toBeInTheDocument();
    });

    it("renders without crashing when primaryNavigationLinks is undefined", () => {
      const { container } = render(
        <Navigation
          {...defaultProps}
          primaryNavigationLinks={undefined as any}
        />
      );
      expect(
        container.querySelector(".desktop-nav-section")
      ).toBeInTheDocument();
    });

    it("renders without crashing when accountNavigationLinks is undefined", () => {
      const { container } = render(
        <Navigation
          {...defaultProps}
          accountNavigationLinks={undefined as any}
        />
      );
      expect(container.querySelector(".menu-container")).toBeInTheDocument();
    });

    it("renders without crashing when supportNavigationLinks is undefined", () => {
      const { container } = render(
        <Navigation
          {...defaultProps}
          supportNavigationLinks={undefined as any}
        />
      );
      expect(container.querySelector(".menu-container")).toBeInTheDocument();
    });
  });

  describe("Mobile cart icon", () => {
    it("renders cart icon in mobile section when displayCartIcon is true", () => {
      const { container } = render(
        <Navigation {...mobileMenuProps} displayCartIcon={true} />
      );
      const mobileSection = container.querySelector(".mobile-nav-section");
      expect(
        mobileSection?.querySelector("[data-testid='icon-shopping_cart']")
      ).toBeInTheDocument();
    });

    it("shows retention dot on mobile cart when cartHasRetention is true", () => {
      const { container } = render(
        <Navigation
          {...mobileMenuProps}
          displayCartIcon={true}
          cartHasRetention={true}
        />
      );
      const mobileSection = container.querySelector(".mobile-nav-section");
      expect(
        mobileSection?.querySelector(".bg-icon-brand")
      ).toBeInTheDocument();
    });

    it("does not show retention dot on mobile when cartHasRetention is false", () => {
      const { container } = render(
        <Navigation
          {...mobileMenuProps}
          displayCartIcon={true}
          cartHasRetention={false}
        />
      );
      const mobileSection = container.querySelector(".mobile-nav-section");
      const dots = mobileSection?.querySelectorAll(".bg-icon-brand");
      expect(dots?.length || 0).toBe(0);
    });

    it("uses fallback '#' when cartHref is undefined", () => {
      const { container } = render(
        <Navigation
          {...mobileMenuProps}
          displayCartIcon={true}
          cartHref={undefined as any}
        />
      );
      const cartLinks = container.querySelectorAll("[aria-label='Cart']");
      cartLinks.forEach(link => {
        expect(link).toHaveAttribute("href", "#");
      });
    });
  });

  describe("Mobile drawer utility links", () => {
    it("renders utility links in mobile drawer", () => {
      const links = [
        { buttonLabel: "Residential", href: "/residential", anchorId: "r1" },
        { buttonLabel: "Business", href: "/business", anchorId: "b1" },
      ];
      const { container } = render(
        <Navigation
          {...mobileMenuProps}
          utilityNavigationLinks={links as any}
        />
      );
      const menuButton = container
        .querySelector(".mobile-nav-section [data-testid='icon-menu']")
        ?.closest("button");
      fireEvent.click(menuButton!);
      const drawerButtons = container.querySelectorAll(
        "#drawer-items .bg-bg-fill-info button"
      );
      expect(drawerButtons.length).toBe(2);
    });

    it("applies active class to utility links in drawer using utilityNavActiveIndex", () => {
      const links = [
        { buttonLabel: "Residential", href: "/residential", anchorId: "r1" },
        { buttonLabel: "Business", href: "/business", anchorId: "b1" },
      ];
      const { container } = render(
        <Navigation
          {...mobileMenuProps}
          utilityNavigationLinks={links as any}
          utilityNavActiveIndex={0}
        />
      );
      const menuButton = container
        .querySelector(".mobile-nav-section [data-testid='icon-menu']")
        ?.closest("button");
      fireEvent.click(menuButton!);
      const drawerButtons = container.querySelectorAll(
        "#drawer-items .bg-bg-fill-info button"
      );
      expect(drawerButtons[0]?.className).toContain("label4");
    });

    it("handles undefined utilityNavigationLinks in mobile drawer", () => {
      const { container } = render(
        <Navigation
          {...mobileMenuProps}
          utilityNavigationLinks={undefined as any}
        />
      );
      const menuButton = container
        .querySelector(".mobile-nav-section [data-testid='icon-menu']")
        ?.closest("button");
      fireEvent.click(menuButton!);
      const drawerButtons = container.querySelectorAll(
        "#drawer-items .bg-bg-fill-info button"
      );
      expect(drawerButtons.length).toBe(0);
    });
  });

  describe("Mobile search with object searchBarIcon", () => {
    it("uses searchBarIcon url from object in mobile menu", () => {
      const { container } = render(
        <Navigation
          {...mobileMenuProps}
          searchBarIcon={{ url: "https://icon.test/mobile.png" } as any}
        />
      );
      const menuButton = container
        .querySelector(".mobile-nav-section [data-testid='icon-menu']")
        ?.closest("button");
      fireEvent.click(menuButton!);
      const mobileForm = container.querySelector("#drawer-items form");
      const img = mobileForm?.querySelector("img");
      expect(img).toHaveAttribute("src", "https://icon.test/mobile.png");
    });
  });

  describe("Focus trap edge cases", () => {
    it("does not wrap focus when Tab pressed and not on last element", () => {
      const links = [{ buttonLabel: "Link1", href: "/link1" }];
      const { container } = render(
        <Navigation {...defaultProps} primaryNavigationLinks={links as any} />
      );
      const menuButton = container
        .querySelector(".mobile-nav-section [data-testid='icon-menu']")
        ?.closest("button");
      fireEvent.click(menuButton!);

      const drawerItems = container.querySelector("#drawer-items");
      const focusableEls = drawerItems!.querySelectorAll(".focus-item");
      const firstEl = focusableEls[0] as HTMLElement;

      firstEl.focus();
      fireEvent.keyDown(window, { key: "Tab", keyCode: 9, shiftKey: false });
      expect(document.activeElement).toBe(firstEl);
    });

    it("does not wrap focus when Shift+Tab pressed and not on first element", () => {
      const links = [{ buttonLabel: "Link1", href: "/link1" }];
      const { container } = render(
        <Navigation {...defaultProps} primaryNavigationLinks={links as any} />
      );
      const menuButton = container
        .querySelector(".mobile-nav-section [data-testid='icon-menu']")
        ?.closest("button");
      fireEvent.click(menuButton!);

      const drawerItems = container.querySelector("#drawer-items");
      const focusableEls = drawerItems!.querySelectorAll(".focus-item");
      const lastEl = focusableEls[focusableEls.length - 1] as HTMLElement;

      lastEl.focus();
      fireEvent.keyDown(window, { key: "Tab", keyCode: 9, shiftKey: true });
      expect(document.activeElement).toBe(lastEl);
    });
  });

  describe("Navigation background color", () => {
    it("applies bg-secondary-navy500 by default", () => {
      const { container } = render(<Navigation {...defaultProps} />);
      const mainNav = container.querySelector(".main-nav-container");
      expect(mainNav?.className).toContain("bg-secondary-navy500");
    });

    it("applies custom bg class with token format", () => {
      const { container } = render(
        <Navigation {...defaultProps} navigationBackgroundColor="green300" />
      );
      const mainNav = container.querySelector(".main-nav-container");
      expect(mainNav?.className).toContain("bg-secondary-green300");
    });

    it("passes through raw tailwind class", () => {
      const { container } = render(
        <Navigation {...defaultProps} navigationBackgroundColor="bg-blue-500" />
      );
      const mainNav = container.querySelector(".main-nav-container");
      expect(mainNav?.className).toContain("bg-blue-500");
    });
  });

  describe("Display options", () => {
    it("hides utility navigation when displayUtilityNavigation is false", () => {
      const { container } = render(
        <Navigation {...defaultProps} displayUtilityNavigation={false} />
      );
      expect(
        container.querySelector(".utility-container")
      ).not.toBeInTheDocument();
    });

    it("hides search bar when displaySearchBar is false", () => {
      const { container } = render(
        <Navigation {...defaultProps} displaySearchBar={false} />
      );
      const desktopForm = container.querySelector(".desktop-nav-section form");
      expect(desktopForm).not.toBeInTheDocument();
    });

    it("hides call now CTA when displayCallNowCta is false", () => {
      const { container } = render(
        <Navigation {...defaultProps} displayCallNowCta={false} />
      );
      const utilityCta = container.querySelector(
        ".utility-container [data-testid='call-button']"
      );
      expect(utilityCta).not.toBeInTheDocument();
    });

    it("renders main nav call CTA when showCallNowCtaInMainNav is true", () => {
      render(
        <Navigation
          {...defaultProps}
          showCallNowCtaInMainNav={true}
          displayUtilityNavigation={false}
          invocaPhoneNumberLink="tel:1234567890"
          invocaPhoneNumberDisplayText="123-456-7890"
        />
      );
      const ctaLink = screen
        .getAllByTestId("link")
        .find(el => el.getAttribute("aria-label") === "Call 123-456-7890");
      expect(ctaLink).toBeInTheDocument();
    });

    it("renders main nav call CTA on mobile when showMobileSliderMenu is false", () => {
      render(
        <Navigation
          {...defaultProps}
          showMobileSliderMenu={false}
          showCallButton={true}
          invocaPhoneNumberLink="tel:1234567890"
          invocaPhoneNumberDisplayText="123-456-7890"
        />
      );
      const ctaLink = screen
        .getAllByTestId("link")
        .find(el => el.getAttribute("aria-label") === "Call 123-456-7890");
      expect(ctaLink).toBeInTheDocument();
    });
  });
});