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 with default logos", () => {
    render(<LogoWall />);

    // Check for default logos
    expect(screen.getByAltText("Food Not Bombs")).toBeInTheDocument();
    expect(screen.getByAltText("Start COOP")).toBeInTheDocument();
    expect(screen.getByAltText("Metagov")).toBeInTheDocument();
    expect(screen.getByAltText("Open Civics")).toBeInTheDocument();
    expect(screen.getByAltText("Mutual Aid CO")).toBeInTheDocument();
    expect(screen.getByAltText("CU Boulder")).toBeInTheDocument();
  });

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

    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(--spacing-scale-032)]",
    );
  });

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

    const section = document.querySelector("section");
    expect(section).toHaveClass(
      "p-[var(--spacing-scale-032)]",
      "md:px-[var(--spacing-scale-024)]",
    );
  });

  test("applies responsive grid layout", () => {
    render(<LogoWall />);

    const grid = document.querySelector(
      '[class*="grid grid-cols-2 grid-rows-3"]',
    );
    expect(grid).toBeInTheDocument();
    expect(grid).toHaveClass(
      "sm:grid-cols-3",
      "sm:grid-rows-2",
      "md:flex",
      "md:justify-between",
      "md:flex-nowrap",
      "gap-[38.4px]",
    );
  });

  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={[]} />);

    // Should fall back to default 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", () => {
    render(<LogoWall />);

    const section = document.querySelector("section");
    expect(section).toBeInTheDocument();

    expect(
      screen.getByText("Trusted by leading cooperators"),
    ).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) => {
      // Next.js Image attributes are not rendered as HTML attributes in JSDOM
      // Just verify the images are present
      expect(logo).toBeInTheDocument();
    });
  });

  test("prioritizes first two logos", () => {
    render(<LogoWall />);

    const logos = screen.getAllByRole("img");
    const foodNotBombsLogo = logos.find((img) => img.alt === "Food Not Bombs");
    const startCoopLogo = logos.find((img) => img.alt === "Start COOP");

    // Next.js Image priority attribute is not rendered as HTML attribute in JSDOM
    // Just verify the logos are present
    expect(foodNotBombsLogo).toBeInTheDocument();
    expect(startCoopLogo).toBeInTheDocument();
  });
});
