import { test, expect } from "@playwright/test";
import path from "node:path";
import os from "node:os";
import fs from "node:fs";
import { launchWithExtension } from "@suaveplan/testing-e2e/extension-fixture";

// Path to the test extension fixture
const EXTENSION_PATH = path.resolve(
  new URL(import.meta.url).pathname,
  "../../fixtures/test-extension",
);

test.describe("Content Script Extension", () => {
  test.skip(
    !fs.existsSync(EXTENSION_PATH),
    "Test extension fixture not found — skipping extension tests",
  );

  test("extension page title is visible without extension", async ({
    page,
  }) => {
    // Basic smoke test — no extension needed
    await page.goto("/extension-test");
    await expect(page.locator('[data-testid="page-title"]')).toContainText(
      "Extension Test",
    );
    await expect(page.locator('[data-testid="extension-mount"]')).toBeVisible();
    await expect(page.locator('[data-testid="output"]')).toBeVisible();
  });

  test("extension-mount target is present on page", async ({ page }) => {
    await page.goto("/extension-test");
    await expect(page.locator('[data-testid="extension-mount"]')).toBeVisible();
    // The id is also extension-mount for CSS targeting by extensions
    await expect(page.locator("#extension-mount")).toBeVisible();
  });

  test.skip("extension injects content into page", async () => {
    // Full extension test — requires the extension fixture to be built
    const userDataDir = fs.mkdtempSync(path.join(os.tmpdir(), "pw-ext-"));
    const { context, extensionId } = await launchWithExtension({
      extensionPath: EXTENSION_PATH,
      userDataDir,
    });

    try {
      const page = await context.newPage();
      await page.goto("http://localhost:3200/extension-test");
      expect(extensionId).toBeTruthy();
      await expect(page.locator('[data-testid="output"]')).toContainText(
        "Extension injected",
        { timeout: 5000 },
      );
    } finally {
      await context.close();
      fs.rmSync(userDataDir, { recursive: true, force: true });
    }
  });
});