// @vitest-environment jsdom
//
// A dialog opened from a player in true fullscreen portals INTO the fullscreen element (a node under
// <body> is painted beneath it, i.e. invisible). Leaving fullscreen changes that container — and a
// React portal whose container changes is torn down and recreated, so everything the dialog held went
// with it: a half-filled download form reset to its defaults and focus fell to <body> (a verifier's
// side finding in deep-review round 4).
import { describe, it, expect, afterEach } from "vitest";
import { render, cleanup, screen, fireEvent, act } from "@testing-library/react";
import { vi } from "vitest";

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

import Modal from "./Modal";

const setFullscreen = (el: Element | null) =>
  act(() => {
    Object.defineProperty(document, "fullscreenElement", { value: el, configurable: true });
    document.dispatchEvent(new Event("fullscreenchange"));
  });

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

describe("a dialog open while fullscreen is left", () => {
  it("keeps what the viewer had typed in it, and the focus inside it", async () => {
    const stage = document.createElement("div");
    document.body.appendChild(stage);
    setFullscreen(stage);
    render(
      <Modal title="Download" onClose={() => {}}>
        <input aria-label="name" defaultValue="" />
      </Modal>,
    );
    const field = screen.getByLabelText("name") as HTMLInputElement;
    fireEvent.change(field, { target: { value: "my cut" } });
    field.focus();
    expect(stage.contains(field)).toBe(true);

    setFullscreen(null); // the browser's own Esc leaves fullscreen; the dialog stays open

    const after = screen.getByLabelText("name") as HTMLInputElement;
    expect(after.value).toBe("my cut");
    expect(document.activeElement).toBe(after);
    stage.remove();
  });
});

describe("a dialog with an autoFocus child", () => {
  it("opens with the focus in that child, not on the close button", () => {
    // The portal host is created detached and attached by the hook. If it is attached a phase too
    // late (a `useLayoutEffect` instead of `useInsertionEffect`), every descendant's `autoFocus`
    // has already called `.focus()` on a disconnected node — a no-op — and Modal's own fallback
    // then puts the focus on the first focusable in the panel, the header's ✕. That is what the
    // command palette, the download rename dialog and every non-danger confirm shipped with after
    // deep-review round 4 (found in round 5).
    render(
      <Modal title="Search" onClose={() => {}}>
        <input aria-label="query" autoFocus />
      </Modal>,
    );
    expect(document.activeElement).toBe(screen.getByLabelText("query"));
  });

  it("still has it after a fullscreen transition moves the host", async () => {
    const stage = document.createElement("div");
    document.body.appendChild(stage);
    render(
      <Modal title="Search" onClose={() => {}}>
        <input aria-label="query" autoFocus />
      </Modal>,
    );
    const field = screen.getByLabelText("query");
    expect(document.activeElement).toBe(field);

    setFullscreen(stage); // the player goes fullscreen under the open dialog

    expect(stage.contains(field)).toBe(true);
    expect(document.activeElement).toBe(field);
    stage.remove();
  });
});