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

/**
 * Screenshot tests for the GUI variations rendered by the harness
 * (/screenshots.html). Every `data-shot` section becomes one reference image;
 * interactive states (EditablePanelTile editing/dirty) are driven here.
 *
 * First run generates the reference images (and passes). After that the test
 * fails on any visual drift; see the actual/diff images in test-results/.
 * Regenerate intentionally changed references with:
 *   npm run test:screenshots:update
 */
const STATIC_SECTIONS = [
  'pills',
  'textfields',
  'tiles',
  'panels-basic',
  'panels-busy',
  'lists-ready',
  'lists-empty',
  'lists-loading',
  'lists-failed',
  'lists-no-actions',
  'fillspace',
  'fillspace-measure',
];

test.beforeEach(async ({ page }) => {
  await page.goto('/screenshots.html');
});

for (const id of STATIC_SECTIONS) {
  test(`screenshot ${id}`, async ({ page }) => {
    await expect(page.locator(`[data-shot="${id}"]`)).toHaveScreenshot(
      `${id}.png`,
    );
  });
}

test('editable tile: read, edit, dirty', async ({ page }) => {
  const section = page.locator('[data-shot="editable"]');

  // Read state — edit button visible, no ring.
  await expect(section).toHaveScreenshot('editable-read.png');

  // Editing state — clean ring, input focused, save/cancel buttons.
  await section.getByRole('button', { name: 'Bearbeiten' }).click();
  await expect(section).toHaveScreenshot('editable-editing.png');

  // Dirty state — rose pending ring once the draft differs from the saved value.
  await section.locator('input').fill('ACME GmbH 2');
  await expect(section).toHaveScreenshot('editable-dirty.png');
});