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

test.describe("ActivityFeed reload rendering", () => {
  test("feed stays visible and dark after reload", async ({ page }) => {
    await page.goto("/en", { waitUntil: "domcontentloaded" });

    const feed = page.locator('[class*="bg-black/95"]').filter({ hasText: "Live Activity" }).first();
    await expect(feed).toBeVisible({ timeout: 15000 });

    const initialBox = await feed.boundingBox();
    expect(initialBox).not.toBeNull();
    expect(initialBox!.width).toBeGreaterThan(200);
    expect(initialBox!.height).toBeGreaterThan(30);

    const initialOpacity = await feed.evaluate((el) => getComputedStyle(el).opacity);
    expect(Number(initialOpacity)).toBeGreaterThan(0.5);

    await page.reload({ waitUntil: "domcontentloaded" });

    const feedAfter = page.locator('[class*="bg-black/95"]').filter({ hasText: "Live Activity" }).first();
    await expect(feedAfter).toBeVisible({ timeout: 15000 });

    const afterBox = await feedAfter.boundingBox();
    expect(afterBox).not.toBeNull();
    expect(afterBox!.width).toBeGreaterThan(200);
    expect(afterBox!.height).toBeGreaterThan(30);

    const afterOpacity = await feedAfter.evaluate((el) => getComputedStyle(el).opacity);
    expect(Number(afterOpacity)).toBeGreaterThan(0.5);
  });
});