// Canvas-2D call-text renderer, ported faithfully from the user's two
// reference generators ("glossy bulle" / XV9Q and "western 3D" / HS0ZLE).
// SVG filters can only approximate these looks; the exact technique is
// canvas — inflated glyphs (fill + stroke to dilate), contour bands via
// boolean compositing, a candy gloss that hugs the outline, an orange inner
// shadow, and organic multi-layer grunge.
//
// renderTextFx() runs the recipe offscreen, trims the transparent padding,
// and returns a PNG data URL + its size in logical (card) pixels. CardPreview
// embeds that as an <image> so the same output drives the editor preview,
// thumbnails and the final e-mail rasterization.

export type TextFxKind = 'glossy' | 'western';

export interface TextFxParams {
  kind: TextFxKind;
  text: string;
  weight: string; // canvas font weight, e.g. "800" or "400"
  family: string; // canvas font family, e.g. '"Baloo 2", sans-serif'
  size: number; // font size in card px
  space: number; // letter spacing in px
  cTop: string;
  cMid: string;
  cBot: string;
  cDark: string; // dark edge / outline
  cOuter?: string; // silver rim (glossy only)
  // glossy
  plump?: number; // 0..0.06 — inflation as a fraction of size
  edge?: number; // 0..1 — dark edge weight
  outerw?: number; // 0..1 — silver rim weight
  gloss?: number; // 0..1 — gloss intensity
  glossH?: number; // 0..1 — gloss height
  glossI?: number; // 0..0.14 — gloss inset
  innerB?: number; // 0..1 — bottom inner shadow
  // western
  depth?: number; // 3D extrusion depth in px
  angle?: number; // extrusion direction in radians
  slant?: number; // shear, -0.4..0.4
  grunge?: number; // 0..1 — distress amount
  bevel?: number; // 0..1 — top-edge light
  seed?: number;
}

export interface TextFxResult {
  url: string; // PNG data URL of the trimmed text
  w: number; // logical (card-px) width
  h: number; // logical (card-px) height
}

const SS = 2; // supersample for crisp downscaling

