import {
  type Page,
  type Locator,
  expect
} from '@playwright/test';

export class ServerSearchPage {
  readonly searchInput: Locator;
  readonly createServerButton: Locator;
  readonly settingsButton: Locator;

  // Create server dialog
  readonly serverNameInput: Locator;
  readonly serverDescriptionInput: Locator;
  readonly serverTopicInput: Locator;
  readonly signalEndpointSelect: Locator;
  readonly privateCheckbox: Locator;
  readonly serverPasswordInput: Locator;
  readonly dialogCreateButton: Locator;
  readonly dialogCancelButton: Locator;

  constructor(private page: Page) {
    this.searchInput = page.getByPlaceholder('Search servers...');
    this.createServerButton = page.getByRole('button', { name: 'Create New Server' });
    this.settingsButton = page.locator('button[title="Settings"]');

    // Create dialog elements
    this.serverNameInput = page.locator('#create-server-name');
    this.serverDescriptionInput = page.locator('#create-server-description');
    this.serverTopicInput = page.locator('#create-server-topic');
    this.signalEndpointSelect = page.locator('#create-server-signal-endpoint');
    this.privateCheckbox = page.locator('#private');
    this.serverPasswordInput = page.locator('#create-server-password');
    this.dialogCreateButton = page.locator('div[role="dialog"]').getByRole('button', { name: 'Create' });
    this.dialogCancelButton = page.locator('div[role="dialog"]').getByRole('button', { name: 'Cancel' });
  }

  async goto() {
    await this.page.goto('/search');
  }

  async createServer(name: string, options?: { description?: string; topic?: string }) {
    await this.createServerButton.click();
    await expect(this.serverNameInput).toBeVisible();
    await this.serverNameInput.fill(name);

    if (options?.description) {
      await this.serverDescriptionInput.fill(options.description);
    }

    if (options?.topic) {
      await this.serverTopicInput.fill(options.topic);
    }

    await this.dialogCreateButton.click();
  }

  async joinSavedRoom(name: string) {
    await this.page.getByRole('button', { name }).click();
  }

  async joinServerFromSearch(name: string) {
    await this.page.locator('button', { hasText: name }).click();
  }
}