/* galaxy.jsx — live animated backdrop powered by wallpaper.js.
 * Dense twinkling starfield + pulsing hero stars + slowly drifting nebula
 * clouds + occasional black-hole events. Calm by design: cursor-lightning
 * is OFF (the canvas never receives pointer events).
 *
 * The console dial drives the engine's whole FIELD — not just the lightning
 * glow but the base fill, the nebula hue wash, and the star/glow intensity —
 * so each position is a clear mood shift.
 *
 * Dial order: Nebula · Amber · Green · Void · No Color. A custom upload
 * covers the whole field with your image (engine hidden — no stars/holes).
 * prefers-reduced-motion → static cosmos image, no animation.
 */
const VARIANTS = {
  // bolt/core = lightning glow · base = under-fill · tint/tintA = nebula hue
  // wash · stars = global star+glow intensity
  nebula:  { bolt: "#b18cff", core: "#f4ecff", base: "#04030f", tint: null,      tintA: 0,    stars: 1.0 },
  amber:   { bolt: "#ffc850", core: "#fff4d1", base: "#0f0a04", tint: "#ffb24d", tintA: 0.62, stars: 1.0 },
  green:   { bolt: "#8fd4a3", core: "#e0f4e6", base: "#04100a", tint: "#7fd49a", tintA: 0.58, stars: 1.0 },
  dark:    { bolt: "#5b6b8f", core: "#cdd8ea", base: "#070912", tint: "#2f3a57", tintA: 0.10, stars: 0.62, photo: 0.55 },
  // No Color: the cosmos photo straight, no hue wash, neutral white glow.
  nocolor: { bolt: "#cfd6e6", core: "#ffffff", base: "#04030f", tint: null,      tintA: 0,    stars: 1.0 },
};

function GalaxyBackdrop({ theme = "nebula", customImg }) {
  const hostRef = React.useRef(null);
  const wpRef = React.useRef(null);
  const reduce = React.useRef(window.matchMedia("(prefers-reduced-motion: reduce)").matches);

  // Mount the engine once.
  React.useEffect(() => {
    if (reduce.current || !window.GalaxyWallpaper || !hostRef.current) return;
    const v = VARIANTS[theme] || VARIANTS.nebula;
    const wp = new window.GalaxyWallpaper(hostRef.current, {
      // Inlined cosmos photo (data-URI) so the real high-depth nebula always
      // loads; falls back to the bundled path, then procedural, if absent.
      bolt: v.bolt, core: v.core, seed: 23,
      bgSrc: window.COSMOS_BG_SRC || "assets/cosmos.jpg",
    });
    wp.canvas.style.cursor = "default";
    wp.canvas.style.pointerEvents = "none";
    wp.setVariant(v);                          // apply the full field at start
    wpRef.current = wp;
    window.GalaxyBus && window.GalaxyBus.attach(wp);
    return () => {
      window.GalaxyBus && window.GalaxyBus.detach(wp);
      wp.destroy();
      wpRef.current = null;
    };
  }, []);

  // Dial → whole-field variant (base + nebula wash + star intensity + glow).
  React.useEffect(() => {
    const v = VARIANTS[theme] || VARIANTS.nebula;
    const payload = { photo: 1, ...v };        // reset photo unless variant dims it
    if (window.GalaxyBus) window.GalaxyBus.fire("variant", payload);
  }, [theme]);

  // Custom image → cover the whole field with it (engine stays hidden behind
  // an opaque layer, so no stars or black-holes show through). It's literally
  // the picture; the dial is snapped to No Color so nothing is laid over it.

  return (
    <div className="galaxy" aria-hidden="true">
      {reduce.current && <div className="galaxy__img"/>}
      <div ref={hostRef} className="galaxy__engine"/>
      <div className="galaxy__vignette"/>
      {customImg && <div className="galaxy__custom" style={{ backgroundImage: `url(${customImg})` }}/>}
    </div>
  );
}

window.GalaxyBackdrop = GalaxyBackdrop;
window.NBA_VARIANTS = VARIANTS;