/**
 * What a drawing is made of: the ask Claude is given, the reply read back
 * into SVGs, and the wall every SVG passes before it is kept. Pure
 * functions, no I/O — `src/draw.ts` runs Claude, `src/actions.ts` keeps
 * the rows.
 *
 * Every SVG is drawn in three placeholder colours, INK, GLOW and PAPER. A
 * palette swaps ink and glow for its own two and paper for its ground, so
 * one drawing reads in any theme; tone between them comes from opacity and
 * local gradients, never a fourth colour.
 * The colours themselves are data: `design/palettes.json`.
 */

import colours from "../design/palettes.json";

export const KINDS = {
  mark: "logo mark",
  icon: "app icon",
  badge: "badge",
  spot: "spot illustration",
} as const;
export type Kind = keyof typeof KINDS;
export const isKind = (value: unknown): value is Kind =>
  typeof value === "string" && Object.hasOwn(KINDS, value);

/** The placeholder colours every SVG is drawn in. */
export const INK: string = colours.placeholder.ink;
export const GLOW: string = colours.placeholder.glow;
/** The ground's colour, for highlights and cut-outs drawn on top. */
export const PAPER: string = colours.placeholder.paper;

/** Palettes a drawing can be shown and saved in. */
export const PALETTES: Readonly<
  Record<string, { label: string; ink: string; glow: string; ground: string }>
> = colours.palettes;
export type Palette = keyof typeof colours.palettes;
export const isPalette = (value: unknown): value is Palette =>
  typeof value === "string" && Object.hasOwn(PALETTES, value);

export const COUNT = 4;
export const PROMPT_MAX = 400;
/** The most a kept SVG may weigh, in characters. */
export const SVG_MAX = 48_000;

/** What Claude is asked, for one prompt. */
export function ask(prompt: string, kind: Kind): string {
  return `You are a senior identity designer who crafts polished, detailed vector marks — the finish of a studio logo, not clip art. Draw ${COUNT} distinct ${KINDS[kind]} concepts for this brief:

${prompt}

Rules for every SVG:
- Root element exactly: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
- First child: <title> with a two-to-four word name for the concept.
- Colours: ONLY ${INK} (main ink), ${GLOW} (accent glow) and ${PAPER} (paper — the background colour, for highlights, cut-outs and inner detail drawn on top), plus "none". Write them as hex in fill, stroke and stop-color. No other colours, no colour functions, no CSS, no <style>.
- Depth and tone: build shading with linearGradient/radialGradient inside <defs> whose stops use only those colours (fade with stop-opacity), and with fill-opacity/stroke-opacity. Reference them as fill="url(#id)" or stroke="url(#id)"; clipPath works the same way with clip-path="url(#id)". Give every id a short prefix unique to the concept (a1, b1, …).
- Allowed elements: svg, title, defs, g, path, circle, ellipse, rect, line, polyline, polygon, linearGradient, radialGradient, stop, clipPath. No text, no images, no filters, no masks, no patterns, no use, no scripts, no links.
- Craft: layer several shapes — a confident silhouette, then secondary forms, highlights in paper, a shadow or inner bevel in a darker tone, and fine detail lines in varied stroke weights. Use precise curves (cubic béziers), consistent corner radii and optical balance. Aim for roughly 15–60 shapes, not 3.
- It must still read as one clear shape at 32 pixels: the detail rewards a close look, it never muddies the silhouette. Stay inside the viewBox with a margin of about 12.
- Make the ${COUNT} concepts genuinely different ideas, not variations of one.

Reply with exactly ${COUNT} fenced code blocks marked svg, one per concept, and nothing else.`;
}

/** The SVGs in Claude's reply: each fenced block, through the wall; the ones that do not pass are dropped. */
export function parseReply(reply: string): string[] {
  const blocks = [...reply.matchAll(/```(?:svg|xml)?\s*\n([\s\S]*?)```/g)].map(
    (m) => m[1] ?? "",
  );
  const found =
    blocks.length > 0 ? blocks : [...reply.matchAll(/<svg[\s\S]*?<\/svg>/g)].map((m) => m[0]);
  return found
    .map((svg) => sanitize(svg))
    .filter((svg): svg is string => svg !== undefined)
    .slice(0, COUNT);
}

