import type { Page } from "@playwright/test";

export class UserDetailPage {
  private page: Page;
  constructor(page: Page) {
    this.page = page;
  }

  async goto(id: string) {
    await this.page.goto(`/user-management/user/${id}`);
  }

  get heading() {
    return this.page.getByRole("heading", { name: /user detail/i });
  }

  get statusBadge() {
    return this.page.getByText(/pending|active|inactive/i).first();
  }

  get editButton() {
    return this.page.getByRole("button", { name: /edit user/i });
  }

  get manageRolesButton() {
    return this.page.getByRole("button", { name: /manage roles/i });
  }

  get activateButton() {
    return this.page.getByRole("button", { name: /activate/i });
  }

  get deactivateButton() {
    return this.page.getByRole("button", { name: /deactivate/i });
  }

  get reactivateButton() {
    return this.page.getByRole("button", { name: /reactivate/i });
  }

  roleCheckbox(name: string | RegExp) {
    return this.page.getByRole("checkbox", { name });
  }

  get manageRolesDialog() {
    return this.page.getByRole("dialog", { name: /manage roles/i });
  }

  get saveRolesButton() {
    return this.page.getByRole("button", { name: /^save$/i });
  }

  get cancelRolesButton() {
    return this.page.getByRole("button", { name: /^cancel$/i });
  }

  assignedRole(name: string | RegExp) {
    return this.page.locator("main").getByText(name, { exact: true });
  }
}