import { describe, expect, it } from "@effect/vitest";

import { ARTIFACT_PREVIEW_MARKUP_LIMIT, sanitizeArtifactPreviewMarkup } from "./artifact-preview";

describe("sanitizeArtifactPreviewMarkup", () => {
  describe("the shape it is written against", () => {
    it("keeps the structure and classes a smoke render produces", () => {
      const result = sanitizeArtifactPreviewMarkup(
        '<div class="rounded-lg border p-4"><h2 class="text-sm">Revenue</h2>' +
          '<div class="h-4 w-24 animate-pulse rounded bg-muted"></div></div>',
      );
      expect(result).toBe(
        '<div class="rounded-lg border p-4"><h2 class="text-sm">Revenue</h2>' +
          '<div class="h-4 w-24 animate-pulse rounded bg-muted"></div></div>',
      );
    });

    /**
     * The app-layout pattern the `artifact-style` skill teaches — a bounded flex
     * column with one scrolling region under a sticky header — is expressed
     * ENTIRELY in class names. A sanitizer that dropped or rewrote them would
     * leave the gallery card showing a layout the artifact does not have, so the
     * classes that carry the structure are pinned here.
     */
    it("keeps the app-layout classes a bounded artifact is built from", () => {
      const result = sanitizeArtifactPreviewMarkup(
        '<div class="flex h-full flex-col gap-4"><div class="shrink-0">Projects</div>' +
          '<div class="min-h-0 flex-1 overflow-auto"><table class="w-full table-fixed">' +
          '<thead class="sticky top-0 z-10 bg-background"><tr><th>Name</th></tr></thead>' +
          "</table></div></div>",
      );
      expect(result).toContain('class="flex h-full flex-col gap-4"');
      expect(result).toContain('class="min-h-0 flex-1 overflow-auto"');
      expect(result).toContain('class="sticky top-0 z-10 bg-background"');
    });

    it("keeps a chart's svg geometry", () => {
      const result = sanitizeArtifactPreviewMarkup(
        '<svg viewBox="0 0 100 40"><g><path d="M0,10 L20,5 L40,18" stroke="currentColor" ' +
          'stroke-width="1.5" fill="none"></path></g></svg>',
      );
      expect(result).toContain('viewbox="0 0 100 40"');
      expect(result).toContain('d="M0,10 L20,5 L40,18"');
      expect(result).toContain('stroke-width="1.5"');
    });

    it("keeps table composition", () => {
      const result = sanitizeArtifactPreviewMarkup(
        '<table><thead><tr><th colspan="2">Name</th></tr></thead>' +
          "<tbody><tr><td>Row</td></tr></tbody></table>",
      );
      expect(result).toBe(
        '<table><thead><tr><th colspan="2">Name</th></tr></thead>' +
          "<tbody><tr><td>Row</td></tr></tbody></table>",
      );
    });

    it("keeps React's HTML comment markers out without eating the content around them", () => {
      // `renderToReadableStream` emits `<!--$-->`/`<!--/$-->` around Suspense
      // boundaries. They are comments, so they go; their content stays.
      const result = sanitizeArtifactPreviewMarkup(
        "<div><!--$--><span>Loading</span><!--/$--></div>",
      );
      expect(result).toBe("<div><span>Loading</span></div>");
    });
  });

  describe("scripts", () => {
    it("removes a script element AND its body", () => {
      const result = sanitizeArtifactPreviewMarkup(
        '<div>before<script>fetch("https://evil.test")</script>after</div>',
      );
      expect(result).toBe("<div>beforeafter</div>");
      expect(result).not.toContain("fetch");
      expect(result).not.toContain("evil.test");
    });

    it("removes a style element AND its body", () => {
      const result = sanitizeArtifactPreviewMarkup(
        "<div><style>body{background:url(https://evil.test/beacon)}</style>ok</div>",
      );
      expect(result).toBe("<div>ok</div>");
      expect(result).not.toContain("evil.test");
    });

    it("does not let a nested tag close the skip early", () => {
      const result = sanitizeArtifactPreviewMarkup(
        "<div><script><div>still inside</div>payload</script>after</div>",
      );
      expect(result).toBe("<div>after</div>");
      expect(result).not.toContain("still inside");
      expect(result).not.toContain("payload");
    });

    it("removes noscript, template and object with their contents", () => {
      for (const tag of ["noscript", "template", "object"]) {
        const result = sanitizeArtifactPreviewMarkup(`<div><${tag}>hidden</${tag}>kept</div>`);
        expect(result).toBe("<div>kept</div>");
      }
    });
  });

  describe("event handlers", () => {
    it("strips every on* attribute", () => {
      const result = sanitizeArtifactPreviewMarkup(
        '<div onclick="steal()" onmouseover="steal()" onerror="steal()" class="p-2">x</div>',
      );
      expect(result).toBe('<div class="p-2">x</div>');
      expect(result).not.toContain("steal");
    });

    it("strips handlers whatever their casing", () => {
      const result = sanitizeArtifactPreviewMarkup('<div OnClick="steal()">x</div>');
      expect(result).not.toContain("steal");
    });

    it("strips a handler whose value contains a closing angle bracket", () => {
      const result = sanitizeArtifactPreviewMarkup(
        '<div onclick="if (a > b) steal()" class="keep">x</div>',
      );
      expect(result).toBe('<div class="keep">x</div>');
      expect(result).not.toContain("steal");
    });
  });

  describe("external references", () => {
    it("drops img entirely, so no request is ever made", () => {
      const result = sanitizeArtifactPreviewMarkup(
        '<div><img src="https://evil.test/beacon.png" />ok</div>',
      );
      expect(result).toBe("<div>ok</div>");
      expect(result).not.toContain("evil.test");
    });

    it("drops iframe and its content", () => {
      const result = sanitizeArtifactPreviewMarkup(
        '<div><iframe src="https://evil.test"></iframe>ok</div>',
      );
      expect(result).toBe("<div>ok</div>");
    });

    it("unwraps an anchor but keeps its text, dropping the href", () => {
      const result = sanitizeArtifactPreviewMarkup(
        '<div><a href="https://evil.test">Dashboard</a></div>',
      );
      expect(result).toBe("<div>Dashboard</div>");
      expect(result).not.toContain("evil.test");
    });

    it("drops a style declaration that can fetch", () => {
      const result = sanitizeArtifactPreviewMarkup(
        '<div style="background:url(https://evil.test/x)" class="keep">x</div>',
      );
      expect(result).toBe('<div class="keep">x</div>');
      expect(result).not.toContain("evil.test");
    });

    it("drops a url() smuggled into an allowed style property", () => {
      const result = sanitizeArtifactPreviewMarkup(
        '<div style="width:url(https://evil.test/x)" class="keep">x</div>',
      );
      expect(result).toBe('<div class="keep">x</div>');
      expect(result).not.toContain("evil.test");
    });

    it("drops position and transform, which would escape the card", () => {
      const result = sanitizeArtifactPreviewMarkup(
        '<div style="position:fixed;z-index:9999;width:50%">x</div>',
      );
      expect(result).toBe('<div style="width:50%">x</div>');
    });

    it("drops an svg url() paint that points anywhere but a local id", () => {
      const result = sanitizeArtifactPreviewMarkup(
        '<svg viewBox="0 0 10 10"><rect fill="url(https://evil.test/x)" width="10" /></svg>',
      );
      expect(result).toContain("<rect");
      expect(result).not.toContain("evil.test");
      expect(result).not.toContain("fill=");
    });

    it("drops link and meta", () => {
      const result = sanitizeArtifactPreviewMarkup(
        '<div><link rel="stylesheet" href="https://evil.test/x.css" /><meta charset="utf-8" />ok</div>',
      );
      expect(result).toBe("<div>ok</div>");
    });

    it("neutralises a javascript: scheme wherever it lands", () => {
      const result = sanitizeArtifactPreviewMarkup(
        '<div class="javascript:alert(1)"><span fill="javascript:alert(1)">x</span></div>',
      );
      expect(result).not.toContain("javascript:");
    });
  });

  describe("interactive elements", () => {
    it("unwraps a button, keeping its label", () => {
      const result = sanitizeArtifactPreviewMarkup("<div><button>Refresh</button></div>");
      expect(result).toBe("<div>Refresh</div>");
    });

    it("drops form controls", () => {
      const result = sanitizeArtifactPreviewMarkup(
        '<div><form action="https://evil.test"><input name="x" /></form>ok</div>',
      );
      expect(result).toBe("<div>ok</div>");
      expect(result).not.toContain("evil.test");
    });
  });

  describe("ids", () => {
    it("namespaces ids so a preview cannot collide with the host document", () => {
      const result = sanitizeArtifactPreviewMarkup('<div id="root">x</div>');
      expect(result).toBe('<div id="artifact-preview-root">x</div>');
    });

    it("rewrites local paint references in step with the ids", () => {
      const result = sanitizeArtifactPreviewMarkup(
        '<svg><defs><linearGradient id="grad"><stop offset="0" /></linearGradient></defs>' +
          '<rect fill="url(#grad)" width="10" height="10" /></svg>',
      );
      expect(result).toContain('id="artifact-preview-grad"');
      expect(result).toContain('fill="url(#artifact-preview-grad)"');
    });
  });

  describe("text and entities", () => {
    it("keeps escaped markup escaped, and does not let it re-enter as an element", () => {
      const result = sanitizeArtifactPreviewMarkup(
        "<div>&lt;script&gt;alert(1)&lt;/script&gt;</div>",
      );
      expect(result).toBe("<div>&lt;script&gt;alert(1)&lt;/script&gt;</div>");
      expect(result).not.toContain("<script");
    });

    it("is idempotent, so a re-sanitized preview is unchanged", () => {
      // The input is already-escaped HTML. Escaping `&` a second time would
      // turn `&amp;` into `&amp;amp;` and corrupt every Tailwind arbitrary
      // variant in the markup.
      const once = sanitizeArtifactPreviewMarkup("<div>a &lt; b &amp;&amp; c</div>");
      expect(once).toBe("<div>a &lt; b &amp;&amp; c</div>");
      expect(sanitizeArtifactPreviewMarkup(once ?? "")).toBe(once);
    });

    it("preserves a Tailwind arbitrary variant containing an ampersand", () => {
      // What React writes for `[&_.recharts-layer]:outline-hidden`.
      const result = sanitizeArtifactPreviewMarkup(
        '<div class="[&amp;_.recharts-layer]:outline-hidden">x</div>',
      );
      expect(result).toBe('<div class="[&amp;_.recharts-layer]:outline-hidden">x</div>');
      expect(result).not.toContain("&amp;amp;");
    });
  });

  describe("size", () => {
    it("returns null past the cap", () => {
      const huge = `<div>${"x".repeat(ARTIFACT_PREVIEW_MARKUP_LIMIT + 1)}</div>`;
      expect(sanitizeArtifactPreviewMarkup(huge)).toBeNull();
    });

    it("keeps markup just under the cap", () => {
      const body = "x".repeat(1000);
      expect(sanitizeArtifactPreviewMarkup(`<div>${body}</div>`)).toBe(`<div>${body}</div>`);
    });
  });

  describe("nothing usable", () => {
    it("returns null for empty input", () => {
      expect(sanitizeArtifactPreviewMarkup("")).toBeNull();
    });

    it("returns null when everything sanitized away", () => {
      expect(sanitizeArtifactPreviewMarkup("<script>alert(1)</script>")).toBeNull();
    });

    it("returns null for whitespace-only structure", () => {
      expect(sanitizeArtifactPreviewMarkup("<div>   </div>")).toBeNull();
    });

    it("keeps a purely geometric render that has no text at all", () => {
      // A chart-only artifact is a real preview even with zero text nodes.
      const result = sanitizeArtifactPreviewMarkup(
        '<div><svg viewBox="0 0 10 10"><rect width="10" height="10" /></svg></div>',
      );
      expect(result).not.toBeNull();
      expect(result).toContain("<svg");
    });
  });

  describe("malformed input", () => {
    it("does not hang or throw on an unterminated tag", () => {
      expect(() => sanitizeArtifactPreviewMarkup('<div class="x')).not.toThrow();
    });

    it("does not hang or throw on an unterminated comment", () => {
      expect(() => sanitizeArtifactPreviewMarkup("<div><!-- unterminated")).not.toThrow();
    });

    it("balances a self-closing non-void element", () => {
      expect(sanitizeArtifactPreviewMarkup("<div><span /></div>")).toBe("<div><span></span></div>");
    });
  });
});