import { describe, expect, it } from "vitest";
import { EMAIL_BASE_CSS, LIGHT_SURFACE_LUMINANCE, htmlDeclaresColors, markKeptSurfaces, relativeLuminance, sanitizeEditorHtml, sanitizeEmailHtml } from "../html";

describe("sanitizeEmailHtml", () => {
  it("removes scripts and event handlers", () => {
    const r = sanitizeEmailHtml('<div onclick="x()">hi<script>alert(1)</script><iframe src="https://evil"></iframe></div>');
    expect(r.html).not.toContain("script");
    expect(r.html).not.toContain("onclick");
    expect(r.html).not.toContain("iframe");
  });
  it("blocks remote images until allowed and maps cid", () => {
    const src = '<img src="https://t.example/p.gif"><img src="cid:logo@x"><div style="background:url(https://t.example/b.png)">x</div>';
    const blocked = sanitizeEmailHtml(src, { cidMap: { "logo@x": "/api/blob/a/b/logo.png" } });
    expect(blocked.remoteCount).toBe(2);
    expect(blocked.html).toContain('data-ihm-blocked="1"');
    expect(blocked.html).toContain("/api/blob/a/b/logo.png");
    expect(blocked.html).not.toMatch(/src="https:\/\/t\.example/);
    expect(blocked.html).not.toContain("url(https://t.example");
    const allowed = sanitizeEmailHtml(src, { allowRemote: true, proxyRemote: true });
    expect(allowed.html).toContain("/api/image?url=https%3A%2F%2Ft.example%2Fp.gif");
  });
  it("forces links to open in new tabs", () => {
    const r = sanitizeEmailHtml('<a href="https://x.io">x</a>');
    expect(r.html).toContain('target="_blank"');
    expect(r.html).toContain("noopener");
  });
  it("strips javascript: urls", () => {
    const r = sanitizeEmailHtml('<a href="javascript:alert(1)">x</a>');
    expect(r.html).not.toContain("javascript:");
  });
  it("editor sanitizer keeps basic formatting", () => {
    expect(sanitizeEditorHtml("<b>x</b><script>1</script>")).toBe("<b>x</b>");
  });
});

describe("htmlDeclaresColors", () => {
  it("is false for mail that brings no colors", () => {
    expect(htmlDeclaresColors("<p>Hi there</p>")).toBe(false);
    expect(htmlDeclaresColors("<div><b>bold</b> and <i>italic</i></div>", "font-family:Arial")).toBe(false);
    expect(htmlDeclaresColors('<a href="https://x.io/?color=red">link</a>')).toBe(false);
    expect(htmlDeclaresColors('<div style="border-color: red">x</div>')).toBe(false);
  });

  it("is true when the message paints itself", () => {
    expect(htmlDeclaresColors('<td bgcolor="#ffffff">x</td>')).toBe(true);
    expect(htmlDeclaresColors('<font color="red">x</font>')).toBe(true);
    expect(htmlDeclaresColors('<div style="color:#333">x</div>')).toBe(true);
    expect(htmlDeclaresColors('<div style="background-color:#fff">x</div>')).toBe(true);
    expect(htmlDeclaresColors("<style>p { color: red }</style><p>x</p>")).toBe(true);
    expect(htmlDeclaresColors("<p>plain</p>", "background:#eee")).toBe(true);
  });
});

/**
 * Forcing the theme onto mail that styles itself — issue #290.
 *
 * The switch above it leaves nearly all HTML mail alone, because one color
 * anywhere opts a message out. What this half has to get right is telling a
 * sheet the design sits on from a surface painted on top of it: neutralize the
 * first and the white card goes away, keep the second and a button keeps a
 * label you can still read.
 */
describe("relativeLuminance", () => {
  it("reads the forms mail actually uses", () => {
    expect(relativeLuminance("#ffffff")).toBeCloseTo(1, 5);
    expect(relativeLuminance("#FFF")).toBeCloseTo(1, 5);
    expect(relativeLuminance("#000000")).toBeCloseTo(0, 5);
    expect(relativeLuminance("white")).toBeCloseTo(1, 5);
    expect(relativeLuminance("rgb(255, 255, 255)")).toBeCloseTo(1, 5);
    expect(relativeLuminance("rgba(255,255,255,0.5)")).toBeCloseTo(1, 5);
  });

  it("has nothing to say about a color it cannot read", () => {
    // Not a failure: the caller treats null as "no deliberate surface", which
    // is the safe way round — an unreadable color must not keep a white sheet.
    expect(relativeLuminance("color-mix(in srgb, red, blue)")).toBeNull();
    expect(relativeLuminance("var(--brand)")).toBeNull();
    expect(relativeLuminance("")).toBeNull();
  });

  it("treats a fully transparent color as painting nothing", () => {
    expect(relativeLuminance("rgba(0,0,0,0)")).toBeNull();
    expect(relativeLuminance("transparent")).toBeNull();
  });

  it("puts a white wrapper above the threshold and a call to action below it", () => {
    expect(relativeLuminance("#ffffff")!).toBeGreaterThanOrEqual(LIGHT_SURFACE_LUMINANCE);
    expect(relativeLuminance("#1155CC")!).toBeLessThan(LIGHT_SURFACE_LUMINANCE);
  });
});

describe("markKeptSurfaces", () => {
  const frag = (html: string) => {
    const d = document.createElement("div");
    d.innerHTML = html;
    return d;
  };

  /*
   * Marking is only half of it — the other half is the rule in EMAIL_BASE_CSS
   * that reads the marks, and #310 was a bug in that half rather than in the
   * marking. So these assert what the reader actually sees: does the
   * neutralizer hit this element? The selector is lifted out of the stylesheet
   * rather than copied, so a test cannot quietly drift from the rule it checks.
   */
  const NEUTRALIZER = (() => {
    const m = EMAIL_BASE_CSS.match(
      /\.ihm-email-root\.forced\s+(\*:not\([^{]*?)\s*\{\s*color: inherit/,
    );
    if (!m) throw new Error("could not find the neutralizer rule in EMAIL_BASE_CSS");
    return m[1]!.trim();
  })();

  /** True when the theme is forced onto this element rather than leaving it alone. */
  const neutralized = (el: Element) => el.matches(NEUTRALIZER);

  it("keeps a colored button and drops the white sheet around it", () => {
    // The shape reported in #290: a Shopify/Klaviyo template whose outer 600px
    // wrapper carries bgcolor="#ffffff" and whose CTA carries bgcolor="#1155CC".
    const d = frag('<table bgcolor="#ffffff"><tr><td bgcolor="#1155CC"><a style="color:#FFFFFF">Buy</a></td></tr></table>');
    expect(markKeptSurfaces(d)).toBe(1);
    expect(d.querySelector("table")!.hasAttribute("data-ihm-keep")).toBe(false);
    expect(d.querySelector("td")!.hasAttribute("data-ihm-keep")).toBe(true);
    // The label is not a painted surface itself. It is marked as sitting on
    // one, which is what stops white-on-blue turning unreadable.
    expect(d.querySelector("a")!.hasAttribute("data-ihm-keep")).toBe(false);
    expect(d.querySelector("a")!.hasAttribute("data-ihm-in-keep")).toBe(true);
  });

  it("neutralizes a light panel nested inside a dark painted card", () => {
    // The shape reported in #310: a dark Klaviyo campaign whose 600px cards
    // are dark enough to be marked, with light content tables inside them.
    // Those tables used to inherit the card's exemption and render as beige
    // sheets in an otherwise themed message.
    const d = frag(
      '<div style="background-color:#e7e5e2">' +
        '<div style="background-color:#2b2b2b">' +
          '<table style="background-color:#e7e5e2"><tr><td>copy</td></tr></table>' +
        '</div>' +
      '</div>',
    );
    expect(markKeptSurfaces(d)).toBe(1);

    const divs = Array.from(d.querySelectorAll("div"));
    const surround = divs[0]!;
    const card = divs[1]!;
    const nested = d.querySelector("table")!;

    // The page surround is a sheet and always was.
    expect(surround.hasAttribute("data-ihm-keep")).toBe(false);
    // The card is paint and stays paint.
    expect(card.hasAttribute("data-ihm-keep")).toBe(true);
    // The fix, stated the way the reader experiences it: the nested sheet is
    // themed, and so is the copy inside it. Before #310 both were exempt for
    // being descendants of the card.
    expect(neutralized(nested)).toBe(true);
    expect(neutralized(d.querySelector("td")!)).toBe(true);
    // The card itself is still left alone, and the page surround still goes.
    expect(neutralized(card)).toBe(false);
    expect(neutralized(surround)).toBe(true);
  });

  it("still keeps a button that sits inside a nested light panel", () => {
    // Paint resumes below a sheet, however deep it is: the fix must not cost
    // a call to action its label just because a sheet came between it and the
    // card it is on.
    const d = frag(
      '<div style="background-color:#2b2b2b">' +
        '<table style="background-color:#ffffff"><tr>' +
          '<td bgcolor="#1155CC"><a style="color:#FFFFFF">Buy</a></td>' +
        '</tr></table>' +
      '</div>',
    );
    expect(markKeptSurfaces(d)).toBe(2);
    expect(neutralized(d.querySelector("table")!)).toBe(true);
    expect(neutralized(d.querySelector("td")!)).toBe(false);
    // The label keeps its white, which is the thing #294 bought and this must
    // not spend.
    expect(neutralized(d.querySelector("a")!)).toBe(false);
  });

  it("leaves no light panel exempt across the whole reported specimen", () => {
    // #310 as reported: a dark campaign with no bgcolor attributes, 21 light
    // panels, 14 of them nested inside dark 600px cards. Those fourteen were
    // the ones rendering as beige sheets.
    let cards = "";
    for (let i = 0; i < 7; i++) {
      cards +=
        '<div style="background-color:#2b2b2b">' +
        '<table style="background-color:#e7e5e2"><tr><td>copy</td></tr></table>' +
        '<table style="background-color:#e7e5e2"><tr><td>more</td></tr></table>' +
        "</div>";
    }
    let loose = "";
    for (let i = 0; i < 7; i++) {
      loose += '<table style="background-color:#e7e5e2"><tr><td>loose</td></tr></table>';
    }
    const d = frag('<div style="background-color:#e7e5e2">' + cards + loose + "</div>");

    const panels = Array.from(d.querySelectorAll<HTMLElement>("table"));
    expect(panels.length).toBe(21);

    expect(markKeptSurfaces(d)).toBe(7);
    expect(panels.filter((p) => !neutralized(p))).toHaveLength(0);
  });

  it("reads an inline background as well as the attribute", () => {
    const d = frag('<div style="background-color:#111827">dark</div><div style="background:#f8f8ff">sheet</div>');
    expect(markKeptSurfaces(d)).toBe(1);
    expect(d.querySelectorAll("[data-ihm-keep]").length).toBe(1);
    expect((d.querySelector("[data-ihm-keep]") as HTMLElement).textContent).toBe("dark");
  });

  it("marks nothing in mail that paints no backgrounds", () => {
    const d = frag('<p style="color:#333">text</p><a href="https://x.io">link</a>');
    expect(markKeptSurfaces(d)).toBe(0);
  });

  it("leaves the sender's own markup alone, so the switch is reversible", () => {
    const d = frag('<table><tr><td bgcolor="#1155CC" style="color:#fff">Buy</td></tr></table>');
    markKeptSurfaces(d);
    const td = d.querySelector("td")!;
    expect(td.getAttribute("bgcolor")).toBe("#1155CC");
    expect(td.style.color).toBe("rgb(255, 255, 255)");
  });
});

/**
 * A shadow root scopes selectors, not layout. Mail CSS saying `position:fixed`
 * is still positioned against the viewport, so a sender could paint over the
 * whole application — a ready-made phishing surface inside our own origin.
 *
 * The control that actually stops it is layout containment on an ancestor of
 * the shadow host, which mail CSS has no selector for; that lives in app.css
 * and is asserted at the bottom of this file, because jsdom does no layout and
 * cannot prove it here. These cover the second line of defense.
 */
describe("mail CSS cannot climb out of its card", () => {
  const render = (html: string) => sanitizeEmailHtml(html).html;

  it("turns fixed and sticky positioning into static", () => {
    const out = render(`<div><style>.x{position:fixed;inset:0;z-index:2147483647}</style><p class="x">hi</p></div>`);
    expect(out).toContain("position:static");
    expect(out).not.toMatch(/position\s*:\s*fixed/i);
  });

  it("does so in style attributes too, however they are spaced", () => {
    expect(render(`<p style="position: FIXED; color:red">x</p>`)).not.toMatch(/position\s*:\s*fixed/i);
    expect(render(`<p style="position:sticky;top:0">x</p>`)).not.toMatch(/position\s*:\s*sticky/i);
  });

  it("defangs :host, which is how mail CSS would reach the host element", () => {
    const out = render(`<div><style>:host{contain:none!important;position:fixed!important}</style><p>x</p></div>`);
    expect(out).not.toContain(":host");
    expect(out).not.toMatch(/position\s*:\s*fixed/i);
  });

  it("leaves ordinary positioning alone", () => {
    const out = render(`<div><style>.a{position:relative}.b{position:absolute;top:2px}</style><p>x</p></div>`);
    expect(out).toContain("position:relative");
    expect(out).toContain("position:absolute");
  });

  it("still rewrites url() while hardening", () => {
    const out = sanitizeEmailHtml(`<div><style>.x{position:fixed;background:url(https://tracker.example/p.gif)}</style><p>x</p></div>`, { allowRemote: true, proxyRemote: true }).html;
    expect(out).toContain("position:static");
    expect(out).toContain("/api/image?url=");
  });
});

describe("mail CSS cannot smuggle markup or remote loads", () => {
  const TRACKER = "/api/image?url=https%3A%2F%2Ftrk.example%2Fo";
  // Parse the output the way the reading pane does, and look at what came out.
  const parse = (html: string) => {
    const host = document.createElement("div");
    host.innerHTML = html;
    return host;
  };

  it("cannot close its style block, however an @import strip would join", () => {
    const payload = "<p>hi</p><style>p{}<@im@import a;port b;/style><@im@import a;port b;img src=x onerror=alert(1)></style>";
    const out = sanitizeEmailHtml(payload).html;
    const dom = parse(out);
    expect(dom.querySelector("img")).toBeNull();
    expect(dom.querySelectorAll("style")).toHaveLength(1);
    expect(out).not.toMatch(/<\/style>\s*<img/i);
  });

  it("escapes every < left in a style block", () => {
    const out = sanitizeEmailHtml("<div><style>p{color:red} q::before{content:'< b'}</style><p>x</p></div>").html;
    const css = parse(out).querySelector("style")!.textContent!;
    expect(css).toContain("p{color:red}");
    expect(css).toContain("content:'\\3c  b'");
  });

  it("disables @import in every spelling, even with remote content allowed", () => {
    for (const css of ['@import "https://t.example/a.css";', "@import url(https://t.example/a.css);", '@\\69mport "https://t.example/a.css";', '@IM\\PORT "https://t.example/a.css";']) {
      const out = sanitizeEmailHtml(`<div><style>${css}</style><p>x</p></div>`, { allowRemote: true }).html;
      expect(out, css).not.toMatch(/@import/i);
      expect(out, css).toContain("@ihm-blocked-import");
    }
  });

  it("blocks image-set and other string-image functions", () => {
    const out = sanitizeEmailHtml(`<p style="background-image:image-set('${TRACKER}' 1x)">x</p><p style="background:-webkit-image-set('${TRACKER}' 1x)">y</p>`).html;
    expect(out).not.toMatch(/image-set\(/i);
  });

  it("rewrites escaped and awkwardly quoted url()", () => {
    const cases = [
      `<p style="background:\\75rl(${TRACKER})">x</p>`,
      `<p style="background:url('${TRACKER}&a=&quot;b')">x</p>`,
      `<div><style>p{background:u\\RL( "https://t.example/p.gif" )}</style><p>x</p></div>`,
    ];
    for (const html of cases) {
      const r = sanitizeEmailHtml(html);
      expect(r.html, html).not.toContain("trk.example");
      expect(r.html, html).not.toContain("t.example");
    }
  });

  it("drops relative urls, which would reach the app's own image proxy", () => {
    const out = sanitizeEmailHtml(`<p style="background:url(${TRACKER})">x</p>`).html;
    expect(out).not.toContain("/api/image");
  });

  it("drops a style attribute it cannot parse", () => {
    const out = sanitizeEmailHtml(`<p style="color:red;background:url('https://t.example/p.gif">x</p>`).html;
    expect(out).not.toContain("t.example");
  });

  it("sees escaped fixed positioning and :host", () => {
    const out = sanitizeEmailHtml(`<div><style>:\\68ost{color:red}.x{position:\\66ixed}</style><p style="position:\\000066ixed">x</p></div>`).html;
    expect(out).not.toMatch(/:host/i);
    expect(out).not.toMatch(/fixed/i);
  });

  it("does not let decoded letters merge into the escape before them", () => {
    const out = sanitizeEmailHtml("<div><style>.\\31\\61 {color:red}</style><p>x</p></div>").html;
    expect(out).toContain(".\\31 a{color:red}");
  });

  it("keeps non-letter escapes, such as CJK font names", () => {
    const out = sanitizeEmailHtml(`<p style="font-family:'\\5FAE\\8F6F\\96C5\\9ED1'">x</p>`).html;
    expect(out).toContain("\\5FAE \\8F6F \\96C5 \\9ED1 ");
  });

  it("sanitizes the body element's style too", () => {
    const r = sanitizeEmailHtml(`<html><body style="background:image-set('${TRACKER}' 1x);position:fixed"><p>x</p></body></html>`);
    expect(r.bodyStyle).not.toMatch(/image-set\(/i);
    expect(r.bodyStyle).not.toMatch(/fixed/i);
  });

  it("still maps cid and allowed remote images in CSS", () => {
    const r = sanitizeEmailHtml(`<div><style>p{background:url(cid:bg@x)}</style></div><p style="background:url('https://t.example/b.png')">x</p>`, { cidMap: { "bg@x": "/api/blob/a/b/bg.png" }, allowRemote: true, proxyRemote: true });
    expect(r.html).toContain('url("/api/blob/a/b/bg.png")');
    expect(r.html).toContain("/api/image?url=https%3A%2F%2Ft.example%2Fb.png");
    expect(r.remoteCount).toBe(1);
  });

  it("drops style blocks for the composer", () => {
    const out = sanitizeEmailHtml("<div><style>body *{visibility:hidden}</style><p>x</p></div>", { dropStyleBlocks: true }).html;
    expect(out).not.toContain("<style");
    expect(out).toContain("<p>x</p>");
  });
});

describe("image map links", () => {
  it("cannot target the app's tab", () => {
    const out = sanitizeEmailHtml('<img src="cid:x" usemap="#m"><map name="m"><area coords="0,0,9,9" href="https://evil.test/" target="_top"></map>').html;
    const area = new DOMParser().parseFromString(out, "text/html").querySelector("area");
    expect(area?.getAttribute("target")).toBe("_blank");
    expect(area?.getAttribute("rel")).toContain("noopener");
  });
});

describe("the containment that mail CSS cannot override", () => {
  it("is still applied to the message body container", async () => {
    // jsdom does no layout, so this asserts the control is present rather than
    // that it works; the behavior was verified in a real browser. Without it,
    // a message can cover the viewport regardless of what the sanitizer does.
    const { readFile } = await import("node:fs/promises");
    const { join } = await import("node:path");
    // vitest serves modules over http, so import.meta.url is not a file URL.
    const css = await readFile(join(process.cwd(), "src/styles/app.css"), "utf8");
    const rule = /\.message-body\s*\{[^}]*\}/.exec(css)?.[0] ?? "";
    expect(rule).toMatch(/contain\s*:\s*layout/);
  });
});

describe("mail wider than the reading pane", () => {
  /*
   * The root keeps `contain: content`, which clips what overflows, so without
   * a scroll the right side of a min-width table was simply gone, worst on a
   * phone (Gitea issue #24). jsdom does no layout, so this pins the rule.
   */
  it("scrolls sideways instead of being cut off", () => {
    const root = EMAIL_BASE_CSS.match(/\.ihm-email-root \{([^}]*)\}/)?.[1] ?? "";
    expect(root).toMatch(/contain:\s*content/);
    expect(root).toMatch(/overflow-x:\s*auto/);
  });
});