// Generative finance thumbnails (SVG). Stand-ins for real Ko-fi cover images.
// <Thumb thumb={post.thumb} seed={post.id} /> — deterministic per seed.

function mtRng(seedStr) {
  let h = 2166136261;
  for (let i = 0; i < seedStr.length; i++) { h ^= seedStr.charCodeAt(i); h = Math.imul(h, 16777619); }
  return function () { h += 0x6D2B79F5; let t = Math.imul(h ^ (h >>> 15), 1 | h); t ^= t + Math.imul(t ^ (t >>> 7), 61 | t); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; };
}

function Thumb({ thumb, seed, accent }) {
  const { kind, hue = 158, trend = "up" } = thumb || {};
  const rnd = mtRng(seed + kind);
  const W = 400, H = 252;
  const bg = `hsl(${hue} 38% 96%)`;
  const ink = `hsl(${hue} 42% 30%)`;
  const stroke = trend === "down" ? `hsl(2 62% 50%)` : `hsl(${hue} 55% 38%)`;
  const soft = `hsl(${hue} 40% 88%)`;

  function gridLines() {
    const lines = [];
    for (let i = 1; i < 4; i++) lines.push(<line key={i} x1="0" y1={(H / 4) * i} x2={W} y2={(H / 4) * i} stroke={soft} strokeWidth="1" />);
    return lines;
  }

  let content = null;

  if (kind === "line") {
    const n = 16, pts = [];
    let v = 0.5 + rnd() * 0.1;
    const drift = trend === "down" ? -0.028 : 0.03;
    for (let i = 0; i < n; i++) {
      v += drift + (rnd() - 0.5) * 0.14; v = Math.max(0.12, Math.min(0.9, v));
      pts.push([ (i / (n - 1)) * (W - 40) + 20, H - 30 - v * (H - 70) ]);
    }
    const d = pts.map((p, i) => `${i ? "L" : "M"}${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(" ");
    const area = `${d} L${pts[n - 1][0].toFixed(1)} ${H - 20} L${pts[0][0].toFixed(1)} ${H - 20} Z`;
    content = (<g>{gridLines()}<path d={area} fill={stroke} opacity="0.1" /><path d={d} fill="none" stroke={stroke} strokeWidth="3" strokeLinejoin="round" strokeLinecap="round" /><circle cx={pts[n - 1][0]} cy={pts[n - 1][1]} r="5" fill={stroke} /></g>);
  } else if (kind === "candle") {
    const n = 11, cw = 22, gap = (W - 40 - n * cw) / (n - 1);
    const candles = [];
    let base = 0.5;
    for (let i = 0; i < n; i++) {
      const up = rnd() > 0.45; base += (rnd() - 0.5) * 0.12; base = Math.max(0.25, Math.min(0.75, base));
      const o = base, c = base + (up ? 1 : -1) * (0.06 + rnd() * 0.1);
      const hi = Math.max(o, c) + rnd() * 0.08, lo = Math.min(o, c) - rnd() * 0.08;
      const x = 20 + i * (cw + gap);
      const y = (val) => H - 24 - val * (H - 64);
      const col = up ? `hsl(${hue} 55% 40%)` : `hsl(2 60% 52%)`;
      candles.push(<g key={i}><line x1={x + cw / 2} y1={y(hi)} x2={x + cw / 2} y2={y(lo)} stroke={col} strokeWidth="2" /><rect x={x} y={y(Math.max(o, c))} width={cw} height={Math.max(3, Math.abs(y(o) - y(c)))} rx="2" fill={col} /></g>);
    }
    content = <g>{gridLines()}{candles}</g>;
  } else if (kind === "bars") {
    const n = 7, bw = 30, gap = (W - 40 - n * bw) / (n - 1);
    const bars = [];
    for (let i = 0; i < n; i++) {
      const v = 0.2 + rnd() * 0.75; const x = 20 + i * (bw + gap); const h = v * (H - 70);
      bars.push(<rect key={i} x={x} y={H - 26 - h} width={bw} height={h} rx="3" fill={ink} opacity={0.45 + (i / n) * 0.5} />);
    }
    content = <g>{gridLines()}{bars}</g>;
  } else if (kind === "donut") {
    const cx = W / 2, cy = H / 2, r = 72, sw = 30;
    const segs = [0.42, 0.27, 0.18, 0.13]; let a0 = -Math.PI / 2; const C = 2 * Math.PI * r;
    const arcs = segs.map((s, i) => {
      const len = s * C; const el = <circle key={i} cx={cx} cy={cy} r={r} fill="none" stroke={`hsl(${hue} ${52 - i * 9}% ${36 + i * 12}%)`} strokeWidth={sw} strokeDasharray={`${len} ${C - len}`} strokeDashoffset={-a0 / (2 * Math.PI) * C} transform={`rotate(-90 ${cx} ${cy})`} />;
      a0 += s * 2 * Math.PI; return el;
    });
    content = <g>{arcs}<text x={cx} y={cy + 6} textAnchor="middle" fontSize="22" fontWeight="700" fill={ink} fontFamily="Anuphan, sans-serif">พอร์ต</text></g>;
  } else if (kind === "plan") {
    const rows = ["จ", "อ", "พ", "พฤ", "ศ"]; const items = [];
    for (let i = 0; i < rows.length; i++) {
      const y = 38 + i * 40;
      items.push(<g key={i}><circle cx="44" cy={y} r="6" fill={i < 2 ? `hsl(${hue} 55% 45%)` : soft} stroke={ink} strokeWidth={i < 2 ? 0 : 1.5} /><rect x="68" y={y - 8} width={120 + rnd() * 140} height="14" rx="7" fill={i < 2 ? ink : soft} opacity={i < 2 ? 0.8 : 1} /><text x="20" y={y + 5} fontSize="15" fontWeight="600" fill={ink} fontFamily="Anuphan, sans-serif">{rows[i]}</text></g>);
    }
    content = <g>{items}</g>;
  } else { // headline / big number
    const up = rnd() > 0.4;
    content = (<g><text x="28" y="118" fontSize="68" fontWeight="700" fill={ink} fontFamily="Anuphan, sans-serif">{up ? "+" : "−"}{(1 + rnd() * 3).toFixed(1)}%</text><rect x="30" y="150" width="200" height="14" rx="7" fill={soft} /><rect x="30" y="176" width="150" height="14" rx="7" fill={soft} /><path d={up ? "M300 160 L340 120 L380 150" : "M300 120 L340 160 L380 130"} fill="none" stroke={up ? `hsl(${hue} 55% 42%)` : "hsl(2 60% 52%)"} strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" /></g>);
  }

  return (
    <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="100%" preserveAspectRatio="xMidYMid slice" style={{ display: "block", background: bg }}>
      {content}
    </svg>
  );
}

Object.assign(window, { Thumb });