/**
 * Accordion — end-to-end tests (Playwright, real browser).
 *
 * These drive the rendered "Default" Storybook story and verify the behaviours
 * that need a real browser: native `<button>` Enter/Space activation, the
 * optional Arrow/Home/End roving focus between headers, and click toggling. The
 * ARIA wiring and JS API are covered by the Vitest unit suite (`Accordion.test.ts`).
 *
 * Requires `bunx playwright install chromium` first. The Storybook web server is
 * started automatically (see `playwright.config.ts`).
 */
import { test, expect } from '@playwright/test';

const STORY = '/iframe.html?id=components-accordion--default&viewMode=story';

test.beforeEach(async ({ page }) => {
  await page.goto(STORY);
  await page.waitForSelector('.accordion__trigger');
});

test('Enter and Space toggle the focused header', async ({ page }) => {
  const triggers = page.locator('.accordion__trigger');
  const second = triggers.nth(1);

  await second.focus();
  await expect(second).toHaveAttribute('aria-expanded', 'false');

  await page.keyboard.press('Enter');
  await expect(second).toHaveAttribute('aria-expanded', 'true');

  await page.keyboard.press('Space');
  await expect(second).toHaveAttribute('aria-expanded', 'false');
});

test('clicking a header toggles its panel', async ({ page }) => {
  const triggers = page.locator('.accordion__trigger');
  const third = triggers.nth(2);

  await expect(third).toHaveAttribute('aria-expanded', 'false');
  await third.click();
  await expect(third).toHaveAttribute('aria-expanded', 'true');
  await third.click();
  await expect(third).toHaveAttribute('aria-expanded', 'false');
});

test('single-open mode collapses the previously open panel', async ({ page }) => {
  const triggers = page.locator('.accordion__trigger');
  // The first section starts open in the Default story.
  await expect(triggers.nth(0)).toHaveAttribute('aria-expanded', 'true');
  await triggers.nth(1).click();
  await expect(triggers.nth(0)).toHaveAttribute('aria-expanded', 'false');
  await expect(triggers.nth(1)).toHaveAttribute('aria-expanded', 'true');
});

test('Arrow, Home and End move header focus', async ({ page }) => {
  const triggers = page.locator('.accordion__trigger');
  await triggers.nth(0).focus();

  await page.keyboard.press('ArrowDown');
  await expect(triggers.nth(1)).toBeFocused();

  await page.keyboard.press('ArrowUp');
  await expect(triggers.nth(0)).toBeFocused();

  // Wrap: Up from the first goes to the last.
  await page.keyboard.press('ArrowUp');
  await expect(triggers.nth(2)).toBeFocused();

  await page.keyboard.press('Home');
  await expect(triggers.nth(0)).toBeFocused();

  await page.keyboard.press('End');
  await expect(triggers.nth(2)).toBeFocused();
});