import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";

const translations: Record<string, string> = {
  "Shop & archive page swatches": "Nuanciers des pages boutique et archives",
  "AJAX add to cart + cart notices": "Ajout AJAX et avis du panier",
  "Variation share URLs & social sharing": "Liens de partage des variations",
  "Custom typography & Google Fonts": "Typographie et polices personnalisees",
  "Upgrade to Pro": "Passer a Pro",
  "Dismiss upgrade message": "Fermer le message de mise a niveau",
  "You're on the free version. Pro adds:":
    "Vous utilisez la version gratuite. Pro ajoute :",
  "View Pro Plans": "Voir les offres Pro",
};

vi.mock("@wordpress/i18n", async (importOriginal) => {
  const actual = await importOriginal<typeof import("@wordpress/i18n")>();
  return {
    ...actual,
    __: (text: string) => translations[text] ?? text,
  };
});

const { ProUpgradeCard } = await import("./ProUpgradeCard");

const STORE_URL = "https://b3.digital/software/store?product=b3-swatches";

describe("ProUpgradeCard", () => {
  beforeEach(() => window.localStorage.clear());
  afterEach(() => {
    cleanup();
    window.localStorage.clear();
  });

  it("fails closed without a canonical localized store URL", () => {
    const { container } = render(<ProUpgradeCard />);

    expect(container.textContent).toBe("");
    expect(container.querySelector("a")).toBeNull();
  });

  it("uses the supplied store URL and translates every customer-visible string", () => {
    render(<ProUpgradeCard storeUrl={STORE_URL} />);

    expect(screen.getByRole("heading", { name: "Passer a Pro" })).toBeTruthy();
    expect(
      screen.getByRole("button", {
        name: "Fermer le message de mise a niveau",
      }),
    ).toBeTruthy();
    expect(
      screen.getByText("Vous utilisez la version gratuite. Pro ajoute :"),
    ).toBeTruthy();

    for (const translatedFeature of Object.values(translations).slice(0, 4)) {
      expect(screen.getByText(translatedFeature)).toBeTruthy();
    }

    const plans = screen.getByRole("link", { name: "Voir les offres Pro" });
    expect(plans.getAttribute("href")).toBe(STORE_URL);

    for (const sourceText of Object.keys(translations)) {
      expect(document.body.textContent).not.toContain(sourceText);
    }
  });

  it("keeps the translated collapsed link on the canonical store URL", () => {
    render(<ProUpgradeCard storeUrl={STORE_URL} />);

    fireEvent.click(
      screen.getByRole("button", {
        name: "Fermer le message de mise a niveau",
      }),
    );

    const collapsed = screen.getByRole("link", { name: "Passer a Pro" });
    expect(collapsed.getAttribute("href")).toBe(STORE_URL);
  });
});