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

/**
 * FeedPage — the main `/feed` route. Selectors rely on the bottom nav's
 * aria-labels ("Galerie", "Hochladen", "Konto") and on data-testids that
 * may be added to FeedListCard / FeedGrid later. Wherever we use a
 * permissive locator (e.g. `.feed-card`) it is documented; tests that
 * depend on a specific card should narrow by image alt or caption text.
 */
export class FeedPage {
  readonly page: Page;
  readonly feedTab: Locator;
  readonly fab: Locator;
  readonly accountTab: Locator;
  readonly fabBadge: Locator;

  constructor(page: Page) {
    this.page = page;
    this.feedTab = page.getByRole('link', { name: 'Galerie' });
    this.fab = page.getByRole('button', { name: 'Hochladen' });
    this.accountTab = page.getByRole('link', { name: 'Konto' });
    // FAB badge — sibling span inside the FAB button.
    this.fabBadge = this.fab.locator('span.bg-red-500');
  }

  async goto() {
    await this.page.goto('/feed');
  }

  async openUploadSheet() {
    await this.fab.click();
  }

  /** Locator for any feed card. Tests should refine with text or image alt. */
  cards(): Locator {
    return this.page.locator('[data-testid="feed-card"], article, .feed-card');
  }

  cardByCaption(text: string): Locator {
    return this.page.locator('article', { hasText: text }).first();
  }

  /** Count of currently visible feed cards. */
  async cardCount(): Promise<number> {
    return this.cards().count();
  }
}