// The wall. An SVG is rebuilt from what is allowed, never filtered from what is
// not: an element or attribute missing from these lists does not survive, so a
// trick nobody thought of has nothing to ride in on.
const ELEMENTS = new Set([
  "svg", "g", "path", "circle", "ellipse", "rect", "line", "polyline", "polygon", "title",
  "defs", "linearGradient", "radialGradient", "stop", "clipPath",
]);
const ATTRIBUTES = new Set([
  "viewBox", "d", "cx", "cy", "r", "rx", "ry", "x", "y", "x1", "y1", "x2", "y2",
  "width", "height", "points", "fill", "stroke", "stroke-width", "stroke-linecap",
  "stroke-linejoin", "stroke-miterlimit", "stroke-dasharray", "stroke-dashoffset",
  "fill-rule", "clip-rule", "opacity", "fill-opacity", "stroke-opacity", "transform",
  "id", "offset", "stop-color", "stop-opacity", "gradientUnits", "gradientTransform",
  "spreadMethod", "fx", "fy", "fr", "clip-path", "clipPathUnits",
]);
/** Attributes that may point at a paint or clip in the same SVG — `url(#id)` and nothing else. */
const REFERENCES = new Set(["fill", "stroke", "clip-path"]);
const LOCAL = /^url\(#[A-Za-z][\w-]*\)$/;
const TRANSFORM = /^(\s*(matrix|translate|scale|rotate|skewX|skewY)\([-\d.,\s]*\)\s*)+$/;
/** A value: numbers, path data, a colour keyword or hex — never markup; a function only as a transform or a local url. */
const VALUE = /^[-\w\s.,#%()]*$/;

/** Text as text: a bare & is escaped, an entity already written stays one (entities are inert). */
const escapeText = (s: string): string =>
  s
    .replace(/&(?!(?:amp|lt|gt|quot|apos|#\d+|#x[0-9a-f]+);)/gi, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;");

/** The SVG rebuilt from what is allowed, or undefined when there is no SVG worth keeping. */
export function sanitize(input: string): string | undefined {
  if (input.length > SVG_MAX * 2) return undefined;
  // Comments, CDATA, doctypes and processing instructions go before reading tags.
  const source = input
    .replace(/<!--[\s\S]*?-->/g, "")
    .replace(/<!\[CDATA\[[\s\S]*?\]\]>/g, "")
    .replace(/<![^>]*>/g, "")
    .replace(/<\?[\s\S]*?\?>/g, "");
  const out: string[] = [];
  const open: string[] = [];
  let skipping = 0; // depth inside an element that is dropped with its content
  let rootSeen = false;
  const tag = /<(\/?)([A-Za-z][\w:-]*)((?:\s+[^\s=>\/]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+))?)*)\s*(\/?)>|([^<]+)|</g;
  for (const m of source.matchAll(tag)) {
    const [, closing, rawName, attrs = "", selfClosing, text] = m;
    if (text !== undefined || rawName === undefined) {
      // Text is kept only inside a title; anything else between tags is whitespace or noise.
      if (skipping === 0 && open.at(-1) === "title" && text !== undefined)
        out.push(escapeText(text));
      continue;
    }
    const name = rawName;
    if (closing === "/") {
      if (skipping > 0) {
        skipping--;
        continue;
      }
      if (open.at(-1) === name) {
        open.pop();
        out.push(`</${name}>`);
        if (name === "svg" && open.length === 0) break;
      }
      continue;
    }
    const allowed = ELEMENTS.has(name) && (name === "svg" ? !rootSeen : rootSeen && open.length > 0);
    if (!allowed || skipping > 0) {
      if (selfClosing !== "/") skipping++;
      continue;
    }
    if (name === "svg") rootSeen = true;
    const kept: string[] = name === "svg" ? [`xmlns="http://www.w3.org/2000/svg"`] : [];
    for (const a of attrs.matchAll(/([^\s=>\/]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/g)) {
      const key = a[1] ?? "";
      const value = a[2] ?? a[3] ?? a[4] ?? "";
      if (!ATTRIBUTES.has(key) || !VALUE.test(value) || value.length > 16_000) continue;
      const transform = key === "transform" || key === "gradientTransform";
      if (/\(/.test(value) && !(transform && TRANSFORM.test(value)) && !(REFERENCES.has(key) && LOCAL.test(value))) continue;
      if (key === "id" && !/^[A-Za-z][\w-]*$/.test(value)) continue;
      kept.push(`${key}="${value}"`);
    }
    const head = `<${name}${kept.length ? ` ${kept.join(" ")}` : ""}`;
    if (selfClosing === "/") out.push(`${head}/>`);
    else {
      out.push(`${head}>`);
      open.push(name);
    }
  }
  if (!rootSeen) return undefined;
  while (open.length > 0) out.push(`</${open.pop()}>`);
  const svg = out.join("");
  // A drawing has something in it besides its name.
  if (!/<(path|circle|ellipse|rect|line|polyline|polygon)\b/.test(svg)) return undefined;
  if (!/viewBox=/.test(svg)) return undefined;
  return svg.length <= SVG_MAX ? svg : undefined;
}

/** The concept's name, from its <title>. */
export function nameOf(svg: string): string {
  const title = /<title>([^<]*)<\/title>/.exec(svg)?.[1]?.trim();
  return title === undefined || title === "" ? "Untitled" : title.replace(/&amp;/g, "&");
}

/** The SVG in a palette: INK and GLOW swapped for the palette's two, PAPER for its ground. */
export function inPalette(svg: string, palette: Palette): string {
  const { ink, glow, ground } = PALETTES[palette]!;
  // Every placeholder is marked before any is swapped, so a palette whose colour is another placeholder is not swapped twice.
  return svg
    .replace(new RegExp(INK, "gi"), "\u0000ink")
    .replace(new RegExp(GLOW, "gi"), "\u0000glow")
    .replace(new RegExp(PAPER, "gi"), "\u0000paper")
    .replace(/\u0000ink/g, ink)
    .replace(/\u0000glow/g, glow)
    .replace(/\u0000paper/g, ground);
}