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

test.describe("Autofill Detection", () => {
  test("extension-test page renders without extension", async ({ page }) => {
    await page.goto("/extension-test");
    await expect(page.locator('[data-testid="page-title"]')).toContainText(
      "Extension Test",
    );
    await expect(page.locator('[data-testid="demo-card"]')).toBeVisible();
  });

  test("output shows 'not detected' without extension injection", async ({
    page,
  }) => {
    await page.goto("/extension-test");
    const output = page.locator('[data-testid="output"]');
    await expect(output).toBeVisible();
    // Without extension, should not show detected
    const text = await output.textContent();
    expect(text).not.toContain("✓ Extension injected");
  });

  test("MutationObserver detects programmatic injection", async ({ page }) => {
    await page.goto("/extension-test");

    // Simulate extension injection via page.evaluate
    await page.evaluate(() => {
      const div = document.createElement("div");
      div.id = "extension-injected";
      div.textContent = "Injected by test";
      document.body.appendChild(div);
    });

    // Output should update to show detected
    await expect(page.locator('[data-testid="output"]')).toContainText(
      "Extension injected",
      { timeout: 3000 },
    );
  });

  test("extension-mount div is present as injection target", async ({
    page,
  }) => {
    await page.goto("/extension-test");
    const mount = page.locator('[data-testid="extension-mount"]');
    await expect(mount).toBeVisible();
    // The injection target div has both testid and id attributes
    await expect(page.locator("#extension-mount")).toBeVisible();
  });

  test("console-panel is visible on extension page", async ({ page }) => {
    await page.goto("/extension-test");
    await expect(page.locator('[data-testid="console-panel"]')).toBeVisible();
  });
});