/* Lotus pond ambient background — three modes: still / pond / particles */

const { useEffect, useRef } = React;

function Ambience({ mode = "pond" }) {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    let raf = 0;
    let w = 0, h = 0, dpr = Math.min(window.devicePixelRatio || 1, 2);

    const resize = () => {
      w = canvas.clientWidth; h = canvas.clientHeight;
      canvas.width = w * dpr; canvas.height = h * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    };
    resize();
    const ro = new ResizeObserver(resize);
    ro.observe(canvas);

    // Particles (firefly / dust)
    const particles = Array.from({ length: 36 }, () => ({
      x: Math.random() * 1, y: Math.random() * 1,
      r: 0.6 + Math.random() * 1.6,
      sp: 0.0002 + Math.random() * 0.0006,
      ph: Math.random() * Math.PI * 2,
      hue: 70 + Math.random() * 20
    }));

    // Ripples (random bursts)
    let ripples = [];
    let lastRipple = 0;

    // Floating leaves
    const leaves = Array.from({ length: 5 }, (_, i) => ({
      x: 0.1 + Math.random() * 0.8,
      y: 0.15 + Math.random() * 0.7,
      r: 28 + Math.random() * 30,
      drift: Math.random() * Math.PI * 2,
      ds: 0.00008 + Math.random() * 0.00012,
      hue: 140 + Math.random() * 12
    }));

    const draw = (t) => {
      ctx.clearRect(0, 0, w, h);

      if (mode === "still") {
        // Just a soft warm vignette
        const g = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w,h)*0.7);
        g.addColorStop(0, "rgba(120, 90, 50, 0)");
        g.addColorStop(1, "rgba(20, 16, 12, 0.55)");
        ctx.fillStyle = g; ctx.fillRect(0,0,w,h);
        raf = requestAnimationFrame(draw);
        return;
      }

      if (mode === "pond") {
        // Water surface — slow concentric rings + drifting leaves
        // Spawn ripples
        if (t - lastRipple > 1800 + Math.random() * 1600) {
          ripples.push({ x: Math.random(), y: Math.random(), born: t, life: 5200 });
          lastRipple = t;
        }
        ripples = ripples.filter(r => t - r.born < r.life);

        // Soft water vignette
        const g = ctx.createRadialGradient(w*0.5, h*0.55, 0, w*0.5, h*0.55, Math.max(w,h)*0.85);
        g.addColorStop(0, "rgba(40, 60, 70, 0)");
        g.addColorStop(1, "rgba(10, 14, 18, 0.55)");
        ctx.fillStyle = g; ctx.fillRect(0,0,w,h);

        // Ripples
        ripples.forEach(r => {
          const a = (t - r.born) / r.life;
          const radius = a * Math.min(w, h) * 0.35;
          ctx.strokeStyle = `rgba(210, 200, 170, ${0.18 * (1 - a)})`;
          ctx.lineWidth = 1;
          ctx.beginPath(); ctx.arc(r.x*w, r.y*h, radius, 0, Math.PI*2); ctx.stroke();
          ctx.strokeStyle = `rgba(210, 200, 170, ${0.10 * (1 - a)})`;
          ctx.beginPath(); ctx.arc(r.x*w, r.y*h, radius*1.6, 0, Math.PI*2); ctx.stroke();
        });

        // Leaves — soft elliptical shapes
        leaves.forEach(l => {
          l.drift += l.ds * 16;
          const cx = (l.x + Math.cos(l.drift) * 0.02) * w;
          const cy = (l.y + Math.sin(l.drift) * 0.015) * h;
          ctx.save();
          ctx.translate(cx, cy);
          ctx.rotate(l.drift * 0.5);
          const grad = ctx.createRadialGradient(0,0,0, 0,0, l.r);
          grad.addColorStop(0, `oklch(0.45 0.07 ${l.hue} / 0.55)`);
          grad.addColorStop(0.7, `oklch(0.35 0.07 ${l.hue} / 0.35)`);
          grad.addColorStop(1, `oklch(0.30 0.06 ${l.hue} / 0)`);
          ctx.fillStyle = grad;
          ctx.beginPath();
          ctx.ellipse(0, 0, l.r, l.r*0.85, 0, 0, Math.PI*2);
          ctx.fill();
          // Center vein
          ctx.strokeStyle = `oklch(0.30 0.06 ${l.hue} / 0.35)`;
          ctx.lineWidth = 0.8;
          ctx.beginPath(); ctx.moveTo(-l.r*0.7, 0); ctx.lineTo(l.r*0.7, 0); ctx.stroke();
          ctx.restore();
        });

        // A single lotus bloom in lower-right
        const lx = w * 0.82, ly = h * 0.78;
        ctx.save();
        ctx.translate(lx, ly);
        for (let i = 0; i < 6; i++) {
          ctx.rotate(Math.PI * 2 / 6);
          const grad = ctx.createRadialGradient(0, -10, 0, 0, -10, 24);
          grad.addColorStop(0, "oklch(0.85 0.10 15 / 0.55)");
          grad.addColorStop(1, "oklch(0.65 0.13 15 / 0)");
          ctx.fillStyle = grad;
          ctx.beginPath();
          ctx.ellipse(0, -14, 9, 22, 0, 0, Math.PI*2);
          ctx.fill();
        }
        ctx.restore();

        raf = requestAnimationFrame(draw);
        return;
      }

      if (mode === "particles") {
        // Warm dust motes drifting
        ctx.fillStyle = "rgba(20, 16, 12, 0.25)";
        ctx.fillRect(0, 0, w, h);
        particles.forEach(p => {
          p.ph += p.sp * 1000;
          p.y -= p.sp * 0.8;
          if (p.y < -0.05) { p.y = 1.05; p.x = Math.random(); }
          const x = (p.x + Math.cos(p.ph) * 0.02) * w;
          const y = p.y * h;
          const a = 0.35 + Math.sin(p.ph * 2) * 0.25;
          ctx.fillStyle = `oklch(0.85 0.06 ${p.hue} / ${a})`;
          ctx.beginPath(); ctx.arc(x, y, p.r, 0, Math.PI*2); ctx.fill();
        });
        raf = requestAnimationFrame(draw);
        return;
      }
    };

    raf = requestAnimationFrame(draw);
    return () => { cancelAnimationFrame(raf); ro.disconnect(); };
  }, [mode]);

  return (
    <canvas
      ref={canvasRef}
      style={{
        position: "absolute", inset: 0, width: "100%", height: "100%",
        pointerEvents: "none"
      }}
    />
  );
}

window.Ambience = Ambience;