import { test, expect } from "bun:test";
import { readFileSync } from "node:fs";
import { renderComponent } from "../../test/src/index.ts";
import { renderDocument } from "../../ssr/src/index.ts";
import { renderThemeCss, resolveThemeConfig, DEFAULT_THEMES } from "../src/theme.ts";
import type { DesignSystem } from "../../design-system/src/index.ts";
import { Window } from "happy-dom";

test("legacy Button inherits opted-in tokens after SSR style extraction and mode switching", async () => {
  const system: DesignSystem = {
    schemaVersion: 1,
    id: "square",
    name: "Square",
    version: "1",
    tokens: { radius: { type: "dimension", value: "0", legacy: "radius-sm" } },
    modes: { light: {}, dark: {} },
    defaultMode: "dark",
  };
  const source = readFileSync(new URL("../../ui/components/button.wrn", import.meta.url), "utf8");
  const body = await renderComponent(source, { label: "Save", variant: "outline" });
  const baseline = renderThemeCss(resolveThemeConfig());
  const css = renderThemeCss(
    resolveThemeConfig({ designSystem: { system }, themes: { dark: { "radius-sm": "7px" } } }),
  );
  const extraHead = `<style id="design-theme">${css}</style>`;
  const html = renderDocument({
    meta: {},
    body,
    extraHead,
    htmlAttrs: ' data-theme="dark"',
    styleNonce: "design-test",
  });
  expect(html.indexOf(extraHead)).toBeLessThan(html.indexOf("data-wrnexus-style"));
  expect(html).toContain('nonce="design-test"');
  const window = new Window();
  try {
    window.document.write(html);
    const button = window.document.querySelector("button.wrn-btn")!;
    expect(window.getComputedStyle(button).borderRadius).toBe("7px");
    window.document.documentElement.dataset.theme = "light";
    expect(window.getComputedStyle(button).borderRadius).toBe("0px");
    window.document.querySelector("#design-theme")!.textContent = baseline;
    expect(window.getComputedStyle(button).borderRadius).toBe(DEFAULT_THEMES.light!["radius-sm"]!);
  } finally {
    await window.happyDOM.close();
  }
});