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

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

// text is required as a child to render in ConditionalWrapper component
describe("rendering BreadcrumbItem", () => {
  describe("initial state", () => {
    it("has default class osk-breadcrumbs__item", () => {
      const { getByTestId } = render(
        <BreadcrumbItem text="test" data-testid="test-id" />,
      );
      expect(getByTestId("test-id")).toHaveClass("osk-breadcrumbs__item");
    });

    it("renders as li element", () => {
      const { container } = render(<BreadcrumbItem text="test" />);
      const li = container.querySelector("li");
      expect(li).toBeInTheDocument();
      expect(li).toHaveClass("osk-breadcrumbs__item");
    });

    it("renders text content directly when no URL is provided", () => {
      const { container } = render(<BreadcrumbItem text="Test text" />);
      const li = container.querySelector("li");
      expect(li.textContent).toBe("Test text");
      expect(li.querySelector("a")).not.toBeInTheDocument();
    });
  });

  describe("passed props", () => {
    it("renders children", () => {
      const { getByText } = render(<BreadcrumbItem text="test" />);
      expect(getByText("test")).toBeInTheDocument();
    });

    it("passes other props", () => {
      const { getByTestId } = render(
        <BreadcrumbItem text="test" data-testid="test" />,
      );
      expect(getByTestId("test")).toBeInTheDocument();
    });

    it("has additional class when className is set", () => {
      const { getByTestId } = render(
        <BreadcrumbItem
          text="test"
          data-testid="test-id"
          className="test-class"
        />,
      );
      expect(getByTestId("test-id")).toHaveClass("osk-breadcrumbs__item");
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });

    it("combines multiple CSS classes correctly", () => {
      const { getByTestId } = render(
        <BreadcrumbItem
          text="test"
          data-testid="test-id"
          className="custom-class another-class"
        />,
      );
      expect(getByTestId("test-id")).toHaveClass("osk-breadcrumbs__item");
      expect(getByTestId("test-id")).toHaveClass("custom-class");
      expect(getByTestId("test-id")).toHaveClass("another-class");
    });

    it("renders anchor element with class osk-breadcrumbs__link when url is set", () => {
      const { container } = render(<BreadcrumbItem text="test" url="/test" />);
      const anchor = container.querySelector("a");
      expect(anchor).toBeInTheDocument();
      expect(anchor).toHaveClass("osk-breadcrumbs__link");
    });

    it("renders children inside anchor element when url is set", () => {
      const { container } = render(<BreadcrumbItem text="test" url="/test" />);
      expect(container.querySelector("a").textContent).toBe("test");
    });

    it("anchor element has correct href attribute", () => {
      const { container } = render(
        <BreadcrumbItem text="test" url="/test-url" />,
      );
      const anchor = container.querySelector("a");
      expect(anchor).toHaveAttribute("href", "/test-url");
    });

    it("li element has aria-current attribute set to 'page' when isCurrent prop is passed", () => {
      const { container } = render(
        <BreadcrumbItem text="test" url="/test" isCurrent />,
      );
      const li = container.querySelector("li");
      expect(li).toHaveAttribute("aria-current", "page");
      expect(li.querySelector("a")).not.toBeInTheDocument();
    });

    it("does not render anchor when isCurrent is true but no URL provided", () => {
      const { container } = render(<BreadcrumbItem text="test" isCurrent />);
      const anchor = container.querySelector("a");
      expect(anchor).not.toBeInTheDocument();
      expect(container.querySelector("li").textContent).toBe("test");
    });

    it("passes additional props to li element", () => {
      const { getByTestId } = render(
        <BreadcrumbItem
          text="test"
          data-testid="test-id"
          data-custom="custom-value"
          aria-label="Custom label"
        />,
      );
      const li = getByTestId("test-id");
      expect(li).toHaveAttribute("data-custom", "custom-value");
      expect(li).toHaveAttribute("aria-label", "Custom label");
    });

    it("passes additional props to anchor element when URL is provided", () => {
      const { container } = render(
        <BreadcrumbItem
          text="test"
          url="/test"
          data-custom="custom-value"
          aria-label="Custom label"
        />,
      );
      const anchor = container.querySelector("a");
      expect(anchor).toHaveAttribute("data-custom", "custom-value");
      expect(anchor).toHaveAttribute("aria-label", "Custom label");
    });
  });

  describe("conditional rendering", () => {
    it("renders anchor when URL is provided", () => {
      const { container } = render(
        <BreadcrumbItem text="Link text" url="/link" />,
      );
      const anchor = container.querySelector("a");
      expect(anchor).toBeInTheDocument();
      expect(anchor).toHaveAttribute("href", "/link");
      expect(anchor.textContent).toBe("Link text");
    });

    it("renders text directly when URL is not provided", () => {
      const { container } = render(<BreadcrumbItem text="Plain text" />);
      const li = container.querySelector("li");
      expect(li.querySelector("a")).not.toBeInTheDocument();
      expect(li.textContent).toBe("Plain text");
    });

    it("renders text directly when URL is empty string", () => {
      const { container } = render(<BreadcrumbItem text="Plain text" url="" />);
      const li = container.querySelector("li");
      expect(li.querySelector("a")).not.toBeInTheDocument();
      expect(li.textContent).toBe("Plain text");
    });

    it("renders text directly when URL is null", () => {
      const { container } = render(
        <BreadcrumbItem text="Plain text" url={null} />,
      );
      const li = container.querySelector("li");
      expect(li.querySelector("a")).not.toBeInTheDocument();
      expect(li.textContent).toBe("Plain text");
    });

    it("renders text directly when URL is undefined", () => {
      const { container } = render(
        <BreadcrumbItem text="Plain text" url={undefined} />,
      );
      const li = container.querySelector("li");
      expect(li.querySelector("a")).not.toBeInTheDocument();
      expect(li.textContent).toBe("Plain text");
    });
  });

  describe("accessibility", () => {
    it("anchor elements are focusable when URL is provided", () => {
      const { container } = render(<BreadcrumbItem text="test" url="/test" />);
      const anchor = container.querySelector("a");
      expect(anchor).toHaveAttribute("href");
      expect(anchor).not.toBeDisabled();
    });

    it("has proper semantic structure", () => {
      const { container } = render(<BreadcrumbItem text="test" url="/test" />);
      const li = container.querySelector("li");
      const anchor = container.querySelector("a");

      expect(li).toBeInTheDocument();
      expect(anchor).toBeInTheDocument();
      expect(li).toContainElement(anchor);
    });

    it("aria-current is only applied when isCurrent is true", () => {
      const { container } = render(
        <BreadcrumbItem text="test" url="/test" isCurrent />,
      );
      const li = container.querySelector("li");
      const anchor = container.querySelector("a");
      expect(li).toHaveAttribute("aria-current", "page");
      expect(anchor).not.toBeInTheDocument();
    });

    it("aria-current is not applied when isCurrent is false", () => {
      const { container } = render(
        <BreadcrumbItem text="test" url="/test" isCurrent={false} />,
      );
      const anchor = container.querySelector("a");
      const li = container.querySelector("li");
      expect(anchor).toBeInTheDocument();
      expect(li).not.toHaveAttribute("aria-current");
    });

    it("aria-current is applied to li when isCurrent is true and no URL is provided", () => {
      const { container } = render(<BreadcrumbItem text="test" isCurrent />);
      const anchor = container.querySelector("a");
      const li = container.querySelector("li");
      expect(anchor).not.toBeInTheDocument();
      expect(li).toHaveAttribute("aria-current", "page");
    });
  });

  describe("edge cases", () => {
    it("handles empty text gracefully", () => {
      const { container } = render(<BreadcrumbItem text="" />);
      const li = container.querySelector("li");
      expect(li.textContent).toBe("");
    });

    it("handles empty text with URL gracefully", () => {
      const { container } = render(<BreadcrumbItem text="" url="/test" />);
      const anchor = container.querySelector("a");
      expect(anchor.textContent).toBe("");
      expect(anchor).toHaveAttribute("href", "/test");
    });

    it("handles special characters in text", () => {
      const specialText = "Test & More: Special Characters!";
      const { container } = render(<BreadcrumbItem text={specialText} />);
      const li = container.querySelector("li");
      expect(li.textContent).toBe(specialText);
    });

    it("handles special characters in text with URL", () => {
      const specialText = "Test & More: Special Characters!";
      const { container } = render(
        <BreadcrumbItem text={specialText} url="/test" />,
      );
      const anchor = container.querySelector("a");
      expect(anchor.textContent).toBe(specialText);
    });

    it("handles very long text", () => {
      const longText = "A".repeat(1000);
      const { container } = render(<BreadcrumbItem text={longText} />);
      const li = container.querySelector("li");
      expect(li.textContent).toBe(longText);
    });

    it("handles very long URL", () => {
      const longUrl = "/".repeat(1000);
      const { container } = render(
        <BreadcrumbItem text="test" url={longUrl} />,
      );
      const anchor = container.querySelector("a");
      expect(anchor).toHaveAttribute("href", longUrl);
    });

    it("handles whitespace in text", () => {
      const textWithWhitespace = "  Test  Text  ";
      const { container } = render(
        <BreadcrumbItem text={textWithWhitespace} />,
      );
      const li = container.querySelector("li");
      expect(li.textContent).toBe(textWithWhitespace);
    });
  });

  describe("interaction", () => {
    it("anchor is clickable when URL is provided", async () => {
      const { container } = render(
        <BreadcrumbItem text="Click me" url="/test" />,
      );

      const anchor = container.querySelector("a");
      expect(anchor).toHaveAttribute("href", "/test");
      expect(anchor).not.toBeDisabled();
    });

    it("maintains proper tab order for anchor elements", () => {
      const { container } = render(<BreadcrumbItem text="test" url="/test" />);
      const anchor = container.querySelector("a");

      expect(anchor).toHaveAttribute("href");
      // Anchor should be focusable by default
      expect(anchor.tabIndex).toBe(0);
    });
  });
});