// reel-bg.jsx — Horus Hub REELS · living animated backdrop
// Bridges the procedural Canvas2D engine (bg/horus-bg-engine.js → window.HorusBG)
// into the timeline-driven reel. The canvas is NOT self-animated: it's slaved to the
// Stage playhead (useTime) so it scrubs, pauses, loops and exports perfectly in sync.
// Mounted ONCE behind every scene. Scenes become transparent and layer a translucent
// mood wash (RMood) on top, so the engineering streaks / hexagons / comets stay alive
// underneath the whole film, tinted per act.

const { useTime: bgUseTime, interpolate: bgItp, clamp: bgClamp } = window;

// ── Global animated backdrop, driven by the timeline ─────────────────────────
function HorusCanvas() {
  const canvasRef = React.useRef(null);
  const bgRef = React.useRef(null);
  const t = bgUseTime();

  // intensity envelope across the four acts (continuous, no rebuild):
  //  Ki — intimate/subtle · Sho — balanced tension · Ten reveal — recedes (scene
  //  goes black for the LightCore) · Ten solution — peaks · Ketsu — confident.
  const imCurve = React.useMemo(() => bgItp(
    [0,   11,  13,  31,   33,   44,   46,   60,   62,   76.4],
    [0.62, 0.62, 1.0, 1.0, 0.5, 0.5, 1.5, 1.5, 1.15, 1.15]
  ), []);

  React.useEffect(() => {
    const cv = canvasRef.current;
    if (!cv || !window.HorusBG) return;
    const bg = new window.HorusBG(cv, {
      intensity: 'balanced',
      parallaxPointer: false,   // fixed video — pure timeline drift only
      centerClear: true,        // keeps the mid band clean for captions
      seed: 7,
      effects: { bloom: true, comets: true, hexPulse: true, particles: true, grain: true },
    });
    bg.resize(1080, 1920);
    // fixed internal resolution (device-independent) — crisp without thrashing the GPU
    bg.dpr = 1.5;
    cv.width = 1620; cv.height = 2880;
    cv.style.width = '100%';
    cv.style.height = '100%';
    bg._makeGrain();
    bg._im = imCurve(0);
    bg.intensityMul = function () { return this._im; };
    bgRef.current = bg;
    bg.time = 0; bg.render();
    return () => { bgRef.current = null; };
  }, []);

  // every playhead change → re-render the exact frame, synchronously before paint
  React.useLayoutEffect(() => {
    const bg = bgRef.current;
    if (!bg) return;
    bg._im = imCurve(t);
    bg.time = t;
    bg.render();
  }, [t, imCurve]);

  const introFade = bgClamp(t / 0.6, 0, 1); // soft bloom-up from black on entry

  return (
    <canvas ref={canvasRef} style={{
      position: 'absolute', inset: 0, zIndex: 0,
      opacity: introFade, pointerEvents: 'none',
    }} />
  );
}

// ── Per-act mood wash (translucent — the canvas shows through) ────────────────
// Replaces the old opaque PhaseBg for the reel. 'void' stays handled by the
// scene's own opaque CBg (the LightCore moment wants clean black).
function RMood({ variant = 'brand', t = 0 }) {
  const k = (Math.sin(t * 0.08) + 1) / 2; // slow ken-burns value
  const common = { position: 'absolute', inset: 0, pointerEvents: 'none' };

  if (variant === 'warm') {
    return (
      <React.Fragment>
        <div style={{ ...common, background: `radial-gradient(58% 64% at ${64 + k*4}% ${74 - k*3}%, hsl(34 82% 52% / 0.24) 0%, hsl(28 70% 32% / 0.10) 34%, transparent 64%)` }} />
        <div style={{ ...common, background: `radial-gradient(82% 80% at 50% 122%, hsl(263 60% 24% / 0.34) 0%, transparent 60%)` }} />
      </React.Fragment>
    );
  }
  if (variant === 'cool') {
    return (
      <React.Fragment>
        <div style={{ ...common, background: `radial-gradient(66% 70% at ${28 + k*6}% 16%, hsl(217 72% 48% / 0.18) 0%, transparent 56%)` }} />
        <div style={{ ...common, background: `radial-gradient(70% 70% at 86% 96%, hsl(263 64% 42% / 0.16) 0%, transparent 56%)` }} />
      </React.Fragment>
    );
  }
  // brand — barely tint; let the engine carry the colour, just seat the lower third
  return (
    <React.Fragment>
      <div style={{ ...common, background: `radial-gradient(78% 58% at 50% 42%, hsl(263 60% 32% / 0.12) 0%, transparent 60%)` }} />
      <div style={{ ...common, background: `radial-gradient(95% 80% at 50% 102%, hsl(240 40% 6% / 0.50) 0%, transparent 56%)` }} />
    </React.Fragment>
  );
}

Object.assign(window, { HorusCanvas, RMood });