/**
 * 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 two placeholder colours, INK and GLOW. A palette is
 * those two swapped for two others, here for a download and in
 * `static/glyph.js` for the preview, so one drawing reads in any theme.
 * 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;

/** 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 = 16_000;

/** What Claude is asked, for one prompt. */
export function ask(prompt: string, kind: Kind): string {
  return `You are a sharp vector designer. 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 64 64">
- First child: <title> with a two-to-four word name for the concept.
- Use ONLY these colours, written as hex in fill/stroke attributes: ${INK} (main ink) and ${GLOW} (accent glow), plus "none". No other colours, no gradients, no opacity tricks, no CSS, no <style>.
- Allowed elements: g, path, circle, ellipse, rect, line, polyline, polygon, title. No text, no images, no filters, no scripts, no links.
- Bold and simple: it must still read at 24 pixels. Round line caps and joins. Stay inside the viewBox with a little margin.
- 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",
]);
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",
]);
/** A value: numbers, path data, a colour keyword or hex — never a url, a function but a transform's, or markup. */
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 > 4000) continue;
      if (/\(/.test(value) && key !== "transform") continue;
      if (key === "transform" && !/^(\s*(matrix|translate|scale|rotate|skewX|skewY)\([-\d.,\s]*\)\s*)+$/.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. */
export function inPalette(svg: string, palette: Palette): string {
  const { ink, glow } = PALETTES[palette]!;
  return svg
    .replace(new RegExp(INK, "gi"), "\u0000ink")
    .replace(new RegExp(GLOW, "gi"), glow)
    .replace(/\u0000ink/g, ink);
}