// apps/client/test/e2e/cli-08-nameplate.e2e.test.ts
// [int->REQ-CLI-08]
//
// Plan 06.1-07 Task 1 — GREEN refinement of the 06.1-03 RED skeleton. Asserts
// the D6.1-11 BNO color rule (local c_aqua / remote c_white) via the DOM
// mirror's `data-nameplate-color` attribute (Plan 06.1-07 Rule 2 auto-fix on
// Nameplate.ts — Phaser canvas Text color is the visual source of truth; the
// attribute mirrors it 1:1 for Playwright assertability since getComputedStyle
// on the opacity:0 mirror DIV inherits the body color, not the canvas color).
//
// Two-context shape mirrors cli-08.e2e.test.ts — A logs in in context A, B in
// context B; A's perspective expects A's own nameplate=#00FFFF (c_aqua) and
// B's nameplate=#FFFFFF (c_white). If remote nameplate fails to attach within
// 10 s (server roundtrip / accountB seeding miss) we attribute that to the
// operator-driven HUMAN-UAT Test 4 fallback rather than RED here.

import {
  test,
  expect,
  loginAs,
  waitForGameReady,
} from './fixtures.js';

test('CLI-08 nameplate color — local cyan (#00FFFF), remote white (#FFFFFF) (Wave 4 GREEN gate)', async ({
  browser,
  accountA,
  accountB,
  inviteSuffix,
}) => {
  const ctxA = await browser.newContext();
  const ctxB = await browser.newContext();
  const a = await ctxA.newPage();
  const b = await ctxB.newPage();

  try {
    // 1. Both clients log in and reach GameScene.
    await loginAs(a, accountA, inviteSuffix);
    await loginAs(b, accountB, inviteSuffix);
    await waitForGameReady(a);
    await waitForGameReady(b);

    // 2. From A's perspective, A's own nameplate must be cyan c_aqua.
    //    DOM mirror `[data-nameplate=<username>]` is the read surface (D-27a);
    //    `data-nameplate-color` exposes the Phaser canvas color for Playwright
    //    (Plan 06.1-07 auto-fix - opacity:0 mirror cannot publish color via CSS).
    await expect(
      a.locator(`[data-nameplate="${accountA.username}"]`),
    ).toBeAttached({ timeout: 10_000 });

    const localColor = await a
      .locator(`[data-nameplate="${accountA.username}"]`)
      .first()
      .getAttribute('data-nameplate-color');
    expect(
      localColor,
      `Local nameplate color must be c_aqua per D6.1-11; got ${localColor}`,
    ).toBe('#00FFFF');

    const localRole = await a
      .locator(`[data-nameplate="${accountA.username}"]`)
      .first()
      .getAttribute('data-nameplate-role');
    expect(localRole, 'Local nameplate role must be "local"').toBe('local');

    // 3. From A's perspective, B's nameplate must be white c_white. Two-context
    //    co-presence is required for this assertion; if the server roundtrip
    //    fails to seed B into A's room within 10 s, surface the failure (not
    //    skip) — operator's HUMAN-UAT Test 4 is the visual backstop.
    await expect(
      a.locator(`[data-nameplate="${accountB.username}"]`),
    ).toBeAttached({ timeout: 10_000 });

    const remoteColor = await a
      .locator(`[data-nameplate="${accountB.username}"]`)
      .first()
      .getAttribute('data-nameplate-color');
    expect(
      remoteColor,
      `Remote nameplate color must be c_white per D6.1-11; got ${remoteColor}`,
    ).toBe('#FFFFFF');

    const remoteRole = await a
      .locator(`[data-nameplate="${accountB.username}"]`)
      .first()
      .getAttribute('data-nameplate-role');
    expect(remoteRole, 'Remote nameplate role must be "remote"').toBe('remote');
  } finally {
    await ctxA.close();
    await ctxB.close();
  }
});
