/* global React, window */
/* Capa SVG gerada de forma determinística a partir do slug.
   Sem Math.random (proibido no runtime): usamos um gerador seeded.
   4 motivos, paleta cream + acento da categoria. */

function seedFromSlug(slug) {
  let h = 2166136261;
  for (let i = 0; i < slug.length; i++) {
    h ^= slug.charCodeAt(i);
    h = Math.imul(h, 16777619);
  }
  return h >>> 0;
}

function makeRng(seed) {
  let s = seed || 1;
  return function () {
    s = (Math.imul(s, 1664525) + 1013904223) >>> 0;
    return s / 4294967296;
  };
}

const CREAM = '#f6f4ef';
const CREAM2 = '#efece4';
const CREAM3 = '#e6e1d5';
const INK = '#141414';

function BlogCover({ slug, color, variant, style, className }) {
  const accent = color || '#5a5347';
  const seed = seedFromSlug(slug || 'moore');
  const rng = makeRng(seed);
  const v = (variant != null ? variant : seed) % 4;
  const uid = 'cv_' + (seed % 100000);

  const W = 1200;
  const H = 760;

  const defs = (
    <defs>
      <linearGradient id={uid + '_bg'} x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stopColor={CREAM} />
        <stop offset="100%" stopColor={CREAM2} />
      </linearGradient>
      <radialGradient id={uid + '_glow'} cx="0.72" cy="0.32" r="0.7">
        <stop offset="0%" stopColor={accent} stopOpacity="0.18" />
        <stop offset="55%" stopColor={accent} stopOpacity="0.05" />
        <stop offset="100%" stopColor={accent} stopOpacity="0" />
      </radialGradient>
      <linearGradient id={uid + '_plane'} x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stopColor={accent} stopOpacity="0.22" />
        <stop offset="100%" stopColor={accent} stopOpacity="0.02" />
      </linearGradient>
    </defs>
  );

  const els = [];

  if (v === 0) {
    /* Arcos concêntricos, eco do knob da marca. */
    const cx = 820 + Math.round(rng() * 120);
    const cy = 320 + Math.round(rng() * 120);
    const rings = 9;
    for (let i = rings; i >= 1; i--) {
      const r = 60 + i * 62;
      els.push(
        <circle
          key={'c' + i}
          cx={cx}
          cy={cy}
          r={r}
          fill="none"
          stroke={accent}
          strokeWidth={i % 3 === 0 ? 2.4 : 1.1}
          strokeOpacity={0.12 + (rings - i) * 0.05}
        />
      );
    }
    els.push(<circle key="dot" cx={cx} cy={cy} r={34} fill={accent} fillOpacity="0.9" />);
    els.push(<circle key="dot2" cx={cx} cy={cy} r={14} fill={CREAM} />);
    /* Linha de base */
    els.push(<line key="base" x1="0" y1={H - 96} x2={W} y2={H - 96} stroke={INK} strokeOpacity="0.12" strokeWidth="1" />);
  } else if (v === 1) {
    /* Campo de pontos com foco. */
    const cols = 22;
    const rows = 14;
    const gx = W / (cols + 1);
    const gy = H / (rows + 1);
    const fx = (0.35 + rng() * 0.4) * W;
    const fy = (0.3 + rng() * 0.4) * H;
    const maxD = Math.sqrt(W * W + H * H);
    for (let r = 1; r <= rows; r++) {
      for (let c = 1; c <= cols; c++) {
        const x = c * gx;
        const y = r * gy;
        const d = Math.sqrt((x - fx) * (x - fx) + (y - fy) * (y - fy)) / maxD;
        const rad = Math.max(1.2, 9 * (1 - d) * (1 - d));
        const op = Math.max(0.06, 0.6 * (1 - d));
        els.push(<circle key={'p' + r + '_' + c} cx={x} cy={y} r={rad} fill={accent} fillOpacity={op} />);
      }
    }
  } else if (v === 2) {
    /* Planos diagonais sobrepostos. */
    const planes = 4;
    for (let i = 0; i < planes; i++) {
      const off = i * 150 + Math.round(rng() * 80);
      const x1 = -200 + off;
      els.push(
        <polygon
          key={'pl' + i}
          points={`${x1},${H} ${x1 + 520},${-60} ${x1 + 760},${-60} ${x1 + 240},${H}`}
          fill={`url(#${uid}_plane)`}
          fillOpacity={0.5 + i * 0.12}
        />
      );
    }
    for (let i = 0; i < 5; i++) {
      const x = 120 + i * 230 + Math.round(rng() * 40);
      els.push(<line key={'ln' + i} x1={x} y1="0" x2={x - 340} y2={H} stroke={accent} strokeOpacity="0.16" strokeWidth="1.2" />);
    }
  } else {
    /* Curvas de contorno aninhadas. */
    const lines = 11;
    const baseY = 200 + Math.round(rng() * 120);
    for (let i = 0; i < lines; i++) {
      const y = baseY + i * 46;
      const amp = 70 - i * 3;
      const phase = rng() * 2;
      const d = `M -40 ${y} C ${W * 0.25} ${y - amp}, ${W * 0.5} ${y + amp * (phase - 0.5)}, ${W * 0.72} ${y - amp * 0.4} S ${W + 40} ${y + amp * 0.5}, ${W + 40} ${y + amp * 0.5}`;
      els.push(
        <path
          key={'k' + i}
          d={d}
          fill="none"
          stroke={accent}
          strokeWidth={i % 4 === 0 ? 2 : 1}
          strokeOpacity={0.1 + i * 0.045}
        />
      );
    }
  }

  return (
    <svg
      viewBox={`0 0 ${W} ${H}`}
      preserveAspectRatio="xMidYMid slice"
      className={className}
      style={{ display: 'block', width: '100%', height: '100%', ...style }}
      role="img"
      aria-hidden="true"
    >
      {defs}
      <rect x="0" y="0" width={W} height={H} fill={`url(#${uid}_bg)`} />
      <rect x="0" y="0" width={W} height={H} fill={`url(#${uid}_glow)`} />
      {els}
      <rect x="0.5" y="0.5" width={W - 1} height={H - 1} fill="none" stroke={INK} strokeOpacity="0.1" strokeWidth="1" />
    </svg>
  );
}

window.BlogCover = BlogCover;