Card Slider

"use client";

import { useRef, useState, useEffect } from "react";
import {
  motion,
  useMotionValue,
  useTransform,
  animate,
} from "motion/react";
import {
  MapPin,
  PaintBrush,
  Sparkle,
  ThumbsUp,
  VideoCamera,
} from "@phosphor-icons/react";

/* ═══════════════════════════════════════════════
   Constants
   ═══════════════════════════════════════════════ */

const CARD_COUNT = 5;
const DRAG_SENSITIVITY = 130;

const springTransition = {
  type: "spring" as const,
  stiffness: 380,
  damping: 36,
  mass: 0.8,
};

interface PositionConfig {
  rotate: number;
  x: number;
  y: number;
  scale: number;
  zIndex: number;
}

const desktopPositions: Record<string, PositionConfig> = {
  "-2": { rotate: -20, x: -290, y: 38, scale: 0.76, zIndex: 1 },
  "-1": { rotate: -10, x: -155, y: 14, scale: 0.87, zIndex: 2 },
  "0": { rotate: 0, x: 0, y: -18, scale: 1, zIndex: 5 },
  "1": { rotate: 10, x: 155, y: 14, scale: 0.87, zIndex: 2 },
  "2": { rotate: 20, x: 290, y: 38, scale: 0.76, zIndex: 1 },
};

const mobilePositions: Record<string, PositionConfig> = {
  "-2": { rotate: -18, x: -118, y: 24, scale: 0.58, zIndex: 1 },
  "-1": { rotate: -9, x: -64, y: 10, scale: 0.72, zIndex: 2 },
  "0": { rotate: 0, x: 0, y: -10, scale: 0.86, zIndex: 5 },
  "1": { rotate: 9, x: 64, y: 10, scale: 0.72, zIndex: 2 },
  "2": { rotate: 18, x: 118, y: 24, scale: 0.58, zIndex: 1 },
};

/* ═══════════════════════════════════════════════
   Helpers
   ═══════════════════════════════════════════════ */

function interpolatePosition(
  offset: number,
  key: keyof PositionConfig,
  positions: Record<string, PositionConfig> = desktopPositions,
): number {
  const clamped = Math.max(-2, Math.min(2, offset));
  const lower = Math.max(-2, Math.floor(clamped));
  const upper = Math.min(2, Math.ceil(clamped));
  if (lower === upper)
    return positions[String(lower)][key] as number;
  const t = (clamped - lower) / (upper - lower);
  const a = positions[String(lower)][key] as number;
  const b = positions[String(upper)][key] as number;
  return a + (b - a) * t;
}

function circularOffset(index: number, base: number): number {
  const raw = ((index - base) % CARD_COUNT + CARD_COUNT) % CARD_COUNT;
  return raw > CARD_COUNT / 2 ? raw - CARD_COUNT : raw;
}

function snapToNearest(target: number, current: number): number {
  let v = target;
  while (v < current - CARD_COUNT / 2) v += CARD_COUNT;
  while (v > current + CARD_COUNT / 2) v -= CARD_COUNT;
  return v;
}

/* ═══════════════════════════════════════════════
   Card Data
   ═══════════════════════════════════════════════ */

const iconMap: Record<string, React.ReactNode> = {
  "thumbs-up": (
    <ThumbsUp className="w-3.5 h-3.5 text-gray-900" weight="duotone" />
  ),
  video: (
    <VideoCamera className="w-3.5 h-3.5 text-gray-900" weight="duotone" />
  ),
  paintbrush: (
    <PaintBrush className="w-3.5 h-3.5 text-gray-900" weight="duotone" />
  ),
  sparkles: (
    <Sparkle className="w-3.5 h-3.5 text-gray-900" weight="duotone" />
  ),
  "map-pin": (
    <MapPin className="w-3.5 h-3.5 text-gray-900" weight="duotone" />
  ),
};

interface CardItem {
  id: number;
  label: string;
  category: string;
  categoryIcon: string;
  bgClass: string;
  hasPill?: boolean;
  sticker?: { src: string; position: string; size: string };
}

const cards: CardItem[] = [
  {
    id: 0,
    label: "douwe egberts",
    category: "social",
    categoryIcon: "thumbs-up",
    bgClass: "bg-gradient-to-br from-stone-100 via-amber-100 to-stone-200",
    hasPill: true,
    sticker: {
      src: "/images/components/card-slider/rabbit.png",
      position: "absolute -bottom-6 -left-10 -rotate-12",
      size: "w-24",
    },
  },
  {
    id: 1,
    label: "smoothiebox",
    category: "video",
    categoryIcon: "video",
    bgClass: "bg-gradient-to-br from-amber-600 via-amber-800 to-amber-950",
    hasPill: true,
    sticker: {
      src: "/images/components/card-slider/pop-corn.png",
      position: "absolute -top-7 -left-8 rotate-12",
      size: "w-24",
    },
  },
  {
    id: 2,
    label: "studio",
    category: "design",
    categoryIcon: "paintbrush",
    bgClass: "bg-gradient-to-br from-slate-500 via-slate-700 to-slate-900",
    sticker: {
      src: "/images/components/card-slider/witch-hat.png",
      position: "absolute -top-10 -left-10 -rotate-15",
      size: "w-24",
    },
  },
  {
    id: 3,
    label: "Select Codes",
    category: "360",
    categoryIcon: "sparkles",
    bgClass: "bg-gradient-to-br from-indigo-800 via-purple-900 to-black",
    sticker: {
      src: "/images/components/card-slider/shooting-star.png",
      position: "absolute -bottom-5 -right-8 rotate-6",
      size: "w-24",
    },
  },
  {
    id: 4,
    label: "campaign lab",
    category: "ooh",
    categoryIcon: "map-pin",
    bgClass: "bg-gradient-to-br from-rose-300 via-pink-400 to-fuchsia-500",
    hasPill: true,
    sticker: {
      src: "/images/components/card-slider/rabbit.png",
      position: "absolute -bottom-7 -right-9 rotate-15",
      size: "w-24",
    },
  },
];