function supportsFilter(c: CanvasRenderingContext2D) {
  return typeof c.filter === 'string';
}
function shade(hex: string, pct: number) {
  const n = parseInt(hex.slice(1), 16);
  const f = (v: number) => Math.max(0, Math.min(255, Math.round(v + (255 * pct) / 100)));
  return 'rgb(' + f(n >> 16) + ',' + f((n >> 8) & 255) + ',' + f(n & 255) + ')';
}
function deepen(hex: string) {
  const n = parseInt(hex.slice(1), 16);
  return 'rgb(' + Math.round((n >> 16) * 0.96) + ',' + Math.round(((n >> 8) & 255) * 0.62) + ',' + Math.round((n & 255) * 0.25) + ')';
}
function rustOf(hex: string) {
  const n = parseInt(hex.slice(1), 16);
  const r = Math.min(255, Math.round((n >> 16) * 0.72));
  const g = Math.round(((n >> 8) & 255) * 0.49);
  const b = Math.min(255, Math.round((n & 255) * 0.3) + 10);
  return 'rgb(' + r + ',' + g + ',' + b + ')';
}
function mulberry32(seed: number) {
  return function () {
    seed |= 0;
    seed = (seed + 0x6d2b79f5) | 0;
    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}
function hashStr(s: string) {
  let h = 2166136261;
  for (let i = 0; i < s.length; i++) {
    h ^= s.charCodeAt(i);
    h = Math.imul(h, 16777619);
  }
  return h >>> 0;
}

// ── glossy bubble (XV9Q) ────────────────────────────────────────────────
function renderGlossy(p: Required<Pick<TextFxParams, 'text' | 'weight' | 'family' | 'size' | 'space' | 'plump' | 'edge' | 'outerw' | 'gloss' | 'glossH' | 'glossI' | 'innerB' | 'cTop' | 'cMid' | 'cBot' | 'cDark' | 'cOuter'>>, scale: number): HTMLCanvasElement {
  const probe = document.createElement('canvas').getContext('2d')!;
  const font = p.weight + ' ' + p.size + 'px ' + p.family;
  probe.letterSpacing = p.space + 'px';
  probe.font = font;
  const m = probe.measureText(p.text);
  const asc = m.actualBoundingBoxAscent, desc = m.actualBoundingBoxDescent;
  const capH = asc + desc;
  const plumpPx = p.size * p.plump;
  const edgeW = p.size * 0.1 * p.edge;
  const outerW = edgeW + p.size * 0.22 * p.outerw + 2 * plumpPx;
  const pad = Math.ceil(outerW / 2 + p.size * 0.12);
  const w = Math.ceil(m.width + pad * 2);
  const h = Math.ceil(capH + pad * 2);

  const canvas = document.createElement('canvas');
  canvas.width = w * scale;
  canvas.height = h * scale;
  const c = canvas.getContext('2d')!;

  const x = pad, y = pad + asc;
  const top = y - asc - plumpPx, bot = y + desc + plumpPx;

  const mk = () => {
    const k = document.createElement('canvas');
    k.width = canvas.width;
    k.height = canvas.height;
    return k;
  };
  const setT = (cx: CanvasRenderingContext2D) => {
    cx.setTransform(scale, 0, 0, scale, 0, 0);
    cx.letterSpacing = p.space + 'px';
    cx.font = font;
    cx.textBaseline = 'alphabetic';
    cx.lineJoin = 'round';
    cx.lineCap = 'round';
  };
  const glyph = (delta: number, dx?: number, dy?: number) => {
    const k = mk();
    const g = k.getContext('2d')!;
    setT(g);
    g.fillStyle = '#fff';
    g.strokeStyle = '#fff';
    g.fillText(p.text, x + (dx || 0), y + (dy || 0));
    if (delta > 0.1) {
      g.lineWidth = delta * 2;
      g.strokeText(p.text, x + (dx || 0), y + (dy || 0));
    } else if (delta < -0.1) {
      g.globalCompositeOperation = 'destination-out';
      g.lineWidth = -delta * 2;
      g.strokeText(p.text, x + (dx || 0), y + (dy || 0));
    }
    return k;
  };
  const clipTo = (k: HTMLCanvasElement, mask: HTMLCanvasElement) => {
    const g = k.getContext('2d')!;
    g.save();
    g.setTransform(1, 0, 0, 1, 0, 0);
    g.globalCompositeOperation = 'destination-in';
    g.drawImage(mask, 0, 0);
    g.restore();
    return k;
  };
  const contourBand = (shiftX: number, shiftY: number, insetPx: number) => {
    const k = glyph(plumpPx, 0, 0);
    const g = k.getContext('2d')!;
    g.save();
    g.setTransform(1, 0, 0, 1, 0, 0);
    g.globalCompositeOperation = 'destination-out';
    g.drawImage(glyph(plumpPx, shiftX, shiftY), 0, 0);
    g.restore();
    return clipTo(k, glyph(plumpPx - insetPx, 0, 0));
  };
  const vRamp = (k: HTMLCanvasElement, f0: number, f1: number, keepTop: boolean) => {
    const g = k.getContext('2d')!;
    g.save();
    g.setTransform(scale, 0, 0, scale, 0, 0);
    g.globalCompositeOperation = 'destination-in';
    const gr = g.createLinearGradient(0, top, 0, bot);
    const a1 = keepTop ? 1 : 0, a2 = keepTop ? 0 : 1;
    gr.addColorStop(0, 'rgba(255,255,255,' + a1 + ')');
    gr.addColorStop(Math.max(0.001, Math.min(0.998, f0)), 'rgba(255,255,255,' + a1 + ')');
    gr.addColorStop(Math.max(0.002, Math.min(0.999, f1)), 'rgba(255,255,255,' + a2 + ')');
    gr.addColorStop(1, 'rgba(255,255,255,' + a2 + ')');
    g.fillStyle = gr;
    g.fillRect(0, 0, k.width / scale, k.height / scale);
    g.restore();
    return k;
  };
  const blurred = (src: HTMLCanvasElement, px: number) => {
    const k = mk();
    const g = k.getContext('2d')!;
    if (supportsFilter(g) && px > 0.3) {
      g.filter = 'blur(' + (px * scale).toFixed(2) + 'px)';
      g.drawImage(src, 0, 0);
      g.filter = 'none';
    } else {
      g.drawImage(src, 0, 0);
    }
    return k;
  };
  const tint = (k: HTMLCanvasElement, color: string, alpha: number) => {
    const g = k.getContext('2d')!;
    g.save();
    g.setTransform(1, 0, 0, 1, 0, 0);
    g.globalCompositeOperation = 'source-in';
    g.fillStyle = color;
    g.fillRect(0, 0, k.width, k.height);
    g.restore();
    if (alpha < 1) {
      const k2 = mk();
      const g2 = k2.getContext('2d')!;
      g2.globalAlpha = alpha;
      g2.drawImage(k, 0, 0);
      return k2;
    }
    return k;
  };
  const paintText = (cx: CanvasRenderingContext2D, paint: string | CanvasGradient) => {
    cx.fillStyle = paint;
    cx.fillText(p.text, x, y);
    if (plumpPx > 0.1) {
      cx.strokeStyle = paint;
      cx.lineWidth = plumpPx * 2;
      cx.strokeText(p.text, x, y);
    }
  };

  c.setTransform(1, 0, 0, 1, 0, 0);
  c.clearRect(0, 0, canvas.width, canvas.height);
  setT(c);

  // drop shadow
  c.save();
  c.shadowColor = 'rgba(10,15,25,0.40)';
  c.shadowBlur = p.size * 0.045 * scale;
  c.shadowOffsetY = p.size * 0.03 * scale;
  c.lineWidth = Math.max(outerW, edgeW + 2 * plumpPx, 1);
  c.strokeStyle = 'rgba(10,15,25,0.40)';
  c.strokeText(p.text, x, y);
  c.restore();

  const face = mk();
  const f = face.getContext('2d')!;
  setT(f);

  if (p.outerw > 0) {
    const gOuter = f.createLinearGradient(0, top - outerW / 2, 0, bot + outerW / 2);
    gOuter.addColorStop(0, '#ffffff');
    gOuter.addColorStop(0.45, p.cOuter);
    gOuter.addColorStop(1, shade(p.cOuter, -22));
    f.lineWidth = outerW;
    f.strokeStyle = gOuter;
    f.strokeText(p.text, x, y);
  }
  if (p.edge > 0) {
    f.lineWidth = edgeW + 2 * plumpPx;
    f.strokeStyle = p.cDark;
    f.strokeText(p.text, x, y);
  }
  const gBody = f.createLinearGradient(0, top, 0, bot);
  gBody.addColorStop(0, p.cTop);
  gBody.addColorStop(0.55, p.cMid);
  gBody.addColorStop(1, p.cBot);
  paintText(f, gBody);

  if (p.innerB > 0) {
    let band = contourBand(0, -0.22 * capH, p.size * 0.03);
    band = blurred(band, p.size * 0.04);
    band = clipTo(band, glyph(plumpPx, 0, 0));
    band = vRamp(band, 0.45, 0.8, false);
    band = tint(band, deepen(p.cBot), 0.7);
    f.save();
    f.setTransform(1, 0, 0, 1, 0, 0);
    f.globalCompositeOperation = 'source-atop';
    f.globalAlpha = Math.min(1, p.innerB);
    f.drawImage(band, 0, 0);
    f.restore();
  }

  if (p.gloss > 0) {
    const shiftY = p.glossH * capH;
    const shiftX = 0.12 * shiftY;
    const inset = p.size * p.glossI;
    const clip0 = p.glossH * 0.6, clip1 = Math.min(0.95, p.glossH * 1.4);
    let band = contourBand(shiftX, shiftY, inset);
    band = vRamp(band, clip0, clip1, true);
    let halo = blurred(band, p.size * 0.014);
    halo = clipTo(halo, glyph(plumpPx - inset * 0.5, 0, 0));
    let core = mk();
    core.getContext('2d')!.drawImage(band, 0, 0);
    core = clipTo(core, glyph(plumpPx - inset * 1.35, 0, 0));
    core = blurred(core, p.size * 0.007);
    f.save();
    f.setTransform(1, 0, 0, 1, 0, 0);
    f.globalCompositeOperation = 'source-atop';
    f.globalAlpha = Math.min(1, 0.85 * p.gloss);
    f.drawImage(halo, 0, 0);
    f.globalAlpha = Math.min(1, 1.15 * p.gloss);
    f.drawImage(core, 0, 0);
    f.restore();
  }

  c.setTransform(1, 0, 0, 1, 0, 0);
  c.drawImage(face, 0, 0);
  return canvas;
}

// ── western 3D (HS0ZLE) ─────────────────────────────────────────────────
function noiseMask(W: number, H: number, featurePx: number, thresh: number, seed: number, softenPx: number, stretchY = 1): HTMLCanvasElement {
  const sw = Math.max(2, Math.round(W / featurePx));
  const sh = Math.max(2, Math.round(H / (featurePx * stretchY)));
  const small = document.createElement('canvas');
  small.width = sw;
  small.height = sh;
  const sg = small.getContext('2d')!;
  const id = sg.createImageData(sw, sh);
  const rnd = mulberry32(seed);
  for (let i = 0; i < sw * sh; i++) {
    const v = (rnd() * 255) | 0;
    id.data[i * 4] = v;
    id.data[i * 4 + 1] = v;
    id.data[i * 4 + 2] = v;
    id.data[i * 4 + 3] = 255;
  }
  sg.putImageData(id, 0, 0);
  const big = document.createElement('canvas');
  big.width = W;
  big.height = H;
  const bg = big.getContext('2d')!;
  bg.imageSmoothingEnabled = true;
  bg.imageSmoothingQuality = 'high';
  if (supportsFilter(bg)) bg.filter = 'blur(' + (featurePx * 0.35).toFixed(1) + 'px)';
  bg.drawImage(small, 0, 0, W, H);
  if (supportsFilter(bg)) bg.filter = 'none';
  const src = bg.getImageData(0, 0, W, H);
  const out = bg.createImageData(W, H);
  const k = 1 / Math.max(1e-6, (1 - thresh) * 0.35);
  for (let i = 0; i < W * H; i++) {
    const v = src.data[i * 4] / 255;
    let a = (v - thresh) * k;
    a = a < 0 ? 0 : a > 1 ? 1 : a;
    out.data[i * 4] = 255;
    out.data[i * 4 + 1] = 255;
    out.data[i * 4 + 2] = 255;
    out.data[i * 4 + 3] = (a * 255) | 0;
  }
  const mask = document.createElement('canvas');
  mask.width = W;
  mask.height = H;
  const mg = mask.getContext('2d')!;
  if (supportsFilter(mg) && softenPx > 0.3) mg.filter = 'blur(' + softenPx.toFixed(1) + 'px)';
  const tmp = document.createElement('canvas');
  tmp.width = W;
  tmp.height = H;
  tmp.getContext('2d')!.putImageData(out, 0, 0);
  mg.drawImage(tmp, 0, 0);
  if (supportsFilter(mg)) mg.filter = 'none';
  return mask;
}

function renderWestern(p: Required<Pick<TextFxParams, 'text' | 'weight' | 'family' | 'size' | 'space' | 'depth' | 'angle' | 'slant' | 'grunge' | 'bevel' | 'seed' | 'cTop' | 'cMid' | 'cBot' | 'cDark'>>, scale: number): HTMLCanvasElement {
  const probe = document.createElement('canvas').getContext('2d')!;
  const font = p.weight + ' ' + p.size + 'px ' + p.family;
  probe.letterSpacing = p.space + 'px';
  probe.font = font;
  const m = probe.measureText(p.text);
  const asc = m.actualBoundingBoxAscent, desc = m.actualBoundingBoxDescent;
  const capH = asc + desc;
  const edgeW = p.size * 0.07;
  const dx = Math.cos(p.angle) * p.depth, dy = Math.sin(p.angle) * p.depth;
  const slantPad = Math.abs(p.slant) * capH;
  const pad = Math.ceil(edgeW + p.size * 0.1 + p.depth + slantPad);
  const w = Math.ceil(m.width + pad * 2);
  const h = Math.ceil(capH + pad * 2);

  const canvas = document.createElement('canvas');
  canvas.width = w * scale;
  canvas.height = h * scale;
  const c = canvas.getContext('2d')!;

  const x = pad - Math.min(0, dx), y = pad + asc - Math.min(0, dy);
  const top = y - asc, bot = y + desc;

  const mk = () => {
    const k = document.createElement('canvas');
    k.width = canvas.width;
    k.height = canvas.height;
    return k;
  };
  const setT = (cx: CanvasRenderingContext2D) => {
    cx.setTransform(scale, 0, 0, scale, 0, 0);
    cx.transform(1, 0, -p.slant, 1, p.slant * y, 0);
    cx.letterSpacing = p.space + 'px';
    cx.font = font;
    cx.textBaseline = 'alphabetic';
    cx.lineJoin = 'round';
    cx.lineCap = 'butt'; // their source set 'miter' here, which browsers ignore on lineCap
  };
  const glyph = (dxx?: number, dyy?: number) => {
    const k = mk();
    const g = k.getContext('2d')!;
    setT(g);
    g.fillStyle = '#fff';
    g.fillText(p.text, x + (dxx || 0), y + (dyy || 0));
    return k;
  };
  const clipTo = (k: HTMLCanvasElement, mask: HTMLCanvasElement) => {
    const g = k.getContext('2d')!;
    g.save();
    g.setTransform(1, 0, 0, 1, 0, 0);
    g.globalCompositeOperation = 'destination-in';
    g.drawImage(mask, 0, 0);
    g.restore();
    return k;
  };
  const blurred = (src: HTMLCanvasElement, px: number) => {
    const k = mk();
    const g = k.getContext('2d')!;
    if (supportsFilter(g) && px > 0.3) {
      g.filter = 'blur(' + (px * scale).toFixed(2) + 'px)';
      g.drawImage(src, 0, 0);
      g.filter = 'none';
    } else {
      g.drawImage(src, 0, 0);
    }
    return k;
  };
  const tintAlpha = (k: HTMLCanvasElement, color: string, alpha: number) => {
    const g = k.getContext('2d')!;
    g.save();
    g.setTransform(1, 0, 0, 1, 0, 0);
    g.globalCompositeOperation = 'source-in';
    g.fillStyle = color;
    g.fillRect(0, 0, k.width, k.height);
    g.restore();
    const k2 = mk();
    const g2 = k2.getContext('2d')!;
    g2.globalAlpha = alpha;
    g2.drawImage(k, 0, 0);
    return k2;
  };

  c.setTransform(1, 0, 0, 1, 0, 0);
  c.clearRect(0, 0, canvas.width, canvas.height);
  setT(c);

  // drop shadow
  c.save();
  c.shadowColor = 'rgba(15,8,4,0.50)';
  c.shadowBlur = p.size * 0.035 * scale;
  c.shadowOffsetX = p.size * 0.02 * scale;
  c.shadowOffsetY = p.size * 0.035 * scale;
  c.lineWidth = edgeW;
  c.strokeStyle = 'rgba(15,8,4,0.50)';
  c.fillStyle = 'rgba(15,8,4,0.50)';
  c.strokeText(p.text, x, y);
  c.fillText(p.text, x, y);
  c.restore();

  // 3D extrusion
  if (p.depth > 0) {
    const deepCol = shade(p.cDark, -4);
    c.lineWidth = edgeW;
    const steps = Math.ceil(p.depth);
    for (let i = steps; i >= 1; i--) {
      const t = i / steps;
      c.strokeStyle = deepCol;
      c.fillStyle = deepCol;
      c.strokeText(p.text, x + dx * t, y + dy * t);
      c.fillText(p.text, x + dx * t, y + dy * t);
    }
  }

  const face = mk();
  const f = face.getContext('2d')!;
  setT(f);

  f.lineWidth = edgeW;
  f.strokeStyle = p.cDark;
  f.strokeText(p.text, x, y);

  const gBody = f.createLinearGradient(0, top, 0, bot);
  gBody.addColorStop(0, p.cTop);
  gBody.addColorStop(0.5, p.cMid);
  gBody.addColorStop(1, p.cBot);
  f.fillStyle = gBody;
  f.fillText(p.text, x, y);

  const M = glyph(0, 0);

  if (p.bevel > 0) {
    let band = glyph(0, 0);
    const g = band.getContext('2d')!;
    g.save();
    g.setTransform(1, 0, 0, 1, 0, 0);
    g.globalCompositeOperation = 'destination-out';
    g.drawImage(glyph(0.02 * p.size, 0.06 * capH), 0, 0);
    g.restore();
    band = blurred(band, p.size * 0.008);
    band = clipTo(band, M);
    band = tintAlpha(band, '#ffeba8', p.bevel);
    f.save();
    f.setTransform(1, 0, 0, 1, 0, 0);
    f.globalCompositeOperation = 'source-atop';
    f.drawImage(band, 0, 0);
    f.restore();
  }

  if (p.grunge > 0) {
    const W = canvas.width, H = canvas.height;
    const S = p.size * scale;
    const seed = (hashStr(p.text + '|' + p.family) ^ (p.seed * 2654435761)) >>> 0;
    const rust = rustOf(p.cBot);
    const layers = [
      { mask: noiseMask(W, H, 0.022 * S, 0.72, seed, 0.6 * scale), color: rust, a: 0.8 },
      { mask: noiseMask(W, H, 0.011 * S, 0.7, seed + 11, 0.5 * scale, 4.0), color: rust, a: 0.6 },
      { mask: noiseMask(W, H, 0.0066 * S, 0.74, seed + 7, 0.3 * scale), color: rust, a: 0.75 },
      { mask: noiseMask(W, H, 0.0154 * S, 0.86, seed + 3, 0.4 * scale), color: p.cDark, a: 0.9 },
    ];
    f.save();
    f.setTransform(1, 0, 0, 1, 0, 0);
    f.globalCompositeOperation = 'source-atop';
    for (const L of layers) {
      let k = clipTo(L.mask, M);
      k = tintAlpha(k, L.color, L.a * p.grunge);
      f.drawImage(k, 0, 0);
    }
    f.restore();
  }

  c.setTransform(1, 0, 0, 1, 0, 0);
  c.drawImage(face, 0, 0);
  return canvas;
}

// Trim transparent padding so the element's x/y maps to the visible glyphs.
function trim(canvas: HTMLCanvasElement): { canvas: HTMLCanvasElement; w: number; h: number } {
  const ctx = canvas.getContext('2d')!;
  const W = canvas.width, H = canvas.height;
  const data = ctx.getImageData(0, 0, W, H).data;
  let minX = W, minY = H, maxX = -1, maxY = -1;
  for (let y = 0; y < H; y++) {
    for (let x = 0; x < W; x++) {
      if (data[(y * W + x) * 4 + 3] > 8) {
        if (x < minX) minX = x;
        if (x > maxX) maxX = x;
        if (y < minY) minY = y;
        if (y > maxY) maxY = y;
      }
    }
  }
  if (maxX < minX) return { canvas, w: W, h: H };
  const cw = maxX - minX + 1, ch = maxY - minY + 1;
  const out = document.createElement('canvas');
  out.width = cw;
  out.height = ch;
  out.getContext('2d')!.drawImage(canvas, minX, minY, cw, ch, 0, 0, cw, ch);
  return { canvas: out, w: cw, h: ch };
}

export function renderTextFx(p: TextFxParams): TextFxResult {
  let raw: HTMLCanvasElement;
  if (p.kind === 'western') {
    raw = renderWestern(
      {
        text: p.text, weight: p.weight, family: p.family, size: p.size, space: p.space,
        depth: p.depth ?? p.size * 0.06, angle: p.angle ?? (112 * Math.PI) / 180,
        slant: p.slant ?? 0.08, grunge: p.grunge ?? 0.8, bevel: p.bevel ?? 0.45, seed: p.seed ?? 7,
        cTop: p.cTop, cMid: p.cMid, cBot: p.cBot, cDark: p.cDark,
      },
      SS,
    );
  } else {
    raw = renderGlossy(
      {
        text: p.text, weight: p.weight, family: p.family, size: p.size, space: p.space,
        plump: p.plump ?? 0.03, edge: p.edge ?? 0.5, outerw: p.outerw ?? 0.45,
        gloss: p.gloss ?? 0.85, glossH: p.glossH ?? 0.45, glossI: p.glossI ?? 0.08, innerB: p.innerB ?? 0.7,
        cTop: p.cTop, cMid: p.cMid, cBot: p.cBot, cDark: p.cDark, cOuter: p.cOuter ?? '#ced3db',
      },
      SS,
    );
  }
  const t = trim(raw);
  return { url: t.canvas.toDataURL('image/png'), w: t.w / SS, h: t.h / SS };
}