/**
 * Conformance tests for the Footer component
 *
 * Covered use cases:
 * 1. HTML Validity:
 *    - Validates HTML structure compliance with default props
 *    - Tests with custom data to ensure flexibility
 *    - Tests with custom className
 * 2. Accessibility (a11y):
 *    - Tests with default props for comprehensive accessibility validation
 *    - Tests logo accessibility with aria-label
 *    - Tests navigation structure and semantic HTML
 *    - Uses axe-core for comprehensive accessibility validation
 * 3. Semantic HTML:
 *    - Verifies correct HTML element rendering (footer, nav, headings)
 *    - Tests proper heading hierarchy (h5 for section titles)
 *    - Tests landmark roles (contentinfo for footer)
 * 4. Theme Support:
 *    - Tests light theme context
 *    - Tests dark theme context
 */
import { render } from "@testing-library/react";
import { axe } from "vitest-axe";

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

describe("Footer Conformance Tests", () => {
  describe("HTML Validity", () => {
    it("is valid html with default props", () => {
      const { container } = render(<Footer />);
      expect(container).toHTMLValidate();
    });

    it("is valid html with custom data", () => {
      const customData = {
        columns: [
          {
            title: "Test Column",
            links: [
              { label: "Test Link 1", url: "/test1" },
              { label: "Test Link 2", url: "/test2" },
            ],
          },
        ],
        bottomLinks: [
          { label: "Privacy", url: "/privacy" },
          { label: "Terms", url: "/terms" },
        ],
        copyright: "© 2024 Test Company",
      };
      const { container } = render(<Footer data={customData} />);
      expect(container).toHTMLValidate();
    });

    it("is valid html with custom className", () => {
      const { container } = render(<Footer className="custom-footer-class" />);
      expect(container).toHTMLValidate();
    });
  });

  describe("Accessibility", () => {
    it("is accessible with default props", async () => {
      const { container } = render(<Footer />);
      expect(await axe(container)).toHaveNoViolations();
    });

    it("is accessible with custom data", async () => {
      const customData = {
        columns: [
          {
            title: "Accessibility Test",
            links: [
              { label: "Link with Special Chars & Symbols", url: "/test" },
              { label: "Another Link", url: "/another" },
            ],
          },
        ],
        bottomLinks: [{ label: "Legal Info", url: "/legal" }],
        copyright: "© 2024 Accessible Company",
      };
      const { container } = render(<Footer data={customData} />);
      expect(await axe(container)).toHaveNoViolations();
    });

    it("is accessible in light theme context", async () => {
      const { container } = render(
        <div className="is-light">
          <Footer />
        </div>,
      );
      expect(await axe(container)).toHaveNoViolations();
    });

    it("is accessible in dark theme context", async () => {
      const { container } = render(
        <div className="is-dark">
          <Footer />
        </div>,
      );
      expect(await axe(container)).toHaveNoViolations();
    });
  });

  describe("Semantic HTML", () => {
    it("uses proper semantic elements", () => {
      const { getByRole, getAllByRole, container } = render(<Footer />);

      // Footer should be a landmark
      expect(getByRole("contentinfo")).toBeInTheDocument();

      // Should have proper column titles (now rendered as paragraphs with footer__title class)
      const titles = container.querySelectorAll(".footer__title");
      expect(titles.length).toBe(4); // One for each column

      // Should have navigation lists
      const lists = getAllByRole("list");
      expect(lists.length).toBeGreaterThanOrEqual(4); // At least 4 column lists
    });

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

      // Should have multiple links
      const links = getAllByRole("link");
      expect(links.length).toBeGreaterThan(20); // Many navigation links

      // Logo link should exist
      const logoLink = links.find(
        (link) => link.getAttribute("aria-label") === "Odkaz na úvodnú stránku",
      );
      expect(logoLink).toBeInTheDocument();
    });
  });
});