import { expect, test } from "bun:test";
import type { BlockDocument } from "@wrnexus/blocks";
import { renderEmail, validateMjml } from "../src/index.ts";

test("button typography and corners reach the clickable element in every target", async () => {
  const document: BlockDocument = {
    schemaVersion: 1, kind: "email", meta: { subject: "Styled CTA", lang: "en" }, theme: { tokens: {} },
    root: { id: "root", type: "layout.email-document", version: 1, props: { width: "600" }, styles: {}, slots: {
      content: [{ id: "cta", type: "content.button", version: 1, props: { label: "Read more", href: "https://example.com" }, styles: {
        color: { base: "#123456" }, fontSize: { base: "22px" }, fontWeight: { base: "400" }, borderRadius: { base: "18px" },
      }, slots: {} }],
    } },
  };
  const before = structuredClone(document);
  const result = await renderEmail(document, { amp: true, mjml: true, ampValidationTimeoutMs: 10000 });
  expect(result.ok).toBe(true);
  if (!result.ok) return;
  const anchor = result.value.parts.html.content.match(/<a href="https:\/\/example.com" style="([^"]+)"/)?.[1];
  for (const declaration of ["color:#123456", "font-size:22px", "font-weight:400", "border-radius:18px"]) {
    expect(anchor).toContain(declaration);
    expect(result.value.parts.amp?.content).toContain(declaration);
  }
  expect(result.value.parts.amp?.validation.valid).toBe(true);
  for (const attribute of ['color="#123456"', 'font-size="22px"', 'font-weight="400"', 'border-radius="18px"']) {
    expect(result.value.exports?.mjml).toContain(attribute);
  }
  expect(await validateMjml(result.value.exports!.mjml!)).toEqual([]);
  expect(document).toEqual(before);
});

test("button background inherits brand color with explicit semantic overrides across formats", async () => {
  for (const override of [undefined, "#aabbcc"]) {
    const document: BlockDocument = {
      schemaVersion: 1, kind: "email", meta: { subject: "Brand", lang: "en" }, theme: { tokens: {} },
      root: { id: "root", type: "layout.email-document", version: 1, props: { linkColor: "#125634" }, styles: {}, slots: {
        content: [{ id: "button", type: "content.button", version: 1, props: { label: "Act", href: "https://example.com" }, styles: override ? { backgroundColor: { base: override } } : {}, slots: {} }],
      } },
    };
    document.root.slots.content = [{ id: "section", type: "layout.section", version: 1, props: {}, styles: {}, slots: { content: document.root.slots.content } }];
    const before = structuredClone(document);
    const rendered = await renderEmail(document, { amp: true, mjml: true, ampValidationTimeoutMs: 10000 });
    expect(rendered.ok).toBe(true);
    if (!rendered.ok) return;
    const color = override ?? "#125634";
    expect(rendered.value.parts.html.content).toContain(`bgcolor="${color}"`);
    expect(rendered.value.parts.amp?.validation.valid).toBe(true);
    expect(rendered.value.parts.amp?.content).toContain(`background-color:${color}`);
    expect(rendered.value.exports?.mjml).toContain(`background-color="${color}"`);
    expect(await validateMjml(rendered.value.exports!.mjml!)).toEqual([]);
    expect(document).toEqual(before);
  }
});