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

export class InvoiceCreateFormPage {
  readonly page: Page;
  readonly invoiceTypeSelect: Locator;
  readonly purchaseOrderSelect: Locator;
  readonly supplierCombobox: Locator;
  readonly payableControlAccountSelect: Locator;
  readonly distributionAccountSelect: Locator;
  readonly documentDateInput: Locator;
  readonly supplierInvoiceNumberInput: Locator;
  readonly previewLinesTable: Locator;
  readonly previewLinesHeading: Locator;
  readonly addLineButton: Locator;
  readonly submitButton: Locator;
  readonly cancelButton: Locator;

  constructor(page: Page) {
    this.page = page;
    // The app-shell Select component renders a <button role="combobox"> whose id
    // is generated internally by Base UI and is NOT linked to the FormLabel's
    // htmlFor attribute. getByLabel therefore cannot find it via the for/id path.
    // Scope each trigger to its [data-slot="field"] ancestor — which contains
    // both the <label data-slot="field-label"> and the combobox button — so the
    // selector is label-text-stable and immune to DOM ordering changes.
    this.invoiceTypeSelect = page
      .locator('[data-slot="field"]')
      .filter({
        has: page.locator('[data-slot="field-label"]', {
          hasText: "What is this invoice for?",
        }),
      })
      .getByRole("combobox");
    this.purchaseOrderSelect = page
      .locator('[data-slot="field"]')
      .filter({
        has: page.locator('[data-slot="field-label"]', { hasText: "Purchase Order" }),
      })
      .getByRole("combobox");
    this.supplierCombobox = page.getByPlaceholder("Search suppliers...");
    this.payableControlAccountSelect = page
      .locator('[data-slot="field"]')
      .filter({
        has: page.locator('[data-slot="field-label"]', { hasText: "Payable Control Account" }),
      })
      .getByRole("combobox");
    this.distributionAccountSelect = page
      .locator('[data-slot="field"]')
      .filter({
        has: page.locator('[data-slot="field-label"]', { hasText: "Distribution Account" }),
      })
      .getByRole("combobox");
    this.documentDateInput = page.getByLabel("Document Date");
    this.supplierInvoiceNumberInput = page.getByLabel("Supplier Invoice #");
    this.previewLinesTable = page.getByRole("table");
    this.previewLinesHeading = page.getByText("Invoice lines (from purchase order)");
    this.addLineButton = page.getByRole("button", { name: /add line/i });
    this.submitButton = page.getByRole("button", { name: /create invoice|creating/i });
    this.cancelButton = page.getByRole("button", { name: /cancel/i });
  }

  async goto() {
    await this.page.goto("/procurement/invoice/create");
  }

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

  /** Open the Purchase Order Select and pick the first available option. */
  async selectFirstPurchaseOrder() {
    await this.purchaseOrderSelect.click();
    const firstOption = this.page.getByRole("option").first();
    await firstOption.waitFor({ state: "visible" });
    await firstOption.click();
  }

  /**
   * Open the Purchase Order Select and pick the option for a specific PO by its
   * document number. Prefer this over selectFirstPurchaseOrder when the invoice
   * must match a known PO — the option list is shared across tests, so "first"
   * is not necessarily the one the fixture raised. Options are labeled
   * `<docNumber> — <supplier>`, so match on the leading docNumber.
   */
  async selectPurchaseOrderByDocNumber(docNumber: string) {
    await this.purchaseOrderSelect.click();
    const escaped = docNumber.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
    const option = this.page.getByRole("option", { name: new RegExp(`^${escaped}\\b`) }).first();
    await option.waitFor({ state: "visible" });
    await option.click();
  }

  /** Open the Supplier combobox and pick the first matching option. */
  async selectSupplierByName(name: string) {
    await this.supplierCombobox.click();
    await this.supplierCombobox.fill(name);
    const option = this.page.getByRole("option", { name: new RegExp(name, "i") }).first();
    await option.waitFor({ state: "visible" });
    await option.click();
  }

  /** Open the Payable Control Account Select and pick the first available option. */
  async selectFirstPayableControlAccount() {
    await this.payableControlAccountSelect.click();
    const firstOption = this.page.getByRole("option").first();
    await firstOption.waitFor({ state: "visible" });
    await firstOption.click();
  }

  /** Open the Distribution Account Select and pick the first available option. */
  async selectFirstDistributionAccount() {
    await this.distributionAccountSelect.click();
    const firstOption = this.page.getByRole("option").first();
    await firstOption.waitFor({ state: "visible" });
    await firstOption.click();
  }

  async fillDocumentDate(date: string) {
    await fillDatePicker(this.documentDateInput, date);
  }

  async fillSupplierInvoiceNumber(value: string) {
    await this.supplierInvoiceNumberInput.fill(value);
  }

  /** The manual-line row container at the given zero-based index (Other mode). */
  manualLineRow(rowIndex: number): Locator {
    return this.page.getByPlaceholder("Description (e.g. Freight)").nth(rowIndex).locator("..");
  }

  /** The Description input for the manual line at the given zero-based index. */
  manualLineDescriptionInput(rowIndex: number): Locator {
    return this.page.getByPlaceholder("Description (e.g. Freight)").nth(rowIndex);
  }

  /** The Amount input for the manual line at the given zero-based index. */
  manualLineAmountInput(rowIndex: number): Locator {
    return this.page.getByPlaceholder("Amount").nth(rowIndex);
  }

  async fillManualLine(rowIndex: number, description: string, amount: string) {
    await this.manualLineDescriptionInput(rowIndex).fill(description);
    await this.manualLineAmountInput(rowIndex).fill(amount);
  }

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

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

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

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