// Rôle : vérifie les surfaces de cartes à partir du Sass compilé et des styles calculés.
import { test, expect } from "@playwright/test";
import { mountStyles } from "./fixtures/compiled-styles.js";

async function mountCards(page) {
  await mountStyles(page, `
    <main style="display:grid;gap:24px;padding:24px">
      <article id="global" class="nds-card" data-variant="interactive">
        <div class="nds-card-cover">Cover</div><button>Open</button>
      </article>
      <a id="home" class="nds-card game-home-card" href="#game">
        <span class="game-home-card-icon">Icon</span><strong>Game</strong>
      </a>
      <article id="endemic" class="mhwilds-card endemic-card">
        <div class="mhwilds-card-art">Art</div><div class="mhwilds-card-body">Endemic</div>
      </article>
      <article id="monster" class="mhwilds-card monster-card" tabindex="0">
        <span class="mhwilds-flip-indicator">Flip</span>
        <div class="mhwilds-card-inner">
          <div class="mhwilds-card-face mhwilds-card-front"><div class="mhwilds-card-art">Front</div></div>
          <div class="mhwilds-card-face mhwilds-card-back"><div class="mhwilds-card-body">Back</div></div>
        </div>
      </article>
    </main>
  `);
}

async function expectSurface(card, { hovered = false, face = false } = {}) {
  await expect(card).toHaveCSS("border-top-width", "1px");
  await expect(card).toHaveCSS("border-top-style", "solid");
  await expect(card).toHaveCSS("border-top-color", "rgba(0, 0, 0, 0)");
  await expect(card).toHaveCSS("background-clip", hovered ? "padding-box, border-box" : "padding-box, border-box, border-box");
  const fill = hovered ? (face ? "0.95" : "0.96") : (face ? "0.92" : "0.88");
  await expect(card).toHaveCSS("background-image", new RegExp(`rgba\\(${hovered && !face ? "21, 26, 48" : "16, 20, 38"}, ${fill.replace(".", "\\.")}\\)`));
  await expect(card).toHaveCSS("background-image", hovered ? /139, 92, 246/ : /246, 196, 83/);
  await expect(card).toHaveCSS("background-image", hovered ? /196, 181, 253/ : /34, 211, 238/);
  if (hovered) await expect(card).toHaveCSS("box-shadow", /139, 92, 246/);
  const radius = await card.evaluate((element) => element.ownerDocument.defaultView.getComputedStyle(element).getPropertyValue("--radius-md").trim());
  expect(radius).not.toBe("");
  await expect(card).toHaveCSS("border-top-left-radius", radius);
}

for (const width of [1280, 390]) {
  test(`compiled card surfaces preserve borders, dividers and hover at ${width}px`, async ({ page }) => {
    await page.setViewportSize({ width, height: 900 });
    await mountCards(page);
    for (const id of ["global", "home", "endemic"]) {
      const card = page.locator(`#${id}`);
      await expectSurface(card);
      const before = await card.boundingBox();
      await card.hover();
      await expectSurface(card, { hovered: true });
      await expect(card).toHaveCSS("transform", "none");
      const after = await card.boundingBox();
      expect(after.width).toBe(before.width);
      expect(after.height).toBe(before.height);
      await page.mouse.move(0, 0);
      await expectSurface(card);
    }
    for (const selector of [".nds-card-cover", ".game-home-card-icon", ".mhwilds-card-art"]) {
      for (const divider of await page.locator(selector).all()) {
        await expect(divider).toHaveCSS("border-bottom", "1px solid rgba(246, 196, 83, 0.42)");
      }
    }
    expect(await page.locator("body").evaluate((element) => element.scrollWidth)).toBeLessThanOrEqual(width);
  });

  test(`compiled monster faces and keyboard card state remain distinct at ${width}px`, async ({ page }) => {
    await page.setViewportSize({ width, height: 900 });
    await mountCards(page);
    const global = page.locator("#global");
    await global.getByRole("button").focus();
    await expectSurface(global, { hovered: true });
    const monster = page.locator("#monster");
    await expect(monster.locator(".mhwilds-flip-indicator")).toHaveCSS("pointer-events", "none");
    await expect(monster.locator(".mhwilds-flip-indicator")).toHaveCSS("width", "34px");
    for (const face of await monster.locator(".mhwilds-card-face").all()) {
      await expectSurface(face, { face: true });
      await expect(face).toHaveCSS("backface-visibility", "hidden");
    }
    await monster.hover();
    await expect(monster).toHaveCSS("background-image", "none");
    await expect(monster).toHaveCSS("box-shadow", "none");
    for (const face of await monster.locator(".mhwilds-card-face").all()) {
      await expectSurface(face, { face: true, hovered: true });
      await expect(face).toHaveCSS("box-shadow", /14px/);
    }
    await monster.evaluate((element) => element.classList.add("is-flipped"));
    await expect(monster.locator(".mhwilds-card-inner")).toHaveCSS("transform", "matrix3d(-1, 0, 0, 0, 0, 1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1)");
  });
}