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

export class FrontendProductPage {
  readonly page: Page;

  constructor(page: Page) {
    this.page = page;
  }

  async goto() {
    await this.page.goto('/products');
    await this.page.waitForLoadState('domcontentloaded');
  }

  async expectProductListVisible() {
    const productCards = this.page.locator('article, [data-testid="product-card"]');
    await expect(productCards.first()).toBeVisible({ timeout: 10000 });
    const count = await productCards.count();
    expect(count).toBeGreaterThan(0);
  }

  async clickFirstProduct() {
    const firstProduct = this.page.locator('article a, [data-testid="product-card"] a').first();
    if (await firstProduct.count() > 0) {
      await firstProduct.click();
      await this.page.waitForLoadState('domcontentloaded');
    }
  }

  async expectProductDetailVisible() {
    await expect(this.page.locator('h1')).toBeVisible();
  }

  async expectProductDetailsVisible() {
    await expect(this.page.locator('h1')).toBeVisible();
    await expect(this.page.locator('article, .product-details')).toBeVisible();
  }

  async expectProductVisible(title: string) {
    await this.goto();
    const productCard = this.page.locator(`article:has-text("${title}"), [data-testid="product-card"]:has-text("${title}")`);
    await expect(productCard).toBeVisible();
  }

  async expectProductNotVisible(title: string) {
    await this.goto();
    const productCard = this.page.locator(`article:has-text("${title}"), [data-testid="product-card"]:has-text("${title}")`);
    await expect(productCard).not.toBeVisible();
  }

  async clickProduct(title: string) {
    await this.page.locator(`text="${title}"`).click();
    await this.page.waitForLoadState('domcontentloaded');
  }
}