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

export class SiteCreateFormPage {
  readonly page: Page;
  readonly companySelect: Locator;
  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;
    // Company and Type are Select (Base UI) components. FormControl's Slot
    // forwards the id to the Select's outer wrapper <div>, not to the trigger
    // <button>, so getByLabel does not resolve. Scope via [data-slot="field"]
    // / [data-slot="field-label"] to reach the trigger element instead.
    this.companySelect = page
      .locator('[data-slot="field"]', {
        has: page.locator('[data-slot="field-label"]', { hasText: /^company/i }),
      })
      .locator('[data-slot="select-trigger"]');
    this.nameInput = page.getByLabel("Name");
    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 and
    // target the combobox role exposed by the trigger button.
    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: /create site|creating/i });
    this.cancelButton = page.getByRole("button", { name: /cancel/i });
  }

  async goto() {
    await this.page.goto("/master-data/site/create");
  }

  /** Open the Company select and pick the first available option. */
  async selectFirstCompany() {
    await this.selectFirstFromSelect(this.companySelect);
  }

  /** Open the Type select and pick the first available option. */
  async selectFirstType() {
    await this.selectFirstFromSelect(this.typeSelect);
  }

  /** Open the Country combobox and pick the first available option. */
  async selectFirstCountry() {
    await this.selectFirstFromCombobox(this.countrySelect);
  }

  /** Open the Timezone combobox and pick the first available option. */
  async selectFirstTimezone() {
    await this.selectFirstFromCombobox(this.timezoneSelect);
  }

  private async selectFirstFromSelect(trigger: Locator) {
    await this.selectFirstOption(trigger);
  }

  private async selectFirstFromCombobox(trigger: Locator) {
    await this.selectFirstOption(trigger);
  }

  private async selectFirstOption(trigger: Locator) {
    await trigger.click();
    const firstOption = this.page.getByRole("option").first();
    await firstOption.waitFor({ state: "visible" });
    await firstOption.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();
  }
}