/* QueueUp.gg — procedural cover art generator
 * Deterministic per-game "key art" built from simple primitives.
 * No copyrighted assets — each game gets a unique seeded poster.
 */
function huHash(str) { let h = 2166136261; for (let i = 0; i < str.length; i++) { h ^= str.charCodeAt(i); h = Math.imul(h, 16777619); } return h >>> 0; }
function huRng(seed) { let a = seed >>> 0; return () => { a |= 0; a = (a + 0x6D2B79F5) | 0; let t = Math.imul(a ^ (a >>> 15), 1 | a); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; }

/* motif → genre/seed mapping keeps related games visually coherent-ish but varied */
function CoverArt({ game }) {
  const seed = huHash(game.id);
  const r = huRng(seed);
  const hue = seed % 360;
  const hue2 = (hue + 30 + Math.floor(r() * 90)) % 360;
  const motif = seed % 6;
  const uid = "c" + seed.toString(36);

  const c1 = `hsl(${hue} 70% 58%)`;
  const c2 = `hsl(${hue2} 72% 42%)`;
  const c3 = `hsl(${(hue + 180) % 360} 80% 65%)`;
  const ink = "rgba(8,8,13,.55)";

  const layers = [];

  if (motif === 0) { // orbs
    for (let i = 0; i < 4; i++) {
      layers.push(<circle key={"o" + i} cx={r() * 120} cy={r() * 120} r={16 + r() * 34}
        fill={i === 0 ? c3 : "#fff"} opacity={i === 0 ? 0.4 : 0.1 + r() * 0.08} filter={`url(#b${uid})`} />);
    }
  } else if (motif === 1) { // rays
    const cx = 60, cy = -6;
    for (let i = 0; i < 11; i++) {
      const ang = (i / 11) * 180 - 90 + (r() * 8 - 4);
      const x2 = cx + Math.cos((ang * Math.PI) / 180) * 200;
      const y2 = cy + Math.sin((ang * Math.PI) / 180) * 200 + 30;
      layers.push(<line key={"r" + i} x1={cx} y1={cy + 20} x2={x2} y2={y2} stroke="#fff" strokeWidth={2 + r() * 3} opacity={0.06 + r() * 0.06} />);
    }
  } else if (motif === 2) { // synth grid
    for (let i = 1; i <= 8; i++) { const y = 60 + i * i * 0.95; layers.push(<line key={"h" + i} x1="-20" y1={y} x2="140" y2={y} stroke={c3} strokeWidth="1.4" opacity="0.35" />); }
    for (let i = -6; i <= 6; i++) { layers.push(<line key={"v" + i} x1={60 + i * 4} y1="60" x2={60 + i * 26} y2="140" stroke={c3} strokeWidth="1.4" opacity="0.3" />); }
  } else if (motif === 3) { // diagonal bars
    layers.push(<g key="bars" transform="rotate(-28 60 60)">
      {Array.from({ length: 9 }).map((_, i) => <rect key={i} x={-30 + i * 22} y="-40" width={6 + (i % 3) * 7} height="200" fill={i % 2 ? "#fff" : c3} opacity={i % 2 ? 0.08 : 0.18} />)}
    </g>);
  } else if (motif === 4) { // peaks
    const base = 122;
    layers.push(<polygon key="p1" points={`-10,${base} 35,55 80,${base}`} fill="#fff" opacity="0.1" />);
    layers.push(<polygon key="p2" points={`30,${base} 75,38 120,${base}`} fill={c3} opacity="0.28" />);
    layers.push(<polygon key="p3" points={`70,${base} 105,62 140,${base}`} fill="#000" opacity="0.18" />);
    layers.push(<circle key="sun" cx={r() > 0.5 ? 84 : 40} cy="40" r="16" fill={c3} opacity="0.55" filter={`url(#b${uid})`} />);
  } else { // rings
    for (let i = 5; i >= 1; i--) layers.push(<circle key={"ri" + i} cx={30 + r() * 60} cy={30 + r() * 50} r={i * 13} fill="none" stroke={i % 2 ? "#fff" : c3} strokeWidth="2" opacity={0.07 + i * 0.02} />);
  }

  const initials = game.name.split(/[\s:.\-!]+/).filter(Boolean).slice(0, 2).map((w) => w[0]).join("").toUpperCase();

  return (
    <svg viewBox="0 0 120 120" preserveAspectRatio="xMidYMid slice" width="100%" height="100%" style={{ display: "block" }}>
      <defs>
        <linearGradient id={`g${uid}`} x1="0" y1="0" x2="1" y2="1"><stop offset="0" stopColor={c1} /><stop offset="1" stopColor={c2} /></linearGradient>
        <radialGradient id={`r${uid}`} cx="0.3" cy="0.1" r="0.9"><stop offset="0" stopColor="#fff" stopOpacity="0.32" /><stop offset="0.6" stopColor="#fff" stopOpacity="0" /></radialGradient>
        <linearGradient id={`s${uid}`} x1="0" y1="0" x2="0" y2="1"><stop offset="0.45" stopColor="#000" stopOpacity="0" /><stop offset="1" stopColor="#05050a" stopOpacity="0.55" /></linearGradient>
        <filter id={`b${uid}`} x="-40%" y="-40%" width="180%" height="180%"><feGaussianBlur stdDeviation="6" /></filter>
      </defs>
      <rect width="120" height="120" fill={`url(#g${uid})`} />
      <g>{layers}</g>
      <rect width="120" height="120" fill={`url(#r${uid})`} />
      <rect width="120" height="120" fill={`url(#s${uid})`} />
      <text x="10" y="110" fontFamily="'Space Grotesk', sans-serif" fontWeight="700" fontSize="30" letterSpacing="-1"
        fill="#fff" fillOpacity="0.92" style={{ paintOrder: "stroke" }} stroke={ink} strokeWidth="0.6">{initials}</text>
    </svg>
  );
}
window.CoverArt = CoverArt;
