// @ts-check
// Design-prompt attribute chips; all /api routes are mocked (no live writes).
const { test, expect } = require('@playwright/test');

test('chips edit only their own phrase', async ({ page }) => {
  await page.route('**/api/**', route => route.request().method() === 'GET'
    ? route.fulfill({ json: [] }) : route.fulfill({ json: { ok: true } }));
  await page.route('**/static/dist/main.min.js*', r => r.abort()); // test the source modules
  await page.goto('/', { waitUntil: 'domcontentloaded' });
  await page.waitForFunction(() => typeof window.navTo === 'function', null, { timeout: 15_000 });
  await page.waitForSelector('#app-skeleton', { state: 'detached', timeout: 15_000 });
  await page.evaluate(() => window.navTo('s-design'));
  const ta = page.locator('#design-instruct');
  const chip = n => page.locator('#design-chips [data-phrase="' + n + '"]');
  await ta.fill('Gravelly pirate captain');
  await chip('male voice').click();
  await chip('calm').focus();
  await page.keyboard.press('Enter');
  await expect(ta).toHaveValue('Gravelly pirate captain, male voice, calm');
  await expect(chip('calm')).toHaveAttribute('aria-pressed', 'true');
  await chip('female voice').click(); // exclusive group swaps only gender
  await expect(ta).toHaveValue('Gravelly pirate captain, calm, female voice');
  await chip('calm').click();
  await expect(ta).toHaveValue('Gravelly pirate captain, female voice');
  await expect(chip('male voice')).toHaveAttribute('aria-pressed', 'false');
  const box = await chip('warm').boundingBox();
  expect(box && box.height).toBeGreaterThanOrEqual(44);
  await ta.fill('typed by hand, warm');
  await expect(chip('warm')).toHaveAttribute('aria-pressed', 'true');
});