"use client";

import React, { useState } from "react";
import { motion, useReducedMotion } from "motion/react";

export interface CardFanProps {
  /** Card faces, left of the fan first. */
  items: React.ReactNode[];
  /** Card size in px. */
  width?: number;
  height?: number;
  /** Total fan angle in degrees. */
  arc?: number;
  /** How far a hovered card rises out of the fan, in px. */
  lift?: number;
  /** Called with the card index on click or Enter. */
  onSelect?: (index: number) => void;
  className?: string;
  style?: React.CSSProperties;
}

/**
 * A hand of cards fanned in an arc — hover (or focus) one and it straightens
 * and rises out of the fan while its neighbours part in sympathy, like a
 * card drawn from a held hand.
 */
export function CardFan({
  items,
  width = 190,
  height = 264,
  arc = 52,
  lift = 56,
  onSelect,
  className,
  style,
}: CardFanProps) {
  const [active, setActive] = useState<number | null>(null);
  const reduced = useReducedMotion();
  const n = items.length;

  const radius = height * 1.6;
  const step = n > 1 ? arc / (n - 1) : 0;
  const baseAngle = (i: number) => (i - (n - 1) / 2) * step;
  // pivot sits `radius` below the card's centre
  const origin = `50% ${height / 2 + radius}px`;

  // bounding box of the fanned edge cards, so the container never overflows
  const half = ((arc / 2) * Math.PI) / 180;
  const side =
    Math.sin(half) * radius +
    (width * Math.cos(half) + height * Math.sin(half)) / 2;
  const fanWidth = 2 * (side + 8);
  // how far an edge card's outer bottom corner dips below the resting baseline
  const dip =
    (1 - Math.cos(half)) * (radius - height / 2) +
    Math.sin(half) * (width / 2);
  const fanHeight = height + lift + dip + 8;

  const spring = reduced
    ? ({ duration: 0 } as const)
    : ({ type: "spring", stiffness: 300, damping: 26 } as const);

  return (
    <div
      role="group"
      aria-label={`Fan of ${n} cards`}
      className={["relative", className].filter(Boolean).join(" ")}
      style={{ width: fanWidth, height: fanHeight, ...style }}
      onMouseLeave={() => setActive(null)}
    >
      {items.map((item, i) => {
        const isActive = active === i;
        // neighbours lean away from the drawn card, closest the most
        const push =
          active === null || isActive
            ? 0
            : (Math.sign(i - active) * 7) / Math.abs(i - active);

        return (
          /* outer owns the fan slot and the pointer target — it never moves
             on hover, so the lifted card can't slip out from under the cursor */
          <motion.div
            key={i}
            role="button"
            tabIndex={0}
            aria-pressed={isActive}
            aria-label={`Card ${i + 1} of ${n}`}
            className="absolute left-1/2 cursor-pointer rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-[rgba(var(--ink-rgb),0.35)]"
            initial={reduced ? false : { rotate: 0, opacity: 0 }}
            animate={{ rotate: baseAngle(i), opacity: 1 }}
            transition={{ ...spring, delay: reduced ? 0 : i * 0.05 }}
            onMouseEnter={() => setActive(i)}
            onFocus={() => setActive(i)}
            onBlur={() => setActive(null)}
            onClick={() => onSelect?.(i)}
            onKeyDown={(e) => {
              if (e.key === "Enter" || e.key === " ") {
                e.preventDefault();
                onSelect?.(i);
              }
            }}
            style={{
              width,
              height,
              bottom: dip,
              marginLeft: -width / 2,
              transformOrigin: origin,
              zIndex: isActive ? n + 1 : i,
            }}
          >
            {/* inner owns the gesture — straightens in place and lifts */}
            <motion.div
              animate={{
                rotate: isActive ? -baseAngle(i) * 0.65 : push,
                x: isActive ? 0 : push * 2.4,
                y: isActive ? -lift : 0,
              }}
              transition={spring}
              className="h-full w-full overflow-hidden rounded-xl border border-[var(--rule)] bg-[var(--background)] shadow-[0_20px_44px_-22px_rgba(0,0,0,0.5)]"
            >
              {item}
            </motion.div>
          </motion.div>
        );
      })}
    </div>
  );
}

export default CardFan;