Orbit Badge Ring

"use client";

import { type ReactNode, type RefObject, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
import { AnimatePresence, motion, useMotionValue, useSpring } from "motion/react";
import { cn } from "@/lib/cn";

/* ------------------------------------------------------------------ */
/*  OrbitBadgeRing                                                     */
/* ------------------------------------------------------------------ */

export interface OrbitBadgeItem {
  label: string;
  icon?: Icon;
}

interface OrbitBadgeRingProps {
  items: OrbitBadgeItem[];
  /** Orbit radius in px [Optional, default: 96] */
  radius?: number;
  /** Seconds per full revolution [Optional, default: 18] */
  duration?: number;
  /** Draw the circular path [Optional, default: true] */
  showPath?: boolean;
  /** Orbit appears on hover and follows the cursor; false pins it to the center [Optional, default: true] */
  followCursor?: boolean;
  /** Center content (avatar, logo, ...) [Optional] */
  children?: ReactNode;
  className?: string;
}

function OrbitBadge({
  item,
  index,
  total,
  radius,
  duration,
}: {
  item: OrbitBadgeItem;
  index: number;
  total: number;
  radius: number;
  duration: number;
}) {
  const startAngle = (360 / total) * index;
  const BadgeIcon = item.icon;
  return (
    <motion.div
      className="absolute size-0"
      initial={{ rotate: startAngle }}
      animate={{ rotate: startAngle + 360 }}
      transition={{ duration, ease: "linear", repeat: Infinity }}
    >
      <motion.div
        className="absolute"
        style={{ y: -radius }}
        initial={{ scale: 0, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        transition={{ delay: index * 0.1, duration: 0.5, type: "spring", bounce: 0.45 }}
      >
        {/* Counter-rotate at the same rate so the badge stays upright */}
        <motion.div
          className="flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-1 whitespace-nowrap rounded-xl border border-zinc-200 bg-white px-3 py-2 shadow-sm dark:border-zinc-700 dark:bg-zinc-900"
          initial={{ rotate: -startAngle }}
          animate={{ rotate: -startAngle - 360 }}
          transition={{ duration, ease: "linear", repeat: Infinity }}
        >
          {BadgeIcon && (
            <BadgeIcon size={16} weight="Bold" className="text-zinc-700 dark:text-zinc-200" />
          )}
          <span className="text-[11px] font-medium leading-none text-zinc-600 dark:text-zinc-300">
            {item.label}
          </span>
        </motion.div>
      </motion.div>
    </motion.div>
  );
}

function OrbitRing({ radius }: { radius: number }) {
  return (
    <svg
      className="pointer-events-none absolute"
      style={{ width: radius * 2, height: radius * 2, left: -radius, top: -radius }}
    >
      <circle
        className="stroke-zinc-900/10 stroke-1 dark:stroke-white/10"
        cx={radius}
        cy={radius}
        r={radius - 0.5}
        fill="none"
      />
    </svg>
  );
}

/** Orbit assembly pinned to the measured center of `centerRef`. */
function CenteredOrbit({
  items,
  radius,
  duration,
  showPath,
  centerRef,
}: {
  items: OrbitBadgeItem[];
  radius: number;
  duration: number;
  showPath: boolean;
  centerRef: RefObject<HTMLDivElement | null>;
}) {
  const [center, setCenter] = useState<{ x: number; y: number } | null>(null);

  useLayoutEffect(() => {
    const el = centerRef.current;
    const parent = el?.parentElement;
    if (!el || !parent) return;
    const pr = parent.getBoundingClientRect();
    const cr = el.getBoundingClientRect();
    setCenter({ x: cr.left - pr.left + cr.width / 2, y: cr.top - pr.top + cr.height / 2 });
  }, [centerRef]);

  if (!center) return null;
  return (
    <div className="absolute" style={{ left: center.x, top: center.y }}>
      {showPath && <OrbitRing radius={radius} />}
      {items.map((item, i) => (
        <OrbitBadge
          key={item.label}
          item={item}
          index={i}
          total={items.length}
          radius={radius}
          duration={duration}
        />
      ))}
    </div>
  );
}

/**
 * Badges that orbit a center element on a slow linear revolution, each
 * counter-rotating so it stays upright. With followCursor the whole ring
 * fades in on hover and trails the pointer through springs; without it the
 * ring pins itself to the measured center of the child.
 * @param {OrbitBadgeItem[]} items - Orbiting badges [Required]
 * @param {boolean} followCursor - Hover-summoned cursor orbit [Optional, default: true]
 */
export function OrbitBadgeRing({
  items,
  radius = 96,
  duration = 18,
  showPath = true,
  followCursor = true,
  children,
  className,
}: OrbitBadgeRingProps) {
  const wrapperRef = useRef<HTMLDivElement | null>(null);
  const centerRef = useRef<HTMLDivElement | null>(null);
  const [hovered, setHovered] = useState(false);

  const rawX = useMotionValue(0);
  const rawY = useMotionValue(0);
  const x = useSpring(rawX, { stiffness: 200, damping: 18 });
  const y = useSpring(rawY, { stiffness: 200, damping: 18 });

  const onMouseMove = useCallback(
    (e: React.MouseEvent<HTMLDivElement>) => {
      const rect = wrapperRef.current?.getBoundingClientRect();
      if (!rect) return;
      rawX.set(e.clientX - rect.left);
      rawY.set(e.clientY - rect.top);
    },
    [rawX, rawY],
  );

  /* Park the orbit at the wrapper center on mount so the first hover never
     flashes in from (0,0). */
  useEffect(() => {
    const rect = wrapperRef.current?.getBoundingClientRect();
    if (!rect) return;
    rawX.set(rect.width / 2);
    rawY.set(rect.height / 2);
  }, [rawX, rawY]);

  return (
    <div
      ref={wrapperRef}
      className={cn("relative", className)}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      onMouseMove={onMouseMove}
    >
      <div ref={centerRef}>{children}</div>

      {followCursor ? (
        <AnimatePresence>
          {hovered && (
            <motion.div
              className="pointer-events-none absolute inset-0 z-10 overflow-visible"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.25 }}
              aria-hidden="true"
            >
              <motion.div className="absolute" style={{ left: x, top: y }}>
                {showPath && <OrbitRing radius={radius} />}
                {items.map((item, i) => (
                  <OrbitBadge
                    key={item.label}
                    item={item}
                    index={i}
                    total={items.length}
                    radius={radius}
                    duration={duration}
                  />
                ))}
              </motion.div>
            </motion.div>
          )}
        </AnimatePresence>
      ) : (
        <div className="pointer-events-none absolute inset-0 overflow-visible" aria-hidden="true">
          <CenteredOrbit
            items={items}
            radius={radius}
            duration={duration}
            showPath={showPath}
            centerRef={centerRef}
          />
        </div>
      )}
    </div>
  );
}