import { test, expect } from "@playwright/test";
import { loginAs } from "./helpers/login";
import { clearOnboarding } from "./helpers/reset-db";

test.describe("Onboarding", () => {
  test.beforeAll(async () => {
    // Clear onboarding state so joey sees the training flow
    await clearOnboarding("joey");
  });

  test("dashboard shows 'Complete Training' for new annotator", async ({
    page,
  }) => {
    await loginAs(page, "joey");
    await expect(page.getByText("Complete Training")).toBeVisible();
  });

  test("clicking 'Complete Training' navigates to /onboarding", async ({
    page,
  }) => {
    await loginAs(page, "joey");
    await page.getByText("Complete Training").click();
    await page.waitForURL("/onboarding");
  });

  test("onboarding shows step 1 and progress", async ({ page }) => {
    await loginAs(page, "joey");
    await page.goto("/onboarding");
    await expect(page.getByText("Step 1 of 17")).toBeVisible();
    await expect(page.getByText("What You'll Be Doing")).toBeVisible();
  });

  test("can navigate through steps", async ({ page }) => {
    await loginAs(page, "joey");
    await page.goto("/onboarding");

    // Step 1
    await expect(page.getByText("Step 1 of 17")).toBeVisible();
    await page.getByRole("button", { name: /continue/i }).click();

    // Step 2
    await expect(page.getByText("Step 2 of 17")).toBeVisible();
    await expect(page.getByText("The Two Questions")).toBeVisible();

    // Can go back
    await page.getByRole("button", { name: /back/i }).click();
    await expect(page.getByText("Step 1 of 17")).toBeVisible();
  });

  test("completing onboarding redirects to dashboard with 'Start Labeling Session'", async ({
    page,
  }) => {
    await loginAs(page, "joey");
    await page.goto("/onboarding");

    // Navigate through all 17 steps
    for (let i = 0; i < 16; i++) {
      await page.getByRole("button", { name: /continue/i }).click();
    }

    // Last step should show completion button
    await expect(page.getByText("Step 17 of 17")).toBeVisible();
    await page.getByRole("button", { name: /ready/i }).click();

    // Should redirect to dashboard
    await page.waitForURL("/dashboard");

    // Dashboard should now show "Start Labeling Session" instead of "Complete Training"
    await expect(page.getByText("Start Labeling Session")).toBeVisible();
  });
});