"use client";

import { cn } from "@/lib/utils";
import { CSSProperties, useEffect, useRef } from "react";

interface MagnetLinesProps {
  rows?: number;
  columns?: number;
  containerSize?: string;
  lineColor?: string;
  lineWidth?: string;
  lineHeight?: string;
  baseAngle?: number;
  className?: string;
  style?: CSSProperties;
}

const MagneticLines = ({
  rows = 9,
  columns = 9,
  baseAngle = -10,
  className = "",
  style = {},
}: MagnetLinesProps) => {
  const ref = useRef<HTMLDivElement>(null);
  // Per-element angle memory for unwrapping — prevents CSS transitions from
  // spinning 180° when the raw angle crosses a quadrant boundary.
  const prevAngles = useRef<number[]>([]);

  useEffect(() => {
    const container = ref.current;
    if (!container) return;

    const prefersReduced = window.matchMedia(
      "(prefers-reduced-motion: reduce)",
    ).matches;
    if (prefersReduced) return;

    const items = container.querySelectorAll<HTMLSpanElement>("span");
    const MAX_DIST = 280;

    // Seed previous angles at baseAngle so the first transition is smooth
    prevAngles.current = Array.from({ length: items.length }, () => baseAngle);

    const onPointerMove = (pointer: PointerEvent) => {
      items.forEach((item, i) => {
        const rect = item.getBoundingClientRect();
        const centerX = rect.x + rect.width / 2;
        const centerY = rect.y + rect.height / 2;

        const dx = pointer.clientX - centerX;
        const dy = pointer.clientY - centerY;

        // Full atan2 angle — used raw for colour so the hue wheel is complete
        const rawAngle = Math.atan2(dy, dx) * (180 / Math.PI);

        // Angle unwrapping: bars repeat every 180° so always take the shortest path.
        // Wrap the delta into [-90, 90] before adding it to the running total.
        const prev = prevAngles.current[i];
        let delta = rawAngle - prev;
        delta = ((delta % 180) + 270) % 180 - 90;
        const unwrapped = prev + delta;
        prevAngles.current[i] = unwrapped;

        item.style.transform = `rotate(${unwrapped}deg)`;

        // Proximity 0→1 as distance shrinks from MAX_DIST to 0
        const dist = Math.sqrt(dx * dx + dy * dy) || 1;
        const proximity = Math.max(0, 1 - dist / MAX_DIST);
        if (proximity > 0.02) {
          // Hue based on raw atan2 angle — full 360° colour wheel around cursor
          const hue = ((rawAngle + 200) % 360 + 360) % 360;
          const saturation = proximity * 100;
          const lightness = 30 + proximity * 35;
          item.style.backgroundColor = `hsl(${hue},${saturation}%,${lightness}%)`;
        } else {
          item.style.backgroundColor = "";
        }
      });
    };

    const onPointerLeave = () => {
      items.forEach((item) => {
        item.style.backgroundColor = "";
      });
    };

    window.addEventListener("pointermove", onPointerMove);
    container.addEventListener("pointerleave", onPointerLeave);

    return () => {
      window.removeEventListener("pointermove", onPointerMove);
      container.removeEventListener("pointerleave", onPointerLeave);
    };
  }, []);

  const total = rows * columns;
  const spans = Array.from({ length: total }, (_, i) => (
    <span
      key={i}
      className="block origin-center rounded-xl bg-neutral-800"
      style={{
        width: 5,
        height: 40,
        transform: `rotate(${baseAngle}deg)`,
        transition: "transform 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 300ms ease-out",
        willChange: "transform",
      }}
    />
  ));

  return (
    <div className="flex size-full items-center justify-center rounded-xl">
      <div
        ref={ref}
        className={cn(
          "grid size-96 place-items-center border",
          className,
        )}
        style={{
          gridTemplateColumns: `repeat(${columns}, 1fr)`,
          gridTemplateRows: `repeat(${rows}, 1fr)`,
          ...style,
        }}
      >
        {spans}
      </div>
    </div>
  );
};

export default MagneticLines;
Magnetic Grid
