import { type Page, type Locator } from "@playwright/test";
import { fillDatePicker } from "../utils/date-picker";

export class StockAdjustmentCreateFormPage {
  readonly page: Page;
  readonly adjustmentTypeSelect: Locator;
  readonly reasonCodeInput: Locator;
  readonly adjustmentDateInput: Locator;
  readonly lineRows: Locator;
  readonly addLineButton: Locator;
  readonly submitButton: Locator;
  readonly cancelButton: Locator;

  constructor(page: Page) {
    this.page = page;
    // The Adjustment Type Select renders a <button role="combobox"> trigger. In
    // app-shell v1.4.1 the high-level Select does not forward the FormControl id
    // to the trigger, so getByLabel does not resolve.  Scope to the FormItem that
    // carries the "Adjustment Type" label and then pick the combobox inside it.
    this.adjustmentTypeSelect = page
      .locator('[data-slot="field"]')
      .filter({ has: page.getByText(/^Adjustment Type/) })
      .getByRole("combobox");
    this.reasonCodeInput = page.getByPlaceholder("e.g. CYCLE_COUNT, DAMAGE, THEFT");
    this.adjustmentDateInput = page.getByLabel("Adjustment Date");
    // Each line is a bordered div containing its own Item / Storage Location
    // comboboxes, so scope rows by the Item combobox placeholder.
    this.lineRows = page.locator("div").filter({
      has: page.getByPlaceholder("Search items..."),
    });
    this.addLineButton = page.getByRole("button", { name: /add line/i });
    this.submitButton = page.getByRole("button", {
      name: /create stock adjustment|creating/i,
    });
    // Scope Cancel to the form so it never resolves to a dialog/other action.
    this.cancelButton = page.locator("form").getByRole("button", { name: /cancel/i });
  }

  async goto() {
    await this.page.goto("/inventory/stock-adjustment/create");
  }

  /** Open the Adjustment Type Select and pick an option by its visible label. */
  async selectAdjustmentType(name: string | RegExp) {
    await this.adjustmentTypeSelect.click();
    const option = this.page.getByRole("option", { name }).first();
    await option.waitFor({ state: "visible" });
    await option.click();
  }

  async fillReasonCode(value: string) {
    await this.reasonCodeInput.fill(value);
  }

  async fillAdjustmentDate(date: string) {
    await fillDatePicker(this.adjustmentDateInput, date);
  }

  /** The line row at the given zero-based index within the Lines editor. */
  lineRow(rowIndex: number): Locator {
    return this.lineRows.nth(rowIndex);
  }

  /** The Item combobox for the line at the given zero-based row index. */
  itemCombobox(rowIndex: number): Locator {
    return this.lineRow(rowIndex).getByPlaceholder("Search items...");
  }

  /** The Storage Location combobox for the line at the given zero-based row index. */
  storageLocationCombobox(rowIndex: number): Locator {
    return this.lineRow(rowIndex).getByPlaceholder("Search storage locations...");
  }

  /** The Quantity input for the line at the given zero-based row index. */
  quantityInput(rowIndex: number): Locator {
    return this.lineRow(rowIndex).getByPlaceholder("Quantity");
  }

  /** The Direction Select for a line (shown only when type is Correction).
   *  It renders as a Base UI Select (role=combobox) whose visible text is the
   *  current value ("Increase" / "Decrease") or the "Direction" placeholder;
   *  filter on that text to pick it out from the line's item/storage comboboxes. */
  directionSelect(rowIndex: number): Locator {
    return this.lineRow(rowIndex)
      .getByRole("combobox")
      .filter({ hasText: /^(Direction|Increase|Decrease)$/ });
  }

  /** The From Category Select for a line (shown only when type is Scrap).
   *  Base UI Select (role=combobox); its visible text is the current value
   *  ("Available" / "Blocked") or the "From category" placeholder. */
  fromCategorySelect(rowIndex: number): Locator {
    return this.lineRow(rowIndex)
      .getByRole("combobox")
      .filter({ hasText: /^(From category|Available|Blocked)$/ });
  }

  /** Open a line's Item combobox and pick the first matching option. */
  async selectLineItemByName(rowIndex: number, name: string) {
    const combobox = this.itemCombobox(rowIndex);
    await combobox.click();
    await combobox.fill(name);
    const option = this.page.getByRole("option", { name: new RegExp(name, "i") }).first();
    await option.waitFor({ state: "visible" });
    await option.click();
  }

  /** Open a line's Item combobox and pick the first available option. */
  async selectFirstLineItem(rowIndex: number) {
    await this.itemCombobox(rowIndex).click();
    const firstOption = this.page.getByRole("option").first();
    await firstOption.waitFor({ state: "visible" });
    await firstOption.click();
  }

  /** Open a line's Storage Location combobox and pick the first matching option. */
  async selectLineStorageLocationByName(rowIndex: number, name: string) {
    const combobox = this.storageLocationCombobox(rowIndex);
    await combobox.click();
    await combobox.fill(name);
    const option = this.page.getByRole("option", { name: new RegExp(name, "i") }).first();
    await option.waitFor({ state: "visible" });
    await option.click();
  }

  /** Open a line's Storage Location combobox and pick the first available option. */
  async selectFirstLineStorageLocation(rowIndex: number) {
    await this.storageLocationCombobox(rowIndex).click();
    const firstOption = this.page.getByRole("option").first();
    await firstOption.waitFor({ state: "visible" });
    await firstOption.click();
  }

  async setQuantity(rowIndex: number, quantity: string) {
    await this.quantityInput(rowIndex).fill(quantity);
  }

  /** Open a line's Direction Select and pick an option by its visible label. */
  async selectDirection(rowIndex: number, name: string | RegExp) {
    await this.directionSelect(rowIndex).click();
    const option = this.page.getByRole("option", { name }).first();
    await option.waitFor({ state: "visible" });
    await option.click();
  }

  /** Open a line's From Category Select and pick an option by its visible label. */
  async selectFromCategory(rowIndex: number, name: string | RegExp) {
    await this.fromCategorySelect(rowIndex).click();
    const option = this.page.getByRole("option", { name }).first();
    await option.waitFor({ state: "visible" });
    await option.click();
  }

  async addLine() {
    await this.addLineButton.click();
  }

  /** Remove the line at the given zero-based row index via its trash button. */
  async removeLine(rowIndex: number) {
    await this.lineRow(rowIndex)
      .getByRole("button", { name: /remove line/i })
      .click();
  }

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

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