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

test.describe('Photo Gallery Feature', () => {

  test.beforeEach(async ({ page }) => {
    await page.goto('/');
    await page.waitForLoadState('domcontentloaded');
    await page.waitForTimeout(1000);
  });

  test('Vehicle cards render correctly', async ({ page }) => {
    await page.locator('#fahrzeuge').scrollIntoViewIfNeeded();
    const cards = page.locator('.vehicle-card');
    await expect(cards.first()).toBeVisible();
  });

  test('Vehicle card has photo', async ({ page }) => {
    await page.locator('#fahrzeuge').scrollIntoViewIfNeeded();
    const firstPhoto = page.locator('.vehicle-card').first().locator('.vehicle-photo img');
    await expect(firstPhoto).toBeVisible();
    const src = await firstPhoto.getAttribute('src');
    expect(src).not.toBeNull();
    expect(src).not.toBe('');
  });

  test('Vehicle details dialog opens', async ({ page }) => {
    await page.locator('#fahrzeuge').scrollIntoViewIfNeeded();
    const detailsBtn = page.locator('[data-details]').first();
    if (await detailsBtn.isVisible()) {
      await detailsBtn.click();
      const dialog = page.locator('#carDialog');
      await expect(dialog).toBeVisible();
    }
  });

  test('Booking wizard - vehicle selector works', async ({ page }) => {
    await page.locator('#buchen').scrollIntoViewIfNeeded();
    const carSelect = page.locator('#bpfCar');
    await expect(carSelect).toBeVisible();
  });
});