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

export class SiteEditFormPage {
  readonly page: Page;
  readonly nameInput: Locator;
  readonly typeSelect: Locator;
  readonly streetInput: Locator;
  readonly cityInput: Locator;
  readonly stateInput: Locator;
  readonly postalCodeInput: Locator;
  readonly countrySelect: Locator;
  readonly timezoneSelect: Locator;
  readonly submitButton: Locator;
  readonly cancelButton: Locator;

  constructor(page: Page) {
    this.page = page;
    // The edit form renders FormLabel text as "Name *" and "Type *" (with
    // asterisk suffix). Use exact: false so getByLabel matches the prefix.
    this.nameInput = page.getByLabel("Name", { exact: false });
    // Type is a Select (Base UI) component — FormControl's Slot forwards the id
    // to the Select's outer wrapper <div>, not to the trigger <button>.
    // Scope via [data-slot="field"] / [data-slot="field-label"] instead.
    this.typeSelect = page
      .locator('[data-slot="field"]', {
        has: page.locator('[data-slot="field-label"]', { hasText: /^type/i }),
      })
      .locator('[data-slot="select-trigger"]');
    this.streetInput = page.getByLabel("Street");
    this.cityInput = page.getByLabel("City");
    this.stateInput = page.getByLabel("State");
    this.postalCodeInput = page.getByLabel("Postal Code");
    // Country and Timezone are Combobox components; scope the same way.
    this.countrySelect = page
      .locator('[data-slot="field"]', {
        has: page.locator('[data-slot="field-label"]', { hasText: /^country/i }),
      })
      .getByRole("combobox");
    this.timezoneSelect = page
      .locator('[data-slot="field"]', {
        has: page.locator('[data-slot="field-label"]', { hasText: /^timezone/i }),
      })
      .getByRole("combobox");
    this.submitButton = page.getByRole("button", { name: /save changes|saving/i });
    this.cancelButton = page.getByRole("button", { name: /^cancel$/i });
  }

  async goto(id: string) {
    await this.page.goto(`/master-data/site/${id}/edit`);
  }

  /** Open the Type select and choose the option matching the given label. */
  async selectType(label: string) {
    await this.typeSelect.click();
    await this.page.getByRole("option", { name: label }).click();
  }

  /** Open the Country combobox and choose the option matching the given label. */
  async selectCountry(label: string) {
    await this.countrySelect.click();
    await this.page.getByRole("option", { name: label }).click();
  }

  /** Open the Timezone combobox and choose the option matching the given label. */
  async selectTimezone(label: string) {
    await this.timezoneSelect.click();
    await this.page.getByRole("option", { name: label }).click();
  }

  async fill(fields: {
    name?: string;
    street?: string;
    city?: string;
    state?: string;
    postalCode?: string;
  }) {
    if (fields.name) await this.nameInput.fill(fields.name);
    if (fields.street) await this.streetInput.fill(fields.street);
    if (fields.city) await this.cityInput.fill(fields.city);
    if (fields.state) await this.stateInput.fill(fields.state);
    if (fields.postalCode) await this.postalCodeInput.fill(fields.postalCode);
  }

  async submit() {
    await this.submitButton.click();
  }

  async cancel() {
    await this.cancelButton.click();
  }
}