/** @vitest-environment happy-dom */

import { act, useState, type ReactNode } from "react";
import { createRoot, type Root } from "react-dom/client";
import { afterEach, describe, expect, it, vi } from "vite-plus/test";

import { CommandPaletteDialogRoot, CommandPaletteDialogTrigger } from "./CommandPaletteDialog";
import { CommandDialogPopup } from "./ui/command";

interface DialogStateOwnerProps {
  readonly children: ReactNode;
}

function DialogStateOwner(props: DialogStateOwnerProps) {
  const [open, setOpen] = useState(false);

  return (
    <>
      {props.children}
      <CommandPaletteDialogRoot open={open} onOpenChange={setOpen}>
        {open ? (
          <CommandDialogPopup data-testid="command-palette-dialog">
            <button type="button">Dialog action</button>
          </CommandDialogPopup>
        ) : null}
      </CommandPaletteDialogRoot>
    </>
  );
}

function AppShell(props: { readonly onRender: () => void }) {
  props.onRender();

  return (
    <CommandPaletteDialogTrigger
      render={<button type="button" data-testid="command-palette-trigger" />}
    >
      Search
    </CommandPaletteDialogTrigger>
  );
}

let root: Root | null = null;

afterEach(() => {
  if (root) {
    act(() => root?.unmount());
    root = null;
  }
  document.body.replaceChildren();
});

describe("CommandPaletteDialog", () => {
  it("isolates dialog state while restoring focus to its detached trigger", async () => {
    const shellRender = vi.fn();
    const container = document.createElement("div");
    const previouslyFocusedInput = document.createElement("input");
    document.body.append(previouslyFocusedInput, container);
    root = createRoot(container);

    await act(async () => {
      root?.render(
        <DialogStateOwner>
          <AppShell onRender={shellRender} />
        </DialogStateOwner>,
      );
    });

    const trigger = document.querySelector<HTMLButtonElement>(
      '[data-testid="command-palette-trigger"]',
    );
    expect(trigger).not.toBeNull();
    previouslyFocusedInput.focus();

    await act(async () => trigger?.click());

    expect(document.querySelector('[data-testid="command-palette-dialog"]')).not.toBeNull();
    expect(shellRender).toHaveBeenCalledTimes(1);

    await act(async () => {
      document.dispatchEvent(new KeyboardEvent("keydown", { bubbles: true, key: "Escape" }));
    });

    await vi.waitFor(() => {
      expect(document.querySelector('[data-testid="command-palette-dialog"]')).toBeNull();
      expect(document.activeElement).toBe(trigger);
    });
    expect(shellRender).toHaveBeenCalledTimes(1);
  });
});