import { render } from "@testing-library/react";
import fc from "fast-check";
import type { HTMLAttributes, ReactNode } from "react";
import type { PortfolioExperience } from "@/lib/portfolio-data";
import Experience from "./Experience";

type MotionProps = HTMLAttributes<HTMLElement> & {
  initial?: unknown;
  whileInView?: unknown;
  viewport?: unknown;
  variants?: unknown;
  whileHover?: unknown;
  whileTap?: unknown;
  transition?: unknown;
};

type SectionMockProps = {
  children?: ReactNode;
  title?: string;
  eyebrow?: string;
  description?: string;
  disableChildrenAnimation?: boolean;
  id?: string;
  className?: string;
};

jest.mock("motion/react", () => {
  const createMotionElement =
    (Tag: "div" | "article") =>
    ({
      children,
      initial: _initial,
      whileInView: _whileInView,
      viewport: _viewport,
      variants: _variants,
      whileHover: _whileHover,
      whileTap: _whileTap,
      transition: _transition,
      ...props
    }: MotionProps & { children?: ReactNode }) => (
      <Tag {...props}>{children}</Tag>
    );

  return {
    motion: {
      div: createMotionElement("div"),
      article: createMotionElement("article"),
    },
    useReducedMotion: () => false,
  };
});

jest.mock("./Section", () => ({
  Section: ({
    children,
    title,
    eyebrow: _eyebrow,
    description: _description,
    disableChildrenAnimation: _disableChildrenAnimation,
    ...props
  }: SectionMockProps) => (
    <section {...props}>
      <h2>{title}</h2>
      {children}
    </section>
  ),
}));

jest.mock("./animations/DrawLine", () => ({
  DrawLine: () => <span data-testid="draw-line" />,
}));

function makeExperience(index: number, featured: boolean): PortfolioExperience {
  return {
    id: `experience-${index}`,
    title: `Experience ${index}`,
    company: "Company",
    period: `${2020 + index} - Present`,
    location: "Remote",
    type: index % 2 === 0 ? "Software" : "Hardware",
    description: "Description",
    achievements: [],
    technologies: [],
    featured,
  };
}

describe("Experience featured filtering", () => {
  it("renders exactly the featured experiences", () => {
    fc.assert(
      fc.property(
        fc.array(fc.boolean(), { minLength: 1, maxLength: 8 }),
        (featuredFlags) => {
          const experiences = featuredFlags.map((featured, index) =>
            makeExperience(index, featured),
          );
          const { container, unmount } = render(
            <Experience experiences={experiences} />,
          );
          const articles = Array.from(container.querySelectorAll("article"));
          const expectedCount = featuredFlags.filter(Boolean).length;

          expect(articles).toHaveLength(expectedCount);
          const articleText = articles.map(
            (article) => article.textContent ?? "",
          );
          featuredFlags.forEach((featured, index) => {
            const title = `Experience ${index}`;
            expect(articleText.some((text) => text.includes(title))).toBe(
              featured,
            );
          });

          unmount();
        },
      ),
      { numRuns: 25 },
    );
  });

  it("renders an empty experience list safely", () => {
    const { container } = render(<Experience experiences={[]} />);

    expect(container.querySelector("section")).toBeInTheDocument();
    expect(container.querySelectorAll("article")).toHaveLength(0);
  });
});