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

test("storybook button, select, and reduced-motion form stories stay interactive", async ({
  page
}) => {
  await page.goto("/");
  await expect(page).toHaveTitle(/storybook/i);

  await page.goto("/iframe.html?id=components-button--playground&viewMode=story");
  const button = page.getByRole("button", { name: "Save changes" });
  await expect(button).toBeVisible();
  await button.focus();
  await expect(button).toBeFocused();

  await page.goto("/iframe.html?id=components-select--playground&viewMode=story");
  const selectTrigger = page.locator('[data-slot="trigger"]').first();
  await expect(selectTrigger).toBeVisible();
  await selectTrigger.click();
  await expect(page.getByRole("option", { name: "Legal review" })).toBeVisible();

  await page.goto(
    "/iframe.html?id=components-form--launch-settings&viewMode=story&globals=motion:reduced"
  );
  await page.getByRole("textbox", { name: "Email address" }).fill("team@cadence.dev");
  await page.getByRole("combobox", { name: "Review lane" }).click();
  await page.getByRole("option", { name: "Legal" }).click();
  await page.getByRole("textbox", { name: "Launch summary" }).fill(
    "This release coordinates approvals, copy, and rollout risks."
  );
  await page.getByRole("button", { name: "Save settings" }).click();
  await expect(page.locator("pre code").last()).toContainText('"role": "legal"');
});

test("storybook overlay stories stay interactive", async ({ page }) => {
  await page.goto("/iframe.html?id=components-dialog--playground&viewMode=story");
  await page.getByRole("button", { name: "Open approval dialog" }).click();
  await expect(page.getByRole("dialog", { name: "Launch this release?" })).toBeVisible();
  await page.getByRole("button", { name: "Close dialog" }).click();
  await expect(page.getByRole("dialog")).toHaveCount(0);

  await page.goto("/iframe.html?id=components-popover--playground&viewMode=story");
  await page.getByRole("button", { name: "Inspect summary" }).click();
  await expect(page.getByText("Release health")).toBeVisible();
  await page.getByRole("button", { name: "Dismiss" }).click();
  await expect(page.getByText("Release health")).toHaveCount(0);

  await page.goto("/iframe.html?id=components-sheet--playground&viewMode=story");
  await page.getByRole("button", { name: "Open right sheet" }).click();
  await expect(page.getByRole("dialog", { name: "Launch settings" })).toBeVisible();
  await page.getByRole("button", { name: "Close sheet" }).click();
  await expect(page.getByRole("dialog")).toHaveCount(0);
});