import { test } from "node:test";
import assert from "node:assert/strict";
import * as React from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { BRAND_MARK_RING_CLASS, BrandMark } from "./BrandMark";
import { ICON_PALETTES, MARK_GROUND_RX, MARK_VIEWBOX, childIconPalette, markSvg } from "../lib/brand";

// The ring on dark (release 10, slice MR): a 1px box-shadow ring outside the
// tile in the palette's own dim, drawn only under `.dark`, following the
// ground's corner. The browser half — the computed box-shadow per base — is
// held by the export, hub and homepage brand.spec e2e.

// common's tsconfig has `jsx: "preserve"` (Next compiles it), so tsx falls
// back to the classic transform — `React.createElement` on a free `React`.
(globalThis as { React?: typeof React }).React = React;
const { createElement } = React;
const render = (el: Parameters<typeof renderToStaticMarkup>[0]) => renderToStaticMarkup(el);

test("the ring's corner is the ground's: MARK_GROUND_RX of MARK_VIEWBOX", () => {
  const pct = (MARK_GROUND_RX / MARK_VIEWBOX) * 100; // 21.875
  assert.equal(pct, 21.875);
  assert.ok(BRAND_MARK_RING_CLASS.split(" ").includes(`rounded-[${pct}%]`));
  // The ring is the dark variant only, 1px, spread with no blur or offset,
  // in the palette's ring colour; light gets no shadow class at all.
  const shadows = BRAND_MARK_RING_CLASS.split(" ").filter((c) => c.includes("shadow"));
  assert.deepEqual(shadows, ["dark:shadow-[0_0_0_1px_var(--mark-ring)]"]);
  // The svg must not clip the ground a second time at that corner.
  assert.ok(BRAND_MARK_RING_CLASS.split(" ").includes("overflow-visible"));
});

test("forced colours: a 1px CanvasText outline, the one ring the mode keeps", () => {
  // Forced-colours mode puts the tile on the reader's Canvas on every base, so
  // the tile gets an outline in the reader's text colour — on every base (no
  // `dark:`), 1px (the bare `outline` utility), with no offset, so it sits
  // where the ring does and follows the same rounded corner. Every class of it is forced-colours only:
  // the other modes render exactly as they did.
  const classes = BRAND_MARK_RING_CLASS.split(" ");
  const forced = classes.filter((c) => c.startsWith("forced-colors:"));
  assert.deepEqual(forced, ["forced-colors:outline", "forced-colors:outline-[color:CanvasText]"]);
  assert.deepEqual(
    classes.filter((c) => c.includes("outline")),
    forced,
    "no outline outside forced colours",
  );
  assert.ok(classes.includes("rounded-[21.875%]"));
  assert.ok(!classes.some((c) => /^forced-colors:.*(offset|dark)/.test(c)));
});

test("each palette rings in its own dim, set as --mark-ring on the svg", () => {
  const parent = render(createElement(BrandMark, { palette: ICON_PALETTES.archilyzer }));
  assert.match(parent, /style="--mark-ring:#586977"/);
  const child = render(
    createElement(BrandMark, {
      palette: { ...ICON_PALETTES.child, lit: "var(--brand-mark, var(--brand))" },
    }),
  );
  assert.match(child, /style="--mark-ring:#6b5d47"/);
});

test("the caller's classes follow the ring's, and its style can still override the ring", () => {
  const html = render(
    createElement(BrandMark, {
      palette: childIconPalette("#e3b15c"),
      className: "size-7 shrink-0",
      style: { "--mark-ring": "#123456" } as Record<string, string>,
    }),
  );
  assert.ok(html.includes(`class="${BRAND_MARK_RING_CLASS} size-7 shrink-0"`), html);
  assert.match(html, /style="--mark-ring:#123456"/);
});

test("the ring is in-page only: the icon files carry no ring", () => {
  const svg = markSvg(ICON_PALETTES.archilyzer);
  assert.doesNotMatch(svg, /stroke|shadow|mark-ring/);
});