import { screen, cleanup } from "@testing-library/react";
import { describe, test, expect, afterEach } from "vitest";
import { renderWithProviders as render } from "../utils/test-utils";
import LogoWall from "../../app/components/sections/LogoWall";

afterEach(() => {
  cleanup();
});
describe("LogoWall Component", () => {
  test("renders the three pilot marks", () => {
    render(<LogoWall />);

    expect(screen.getByAltText("Boulder Street Medics")).toBeInTheDocument();
    expect(screen.getByAltText("Food Not Bombs")).toBeInTheDocument();
    expect(screen.getByAltText("Mutual Aid Colorado")).toBeInTheDocument();
    expect(screen.queryByAltText("Start COOP")).not.toBeInTheDocument();
    expect(screen.queryByAltText("Metagov")).not.toBeInTheDocument();
    expect(screen.queryByAltText("Open Civics")).not.toBeInTheDocument();
    expect(screen.queryByAltText("CU Boulder")).not.toBeInTheDocument();
  });

  test("renders with custom logos", () => {
    const customLogos = [
      {
        src: "assets/custom1.png",
        alt: "Custom Logo 1",
        size: "h-8",
      },
      {
        src: "assets/custom2.png",
        alt: "Custom Logo 2",
        size: "h-10",
      },
    ];

    render(<LogoWall logos={customLogos} />);

    expect(screen.getByAltText("Custom Logo 1")).toBeInTheDocument();
    expect(screen.getByAltText("Custom Logo 2")).toBeInTheDocument();
    expect(screen.queryByAltText("Food Not Bombs")).not.toBeInTheDocument();
  });

  test("applies correct CSS classes", () => {
    render(<LogoWall />);

    const section = document.querySelector("section");
    expect(section).toHaveClass(
      "bg-[var(--color-surface-default-primary)]",
      "p-[var(--space-800)]",
    );
  });

  test("renders with design tokens", () => {
    render(<LogoWall />);

    const section = document.querySelector("section");
    expect(section).toHaveClass(
      "p-[var(--space-800)]",
      "md:px-[var(--space-600)]",
    );
  });

  test("lays out the three marks as a centered cluster", () => {
    render(<LogoWall />);

    const row = document.querySelector('[class*="flex w-full flex-col"]');
    expect(row).toBeInTheDocument();
    expect(row).toHaveClass(
      "justify-center",
      "sm:flex-row",
      "sm:justify-center",
      "md:flex-nowrap",
      "gap-[38.4px]",
    );
    expect(row).not.toHaveClass("md:justify-between");
    expect(row).not.toHaveClass("sm:justify-around");
  });

  test("renders logos with correct attributes", () => {
    render(<LogoWall />);

    const foodNotBombsLogo = screen.getByAltText("Food Not Bombs");
    expect(foodNotBombsLogo).toHaveAttribute(
      "src",
      "/assets/logos/partners/food-not-bombs.svg",
    );
    expect(foodNotBombsLogo).toHaveClass(
      "h-[48px]",
      "lg:h-[60px]",
      "xl:h-[74.6px]",
    );
  });

  test("handles empty logos array", () => {
    render(<LogoWall logos={[]} />);

    expect(screen.getByAltText("Food Not Bombs")).toBeInTheDocument();
  });

  test("does not apply hover effects on partner logos", () => {
    render(<LogoWall />);

    expect(
      document.querySelectorAll('[class*="hover:opacity"]').length,
    ).toBe(0);
    expect(
      document.querySelectorAll('[class*="hover:scale"]').length,
    ).toBe(0);
  });

  test("renders with proper semantic structure and no heading", () => {
    render(<LogoWall />);

    const section = document.querySelector("section");
    expect(section).toBeInTheDocument();
    expect(
      screen.queryByText("Trusted by leading cooperators"),
    ).not.toBeInTheDocument();
  });

  test("renders partner logos at Figma 60% opacity", () => {
    render(<LogoWall />);

    expect(
      document.querySelectorAll('[class*="opacity-60"]').length,
    ).toBeGreaterThan(0);
  });

  test("renders with proper image optimization", () => {
    render(<LogoWall />);

    const logos = screen.getAllByRole("img");
    logos.forEach((logo) => {
      expect(logo).toBeInTheDocument();
    });
  });

  test("marks the section with the Figma node id", () => {
    render(<LogoWall />);

    expect(
      document.querySelector('[data-figma-node="18483-18425"]'),
    ).toBeInTheDocument();
  });
});