import { Page, Locator } from "@playwright/test";

export class ServerDetailPage {
  readonly page: Page;
  readonly content: Locator;
  readonly loading: Locator;
  readonly errorMessage: Locator;
  readonly tabBar: Locator;

  constructor(page: Page) {
    this.page = page;
    this.content = page.locator('[data-testid="server-detail-page"]');
    this.loading = page.locator('[data-testid="server-detail-loading"]');
    this.errorMessage = page.locator('[data-testid="server-detail-error"]');
    // Tab bar: div wrapping the tab buttons (no ARIA role, plain flex div)
    this.tabBar = page.locator('[data-testid="server-detail-page"] .flex.gap-1');
  }

  async goto(serverId: number) {
    await this.page.goto(`/servers/${serverId}`);
    await this.page.waitForLoadState("networkidle");
  }

  async clickTab(name: string) {
    await this.tabBar.locator(`button:has-text("${name}")`).click();
  }

  getTab(name: string): Locator {
    return this.tabBar.locator(`button:has-text("${name}")`);
  }
}