"use client";

import React, { useRef, useState } from "react";
import {
  AnimatePresence,
  motion,
  useMotionValue,
  useReducedMotion,
  useSpring,
  useTransform,
  type MotionValue,
} from "motion/react";

export interface FisheyeDockItem {
  icon: React.ReactNode;
  label: string;
  href?: string;
  onClick?: () => void;
  /** Show the active indicator dot under the icon. */
  active?: boolean;
}

export interface FisheyeDockProps {
  items: FisheyeDockItem[];
  /** Resting icon size in px. */
  size?: number;
  /** Icon size directly under the cursor in px. */
  magnification?: number;
  /** Cursor influence radius in px. */
  distance?: number;
  className?: string;
  style?: React.CSSProperties;
}

/**
 * A macOS-style dock — icons swell under the cursor with a fisheye falloff,
 * neighbours rising in sympathy, labels popping above on hover.
 */
export function FisheyeDock({
  items,
  size = 44,
  magnification = 76,
  distance = 140,
  className,
  style,
}: FisheyeDockProps) {
  const mouseX = useMotionValue(Infinity);
  const reduced = useReducedMotion();
  const [activeIndex, setActiveIndex] = useState(() =>
    Math.max(0, items.findIndex((item) => item.active))
  );

  return (
    <nav
      aria-label="Dock"
      onMouseMove={(e) => {
        if (!reduced) mouseX.set(e.clientX);
      }}
      onMouseLeave={() => mouseX.set(Infinity)}
      className={[
        "flex items-end gap-2 rounded-2xl border border-[var(--rule)] bg-[rgba(var(--background-rgb),0.7)] px-2.5 pb-2.5 backdrop-blur-md",
        className,
      ]
        .filter(Boolean)
        .join(" ")}
      style={{ height: size + 20, ...style }}
    >
      {items.map((item, i) => (
        <DockIcon
          key={i}
          item={item}
          active={i === activeIndex}
          onSelect={() => setActiveIndex(i)}
          mouseX={mouseX}
          size={size}
          magnification={magnification}
          distance={distance}
        />
      ))}
    </nav>
  );
}

function DockIcon({
  item,
  active,
  onSelect,
  mouseX,
  size,
  magnification,
  distance,
}: {
  item: FisheyeDockItem;
  active: boolean;
  onSelect: () => void;
  mouseX: MotionValue<number>;
  size: number;
  magnification: number;
  distance: number;
}) {
  const ref = useRef<HTMLDivElement>(null);
  const [hovered, setHovered] = useState(false);

  const dist = useTransform(mouseX, (val: number) => {
    const bounds = ref.current?.getBoundingClientRect() ?? { x: 0, width: 0 };
    return val - bounds.x - bounds.width / 2;
  });

  const target = useTransform(
    dist,
    [-distance, 0, distance],
    [size, magnification, size]
  );
  const side = useSpring(target, { mass: 0.1, stiffness: 170, damping: 13 });

  const Comp: React.ElementType = item.href ? "a" : "button";

  return (
    <motion.div
      ref={ref}
      style={{ width: side, height: side }}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      className="relative flex items-center justify-center"
    >
      <AnimatePresence>
        {hovered && (
          <motion.span
            initial={{ opacity: 0, y: 6, scale: 0.9 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 4, scale: 0.9 }}
            transition={{ type: "spring", stiffness: 350, damping: 25 }}
            style={{ x: "-50%" }}
            className="pointer-events-none absolute -top-9 left-1/2 rounded-md border border-[var(--rule)] bg-[var(--background)] px-2 py-1 [font-family:var(--font-mono)] text-[0.625rem] font-medium tracking-[0.12em] whitespace-nowrap text-[var(--ink)] uppercase"
          >
            {item.label}
          </motion.span>
        )}
      </AnimatePresence>

      <Comp
        href={item.href}
        type={item.href ? undefined : "button"}
        onClick={() => {
          onSelect();
          item.onClick?.();
        }}
        aria-label={item.label}
        aria-current={active ? "page" : undefined}
        className="flex h-full w-full cursor-pointer items-center justify-center rounded-xl border border-[rgba(var(--ink-rgb),0.1)] bg-[rgba(var(--ink-rgb),0.06)] text-[var(--ink)] transition-colors hover:bg-[rgba(var(--ink-rgb),0.1)] [&_svg]:h-[44%] [&_svg]:w-[44%]"
      >
        {item.icon}
      </Comp>

      {active && (
        <motion.span
          layoutId="fisheye-dock-active"
          aria-hidden="true"
          className="absolute -bottom-1.5 left-1/2 h-1 w-1 -translate-x-1/2 rounded-full bg-[oklch(0.65_0.25_250)]"
          transition={{ type: "spring", stiffness: 380, damping: 28 }}
        />
      )}
    </motion.div>
  );
}

export default FisheyeDock;