/* ═══════════════════════════════════════════════
   SliderCard
   ═══════════════════════════════════════════════ */

interface SliderCardProps {
  card: CardItem;
  index: number;
  viewProgress: ReturnType<typeof useMotionValue<number>>;
  didDrag: React.RefObject<boolean>;
  isMobile: boolean;
}

function SliderCard({
  card,
  index,
  viewProgress,
  didDrag,
  isMobile,
}: SliderCardProps) {
  const positions = isMobile ? mobilePositions : desktopPositions;

  const x = useTransform(viewProgress, (v) =>
    interpolatePosition(circularOffset(index, v), "x", positions),
  );
  const y = useTransform(viewProgress, (v) =>
    interpolatePosition(circularOffset(index, v), "y", positions),
  );
  const rotate = useTransform(viewProgress, (v) =>
    interpolatePosition(circularOffset(index, v), "rotate", positions),
  );
  const scale = useTransform(viewProgress, (v) =>
    interpolatePosition(circularOffset(index, v), "scale", positions),
  );
  const zIndex = useTransform(viewProgress, (v) =>
    positions[
      String(
        Math.max(-2, Math.min(2, Math.round(circularOffset(index, v)))),
      )
    ].zIndex,
  );

  function handleClick() {
    if (didDrag.current) return;
    animate(viewProgress, snapToNearest(index, viewProgress.get()), springTransition);
  }

  return (
    <motion.div
      className="absolute touch-none"
      style={{ x, y, rotate, scale, zIndex }}
      onClick={handleClick}
    >
      <div
        className={`relative rounded-[1.75rem] p-[5px] bg-white shadow-2xl ${
          isMobile ? "w-36 h-52" : "w-56 h-80"
        }`}
      >
        <div
          className={`relative w-full h-full rounded-[1.35rem] overflow-hidden ${card.bgClass}`}
        >
          <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/25 rounded-[1.35rem]" />
          <div className="absolute top-3 right-3 flex items-center gap-1.5 bg-white rounded-full px-3 py-1.5 shadow-sm">
            {iconMap[card.categoryIcon]}
            <span className="text-[11px] font-semibold text-gray-900 leading-none">
              {card.category}
            </span>
          </div>
        </div>
      </div>
      {card.sticker && (
        <div
          className={`${card.sticker.position} ${card.sticker.size} pointer-events-none`}
        >
          <img
            src={card.sticker.src}
            alt=""
            className="w-full h-auto drop-shadow-lg"
            draggable={false}
          />
        </div>
      )}
    </motion.div>
  );
}

/* ═══════════════════════════════════════════════
   CardSlider (Main)
   ═══════════════════════════════════════════════ */

function CardSlider() {
  const viewProgress = useMotionValue(2);
  const startX = useRef<number | null>(null);
  const startValue = useRef<number | null>(null);
  const didDrag = useRef(false);
  const [isDragging, setIsDragging] = useState(false);
  const [isMobile, setIsMobile] = useState(
    () => typeof window !== "undefined" && window.innerWidth < 640,
  );

  useEffect(() => {
    const mql = window.matchMedia("(max-width: 639px)");
    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
    mql.addEventListener("change", handler);
    return () => mql.removeEventListener("change", handler);
  }, []);

  function onPointerDown(e: React.PointerEvent) {
    startX.current = e.clientX;
    startValue.current = viewProgress.get();
    didDrag.current = false;
    viewProgress.stop();
  }

  function onPointerMove(e: React.PointerEvent) {
    if (startX.current === null || startValue.current === null) return;
    const dx = e.clientX - startX.current;
    if (Math.abs(dx) > 8) {
      if (!didDrag.current) setIsDragging(true);
      didDrag.current = true;
    }
    const raw = -dx / DRAG_SENSITIVITY;
    const clamped = Math.max(-1, Math.min(1, raw));
    const rubber = Math.abs(raw) > 1
      ? (Math.abs(raw) - 1) * 0.2 * Math.sign(raw)
      : 0;
    viewProgress.set(startValue.current + clamped + rubber);
  }

  function onPointerUp() {
    if (startX.current === null) return;
    startX.current = null;
    startValue.current = null;
    setIsDragging(false);
    animate(viewProgress, Math.round(viewProgress.get()), springTransition);
  }

  return (
    <section
      className={`relative w-full h-dvh bg-black overflow-hidden flex items-center justify-center select-none touch-none ${
        isDragging ? "cursor-grabbing" : "cursor-grab"
      }`}
      onPointerDown={onPointerDown}
      onPointerMove={onPointerMove}
      onPointerUp={onPointerUp}
      onPointerLeave={onPointerUp}
    >
      <div
        className={`relative flex items-center justify-center ${
          isMobile ? "w-[320px] h-[260px]" : "w-[720px] h-[440px]"
        }`}
      >
        {cards.map((card, i) => (
          <SliderCard
            key={card.id}
            card={card}
            index={i}
            viewProgress={viewProgress}
            didDrag={didDrag}
            isMobile={isMobile}
          />
        ))}
      </div>
    </section>
  );
}

/* ═══════════════════════════════════════════════
   Demo Export
   ═══════════════════════════════════════════════ */

/** @description Card slider demo — premium card carousel with depth and smooth spring motion. */
export default function CardSliderDemo() {
  return <CardSlider />;
}