// @vitest-environment jsdom
//
// A form's error is announced (role="alert"), and failing the same way again must be announced again. The
// clear and the set of a validation failure commit together, so the alert node used to stay untouched on
// the second attempt and a screen reader said nothing — a press that seemed to do nothing.
//
// i18n is mocked to a key-passthrough; the API and the E2EE module are stubbed so nothing reaches out.
import { afterEach, describe, expect, it, vi } from "vitest";
import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

vi.mock("react-i18next", async (importOriginal) => {
  const actual = await importOriginal<typeof import("react-i18next")>();
  return {
    ...actual,
    useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
  };
});

vi.mock("../lib/api", async (importOriginal) => {
  const actual = await importOriginal<typeof import("../lib/api")>();
  return {
    ...actual,
    api: {
      ...actual.api,
      authConfig: () => Promise.resolve({ google_enabled: false }),
      messageMyKey: () => Promise.resolve({ configured: true }),
      me: () => Promise.resolve({ authenticated: false }),
      setupInfo: () => Promise.resolve({ secrets_manageable: false }),
    },
  };
});

vi.mock("../lib/e2ee", () => ({ unlock: vi.fn(), setup: vi.fn(), clearDevice: vi.fn() }));

import KeyGate from "./KeyGate";
import SetupWizard from "./SetupWizard";
import Welcome from "./Welcome";

afterEach(() => {
  cleanup();
  window.history.replaceState(null, "", "/");
});

// Fails twice the same way; the second alert must be a new node carrying the same message.
async function failTwice(fail: () => void, message: string) {
  fail();
  const first = await screen.findByRole("alert");
  expect(first.textContent).toBe(message);
  fail();
  const second = screen.getByRole("alert");
  expect(second.textContent).toBe(message);
  expect(second).not.toBe(first);
}

describe("a form failing the same way twice announces it twice", () => {
  it("the message passphrase gate", async () => {
    render(
      <QueryClientProvider client={new QueryClient()}>
        <KeyGate meId={1} />
      </QueryClientProvider>,
    );
    const unlock = await screen.findByText("messages.unlock");
    fireEvent.change(screen.getByPlaceholderText("messages.passphrase"), {
      target: { value: "abc" },
    });
    await failTwice(() => fireEvent.click(unlock), "messages.passTooShort");
  });

  it("the sign-in card", async () => {
    render(
      <Welcome verify={{ outcome: null, email: null, resetPending: false, dismiss: () => {} }} />,
    );
    const email = await screen.findByPlaceholderText("welcome.auth.email");
    fireEvent.change(email, { target: { value: "not-an-address" } });
    await failTwice(() => fireEvent.submit(email.closest("form")!), "welcome.auth.invalidEmail");
  });

  it("the install wizard, with the step's own message rather than the generic one", async () => {
    window.history.replaceState(null, "", "/?token=setup-token");
    render(<SetupWizard />);
    fireEvent.click(await screen.findByText("setup.nav.next")); // past the intro
    fireEvent.change(await screen.findByPlaceholderText("setup.admin.email"), {
      target: { value: "not-an-address" },
    });
    await failTwice(
      () => fireEvent.click(screen.getByText("setup.nav.next")),
      "setup.admin.invalidEmail",
    );
  });
});