// @vitest-environment jsdom

import type { ReactNode } from "react";
import { act } from "react";
import { createRoot } from "react-dom/client";
import { expect, it, vi } from "vitest";

vi.mock("@lingui/react/macro", () => ({
  Trans: ({ children }: { children: ReactNode }) => children,
}));

import { TradingModeIndicator } from "./TradingModeIndicator";

it("renders the API mode and ignores a stored live preference", async () => {
  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
  window.localStorage.setItem("evoo_trading_mode", "live");
  const container = document.createElement("div");
  document.body.append(container);
  const root = createRoot(container);
  try {
    await act(async () =>
      root.render(
        <TradingModeIndicator
          snapshot={{
            state: "ready",
            status: { mode: "paper", kind: "dry_run", adapterCount: 3, lastError: null },
          }}
        />,
      ),
    );
    const status = container.querySelector("[data-testid='trading-mode-status']");
    expect(status?.getAttribute("data-trading-state")).toBe("dry_run");
    expect(status?.textContent).toContain("Dry run");
    expect(status?.textContent).toContain("3 adapters");
    expect(container.querySelector("button")).toBeNull();
    expect(status?.textContent).not.toContain("Live Trading");

    await act(async () => root.render(<TradingModeIndicator snapshot={{ state: "offline" }} />));
    expect(container.querySelector("[data-testid='trading-mode-status']")?.textContent).toContain(
      "Offline",
    );

    await act(async () =>
      root.render(<TradingModeIndicator snapshot={{ state: "unconfigured" }} />),
    );
    expect(container.querySelector("[data-testid='trading-mode-status']")?.textContent).toContain(
      "Not configured",
    );
  } finally {
    await act(async () => root.unmount());
    container.remove();
    window.localStorage.clear();
    vi.unstubAllGlobals();
  }
});