/* global React */
const { useMemo } = React;

// Deterministic cover palette — picked by hashing the hypothesis rnd_id
const COVER_PALETTE = [
  { from: "#3a2a55", to: "#7c5fc4", angle: 135, motif: "merge"   },
  { from: "#3a5a4f", to: "#a8c89e", angle: 145, motif: "garden"  },
  { from: "#1f3a5c", to: "#5b7bb8", angle: 120, motif: "tower"   },
  { from: "#5c2a2a", to: "#c87a4a", angle: 150, motif: "reactor" },
  { from: "#2a3a55", to: "#6b8eb8", angle: 130, motif: "realm"   },
  { from: "#2a1f3a", to: "#7b5fa8", angle: 125, motif: "deck"    },
  { from: "#1a3a3a", to: "#5ba8a8", angle: 130, motif: "audio"   },
  { from: "#3a2a1a", to: "#c89e7b", angle: 140, motif: "fox"     },
  { from: "#3a4a2a", to: "#9eb87b", angle: 145, motif: "bonsai"  },
  { from: "#1a2a3a", to: "#5ba8c8", angle: 160, motif: "wave"    },
  { from: "#3a3a2a", to: "#a8a85b", angle: 135, motif: "runner"  },
  { from: "#5a4a3a", to: "#c8a87b", angle: 140, motif: "garden"  },
];

function hashId(id) {
  let h = 0;
  for (let i = 0; i < id.length; i++) h = (h * 31 + id.charCodeAt(i)) >>> 0;
  return h;
}

function getCoverConfig(projectId) {
  const idx = hashId(projectId || "x") % COVER_PALETTE.length;
  return COVER_PALETTE[idx];
}

function CoverMotif({ motif }) {
  const c = "rgba(255,255,255,0.09)";
  const c2 = "rgba(255,255,255,0.04)";
  const s = "rgba(255,255,255,0.18)";
  switch (motif) {
    case "merge":
      return <g><circle cx="80" cy="60" r="38" fill={c}/><circle cx="130" cy="60" r="38" fill={c2}/><circle cx="105" cy="100" r="55" fill="none" stroke={s} strokeWidth="1"/></g>;
    case "garden":
      return <g>{[0,1,2,3,4,5].map(i=><circle key={i} cx={40+i*55} cy={60+(i%2)*20} r={10+(i%3)*4} fill={c}/>)}<path d="M0 130 Q 200 100 400 140 L 400 200 L 0 200 Z" fill={c2}/></g>;
    case "tower":
      return <g><rect x="170" y="20" width="60" height="160" fill={c}/><rect x="180" y="40" width="40" height="20" fill={c2}/><rect x="180" y="80" width="40" height="20" fill={c2}/><rect x="180" y="120" width="40" height="20" fill={c2}/></g>;
    case "reactor":
      return <g><circle cx="200" cy="100" r="60" fill="none" stroke={s} strokeWidth="1.5"/><circle cx="200" cy="100" r="30" fill={c}/><line x1="40" y1="100" x2="140" y2="100" stroke={s} strokeWidth="1"/><line x1="260" y1="100" x2="360" y2="100" stroke={s} strokeWidth="1"/></g>;
    case "realm":
      return <g><polygon points="60,150 110,80 160,150" fill={c}/><polygon points="160,150 220,60 280,150" fill={c2}/><polygon points="280,150 320,100 360,150" fill={c}/></g>;
    case "wave":
      return <g><path d="M0 110 Q 100 60 200 110 T 400 110" fill="none" stroke={s} strokeWidth="1.5"/><path d="M0 130 Q 100 80 200 130 T 400 130" fill="none" stroke={s} strokeWidth="1.5"/><path d="M0 150 Q 100 100 200 150 T 400 150" fill="none" stroke={s} strokeWidth="1.5"/></g>;
    case "deck":
      return <g><rect x="120" y="40" width="60" height="100" rx="6" fill={c2} transform="rotate(-8 150 90)"/><rect x="160" y="40" width="60" height="100" rx="6" fill={c} transform="rotate(0 190 90)"/><rect x="200" y="40" width="60" height="100" rx="6" fill={c2} transform="rotate(8 230 90)"/></g>;
    case "runner":
      return <g><path d="M0 140 L 400 140" stroke={s} strokeWidth="1"/><circle cx="120" cy="130" r="8" fill={c}/><circle cx="160" cy="130" r="8" fill={c2}/><path d="M30 140 Q 70 100 110 140" fill="none" stroke={s} strokeWidth="1"/></g>;
    case "bonsai":
      return <g><rect x="180" y="160" width="60" height="14" rx="2" fill={c}/><path d="M210 160 V 80" stroke={s} strokeWidth="2"/><circle cx="210" cy="80" r="35" fill={c}/><circle cx="180" cy="95" r="20" fill={c2}/><circle cx="240" cy="95" r="22" fill={c2}/></g>;
    case "audio":
      return <g>{[40,80,120,160,200,240,280,320,360].map((x,i)=>{const h=30+Math.abs(Math.sin(i))*60;return<rect key={i} x={x} y={100-h/2} width="6" height={h} rx="3" fill={c}/>;})}</g>;
    case "fox":
      return <g><polygon points="100,80 130,40 160,80 145,100 115,100" fill={c}/><polygon points="240,80 270,40 300,80 285,100 255,100" fill={c2}/><path d="M0 170 Q 200 130 400 170" fill="none" stroke={s} strokeWidth="1"/></g>;
    default:
      return <g><circle cx="100" cy="80" r="40" fill={c}/><circle cx="280" cy="120" r="60" fill={c2}/></g>;
  }
}

function Cover({ projectId, coverUrl, size = "full" }) {
  // Uploaded image — always show it
  if (coverUrl) {
    if (size === "thumb")
      return <div className="cover-thumb" style={{ backgroundImage: `url(${coverUrl})`, backgroundSize: "cover", backgroundPosition: "center" }} />;
    if (size === "cell")
      return <div className="cell-cover" style={{ backgroundImage: `url(${coverUrl})`, backgroundSize: "cover", backgroundPosition: "center" }} />;
    return (
      <div className="cover">
        <img src={coverUrl} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
      </div>
    );
  }

  // No cover set — neutral grey placeholder
  if (size === "cell")  return <div className="cell-cover cell-cover-empty" />;
  if (size === "thumb") return <div className="cover-thumb cover-thumb-empty" />;
  return <div className="cover cover-empty" />;
}

window.PRCover = { Cover, getCoverConfig };