// @vitest-environment jsdom

import { fireEvent, render, screen } from "@testing-library/react";
import { renderToStaticMarkup } from "react-dom/server";
import { beforeEach, describe, expect, it } from "vitest";
import { UserGroupSelect } from "./user-group-select";

const groups = [{ id: "group-everyone", name: "everyone" }, { id: "group-ops", name: "Ops" }];

beforeEach(() => {
  HTMLDialogElement.prototype.showModal = function showModal() { this.open = true; };
  HTMLDialogElement.prototype.close = function close() {
    this.open = false;
    this.dispatchEvent(new Event("close"));
  };
});

describe("UserGroupSelect", () => {
  it("renders the effective group and preserves the return path", () => {
    const markup = renderToStaticMarkup(<UserGroupSelect
      action={async () => undefined}
      effectiveGroupId="group-ops"
      groups={groups}
      returnTo="/admin/users?q=alex%20smith"
      userId="user-one"
      userLabel="Alex"
    />);

    expect(markup).toContain('aria-label="Group for Alex"');
    expect(markup).toContain('<option value="group-ops" selected="">Ops</option>');
    expect(markup).toContain('<input type="hidden" name="returnTo" value="/admin/users?q=alex%20smith"/>');
    expect(markup).toContain("Changing this selection opens a confirmation dialog.");
    expect(markup).toContain("Confirm move");
  });

  it("requires confirmation and restores the effective group when cancelled", () => {
    render(<UserGroupSelect action={async () => undefined} effectiveGroupId="group-ops" groups={groups} returnTo="/admin/users" userId="user-one" userLabel="Alex" />);
    const select = screen.getByRole("combobox", { name: "Group for Alex" }) as HTMLSelectElement;

    fireEvent.change(select, { target: { value: "group-everyone" } });
    const dialog = screen.getByRole("dialog") as HTMLDialogElement;
    expect(dialog.open).toBe(true);
    expect(select.value).toBe("group-everyone");
    expect(select.disabled).toBe(true);
    expect(screen.getByText(/from/).textContent).toContain("Ops");
    expect(screen.getByText(/from/).textContent).toContain("everyone");

    fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
    expect(dialog.open).toBe(false);
    expect(select.value).toBe("group-ops");
    expect(select.disabled).toBe(false);
  });
});