Sine Flow Background

"use client";

import { type CSSProperties, useEffect, useRef, useState } from "react";
import { useReducedMotion } from "motion/react";
import { cn } from "@/lib/cn";

/* ------------------------------------------------------------------ */
/*  SineFlowBackground                                                     */
/* ------------------------------------------------------------------ */

type WaveDirection = "up" | "down";

interface SineFlowBackgroundProps {
  /** Wave fill [Optional, default: currentColor via var(--foreground)] */
  fill?: string;
  background?: string;
  direction?: WaveDirection;
  /** Band height in px [Optional, default: 120] */
  height?: number;
  /** Phase speed multiplier [Optional, default: 1] */
  speed?: number;
  /** Crest amplitude in px [Optional, default: 28] */
  amplitude?: number;
  className?: string;
  style?: CSSProperties;
}

/** Six-crest wave path sampled from a sine at `phase`, drawn as smooth
 *  cubic segments across a fixed 1200-wide viewBox. */
function wavePath(phase: number, amplitude: number, direction: WaveDirection) {
  const baseline = direction === "down" ? 66 : 54;
  let d = `M-10,120 L-10,${baseline}`;
  for (let n = 0; n <= 6; n++) {
    const x = 200 * n;
    const y = baseline + Math.sin(phase + (n * Math.PI * 2) / 6) * amplitude;
    const ctrlY = baseline + Math.sin(phase + ((n - 0.5) * Math.PI * 2) / 6) * amplitude;
    if (n === 0) {
      d += ` L${x},${y}`;
    } else {
      const prevX = (n - 1) * 200;
      d += ` C${prevX + 100},${ctrlY} ${x - 100},${y} ${x},${y}`;
    }
  }
  return `${d} L1210,${baseline} L1210,120 Z`;
}

/**
 * An ambient wave band that ripples on its own: a requestAnimationFrame loop
 * advances the phase of a six-crest sine and redraws a smooth path, pausing
 * whenever the band scrolls out of view (IntersectionObserver) and freezing
 * flat under reduced-motion. Fill, height, amplitude, and speed are props.
 * @param {number} amplitude - Crest amplitude in px [Optional, default: 28]
 * @param {number} speed - Phase speed multiplier [Optional, default: 1]
 */
export function SineFlowBackground({
  fill = "var(--foreground)",
  background = "transparent",
  direction = "down",
  height = 120,
  speed = 1,
  amplitude = 28,
  className,
  style,
}: SineFlowBackgroundProps) {
  const reduceMotion = useReducedMotion();
  const [phase, setPhase] = useState(0);
  const containerRef = useRef<HTMLDivElement>(null);
  const prevTime = useRef(0);
  const rafId = useRef<number | null>(null);
  const visible = useRef(true);

  useEffect(() => {
    if (reduceMotion) return;
    const io = new IntersectionObserver(
      ([entry]) => {
        visible.current = entry.isIntersecting;
      },
      { threshold: 0 },
    );
    if (containerRef.current) io.observe(containerRef.current);

    const tick = (t: number) => {
      if (visible.current) {
        const dt = t - prevTime.current;
        setPhase((p) => p + (dt / 1000) * speed * 0.8);
      }
      prevTime.current = t;
      rafId.current = requestAnimationFrame(tick);
    };
    rafId.current = requestAnimationFrame((t) => {
      prevTime.current = t;
      rafId.current = requestAnimationFrame(tick);
    });
    return () => {
      if (rafId.current !== null) cancelAnimationFrame(rafId.current);
      io.disconnect();
    };
  }, [reduceMotion, speed]);

  const path = wavePath(reduceMotion ? 0 : phase, amplitude, direction);

  return (
    <div
      ref={containerRef}
      className={cn("relative overflow-hidden", className)}
      style={{ height, background, ...style }}
      aria-hidden="true"
    >
      <svg
        viewBox="0 0 1200 120"
        preserveAspectRatio="none"
        className="absolute inset-x-0 -inset-y-1 w-full"
      >
        <path d={path} fill={fill} />
      </svg>
    </div>
  );
}