// Reusable visual placeholder for film stills
const { useMemo: useMemoP } = React;

function StillPlaceholder({ project, aspect = "16/9", showMeta = true, frame, style = {} }) {
  // Generate a deterministic "still" using project palette + abstract shapes
  const seed = useMemoP(() => {
    let h = 0;
    for (let i = 0; i < project.id.length; i++) h = (h * 31 + project.id.charCodeAt(i)) | 0;
    return Math.abs(h);
  }, [project.id]);

  const [c1, c2, c3] = project.palette;
  const r = (n) => ((seed * (n + 7)) % 100) / 100;
  const blobX = 30 + r(1) * 40;
  const blobY = 30 + r(2) * 30;
  const blobR = 20 + r(3) * 20;
  const lineY = 50 + r(4) * 30;

  const thumbId = project.thumbnail || project.youtube;
  const stillSrc = project.still
    ? project.still
    : thumbId
    ? `https://img.youtube.com/vi/${thumbId}/maxresdefault.jpg`
    : null;

  return (
    <div
      className="still"
      style={{ aspectRatio: aspect, ...style }}
    >
      {stillSrc ? (
        <img
          src={stillSrc}
          alt={project.title}
          className="still-img"
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}
          onError={(e) => {
            if (thumbId && e.target.src.includes("maxresdefault")) {
              e.target.src = `https://img.youtube.com/vi/${thumbId}/hqdefault.jpg`;
            }
          }}
        />
      ) : (
        <svg viewBox="0 0 160 90" preserveAspectRatio="xMidYMid slice" className="still-svg">
          <defs>
            <linearGradient id={`g-${project.id}`} x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor={c2} />
              <stop offset="100%" stopColor={c1} />
            </linearGradient>
            <pattern id={`s-${project.id}`} width="2" height="2" patternUnits="userSpaceOnUse">
              <rect width="2" height="2" fill="transparent" />
              <line x1="0" y1="0" x2="0" y2="2" stroke={c3} strokeWidth="0.18" opacity="0.18" />
            </pattern>
          </defs>
          <rect width="160" height="90" fill={`url(#g-${project.id})`} />
          <circle cx={blobX * 1.6} cy={blobY * 0.9} r={blobR * 0.6} fill={c1} opacity="0.55" />
          <rect x="0" y={lineY} width="160" height="0.3" fill={c3} opacity="0.4" />
          <rect width="160" height="90" fill={`url(#s-${project.id})`} />
          <line x1="0" y1={lineY + 6} x2="160" y2={lineY + 6} stroke={c3} strokeWidth="0.15" opacity="0.3" />
        </svg>
      )}

      {showMeta && (
        <div className="still-overlay">
          <div className="still-tl">
            <span className="mono">{frame || `FRAME ${String(seed % 9999).padStart(4, "0")}`}</span>
          </div>
          <div className="still-tr">
            <span className="mono">{project.format.split(" · ")[0]}</span>
          </div>
          <div className="still-bl">
            <span className="mono">{project.location}</span>
          </div>
          <div className="still-br">
            <span className="mono">{project.tag.toUpperCase()}</span>
          </div>
        </div>
      )}
    </div>
  );
}

window.StillPlaceholder = StillPlaceholder;