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

test.describe('Startseite', () => {
  test('laedt mit H1, Zuletzt-hinzugefuegt und Alle-Rezepte', async ({ page }) => {
    await page.goto('/');
    await expect(page).toHaveTitle(/Kochwas/);
    await expect(page.getByRole('heading', { level: 1, name: 'Kochwas' })).toBeVisible();
    await expect(
      page.getByRole('heading', { level: 2, name: 'Zuletzt hinzugefügt' })
    ).toBeVisible();
    await expect(page.getByRole('heading', { level: 2, name: 'Alle Rezepte' })).toBeVisible();
  });

  test('Sort-Tabs rendern unterschiedliche Top-Eintraege', async ({ page }) => {
    await page.goto('/');
    // Liste unter "Alle Rezepte"
    const allSection = page.locator('section', { has: page.getByRole('heading', { name: 'Alle Rezepte' }) });
    const firstItem = () => allSection.locator('li a').first().innerText();

    await page.getByRole('tab', { name: 'Name' }).click();
    await page.waitForTimeout(400);
    const nameTop = await firstItem();

    await page.getByRole('tab', { name: 'Hinzugefügt' }).click();
    await page.waitForTimeout(400);
    const addedTop = await firstItem();

    expect(nameTop).not.toEqual(addedTop);
  });

  test('hat keine Console-Errors', async ({ page }) => {
    const errors: string[] = [];
    page.on('console', (msg) => {
      if (msg.type() === 'error') errors.push(msg.text());
    });
    await page.goto('/');
    await page.waitForLoadState('networkidle');
    // 404s auf externen Bildern (chefkoch-cdn, cloudfront) ignorieren —
    // das ist kein App-Fehler, sondern externe Thumbnails.
    const appErrors = errors.filter((e) => !/Failed to load resource/i.test(e));
    expect(appErrors).toEqual([]);
  });
});