import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { expect, test, vi } from "vitest";
import { UserFormDrawer } from "./UserFormDrawer.jsx";

const baseForm = {
  financeScopes: [],
  mfaEnabled: false,
  name: "zhangsan",
  password: "",
  roleIds: [1],
  teamId: "10",
  username: "zhangsan"
};

const baseFinanceScopeCatalog = {
  apps: [{ appCode: "Huwaa", appName: "Huwaa", logoUrl: "https://media.example.com/huwaa.png" }],
  error: null,
  loading: false,
  regions: [{ appCode: "Huwaa", name: "菲律宾", regionCode: "PHILIPPINES", regionId: 8 }]
};

test("organizes edit user fields into dense workspace sections with docked actions", async () => {
  const user = userEvent.setup();
  render(
    <UserFormDrawer
      editingUser={{ id: 3 }}
      financeScopeCatalog={baseFinanceScopeCatalog}
      form={baseForm}
      onClose={vi.fn()}
      onFinanceScopeChecked={vi.fn()}
      onRoleChecked={vi.fn()}
      onSubmit={vi.fn()}
      open
      roles={[{ id: 1, name: "运维管理员" }]}
      setForm={vi.fn()}
      teams={[{ id: 10, name: "运营一部" }]}
    />
  );

  const form = document.querySelector("form.form-drawer");
  const content = form.querySelector(".form-drawer__workspace");
  const actions = form.querySelector(".form-drawer__actions");

  expect(screen.getByRole("heading", { name: "编辑用户" })).toBeInTheDocument();
  expect(form).toHaveClass("form-drawer--workspace");
  expect(content).toContainElement(screen.getByRole("textbox", { name: /账号/ }));
  await user.click(screen.getByRole("button", { name: "财务范围0" }));
  expect(content).toContainElement(screen.getByRole("navigation", { name: "应用范围" }));
  expect(screen.getByPlaceholderText("搜索区域名称或编码")).toBeInTheDocument();
  expect(actions).toContainElement(screen.getByRole("button", { name: "取消" }));
  expect(actions).toContainElement(screen.getByRole("button", { name: "提交" }));
});
