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

export class DashboardPage {
  readonly page: Page;
  readonly content: Locator;
  readonly loading: Locator;
  readonly errorMessage: Locator;
  readonly emptyState: Locator;
  readonly addServerButton: Locator;
  readonly serverCards: Locator;
  readonly sidebar: Locator;

  constructor(page: Page) {
    this.page = page;
    this.content = page.locator('[data-testid="dashboard-content"]');
    this.loading = page.locator('[data-testid="dashboard-loading"]');
    this.errorMessage = page.locator('[data-testid="dashboard-error"]');
    this.emptyState = page.locator('[data-testid="dashboard-empty"]');
    this.addServerButton = page.locator('[data-testid="add-server-btn"]');
    this.serverCards = page.locator("[data-testid^='server-card-']");
    this.sidebar = page.locator('[data-testid="sidebar"]');
  }

  async goto() {
    await this.page.goto("/");
    await this.page.waitForLoadState("networkidle");
  }

  async waitForLoad() {
    await this.loading.waitFor({ state: "hidden", timeout: 15_000 });
  }

  async getServerCount() {
    return this.serverCards.count();
  }

  async getServerCardName(index: number) {
    const card = this.serverCards.nth(index);
    return card.locator("h2").textContent();
  }

  async getServerCardStatus(index: number) {
    const card = this.serverCards.nth(index);
    return card.locator("[data-testid^='server-card-']").getAttribute("data-testid");
  }

  async clickStartServer(index: number) {
    const card = this.serverCards.nth(index);
    const startBtn = card.locator('button[aria-label^="Start"]');
    await startBtn.click();
  }

  async clickStopServer(index: number) {
    const card = this.serverCards.nth(index);
    const stopBtn = card.locator('button[aria-label^="Stop"]');
    await stopBtn.click();
  }

  async clickRestartServer(index: number) {
    const card = this.serverCards.nth(index);
    const restartBtn = card.locator('button[aria-label^="Restart"]');
    await restartBtn.click();
  }

  async clickAddServer() {
    await this.addServerButton.click();
  }

  async clickSidebarServer(name: string) {
    const link = this.sidebar.locator(`a:has-text("${name}")`);
    await link.click();
  }
}