// Procedural scene-image placeholders.
// Each scene gets a unique abstract composition derived from seed + palette.
// This is our stand-in for the "AI-generated image" — high-fidelity placeholder.

function SceneImage({ scene, paletteName = "midnight-violet", style = {}, showLabel = false }) {
  const palette = (window.PALETTES[paletteName] || window.PALETTES["midnight-violet"]);
  const seed = scene.imageSeed;
  const imageUrl = window.SongfilmApiConfig?.buildMediaUrl
    ? window.SongfilmApiConfig.buildMediaUrl("image", scene.imageUrl || scene.imageFilename || "")
    : (scene.imageUrl || "");
  // deterministic pseudo-random
  const rand = (n) => {
    let x = Math.sin(seed * 31 + n * 17) * 10000;
    return x - Math.floor(x);
  };

  // Composition patterns chosen by seed
  const patterns = ["horizon", "spotlight", "rays", "dunes", "blob", "grid"];
  const pattern = patterns[seed % patterns.length];

  const [c1, c2, c3, c4] = palette;

  // render different scene variants
  const renderPattern = () => {
    if (pattern === "horizon") {
      // layered bands with a glowing orb
      return (
        <>
          <div style={{position:"absolute",inset:0,background:`linear-gradient(180deg, ${c2} 0%, ${c1} 50%, ${c4} 100%)`}}/>
          <div style={{position:"absolute",left:"50%",top:`${30+rand(1)*30}%`,width:"22%",aspectRatio:"1",borderRadius:"50%",
            background:`radial-gradient(circle, ${c3}, transparent 70%)`, transform:"translateX(-50%)", filter:"blur(2px)"}}/>
          <div style={{position:"absolute",left:0,right:0,bottom:0,height:"50%",
            background:`linear-gradient(180deg, transparent, ${c4})`}}/>
          {/* scattered stars */}
          {Array.from({length: 20}, (_, i) => (
            <div key={i} style={{position:"absolute", width: 2, height: 2, borderRadius:"50%",
              background: "#fff", opacity: 0.2 + rand(i+10)*0.6,
              left: `${rand(i+20)*100}%`, top: `${rand(i+30)*50}%`}}/>
          ))}
        </>
      );
    }
    if (pattern === "spotlight") {
      return (
        <>
          <div style={{position:"absolute",inset:0,background:c4}}/>
          <div style={{position:"absolute", width:"80%", aspectRatio:"1",
            left: `${20+rand(1)*30}%`, top: `${10+rand(2)*20}%`,
            background: `radial-gradient(circle, ${c3} 0%, ${c1} 30%, transparent 65%)`, filter:"blur(12px)"}}/>
          <div style={{position:"absolute", width:"40%", aspectRatio:"1",
            left: `${40+rand(3)*20}%`, top: `${30+rand(4)*20}%`,
            background: `radial-gradient(circle, ${c2} 0%, transparent 70%)`, filter:"blur(6px)", mixBlendMode:"screen"}}/>
        </>
      );
    }
    if (pattern === "rays") {
      return (
        <>
          <div style={{position:"absolute",inset:0,background:`linear-gradient(135deg, ${c1}, ${c4})`}}/>
          <div style={{position:"absolute", inset:0,
            background: `conic-gradient(from ${rand(1)*360}deg at 50% 100%, transparent, ${c3}88 10%, transparent 20%, ${c2}66 30%, transparent 40%, ${c3}44 50%, transparent 60%)`,
            mixBlendMode:"screen", filter:"blur(2px)"}}/>
        </>
      );
    }
    if (pattern === "dunes") {
      return (
        <>
          <div style={{position:"absolute",inset:0,background:`linear-gradient(180deg, ${c3} 0%, ${c2} 60%, ${c1} 100%)`}}/>
          {[0,1,2,3].map(i => (
            <div key={i} style={{
              position:"absolute", left:0, right:0,
              bottom: `${i*14}%`, height:"40%",
              background: [c1,c4,c2,c4][i%4],
              clipPath: `polygon(0 ${40+rand(i)*20}%, 30% ${20+rand(i+1)*30}%, 70% ${30+rand(i+2)*30}%, 100% ${25+rand(i+3)*25}%, 100% 100%, 0 100%)`,
              opacity: 0.9,
            }}/>
          ))}
        </>
      );
    }
    if (pattern === "blob") {
      return (
        <>
          <div style={{position:"absolute",inset:0,background:c4}}/>
          {[0,1,2].map(i => (
            <div key={i} style={{
              position:"absolute", width:"50%", aspectRatio:"1", borderRadius:"50%",
              left: `${rand(i)*60}%`, top: `${rand(i+5)*60}%`,
              background: `radial-gradient(circle, ${[c1,c2,c3][i]}, transparent 65%)`,
              filter: "blur(18px)", mixBlendMode:"screen",
            }}/>
          ))}
        </>
      );
    }
    // grid
    return (
      <>
        <div style={{position:"absolute",inset:0,background:`linear-gradient(${rand(1)*360}deg, ${c1}, ${c4})`}}/>
        <div style={{position:"absolute",inset:0,
          backgroundImage: `linear-gradient(${c3}33 1px, transparent 1px), linear-gradient(90deg, ${c3}33 1px, transparent 1px)`,
          backgroundSize: "24px 24px",
          maskImage: "radial-gradient(ellipse at center, black 30%, transparent 70%)",
        }}/>
        <div style={{position:"absolute",left:"50%",top:"50%",width:"30%",aspectRatio:"1",borderRadius:"50%",
          background: `radial-gradient(circle, ${c3}, transparent 60%)`,
          transform:"translate(-50%,-50%)", filter:"blur(8px)",mixBlendMode:"screen"}}/>
      </>
    );
  };

  return (
    <div style={{position:"relative", overflow:"hidden", width:"100%", height:"100%", ...style}}>
      {imageUrl ? (
        <img
          src={imageUrl}
          alt="scene"
          style={{
            position:"absolute",
            inset:0,
            width:"100%",
            height:"100%",
            objectFit:"cover",
          }}
        />
      ) : renderPattern()}
      {/* subtle noise / texture */}
      <div style={{position:"absolute", inset:0,
        background: "radial-gradient(circle at 20% 30%, rgba(255,255,255,0.04), transparent 40%)",
        pointerEvents:"none"}}/>
      {/* vignette */}
      <div style={{position:"absolute", inset:0,
        background: "radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.5) 100%)",
        pointerEvents:"none"}}/>
      {showLabel && (
        <div style={{
          position:"absolute", bottom: 10, right: 10,
          fontFamily:"var(--font-mono)", fontSize: 9,
          color:"rgba(255,255,255,0.35)",
          letterSpacing: "0.05em",
        }}>#{scene.imageSeed.toString().padStart(4,"0")} · {pattern}</div>
      )}
    </div>
  );
}

Object.assign(window, { SceneImage });