/**
 * Conformance tests for the Container component
 *
 * Covered use cases:
 * 1. HTML Validity:
 *    - Validates HTML structure compliance
 *    - Tests with children, custom props, and various content types
 * 2. Accessibility (a11y):
 *    - Tests with default props and various children
 *    - Tests with ARIA attributes (role, aria-label, aria-describedby)
 *    - Tests with complex nested structures (header, nav, main, section, footer)
 *    - Uses axe-core for comprehensive accessibility validation
 * 3. Semantic HTML:
 *    - Verifies correct HTML element rendering (div)
 *    - Tests proper heading hierarchy (h1, h2, h3)
 *    - Tests form semantics with proper structure (form, fieldset, legend, label, input, button)
 * 4. CSS Class Conformance:
 *    - Verifies default 'container' class is applied
 *    - Tests custom class merging with default class
 *    - Tests handling of empty className
 * 5. Props Forwarding:
 *    - Tests forwarding of HTML attributes (id, data-testid, aria-label, style)
 *    - Tests event handler forwarding (onClick)
 *    - Verifies all standard HTML div props are properly forwarded
 */
import { render } from "@testing-library/react";
import { axe } from "vitest-axe";

import { Container } from "../";

describe("Container Conformance Tests", () => {
  describe("HTML Validity", () => {
    it("should render valid HTML structure", () => {
      const { container } = render(<Container />);
      expect(container).toHTMLValidate();
    });

    it("should render valid HTML with children", () => {
      const { container } = render(
        <Container>
          <div>Test content</div>
          <p>Another element</p>
        </Container>,
      );
      expect(container).toHTMLValidate();
    });

    it("should render valid HTML with custom props", () => {
      const { container } = render(
        <Container id="test-container" data-testid="container">
          Content
        </Container>,
      );
      expect(container).toHTMLValidate();
    });
  });

  describe("Accessibility (a11y)", () => {
    it("should have no accessibility violations with default props", async () => {
      const { container } = render(<Container />);
      const results = await axe(container);
      expect(results).toHaveNoViolations();
    });

    it("should have no accessibility violations with children", async () => {
      const { container } = render(
        <Container>
          <h1>Main heading</h1>
          <p>Some content</p>
          <button>Click me</button>
        </Container>,
      );
      const results = await axe(container);
      expect(results).toHaveNoViolations();
    });

    it("should have no accessibility violations with ARIA attributes", async () => {
      const { container } = render(
        <Container
          role="main"
          aria-label="Main content area"
          aria-describedby="description"
        >
          <div id="description">This is the main content area</div>
          <p>Content goes here</p>
        </Container>,
      );
      const results = await axe(container);
      expect(results).toHaveNoViolations();
    });

    it("should have no accessibility violations with complex nested structure", async () => {
      const { container } = render(
        <Container>
          <header>
            <nav aria-label="Main navigation">
              <ul>
                <li>
                  <a href="#home">Home</a>
                </li>
                <li>
                  <a href="#about">About</a>
                </li>
              </ul>
            </nav>
          </header>
          <main>
            <section aria-labelledby="section-title">
              <h2 id="section-title">Section Title</h2>
              <p>Section content</p>
            </section>
          </main>
          <footer>
            <p>&copy; 2024 Company</p>
          </footer>
        </Container>,
      );
      const results = await axe(container);
      expect(results).toHaveNoViolations();
    });
  });

  describe("Semantic HTML", () => {
    it("should render as a div element by default", () => {
      const { container } = render(<Container />);
      const containerElement = container.firstChild;
      expect(containerElement.tagName).toBe("DIV");
    });

    it("should preserve semantic meaning with proper heading structure", () => {
      const { container } = render(
        <Container>
          <h1>Page Title</h1>
          <h2>Section Title</h2>
          <h3>Subsection Title</h3>
        </Container>,
      );
      expect(container).toHTMLValidate();
    });

    it("should maintain proper form semantics", () => {
      const { container } = render(
        <Container>
          <form>
            <fieldset>
              <legend>Personal Information</legend>
              <label htmlFor="name">Name:</label>
              <input type="text" id="name" name="name" />
            </fieldset>
            <button type="submit">Submit</button>
          </form>
        </Container>,
      );
      expect(container).toHTMLValidate();
    });
  });

  describe("CSS Class Conformance", () => {
    it("should have the correct base class", () => {
      const { container } = render(<Container />);
      const containerElement = container.firstChild;
      expect(containerElement).toHaveClass("container");
    });

    it("should merge custom classes with base class", () => {
      const { container } = render(
        <Container className="custom-class another-class" />,
      );
      const containerElement = container.firstChild;
      expect(containerElement).toHaveClass(
        "container",
        "custom-class",
        "another-class",
      );
    });

    it("should handle empty className gracefully", () => {
      const { container } = render(<Container className="" />);
      const containerElement = container.firstChild;
      expect(containerElement).toHaveClass("container");
    });
  });

  describe("Props Forwarding", () => {
    it("should forward all HTML div attributes", () => {
      const { container } = render(
        <Container
          id="test-id"
          data-testid="test-container"
          aria-label="Test container"
          style={{ backgroundColor: "red" }}
          onClick={() => {}}
        />,
      );
      const containerElement = container.firstChild;
      expect(containerElement).toHaveAttribute("id", "test-id");
      expect(containerElement).toHaveAttribute("data-testid", "test-container");
      expect(containerElement).toHaveAttribute("aria-label", "Test container");
    });

    it("should handle event handlers correctly", () => {
      const handleClick = vi.fn();
      const { container } = render(<Container onClick={handleClick} />);
      const containerElement = container.firstChild;

      containerElement.click();
      expect(handleClick).toHaveBeenCalledTimes(1);
    });
  });
});