import { render, screen, within } from "@testing-library/react";
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;
};

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,
    id,
    title,
  }: {
    children?: ReactNode;
    id?: string;
    title?: string;
  }) => (
    <section id={id}>
      <h2>{title}</h2>
      {children}
    </section>
  ),
}));

jest.mock("./animations/DrawLine", () => ({
  DrawLine: () => null,
}));

function experience({
  id,
  title,
  period,
  featured,
}: {
  id: string;
  title: string;
  period: string;
  featured: boolean;
}): PortfolioExperience {
  return {
    id,
    title,
    company: "Empresa",
    period,
    location: "Remoto",
    type: "Software",
    description: "Descrição",
    achievements: [],
    technologies: [],
    featured,
  };
}

describe("Experience", () => {
  it("renders only featured experiences from newest to oldest", () => {
    render(
      <Experience
        experiences={[
          experience({
            id: "hidden",
            title: "Oculta",
            period: "2026 - Atual",
            featured: false,
          }),
          experience({
            id: "older",
            title: "Mais antiga",
            period: "2019 - 2021",
            featured: true,
          }),
          experience({
            id: "recent",
            title: "Mais recente",
            period: "2024 - Atual",
            featured: true,
          }),
        ]}
      />,
    );

    expect(
      screen.queryByRole("heading", { name: "Oculta" }),
    ).not.toBeInTheDocument();
    expect(
      screen
        .getAllByRole("article")
        .map(
          (article) =>
            within(article).getByRole("heading", { level: 3 }).textContent,
        ),
    ).toEqual(["Mais recente", "Mais antiga"]);
  });
});