/* Weather Squatch — ParallaxScene (2D background, behind the WebGL canvas).
   Renders each named layer slot from /…/assets/{name}.png, falling back to a
   labeled colored-rectangle placeholder until the real art exists (drop-in).
   `scroll` (0..1) drives parallax depth; `motion` (0..1) scales ambient life. */

const { useState: _useStateP, useEffect: _useEffectP } = React;

// World pan unit, in vw. translateX(layer) = -(scroll * speed * UNIT_VW).
const UNIT_VW = 92;

function LayerSlot({ layer, motion }) {
  const [imgUrl, setImgUrl] = _useStateP(null);
  const src = window.ASSET_BASE + layer.name + ".png";

  // Probe for real art without triggering a failed-resource console error:
  // a fetch 404 is a normal response, unlike a broken <img>. Only render the
  // image once we know it's actually there (drop-in when the PNG appears).
  _useEffectP(() => {
    if (window.WS_TRY_LAYER_ART === false) return;
    let alive = true;
    fetch(src, { method: "HEAD" })
      .then((r) => { if (alive && r.ok && (r.headers.get("content-type") || "").startsWith("image")) setImgUrl(src); })
      .catch(() => {});
    return () => { alive = false; };
  }, [src]);

  // Vertical placement per role (placeholder geometry; real art will define its own).
  const geo = {
    sky:          { top: "0%",  height: "100%" },
    clouds:       { top: "6%",  height: "34%" },
    "treeline-far":{ top: "40%", height: "26%" },
    "trees-mid":  { top: "48%", height: "30%" },
    meadow:       { top: "66%", height: "34%" },
    pond:         { top: "76%", height: "16%" },
    "grass-foreground": { top: "82%", height: "18%" },
    "pass-tree":  { top: "0%",  height: "100%" },
  }[layer.name] || { top: "0%", height: "100%" };

  const sway = (layer.role === "grass" ? 2.2 : layer.role === "clouds" ? 0 : 0.6) * motion;

  const placeholder = (
    <div className={"ws-ph ws-ph-" + layer.role} style={{ "--sway": sway, background: layer.color }}>
      {layer.role === "passtree" && <div className="ws-passtree-canopy"></div>}
      {layer.role === "clouds" && (<><span className="ws-cloud c1"></span><span className="ws-cloud c2"></span><span className="ws-cloud c3"></span></>)}
      <span className="ws-ph-label">{layer.label}<em>· {layer.speed.toFixed(2)}×</em></span>
    </div>
  );

  return (
    <div className="ws-layer" style={{ zIndex: layer.z, top: geo.top, height: geo.height }} data-layer={layer.name}>
      {!imgUrl && placeholder}
      {imgUrl && (
        <img src={imgUrl} alt="" className="ws-layer-img" draggable={false} />
      )}
    </div>
  );
}

function ParallaxScene({ scroll, motion }) {
  return (
    <div className="ws-parallax">
      {window.LAYERS.map((layer) => {
        let tx;
        if (layer.name === "pass-tree") {
          // Sweeps in from the right and exits left across the walk.
          tx = (112 - scroll * 178) + "vw";
        } else {
          tx = "-" + (scroll * layer.speed * UNIT_VW) + "vw";
        }
        const widthVw = layer.name === "pass-tree" ? 58 : 100 + layer.speed * UNIT_VW + 12;
        const driftMotion = layer.role === "clouds" ? motion : 0;
        return (
          <div
            key={layer.name}
            className="ws-layer-track"
            data-track={layer.name}
            style={{
              zIndex: layer.z,
              width: widthVw + "vw",
              left: layer.name === "pass-tree" ? 0 : 0,
              transform: "translateX(" + tx + ")",
              "--drift": driftMotion,
            }}
          >
            <LayerSlot layer={layer} motion={motion} />
          </div>
        );
      })}
      {/* soft atmosphere */}
      <div className="ws-haze" style={{ zIndex: 7 }}></div>
    </div>
  );
}

Object.assign(window, { ParallaxScene });