import { test, expect } from "@playwright/test";
import { createMultiSession } from "@suaveplan/testing-e2e/multi-session";

test.describe("WebRTC Mesh", () => {
  test("host and peer pages both show page-title", async ({ browser }) => {
    const sessionId = `test-${Date.now()}`;
    const { pages, teardown } = await createMultiSession({
      browser,
      count: 2,
      baseUrl: `http://localhost:3200/network-webrtc?session=${sessionId}`,
      roles: ["host", "peer"],
    });

    try {
      const host = pages[0]!;
      const peer = pages[1]!;
      await expect(host.locator('[data-testid="page-title"]')).toContainText(
        "Network — WebRTC",
      );
      await expect(peer.locator('[data-testid="page-title"]')).toContainText(
        "Network — WebRTC",
      );
    } finally {
      await teardown();
    }
  });

  test("host shows connecting status initially", async ({ browser }) => {
    const sessionId = `test-${Date.now()}`;
    const { pages, teardown } = await createMultiSession({
      browser,
      count: 1,
      baseUrl: `http://localhost:3200/network-webrtc?session=${sessionId}`,
      roles: ["host"],
    });

    try {
      const host = pages[0]!;
      // Should start in connecting state
      const statusEl = host.locator("[data-status]");
      await expect(statusEl).toBeVisible();
      const status = await statusEl.getAttribute("data-status");
      expect(["connecting", "connected", "failed"]).toContain(status);
    } finally {
      await teardown();
    }
  });
});