"use client";

import { useMemo } from "react";
import { mixHex } from "@/lib/rift-colors";
import { cn } from "@/lib/utils";

import { BRAND_COLORS } from "@/content/brand-colors";

const GREEN: string = BRAND_COLORS.primary;
const GOLD: string = BRAND_COLORS.secondary;
const BLUE: string = BRAND_COLORS.tertiary;

/** Long curved paths that pulse across the page background */
const PULSE_CURVES = [
  "M -80 120 Q 280 80, 520 140 T 1040 100 T 1400 160",
  "M -60 280 Q 320 240, 580 300 T 1100 260 T 1500 320",
  "M -100 440 Q 260 400, 500 460 T 980 420 T 1380 480",
  "M -40 600 Q 300 560, 620 620 T 1080 580 T 1520 640",
  "M -120 180 Q 200 220, 480 160 T 920 200 T 1320 140",
  "M -80 520 Q 340 480, 640 540 T 1020 500 T 1480 560",
  "M -60 720 Q 400 680, 720 740 T 1140 700 T 1600 760",
  "M -100 860 Q 280 820, 560 880 T 1000 840 T 1440 900",
] as const;

type Props = {
  progress: number;
  scrollY: number;
  reduceMotion: boolean;
};

export function RiftPulseField({ progress, scrollY, reduceMotion }: Props) {
  const t = Math.max(0, Math.min(1, progress));
  const wave = 0.5 - 0.5 * Math.cos(t * Math.PI * 2);
  const primary = useMemo(() => {
    if (t < 0.33) return mixHex(GREEN, GOLD, t / 0.33);
    if (t < 0.66) return mixHex(GOLD, BLUE, (t - 0.33) / 0.33);
    return mixHex(BLUE, GREEN, (t - 0.66) / 0.34);
  }, [t]);

  const accent = useMemo(() => mixHex(GOLD, primary, 0.35 + wave * 0.2), [primary, wave]);

  const yShift = reduceMotion ? 0 : scrollY * 0.04;
  const drawOffset = reduceMotion ? 0 : Math.max(0, 0.92 - progress * 1.1);

  return (
    <svg
      className="rift-pulse-field pointer-events-none absolute inset-0 h-full w-full"
      viewBox="0 0 1280 1000"
      preserveAspectRatio="xMidYMid slice"
      aria-hidden
      style={{
        transform: `translate3d(0, ${yShift}px, 0)`,
        opacity: 0.35 + progress * 0.4,
      }}
    >
      <g fill="none" strokeLinecap="round">
        {PULSE_CURVES.map((d, i) => (
          <path
            key={i}
            pathLength={1}
            d={d}
            stroke={i % 2 === 0 ? primary : accent}
            strokeWidth={0.8 + (i % 3) * 0.2}
            className={cn("rift-pulse-line", !reduceMotion && "rift-pulse-animate")}
            style={{
              animationDelay: `${i * 0.55}s`,
              strokeDasharray: 1,
              strokeDashoffset: drawOffset,
              transition: "stroke 0.85s ease, stroke-dashoffset 0.3s ease-out",
            }}
          />
        ))}
      </g>
    </svg>
  );
}