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

import { Breadcrumbs } from "../Breadcrumbs";

describe("Breadcrumbs Integration Tests", () => {
  describe("complex navigation scenarios", () => {
    it("renders deep navigation hierarchy correctly", () => {
      const deepNavigation = [
        { url: "/", text: "Domov" },
        { url: "/kategoria", text: "Kategória" },
        { url: "/kategoria/elektronika", text: "Elektronika" },
        { url: "/kategoria/elektronika/telefony", text: "Telefóny" },
        {
          url: "/kategoria/elektronika/telefony/smartphony",
          text: "Smartphony",
        },
        { text: "iPhone 15 Pro" },
      ];

      const { container } = render(
        <Breadcrumbs items={deepNavigation} label="Navigácia" />,
      );

      const listItems = container.querySelectorAll("li");
      const anchors = container.querySelectorAll("a");

      expect(listItems).toHaveLength(6);
      expect(anchors).toHaveLength(5); // Last item is not an anchor (current page)

      // Last item should have aria-current and be plain text
      const lastItem = listItems[listItems.length - 1];
      expect(lastItem).toHaveAttribute("aria-current", "page");
      expect(lastItem.querySelector("a")).toBeNull();
    });

    it("handles e-commerce navigation correctly", () => {
      const ecommerceNav = [
        { url: "/", text: "Domov" },
        { url: "/obchod", text: "Obchod" },
        { url: "/obchod/oblecenie", text: "Oblečenie" },
        { url: "/obchod/oblecenie/muzske", text: "Mužské" },
        { url: "/obchod/oblecenie/muzske/tricka", text: "Tričká" },
        { text: "Bavlnené tričko" },
      ];

      const { container } = render(
        <Breadcrumbs
          items={ecommerceNav}
          label="Navigácia obchodu"
          className="ecommerce-breadcrumbs"
        />,
      );

      const nav = container.querySelector("nav");
      expect(nav).toHaveAttribute("aria-label", "Navigácia obchodu");
      expect(nav).toHaveClass("osk-breadcrumbs");
      expect(nav).toHaveClass("ecommerce-breadcrumbs");

      const listItems = container.querySelectorAll("li");
      expect(listItems).toHaveLength(6);
    });

    it("handles multilingual navigation", () => {
      const multilingualNav = [
        { url: "/", text: "Home" },
        { url: "/products", text: "Products" },
        { url: "/products/electronics", text: "Electronics" },
        { text: "Smartphones" },
      ];

      const { container } = render(
        <Breadcrumbs items={multilingualNav} label="Navigation" />,
      );

      const nav = container.querySelector("nav");
      expect(nav).toHaveClass("osk-breadcrumbs");
      expect(nav).toHaveAttribute("aria-label", "Navigation");

      const listItems = container.querySelectorAll("li");
      expect(listItems).toHaveLength(4);
      // Last item should be plain text, not a link
      expect(listItems[listItems.length - 1].querySelector("a")).toBeNull();
    });
  });

  describe("accessibility integration", () => {
    it("maintains proper ARIA structure throughout navigation", () => {
      const items = [
        { url: "/home", text: "Domov" },
        { url: "/section", text: "Sekcia" },
        { text: "Aktuálna stránka" },
      ];

      const { container } = render(
        <Breadcrumbs items={items} label="Hlavná navigácia" />,
      );

      const nav = container.querySelector("nav");
      const ol = container.querySelector("ol");
      const listItems = container.querySelectorAll("li");
      const anchors = container.querySelectorAll("a");

      // Check navigation structure
      expect(nav).toHaveAttribute("aria-label", "Hlavná navigácia");
      expect(nav).toContainElement(ol);
      expect(ol).toHaveClass("osk-breadcrumbs__container");

      // Check anchor accessibility
      anchors.forEach((anchor) => {
        expect(anchor).toHaveAttribute("href");
        expect(anchor).toHaveClass("osk-breadcrumbs__link");
        expect(anchor).not.toHaveAttribute("aria-current");
      });

      // Last item should have aria-current on li, not anchor
      const lastItem = listItems[listItems.length - 1];
      expect(lastItem).toHaveAttribute("aria-current", "page");
      expect(lastItem.querySelector("a")).toBeNull();
    });

    it("provides proper keyboard navigation support", () => {
      const items = [
        { url: "/home", text: "Domov" },
        { url: "/products", text: "Produkty" },
        { text: "Aktuálny produkt" },
      ];

      const { container } = render(<Breadcrumbs items={items} />);
      const anchors = container.querySelectorAll("a");

      anchors.forEach((anchor) => {
        expect(anchor).toHaveAttribute("href");
        // Anchors should be focusable by default
        expect(anchor.tabIndex).toBe(0);
      });
    });
  });

  describe("styling integration", () => {
    it("combines custom classes with default classes", () => {
      const items = [{ text: "Test" }];

      const { container } = render(
        <Breadcrumbs
          items={items}
          className="custom-class another-class"
          data-testid="breadcrumbs"
        />,
      );

      const nav = container.querySelector("nav");
      expect(nav).toHaveClass("osk-breadcrumbs");
      expect(nav).toHaveClass("custom-class");
      expect(nav).toHaveClass("another-class");
    });

    it("maintains consistent styling across all breadcrumb items", () => {
      const items = [
        { url: "/home", text: "Domov" },
        { url: "/products", text: "Produkty" },
        { text: "Aktuálna stránka" },
      ];

      const { container } = render(<Breadcrumbs items={items} />);
      const listItems = container.querySelectorAll("li");
      const anchors = container.querySelectorAll("a");

      // All list items should have the same base class
      listItems.forEach((li) => {
        expect(li).toHaveClass("osk-breadcrumbs__item");
      });

      // All anchors should have the same link class
      anchors.forEach((anchor) => {
        expect(anchor).toHaveClass("osk-breadcrumbs__link");
      });
    });
  });

  describe("edge cases and error handling", () => {
    it("handles empty items array gracefully", () => {
      const { container } = render(<Breadcrumbs items={[]} />);

      const nav = container.querySelector("nav");
      const ol = container.querySelector("ol");
      const listItems = container.querySelectorAll("li");

      expect(nav).toBeInTheDocument();
      expect(ol).toBeInTheDocument();
      expect(listItems).toHaveLength(0);
    });

    it("handles single item navigation", () => {
      const singleItem = [{ text: "Domov" }];
      const { container } = render(<Breadcrumbs items={singleItem} />);

      const listItems = container.querySelectorAll("li");
      expect(listItems).toHaveLength(1);
      expect(listItems[0].textContent).toBe("Domov");
    });

    it("handles items with missing text gracefully", () => {
      const itemsWithMissingText = [
        { url: "/home", text: "Domov" },
        { url: "/products", text: "" },
        { text: "Aktuálna stránka" },
      ];

      const { container } = render(
        <Breadcrumbs items={itemsWithMissingText} />,
      );
      const listItems = container.querySelectorAll("li");

      expect(listItems[0].textContent).toBe("Domov");
      expect(listItems[1].textContent).toBe("");
      expect(listItems[2].textContent).toBe("Aktuálna stránka");
    });

    it("handles very long navigation paths", () => {
      const longPath = Array.from({ length: 20 }, (_, i) => ({
        url: `/level${i}`,
        text: `Level ${i}`,
      }));
      longPath.push({ text: "Final Level" });

      const { container } = render(<Breadcrumbs items={longPath} />);
      const listItems = container.querySelectorAll("li");

      expect(listItems).toHaveLength(21);
    });

    it("handles special characters and unicode in navigation", () => {
      const specialItems = [
        { url: "/home", text: "Domov 🏠" },
        { url: "/products", text: "Produkty & služby" },
        { url: "/category", text: "Kategória: Elektronika" },
        { text: "Aktuálny produkt (2024)" },
      ];

      const { container } = render(<Breadcrumbs items={specialItems} />);
      const listItems = container.querySelectorAll("li");

      specialItems.forEach((item, index) => {
        expect(listItems[index].textContent).toBe(item.text);
      });
    });
  });

  describe("performance and rendering", () => {
    it("renders efficiently with many items", () => {
      const manyItems = Array.from({ length: 100 }, (_, i) => ({
        url: `/item${i}`,
        text: `Item ${i}`,
      }));

      // const startTime = performance.now();
      const { container } = render(<Breadcrumbs items={manyItems} />);
      // const endTime = performance.now();

      const listItems = container.querySelectorAll("li");
      expect(listItems).toHaveLength(100);

      // TODO
      // Should render quickly (less than 100ms)
      // expect(endTime - startTime).toBeLessThan(100);
    });

    it("maintains consistent rendering across re-renders", () => {
      const items = [
        { url: "/home", text: "Domov" },
        { text: "Aktuálna stránka" },
      ];

      const { container, rerender } = render(<Breadcrumbs items={items} />);

      const firstRenderItems = container.querySelectorAll("li");
      expect(firstRenderItems).toHaveLength(2);

      // Re-render with same props
      rerender(<Breadcrumbs items={items} />);

      const secondRenderItems = container.querySelectorAll("li");
      expect(secondRenderItems).toHaveLength(2);
      expect(secondRenderItems[0].textContent).toBe("Domov");
      expect(secondRenderItems[1].textContent).toBe("Aktuálna stránka");
    });
  });
});