import { afterEach, describe, expect, it, vi } from "vitest";
import { cleanup, render, screen } from "@testing-library/react";
import { PageHeader } from "./page-header";
import { NavigationButton } from "./navigation-button";
import { I18nProvider } from "@/translations/provider";

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

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

vi.mock("@/hooks/marriage/use-profile-main", () => ({
  useMarriageProfileQuery: () => ({
    data: undefined,
    isLoading: false,
    isFetched: true,
  }),
}));

function renderWithI18n(ui: React.ReactNode) {
  return render(
    <I18nProvider locale="fa" dictionary={{ "Habib Marriage": "ازدواج حبیب", "Subscription Status": "وضعیت اشتراک", "Subscription": "اشتراک", "More": "بیشتر" }}>
      {ui}
    </I18nProvider>
  );
}

describe("PageHeader & NavigationButton Subscription Gender Restriction", () => {
  it("renders subscription button for male profile", () => {
    const maleProfile = {
      id: 101,
      gender: "male",
      status: "waiting",
    };

    const { queryByRole } = renderWithI18n(<PageHeader profile={maleProfile} />);

    const subButton = queryByRole("button", {
      name: /وضعیت اشتراک|اشتراک|subscription/i,
    });
    expect(subButton).toBeInTheDocument();
  });

  it("does NOT render subscription button for female profile", () => {
    const femaleProfile = {
      id: 243,
      gender: "female",
      status: "waiting",
    };

    const { queryByRole } = renderWithI18n(<PageHeader profile={femaleProfile} />);

    const subButton = queryByRole("button", {
      name: /وضعیت اشتراک|اشتراک|subscription/i,
    });
    expect(subButton).not.toBeInTheDocument();
  });

  it("NavigationButton icon='subscription' returns null for female user", () => {
    const femaleProfile = {
      id: 243,
      gender: "female",
    };

    const { container } = renderWithI18n(
      <NavigationButton icon="subscription" profile={femaleProfile} />,
    );
    expect(container).toBeEmptyDOMElement();
  });

  it("NavigationButton icon='subscription' renders button for male user", () => {
    const maleProfile = {
      id: 101,
      gender: "male",
    };

    const { getByRole } = renderWithI18n(
      <NavigationButton icon="subscription" profile={maleProfile} />,
    );
    const subButton = getByRole("button");
    expect(subButton).toBeInTheDocument();
  });
});