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

test.describe("Feature Flags Page", () => {
  test.beforeEach(async ({ page }) => {
    await page.goto("/feature-flags");
    await expect(page.locator('[data-testid="page-title"]')).toContainText(
      "@suaveplan/feature-flags",
    );
  });

  test("demo-card and output are visible", async ({ page }) => {
    await expect(page.locator('[data-testid="demo-card"]')).toBeVisible();
    await expect(page.locator('[data-testid="output"]')).toBeVisible();
  });

  test("initial output shows placeholder text", async ({ page }) => {
    await expect(page.locator('[data-testid="output"]')).toContainText(
      "Enter a user ID and click Evaluate",
    );
  });

  test("evaluating with 'alice' shows new-checkout enabled", async ({ page }) => {
    await page.locator('input[type="text"]').fill("alice");
    await page.locator('button:has-text("Evaluate")').click();

    const output = page.locator('[data-testid="output"]');
    await expect(output).toContainText("new-checkout");
    // alice is in the user-target list, so new-checkout should be enabled
    const text = await output.textContent();
    const lines = text?.split("\n") ?? [];
    const checkoutLine = lines.find((l) => l.includes("new-checkout"));
    expect(checkoutLine).toContain("✓");
  });

  test("evaluating with 'carol' shows new-checkout disabled", async ({ page }) => {
    await page.locator('input[type="text"]').fill("carol");
    await page.locator('button:has-text("Evaluate")').click();

    const output = page.locator('[data-testid="output"]');
    await expect(output).toContainText("new-checkout");
    const text = await output.textContent();
    const lines = text?.split("\n") ?? [];
    const checkoutLine = lines.find((l) => l.includes("new-checkout"));
    expect(checkoutLine).toContain("✗");
  });

  test("dark-mode flag is always enabled (100% rollout)", async ({ page }) => {
    await page.locator('input[type="text"]').fill("any-user-id");
    await page.locator('button:has-text("Evaluate")').click();

    const output = page.locator('[data-testid="output"]');
    await expect(output).toContainText("dark-mode");
    const text = await output.textContent();
    const lines = text?.split("\n") ?? [];
    const darkModeLine = lines.find((l) => l.includes("dark-mode"));
    expect(darkModeLine).toContain("✓");
  });

  test("three flags appear in results", async ({ page }) => {
    await page.locator('button:has-text("Evaluate")').click();

    const output = page.locator('[data-testid="output"]');
    await expect(output).toContainText("beta-ui");
    await expect(output).toContainText("new-checkout");
    await expect(output).toContainText("dark-mode");
  });
});