// fx-layer.jsx — cinematic ambience: rain, drifting light leaks, film grain, vignette.
// Exports window.FXLayer. Honors prefers-reduced-motion and an `intensity` prop.

function FXLayer({ intensity = "cinematic", accent = "#7A4DFF" }) {
  const canvasRef = React.useRef(null);

  React.useEffect(() => {
    if (intensity === "off") return;
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    let w = 0, h = 0, dpr = Math.min(window.devicePixelRatio || 1, 2);
    let drops = [];
    let raf = 0;

    const count = intensity === "cinematic" ? 150 : intensity === "subtle" ? 60 : 0;

    function resize() {
      w = canvas.clientWidth;
      h = canvas.clientHeight;
      canvas.width = w * dpr;
      canvas.height = h * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      seed();
    }
    function seed() {
      drops = [];
      for (let i = 0; i < count; i++) {
        drops.push({
          x: Math.random() * w,
          y: Math.random() * h,
          len: 8 + Math.random() * 18,
          spd: 4 + Math.random() * 9,
          a: 0.04 + Math.random() * 0.16,
        });
      }
    }

    function draw() {
      ctx.clearRect(0, 0, w, h);
      ctx.lineCap = "round";
      for (const d of drops) {
        const tint = Math.random() < 0.12;
        ctx.strokeStyle = tint
          ? `rgba(173,150,255,${d.a})`
          : `rgba(220,220,235,${d.a})`;
        ctx.lineWidth = d.len > 18 ? 1.3 : 0.8;
        ctx.beginPath();
        ctx.moveTo(d.x, d.y);
        ctx.lineTo(d.x - d.spd * 0.18, d.y + d.len);
        ctx.stroke();
        d.y += d.spd;
        d.x -= d.spd * 0.18;
        if (d.y > h) {
          d.y = -d.len;
          d.x = Math.random() * w;
        }
      }
      raf = requestAnimationFrame(draw);
    }

    resize();
    if (!reduce) raf = requestAnimationFrame(draw);
    else { // single static frame
      for (const d of drops) {
        ctx.strokeStyle = `rgba(220,220,235,${d.a})`;
        ctx.beginPath(); ctx.moveTo(d.x, d.y); ctx.lineTo(d.x, d.y + d.len); ctx.stroke();
      }
    }
    window.addEventListener("resize", resize);
    return () => { cancelAnimationFrame(raf); window.removeEventListener("resize", resize); };
  }, [intensity]);

  return (
    <div className="fx" aria-hidden="true">
      {intensity !== "off" && (
        <>
          <div className="fx-leak fx-leak--1" style={{ "--leak": accent }} />
          <div className="fx-leak fx-leak--2" />
          <canvas ref={canvasRef} className="fx-rain" />
        </>
      )}
      <div className="fx-grain" />
      <div className="fx-vignette" />
    </div>
  );
}

window.FXLayer = FXLayer;