import { render } from "@testing-library/react";
import footerData from "../data";
import { Footer } from "../Footer";

describe("Footer", () => {
  it("renders without crashing", () => {
    const { getByRole } = render(<Footer />);
    // Should render a footer landmark
    expect(getByRole("contentinfo")).toBeInTheDocument();
  });

  it("renders logo with aria-label", () => {
    const { getByLabelText } = render(<Footer />);
    expect(getByLabelText("Odkaz na úvodnú stránku")).toBeInTheDocument();
  });

  it("renders all columns and links", () => {
    const { getByText } = render(<Footer />);
    footerData.columns.forEach((column) => {
      expect(getByText(column.title)).toBeInTheDocument();
      column.links.forEach((link) => {
        expect(getByText(link.label)).toBeInTheDocument();
      });
    });
  });

  it("renders bottom links", () => {
    const { getByText } = render(<Footer />);
    footerData.bottomLinks.forEach((link) => {
      expect(getByText(link.label)).toBeInTheDocument();
    });
  });

  it("renders copyright", () => {
    const { getByText } = render(<Footer />);
    expect(getByText(footerData.copyright)).toBeInTheDocument();
  });

  it("applies is-dark class when container has dark theme", () => {
    const { container } = render(
      <div className="is-dark">
        <Footer />
      </div>,
    );
    expect(container.querySelector(".footer")).toBeInTheDocument();
    expect(container.querySelector(".is-dark")).toBeInTheDocument();
  });

  it("accepts custom className", () => {
    const { container } = render(<Footer className="custom-footer" />);
    expect(container.querySelector(".custom-footer")).toBeInTheDocument();
  });

  it("accepts custom data prop", () => {
    const customData = {
      columns: [
        {
          title: "Custom",
          links: [{ label: "Link", url: "/custom" }],
        },
      ],
      bottomLinks: [{ label: "Bottom", url: "/bottom" }],
      copyright: "Custom Copyright",
    };
    const { getByText } = render(<Footer data={customData} />);
    expect(getByText("Custom")).toBeInTheDocument();
    expect(getByText("Link")).toBeInTheDocument();
    expect(getByText("Bottom")).toBeInTheDocument();
    expect(getByText("Custom Copyright")).toBeInTheDocument();
  });

  it("renders proper HTML structure", () => {
    const { container } = render(<Footer />);
    const footer = container.querySelector("footer");
    const container_ = footer?.querySelector(".footer__container");
    const menu = container_?.querySelector(".footer__menu");
    const bottom = container_?.querySelector(".footer__bottom");

    expect(footer).toBeInTheDocument();
    expect(container_).toBeInTheDocument();
    expect(menu).toBeInTheDocument();
    expect(bottom).toBeInTheDocument();
  });

  it("renders logo with correct href", () => {
    const { container } = render(<Footer />);
    const logoLink = container.querySelector(".footer__logo");
    expect(logoLink).toBeInTheDocument();
    expect(logoLink).toHaveAttribute("href", "/");
  });

  it("renders all links with correct hrefs", () => {
    const { container } = render(<Footer />);
    const firstColumnFirstLink = container.querySelector(
      'a[href="/eshop/telefony"]',
    );
    expect(firstColumnFirstLink).toBeInTheDocument();
  });

  it("renders copyright with current year", () => {
    const { getByText } = render(<Footer />);
    const currentYear = new Date().getFullYear();
    expect(getByText(`© 1997 - ${currentYear} Orange`)).toBeInTheDocument();
  });

  it("renders follow us section", () => {
    const { getByText } = render(<Footer />);
    expect(getByText("Sledujte nás")).toBeInTheDocument();
  });

  it("renders horizontal separators", () => {
    const { container } = render(<Footer />);
    const hrs = container.querySelectorAll("hr");
    expect(hrs).toHaveLength(2);
  });

  it("has proper semantic structure", () => {
    const { getByRole, getAllByRole, container } = render(<Footer />);

    // Should have footer landmark
    expect(getByRole("contentinfo")).toBeInTheDocument();

    // Should have column titles (now rendered as paragraphs with footer__title class)
    const titles = container.querySelectorAll(".footer__title");
    expect(titles).toHaveLength(4); // 4 columns

    // Should have lists for navigation
    const lists = getAllByRole("list");
    expect(lists.length).toBeGreaterThanOrEqual(5); // 4 column lists + 1 bottom list
  });
});