import { afterEach, describe, expect, test } from "vitest";
import { within } from "@testing-library/react";
import {
  cleanup,
  renderWithProviders as render,
  screen,
} from "../utils/test-utils";
import AboutPage from "../../app/(marketing)/about/page";
import {
  ASSETS,
  getAssetPath,
  governanceBookletPath,
  structureBeforeCrisisPath,
} from "../../lib/assetUtils";
import messages from "../../messages/en/index";

afterEach(() => {
  cleanup();
});

function bookSection(title: string) {
  const heading = screen.getByRole("heading", { name: title });
  const section = heading.closest("section");
  expect(section).not.toBeNull();
  return within(section as HTMLElement);
}

describe("AboutPage", () => {
  test("pairs each book cover, heading, alt, and download with the same title", () => {
    render(<AboutPage />);
    const page = messages.pages.about;

    const structureBeforeCrisis = bookSection(page.structureBeforeCrisis.title);
    expect(
      structureBeforeCrisis.getByText(page.structureBeforeCrisis.description),
    ).toBeInTheDocument();
    expect(
      structureBeforeCrisis.getByRole("img", {
        name: page.structureBeforeCrisis.imageAlt,
      }),
    ).toHaveAttribute(
      "src",
      getAssetPath(ASSETS.STRUCTURE_BEFORE_CRISIS_COVER),
    );
    expect(
      structureBeforeCrisis.getByRole("link", {
        name: page.structureBeforeCrisis.buttonText,
      }),
    ).toHaveAttribute("href", getAssetPath(structureBeforeCrisisPath()));

    const communityRules = bookSection(page.communityRules.title);
    expect(
      communityRules.getByText(page.communityRules.description),
    ).toBeInTheDocument();
    expect(
      communityRules.getByRole("img", {
        name: page.communityRules.imageAlt,
      }),
    ).toHaveAttribute("src", getAssetPath(ASSETS.COMMUNITY_RULES_COVER));
    expect(
      communityRules.getByRole("link", {
        name: page.communityRules.buttonText,
      }),
    ).toHaveAttribute("href", getAssetPath(governanceBookletPath()));
  });

  test("shows sourced About statistics with as-of years", () => {
    render(<AboutPage />);
    const page = messages.pages.about;

    expect(screen.getByText("420M+")).toBeInTheDocument();
    expect(screen.getByText("24%")).toBeInTheDocument();
    expect(screen.getByText("45%")).toBeInTheDocument();
    expect(screen.getByText("800+")).toBeInTheDocument();
    expect(screen.queryByText("8000+")).not.toBeInTheDocument();
    expect(screen.queryByText("27%")).not.toBeInTheDocument();

    for (const item of page.stats.items) {
      expect(screen.getByText(item.label)).toBeInTheDocument();
      if (item.sourceHref) {
        expect(
          screen.getAllByRole("link").some(
            (link) => link.getAttribute("href") === item.sourceHref,
          ),
        ).toBe(true);
      }
    }
  });
});