import { describe, expect, it, vi } from "vitest";
import { renderWithProviders as render, screen } from "../utils/test-utils";
import "@testing-library/jest-dom/vitest";
import { InvitedRuleView } from "../../app/(app)/invite/_components/InvitedRuleView";

vi.mock("next/navigation", () => ({
  useRouter: () => ({
    replace: vi.fn(),
    push: vi.fn(),
    prefetch: vi.fn(),
    refresh: vi.fn(),
    back: vi.fn(),
    forward: vi.fn(),
  }),
}));

const document = {
  sections: [
    {
      categoryName: "Values",
      entries: [
        {
          title: "Care",
          body: "We care for each other.",
        },
      ],
    },
  ],
};

describe("InvitedRuleView", () => {
  it("names the inviter by email and offers Make a copy", () => {
    render(
      <InvitedRuleView
        ruleId="rule-1"
        title="Juniper Street Food Share"
        summary="Neighbors sharing food."
        document={document}
        updatedAt="2026-11-03T00:00:00.000Z"
        inviterEmail="maya@example.com"
        viewerEmail="reader@example.com"
        countsSpoken="one value and zero cards"
      />,
    );

    expect(
      screen.getByText("maya@example.com invited you to read this Rule"),
    ).toBeInTheDocument();
    expect(
      screen.getByText(
        "Their Rule sets out how they talk, who belongs, how they decide and what happens when they disagree.",
      ),
    ).toBeInTheDocument();
    expect(
      screen.getAllByRole("button", { name: "Make a copy of this Rule" })
        .length,
    ).toBeGreaterThan(0);
    expect(
      screen.getByText("Only people the community invites"),
    ).toBeInTheDocument();
    expect(
      screen.getByText(
        "Every Rule starts private. Only the people the community invites can read it until the person who holds the pen turns on a link.",
      ),
    ).toBeInTheDocument();
    expect(screen.getByText("Care")).toBeInTheDocument();
  });
});