import { test, expect } from "../fixtures/role-management";
import { useActor } from "../fixtures/user";
import { RoleCreateFormPage } from "../pages/role/role-create-form";
import { RoleDetailPage } from "../pages/role/role-detail";
import { RoleEditFormPage } from "../pages/role/role-edit-form";
import { RoleListPage } from "../pages/role/role-list";
import { UserDetailPage } from "../pages/user/user-detail";
import { createUser } from "../utils/user-factory";

const ROLE_PERMISSION = "user-management:role";
const USER_PERMISSION = "user-management:user";

useActor(test, "user");

// The role-management flow's `## Flow Diagram` main path as one journey.
test("create a role, update its permissions, assign then remove it from a user, and toggle its status", async ({
  page,
}) => {
  const suffix = Date.now();
  const roleName = `E2E Role ${suffix}`;

  // Create Role
  const listPage = new RoleListPage(page);
  await listPage.goto();
  await expect(listPage.heading).toBeVisible();
  await listPage.createButton.click();

  const createForm = new RoleCreateFormPage(page);
  await createForm.fill({ name: roleName });
  await createForm.permissionOption(ROLE_PERMISSION).click();
  await createForm.submitButton.click();
  await page.waitForURL("**/user-management/role");
  await expect(listPage.getRow(roleName)).toBeVisible();

  // Update Role Permissions
  await listPage.getViewLink(roleName).click();
  await page.waitForURL(/\/user-management\/role\/[^/]+$/);
  const roleId = new URL(page.url()).pathname.split("/").filter(Boolean).pop() ?? "";
  const detailPage = new RoleDetailPage(page);
  await expect(detailPage.heading).toBeVisible();

  await detailPage.editButton.click();
  const editForm = new RoleEditFormPage(page);
  await editForm.permissionOption(USER_PERMISSION).click();
  await editForm.submitButton.click();
  await page.waitForURL(/\/user-management\/role\/[^/]+$/);
  await expect(page.getByText(USER_PERMISSION, { exact: true })).toBeVisible();

  // Assign Role to User
  const targetUser = await createUser({
    name: `Role Target ${suffix}`,
    email: `role-target-${suffix}@example.com`,
  });
  const userDetail = new UserDetailPage(page);
  await userDetail.goto(targetUser.userId);
  await userDetail.manageRolesButton.click();
  await userDetail.roleCheckbox(roleName).check();
  await userDetail.saveRolesButton.click();
  await expect(userDetail.manageRolesDialog).toBeHidden();
  await expect(userDetail.assignedRole(roleName)).toBeVisible();

  // Remove Role from User — revoke it so the role has no active assignments.
  await userDetail.manageRolesButton.click();
  await userDetail.roleCheckbox(roleName).uncheck();
  await userDetail.saveRolesButton.click();
  await expect(userDetail.manageRolesDialog).toBeHidden();
  await expect(userDetail.assignedRole(roleName)).toBeHidden();

  // Deactivate / Reactivate Role
  await detailPage.goto(roleId);
  await detailPage.deactivateButton.click();
  await expect(detailPage.statusBadge).toHaveText(/^inactive$/i);
  await detailPage.reactivateButton.click();
  await expect(detailPage.statusBadge).toHaveText(/^active$/i);
});