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

/**
 * The public catalogue, and the states it shows instead of one.
 *
 * The item card locator is the one place in the suite that knows the storefront
 * renders items into `.item-card` — three specs reached for that class directly,
 * and two others used `.ant-col`, which is antd's grid rather than anything this
 * application owns. Both break on an antd upgrade, in files that have nothing to
 * do with the upgrade.
 */
export class StorefrontPage {
  readonly header: Header;
  readonly filtersButton: Locator;
  readonly privacyPolicyLink: Locator;
  /**
   * The chip row summarising what is filtered, which lives on the storefront
   * rather than in the drawer. Scoping matters: the drawer carries a "Clear
   * all" of its own, so an unscoped one matches both.
   */
  readonly activeFilters: Locator;

  /**
   * The three things the catalogue can say instead of listing items. Named
   * together because the distinction between them is the point: telling a
   * customer "No items yet" while the server is broken reads as an empty shop
   * and hides the outage, so several tests assert one is showing and another
   * is not.
   */
  readonly emptyNotice: Locator;
  readonly loadFailureNotice: Locator;
  readonly retryButton: Locator;

  /** What the nearest error boundary renders when the grid itself throws. */
  readonly catalogueBoundaryHeading: Locator;

  constructor(private readonly page: Page) {
    this.header = new Header(page);
    this.filtersButton = page.getByRole('button', { name: /Filters/ });
    this.privacyPolicyLink = page.getByRole('link', { name: 'Privacy Policy' });
    this.activeFilters = page.getByRole('group', { name: 'Active filters' });

    this.emptyNotice = page.getByText('No items yet');
    this.loadFailureNotice = page.getByText("Couldn't load items");
    this.retryButton = page.getByRole('button', { name: 'Retry' });

    this.catalogueBoundaryHeading = page.getByRole('heading', { name: "The item list didn't load" });
  }

  async goto(): Promise<void> {
    await this.page.goto('/');
  }

  /**
   * Goes to the storefront and waits for the session to settle.
   *
   * Navigating remounts the app, so the session is briefly still resolving. The
   * favorite control deliberately ignores clicks in that window rather than
   * wrongly prompting a signed-in customer to sign in, so a test that clicks
   * immediately gets nothing and no error. Waiting for the header is what a real
   * customer sees settle too.
   */
  async gotoSignedIn(): Promise<void> {
    await this.goto();
    await this.header.waitForSignedIn();
  }

  /** One item's card, located by the name shown on it. */
  card(name: string): Locator {
    return this.page.locator('.item-card').filter({ hasText: name });
  }

  addToCartButton(name: string): Locator {
    return this.card(name).getByRole('button', { name: 'Add to Cart' });
  }

  /** The heart. Named for what it does rather than what it looks like. */
  favoriteToggle(name: string): Locator {
    return this.card(name).getByRole('button', { name: /favorite/i });
  }

  async openFilters(): Promise<void> {
    await this.filtersButton.click();
  }

  removeFilterChip(name: string): Locator {
    return this.page.getByRole('button', { name: `Remove filter ${name}` });
  }

  async clearAllFilters(): Promise<void> {
    await this.activeFilters.getByRole('button', { name: 'Clear all' }).click();
  }

  /**
   * Waits until the catalogue has rendered something.
   *
   * A test that asserts an item is absent needs to know the list arrived and did
   * not contain it, rather than that it asserted before the fetch resolved —
   * which passes for the wrong reason and keeps passing when the filter breaks.
   */
  async waitForAnyItem(): Promise<void> {
    await expect(this.page.locator('.item-card').first()).toBeVisible();
  }
}