import assert from "node:assert/strict";
import { describe, it } from "node:test";
import { getSanitizedHTML } from "./getSanitizedHTML.ts";

describe("getSanitizedHTML", () => {
  it("removes executable markup while preserving safe formatting", () => {
    const result = getSanitizedHTML('<b class="label">Safe</b><img src="x" onerror="alert(1)"><script>alert(2)</script>');

    assert.match(result, /<b class="label">Safe<\/b>/);
    assert.doesNotMatch(result, /onerror|<script/i);
  });

  it("removes unsafe and protocol-relative URLs", async () => {
    const result = getSanitizedHTML('<a href="javascript:alert(1)">unsafe</a><img src="//://example.com">');

    assert.doesNotMatch(result, /javascript:|\/\/example\.com/i);
  });

  it("bypass SVG sprites", () => {
    const sprite = `<svg><defs/><symbol id="icon-check" viewBox="0 -960 960 960"><path d="M382-240 154-468l57-57 171 171 367-367 57 57z"/></symbol><symbol id="icon-clear" viewBox="0 -960 960 960"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224z"/></symbol><symbol id="icon-close" viewBox="0 -960 960 960"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224z"/></symbol><symbol id="icon-download" viewBox="0 -960 960 960"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58zM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160z"/></symbol><symbol id="icon-dropdown" viewBox="0 0 24 24"><path fill="transparent" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m17 10-5 5-5-5"/></symbol><symbol id="icon-fullscreen" viewBox="0 -960 960 960"><path d="M120-120v-200h80v120h120v80zm520 0v-80h120v-120h80v200zM120-640v-200h200v80H200v120zm640 0v-120H640v-80h200v200z"/></symbol><symbol id="icon-nav-components" viewBox="0 0 48 48"><path fill="currentColor" d="m13.05 21.7 11-17.7 11 17.7ZM35.3 44q-3.7 0-6.2-2.5t-2.5-6.2 2.5-6.2 6.2-2.5 6.2 2.5 2.5 6.2-2.5 6.2-6.2 2.5M6 42.75v-15.2h15.2v15.2ZM35.3 41q2.4 0 4.05-1.65T41 35.3t-1.65-4.05-4.05-1.65-4.05 1.65-1.65 4.05 1.65 4.05T35.3 41M9 39.75h9.2v-9.2H9Zm9.45-21.05h11.2l-5.6-9.05ZM35.3 35.3"/></symbol></svg>`;

    const result = getSanitizedHTML(sprite);

    // 1. Verify that the global container namespaces are preserved
    assert.match(result, /^<svg>/);
    assert.match(result, /<\/svg>$/);

    // 2. Verify that definitions and target layout components exist
    assert.match(result, /<defs \/>|<defs><\/defs>/);
    assert.match(result, /id="icon-check"/);
    assert.match(result, /id="icon-dropdown"/);

    // 3. Verify that the path geometry data remains intact
    assert.match(result, /d="M382-240 154-468/);
    assert.match(result, /d="m17 10-5 5-5-5"/);
  });

  it("bypass inputs", () => {
    const form = `<form action="/" method="post"><input type="text" /><button type="submit">Submit</button></form>`;

    const result = getSanitizedHTML(form);

    // 1. Verify that the global container namespaces are preserved
    assert.equal(form, result);
  });

  it("preserves HTML5 templates and slots", () => {
    const template = `<template id="my-tpl"><slot name="content"><p>Default content</p></slot></template>`;
    const result = getSanitizedHTML(template);

    assert.equal(result, template);
  });

  it("preserves dynamic backend layout inside ins with escaped JSON configurations", () => {
    const modalPayload = `<template id="testModal1" data-js-modal="{}"><ins class="locale" data-js-locale="{&quot;code&quot;:&quot;modals.closeBtn&quot;}"><button type="button" data-js-modal-handler="{&quot;action&quot;:&quot;close&quot;}"><svg><use href="#icon-close" /></svg></button></ins></template>`;
    const result = getSanitizedHTML(modalPayload);

    // 1. Verify that the child button element is fully kept as an HTML node, not text
    assert.match(result, /<button type="button"/);
    assert.doesNotMatch(result, /&lt;button/);

    // 2. Verify framework JSON metadata attributes are preserved intact
    assert.match(result, /data-js-locale="{&quot;code&quot;:&quot;modals.closeBtn&quot;}"/);
    assert.match(result, /data-js-modal-handler="{&quot;action&quot;:&quot;close&quot;}"/);

    // 3. Verify inner vector graphical items are preserved
    assert.match(result, /<use href="#icon-close"/);
  });

  it("strips malicious content nested inside allowed structural elements", () => {
    const payload = `<dialog open=""><h1>Modal</h1><button onclick="exploit()">Close</button><script>alert(1)</script></dialog>`;
    const result = getSanitizedHTML(payload);

    // 1. Structural tags are kept
    assert.match(result, /<dialog open="">/);
    assert.match(result, /<h1>Modal<\/h1>/);
    assert.match(result, /<button>Close<\/button>/);

    // 2. Dangerous script bindings and content execution vectors are dropped
    assert.doesNotMatch(result, /onclick/);
    assert.doesNotMatch(result, /<script/);
  });

  it("returns an empty string when the input string payload is empty or falsy", () => {
    assert.equal(getSanitizedHTML(""), "");
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    assert.equal(getSanitizedHTML(null as any), "");
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    assert.equal(getSanitizedHTML(undefined as any), "");
  });

  // ============ edge‑case tests for SVG and templates ============

  it("removes on* event handlers from SVG elements", () => {
    const input = `<svg><circle onload="alert(1)" r="10"/><path onbegin="evil()" d="M0,0"/></svg>`;
    const result = getSanitizedHTML(input);
    assert.doesNotMatch(result, /onload/i);
    assert.doesNotMatch(result, /onbegin/i);
    // other safe attributes kept
    assert.match(result, /<circle r="10"/);
    assert.match(result, /d="M0,0"/);
  });

  it("drops non‑whitelisted SVG elements like foreignObject and script", () => {
    const input = `<svg><foreignObject><body onload="xss()"></body></foreignObject><script>evil()</script></svg>`;
    const result = getSanitizedHTML(input);
    assert.doesNotMatch(result, /foreignObject/i);
    assert.doesNotMatch(result, /<script/i);
    // svg itself remains
    assert.match(result, /<svg>/);
  });

  it("strips dangerous protocols inside SVG <a> and <use> href", () => {
    const input = `<svg><a href="javascript:alert(1)">click</a><use href="data:image/svg+xml,<svg onload='xss()'>"/></svg>`;
    const result = getSanitizedHTML(input);
    // no javascript: or data: protocol in attributes
    assert.doesNotMatch(result, /javascript:/i);
    assert.doesNotMatch(result, /data:/i);
    // The tags themselves may remain (if allowed), but hrefs must be empty or removed
    assert.match(result, /<svg>/);
    // The href="" may still be present but empty or stripped; we simply ensure no dangerous value
    if (result.includes("href=")) {
      assert.doesNotMatch(result, /href="javascript:/i);
    }
  });

  it("preserves safe data-* attributes (even those named similar to event handlers)", () => {
    const input = `<div data-onclick="safe" data-value="test"></div>`;
    const result = getSanitizedHTML(input);
    // data-onclick should NOT be removed – only real event handlers
    assert.match(result, /data-onclick="safe"/);
    assert.match(result, /data-value="test"/);
  });

  it("handles deeply nested templates with mixed safe and unsafe content", () => {
    const input = `<template id="deep"><slot name="x"><p>Text</p><img src="x" onerror="alert(1)"><script>bad</script></slot></template>`;
    const result = getSanitizedHTML(input);
    // Template and slot kept
    assert.match(result, /<template id="deep">/);
    assert.match(result, /<slot name="x">/);
    // Paragraph preserved
    assert.match(result, /<p>Text<\/p>/);
    // Dangerous onerror removed, script removed
    assert.doesNotMatch(result, /onerror/);
    assert.doesNotMatch(result, /<script/);
  });

  it("escapes double quotes inside attribute values correctly", () => {
    const input = `<span data-x="value with &quot; inside"></span>`;
    const result = getSanitizedHTML(input);
    // The &quot; must be preserved inside the attribute, but the attribute syntax must be safe
    assert.match(result, /data-x="value with &quot; inside"/);
  });

  it("removes dangerous event handlers from form elements", () => {
    const input = `<form><input type="text" onfocus="evil()" onblur="evil()"><button onclick="x()">x</button></form>`;
    const result = getSanitizedHTML(input);
    assert.match(result, /<form>/);
    assert.match(result, /<input type="text"/);
    assert.match(result, /<button>x<\/button>/);
    assert.doesNotMatch(result, /onfocus/i);
    assert.doesNotMatch(result, /onblur/i);
    assert.doesNotMatch(result, /onclick/i);
  });

  it("allows safe SVG animation elements if explicitly added (but they aren't, so should be removed)", () => {
    // <animate> is not in white‑list → should be removed completely
    const input = `<svg><animate attributeName="fill" values="red;blue" onbegin="alert(1)"/></svg>`;
    const result = getSanitizedHTML(input);
    // animate tag must not appear
    assert.doesNotMatch(result, /<animate/);
    // no onbegin
    assert.doesNotMatch(result, /onbegin/i);
  });

  it("preserves complex SVG sprite with multiple symbols after sanitization", () => {
    // Reusing earlier sprite to make sure nothing is lost due to tag removal
    const sprite = `<svg><symbol id="complex" viewBox="0 0 100 100"><circle cx="10" cy="10" r="5" fill="red"/><path d="M10,10 L50,50"/></symbol></svg>`;
    const result = getSanitizedHTML(sprite);
    assert.match(result, /id="complex"/);
    assert.match(result, /<circle cx="10" cy="10" r="5" fill="red"/);
    assert.match(result, /d="M10,10 L50,50"/);
  });
});