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

const storybookUrl = process.env.STORYBOOK_URL || "http://localhost:6006";

async function storyIdFor(page: any, storyName: string) {
  const res = await page.request.get(`${storybookUrl}/index.json`);
  expect(res.ok()).toBeTruthy();
  const payload = await res.json();
  const entries = payload?.entries || {};
  for (const entry of Object.values(entries) as any[]) {
    if (
      entry?.type === "story" &&
      entry?.title === "Dashboard/Verification Submission Guide" &&
      String(entry?.name || "").toLowerCase() === storyName.toLowerCase()
    ) {
      return String(entry.id);
    }
  }
  throw new Error(`Story id not found for ${storyName}`);
}

test.describe("Storybook visual - verification submission guide", () => {
  test("ready-to-submit state renders with CTA", async ({ page }) => {
    const storyId = await storyIdFor(page, "Ready To Submit");
    await page.goto(`${storybookUrl}/iframe.html?id=${storyId}&viewMode=story`);

    await expect(page.getByText("Ready to submit for verification.")).toBeVisible({ timeout: 15000 });
    await expect(page.getByRole("button", { name: /submit for verification/i })).toBeVisible();
  });

  test("documents-requested state renders admin guidance", async ({ page }) => {
    const storyId = await storyIdFor(page, "Documents Requested");
    await page.goto(`${storybookUrl}/iframe.html?id=${storyId}&viewMode=story`);

    await expect(page.getByText(/Admin request:/i)).toBeVisible({ timeout: 15000 });
    await expect(page.getByRole("button", { name: /go to documents/i })).toBeVisible();
  });
});