const { test, expect } = require('@playwright/test');

test.use({ viewport: { width: 1920, height: 1080 } });

test.describe('aura-bg Carbon Blue gradient (global, fixed background)', () => {
  test('body carries the dark base color that the aura layers blend against', async ({ page }) => {
    await page.goto('/');

    // Without the body color, mix-blend-mode on the aura layers has nothing
    // to composite against and the gradient disappears.
    const bodyBg = await page.evaluate(() => getComputedStyle(document.body).backgroundColor);
    // #100e0b = rgb(16, 14, 11)
    expect(bodyBg).toBe('rgb(16, 14, 11)');
  });

  test('.aura-bg renders globally as a fixed viewport layer (not a per-template wrapper)', async ({ page }) => {
    await page.goto('/');

    // aura-bg is rendered once in header.php and must be position:fixed so
    // it covers the entire viewport behind all content regardless of scroll.
    const auraBg = page.locator('.aura-bg').first();
    await expect(auraBg).toBeAttached();

    const position = await auraBg.evaluate((el) => getComputedStyle(el).position);
    expect(position).toBe('fixed');

    // z-index: -1 puts the gradient behind page content. Content must sit
    // on top via its own stacking context (which the body and main do not
    // create, so the negative z-index is safe).
    const zIndex = await auraBg.evaluate((el) => getComputedStyle(el).zIndex);
    expect(zIndex).toBe('-1');

    // pointer-events: none so clicks pass through to content underneath.
    const pointerEvents = await auraBg.evaluate((el) => getComputedStyle(el).pointerEvents);
    expect(pointerEvents).toBe('none');
  });

  test('.aura-layer-1 renders the Carbon Blue linear gradient', async ({ page }) => {
    await page.goto('/');

    const layer1 = page.locator('.aura-layer-1').first();
    await expect(layer1).toBeAttached();

    const bgImage = await layer1.evaluate((el) => getComputedStyle(el).backgroundImage);
    expect(bgImage).toMatch(/linear-gradient/);
  });

  test('.aura-bg is not isolated (no stacking context traps blend modes)', async ({ page }) => {
    await page.goto('/');

    // isolation: isolate on the .aura-bg parent would trap mix-blend-mode
    // children inside an empty container, preventing them from blending
    // with the body's #100e0b beneath. The global fixed layer must let
    // blend modes reach through to the body.
    const isolation = await page.locator('.aura-bg').first().evaluate((el) => getComputedStyle(el).isolation);
    expect(isolation).not.toBe('isolate');
  });
});