import { render, screen } from "@testing-library/react";
import Pagination from "@/components/blog/Pagination";

describe("Pagination", () => {
  describe("Basic rendering", () => {
    it("renders page info correctly", () => {
      render(<Pagination currentPage={2} totalPages={5} lang="en" />);

      expect(screen.getByText("Page 2 of 5")).toBeInTheDocument();
    });

    it("renders pagination navigation", () => {
      render(<Pagination currentPage={2} totalPages={5} lang="en" />);

      const navigation = screen.getByRole("navigation");
      expect(navigation).toBeInTheDocument();
    });
  });

  describe("Previous button", () => {
    it("enables previous button when not on first page", () => {
      render(<Pagination currentPage={2} totalPages={5} lang="en" />);

      const prevButton = screen.getByText("Previous");
      const prevLink = prevButton.closest("a");
      expect(prevLink).toHaveAttribute("href");
      // Page 2 going back goes to page 1 (which may be /blog or /blog/page/1)
      const href = prevLink?.getAttribute("href");
      expect(href).toMatch(/\/en\/blog/);
    });

    it("disables previous button on first page", () => {
      render(<Pagination currentPage={1} totalPages={5} lang="en" />);

      const prevButton = screen.getByText("Previous");
      const buttonElement = prevButton.closest("span, a");
      expect(buttonElement?.tagName).toBe("SPAN");
      expect(buttonElement).toHaveClass("cursor-not-allowed");
    });

    it("links to previous page when available", () => {
      render(<Pagination currentPage={2} totalPages={5} lang="en" />);

      const prevButton = screen.getByText("Previous");
      const prevLink = prevButton.closest("a");
      expect(prevLink).toHaveAttribute("href");
      const href = prevLink?.getAttribute("href");
      expect(href).toMatch(/\/en\/blog/);
    });
  });

  describe("Next button", () => {
    it("enables next button when not on last page", () => {
      render(<Pagination currentPage={2} totalPages={5} lang="en" />);

      const nextButton = screen.getByText("Next");
      expect(nextButton.closest("a")).toHaveAttribute(
        "href",
        "/en/blog/page/3",
      );
    });

    it("disables next button on last page", () => {
      render(<Pagination currentPage={5} totalPages={5} lang="en" />);

      const nextButton = screen.getByText("Next");
      const buttonElement = nextButton.closest("span, a");
      expect(buttonElement?.tagName).toBe("SPAN");
      expect(buttonElement).toHaveClass("cursor-not-allowed");
    });

    it("links to next page number", () => {
      render(<Pagination currentPage={3} totalPages={5} lang="en" />);

      const nextButton = screen.getByText("Next");
      expect(nextButton.closest("a")).toHaveAttribute(
        "href",
        "/en/blog/page/4",
      );
    });
  });

  describe("Page numbers", () => {
    it("shows all page numbers when totalPages <= 7", () => {
      render(<Pagination currentPage={3} totalPages={5} lang="en" />);

      expect(screen.getByText("1")).toBeInTheDocument();
      expect(screen.getByText("2")).toBeInTheDocument();
      expect(screen.getByText("3")).toBeInTheDocument();
      expect(screen.getByText("4")).toBeInTheDocument();
      expect(screen.getByText("5")).toBeInTheDocument();
    });

    it("shows ellipsis when totalPages > 7", () => {
      render(<Pagination currentPage={5} totalPages={10} lang="en" />);

      const ellipsis = screen.getAllByText("...");
      expect(ellipsis.length).toBeGreaterThan(0);
    });

    it("highlights current page", () => {
      render(<Pagination currentPage={3} totalPages={5} lang="en" />);

      // Current page should be rendered (either as span or link)
      const currentPageElement = screen.getByText("3");
      expect(currentPageElement).toBeInTheDocument();
      // Check if it's highlighted by checking parent element classes
      const parentElement = currentPageElement.closest("span, a");
      expect(parentElement).toBeTruthy();
    });

    it("generates correct href for page numbers", () => {
      render(<Pagination currentPage={2} totalPages={5} lang="en" />);

      const page3Link = screen.getByText("3").closest("a");
      expect(page3Link).toHaveAttribute("href", "/en/blog/page/3");
    });

    it("links to correct page for page 1", () => {
      render(<Pagination currentPage={2} totalPages={5} lang="en" />);

      const page1Link = screen.getByText("1").closest("a");
      expect(page1Link).toHaveAttribute("href");
      const href = page1Link?.getAttribute("href");
      expect(href).toMatch(/\/en\/blog/);
    });
  });

  describe("Arabic language support", () => {
    it("shows Arabic text for page info", () => {
      render(<Pagination currentPage={2} totalPages={5} lang="ar" />);

      expect(screen.getByText(/صفحة 2 من 5/)).toBeInTheDocument();
    });

    it("shows Arabic text for Previous button", () => {
      render(<Pagination currentPage={2} totalPages={5} lang="ar" />);

      expect(screen.getByText("السابق")).toBeInTheDocument();
    });

    it("shows Arabic text for Next button", () => {
      render(<Pagination currentPage={2} totalPages={5} lang="ar" />);

      expect(screen.getByText("التالي")).toBeInTheDocument();
    });

    it("generates correct Arabic hrefs", () => {
      render(<Pagination currentPage={2} totalPages={5} lang="ar" />);

      const page3Link = screen.getByText("3").closest("a");
      expect(page3Link).toHaveAttribute("href", "/ar/blog/page/3");
    });
  });

  describe("Edge cases", () => {
    it("handles single page correctly", () => {
      render(<Pagination currentPage={1} totalPages={1} lang="en" />);

      expect(screen.getByText("Page 1 of 1")).toBeInTheDocument();

      const prevButton = screen.getByText("Previous").closest("span");
      const nextButton = screen.getByText("Next").closest("span");

      expect(prevButton).toHaveClass("cursor-not-allowed");
      expect(nextButton).toHaveClass("cursor-not-allowed");
    });

    it("handles large page numbers correctly", () => {
      render(<Pagination currentPage={50} totalPages={100} lang="en" />);

      expect(screen.getByText("Page 50 of 100")).toBeInTheDocument();
      expect(screen.getByText("50")).toBeInTheDocument();
    });
  });

  describe("Ellipsis logic", () => {
    it("shows start ellipsis when current page is far from start", () => {
      render(<Pagination currentPage={8} totalPages={10} lang="en" />);

      const ellipsis = screen.getAllByText("...");
      expect(ellipsis.length).toBeGreaterThan(0);
    });

    it("shows end ellipsis when current page is far from end", () => {
      render(<Pagination currentPage={3} totalPages={10} lang="en" />);

      const ellipsis = screen.getAllByText("...");
      expect(ellipsis.length).toBeGreaterThan(0);
    });

    it("always shows first and last page", () => {
      render(<Pagination currentPage={5} totalPages={10} lang="en" />);

      expect(screen.getByText("1")).toBeInTheDocument();
      expect(screen.getByText("10")).toBeInTheDocument();
    });
  });

  describe("Accessibility", () => {
    it("uses semantic nav element", () => {
      render(<Pagination currentPage={2} totalPages={5} lang="en" />);

      const navigation = screen.getByRole("navigation");
      expect(navigation).toBeInTheDocument();
    });

    it("page number links are keyboard accessible", () => {
      render(<Pagination currentPage={2} totalPages={5} lang="en" />);

      const page3Link = screen.getByText("3").closest("a");
      expect(page3Link).toHaveAttribute("href");
    });

    it("disabled buttons are properly marked", () => {
      render(<Pagination currentPage={1} totalPages={5} lang="en" />);

      const prevButton = screen.getByText("Previous").closest("span");
      expect(prevButton).toHaveClass("cursor-not-allowed");
    });
  });

  describe("RTL/LTR support", () => {
    it("applies correct direction for English", () => {
      const { container } = render(
        <Pagination currentPage={2} totalPages={5} lang="en" />,
      );

      const navigation = container.querySelector("nav");
      expect(navigation).not.toHaveAttribute("dir", "rtl");
    });

    it("applies correct direction for Arabic", () => {
      const { container } = render(
        <Pagination currentPage={2} totalPages={5} lang="ar" />,
      );

      // RTL should be handled at parent level, component should render correctly
      expect(screen.getByText("السابق")).toBeInTheDocument();
    });
  });
});
