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

test('public /browse shows 5 (or more) columns on large screen', async ({ page }) => {
  // use a very wide viewport to emulate a large desktop where 5 columns should fit
  await page.setViewportSize({ width: 2000, height: 1200 });
  await page.goto('/browse');
  await page.waitForSelector('[data-gallery-grid]');
  // hide sidebar and force gallery width so we can assert column layout in CI
  await page.addStyleTag({ content: 'aside#sidebar{display:none !important} main{width:100% !important} [data-gallery-grid].force-5{grid-template-columns: repeat(5, minmax(0,1fr)) !important}' });

  // Count number of cards in the first visual row (robust regardless of CSS method)
  const countInFirstRow = await page.$$eval('[data-gallery-grid] > .nova-card', (cards) => {
    if (!cards || cards.length === 0) return 0;
    const rects = cards.map(c => c.getBoundingClientRect());
    const firstTop = rects[0].top;
    return rects.filter(r => Math.abs(r.top - firstTop) < 2).length;
  });

  console.log('cards in first row:', countInFirstRow);
  expect(countInFirstRow).toBeGreaterThanOrEqual(5);
});