Cinema Scrub Bar

"use client";

import { type PointerEvent as ReactPointerEvent, useCallback, useEffect, useRef, useState } from "react";
import { animate, AnimatePresence, motion, useMotionValue, useTransform } from "motion/react";
import { Pause, Play } from "@solar-icons/react";
import { cn } from "@/lib/cn";

/* ------------------------------------------------------------------ */
/*  CinemaScrubBar                                                        */
/* ------------------------------------------------------------------ */

const THUMB = 18;

function formatTime(seconds: number) {
  if (!isFinite(seconds) || isNaN(seconds)) return "00:00";
  const m = Math.floor(seconds / 60);
  const s = Math.floor(seconds % 60);
  return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
}

const TIME_TWEEN = { type: "tween", ease: "linear", duration: 0.2 } as const;
const SNAP_SPRING = { type: "spring", stiffness: 280, damping: 36, mass: 0.8 } as const;
const GROW_SPRING = { type: "spring", stiffness: 300, damping: 20 } as const;
const OVERLAY_SPRING = { type: "spring", stiffness: 400, damping: 25 } as const;
const HOVER_TWEEN = { type: "tween", ease: "easeOut", duration: 0.05 } as const;

/** Progress (0..1) → thumb x within a track of `width` px. */
const progressToX = (progress: number, width: number) => {
  const usable = width - THUMB;
  return usable <= 0 ? 0 : progress * usable;
};

interface HoverInfo {
  left: number;
  width: number;
  onFilledSide: boolean;
  snappedProgress: number;
  cursorX: number;
}

interface CinemaScrubBarProps {
  src: string;
  poster?: string;
  className?: string;
  /** Rubber-band the whole track when dragging past its ends [Optional, default: true] */
  stretchEffect?: boolean;
}

/**
 * A video player whose seek bar behaves like a physical object: hovering
 * inflates the 6px strip into a 52px scrubber with time labels, dragging
 * captures the pointer and snaps the fill back on a spring, a hover tooltip
 * previews the target time, and pulling past either end rubber-bands the
 * whole track (scale + shear from the pulled edge). Motion values drive the
 * thumb so video time, hover, and drag never fight over one source of truth.
 * @param {string} src - Video source URL [Required]
 * @param {boolean} stretchEffect - Rubber-band past the ends [Optional, default: true]
 */
export function CinemaScrubBar({ src, poster, className, stretchEffect = true }: CinemaScrubBarProps) {
  const videoRef = useRef<HTMLVideoElement>(null);
  const trackRef = useRef<HTMLDivElement>(null);
  const trackWidth = useRef(0);
  const hideTimer = useRef(0);
  const dragging = useRef(false);
  const snapping = useRef(false);
  const dragMoved = useRef(false);
  const pointerId = useRef<number | null>(null);
  const mounted = useRef(false);
  const progressRef = useRef(0);
  const timeAnim = useRef<ReturnType<typeof animate> | null>(null);
  const snapAnim = useRef<ReturnType<typeof animate> | null>(null);
  const snapToken = useRef(0);

  const videoX = useMotionValue(0);
  const dragX = useMotionValue(0);
  const trackW = useMotionValue(0);
  const lift = useMotionValue(0);
  const stretch = useMotionValue(0);
  const stretchOrigin = useMotionValue(0.5);
  const stretchDir = useMotionValue(0);

  const scaleX = useTransform(() => 1 + 0.3 * stretch.get());
  const scaleY = useTransform(() => Math.max(0.82, 1 - 0.3 * stretch.get()));
  const shear = useTransform(() => stretchDir.get() * stretch.get() * 10);
  const thumbX = useTransform(() => {
    const x = dragging.current || snapping.current ? dragX.get() : videoX.get();
    const centre = trackW.get() * stretchOrigin.get();
    return shear.get() + centre + (x - centre) * scaleX.get();
  });
  const fillWidth = useTransform(
    () => (dragging.current || snapping.current ? dragX.get() : videoX.get()) + THUMB / 2 + lift.get() * 0,
  );

  const [isPlaying, setIsPlaying] = useState(false);
  const [controlsVisible, setControlsVisible] = useState(true);
  const [progress, setProgress] = useState(0);
  const [currentTime, setCurrentTime] = useState(0);
  const [duration, setDuration] = useState(0);
  const [isDragging, setIsDragging] = useState(false);
  const [isSnapping, setIsSnapping] = useState(false);
  const [isHovering, setIsHovering] = useState(false);
  const [hover, setHover] = useState<HoverInfo | null>(null);

  const readVideo = useCallback(() => {
    const video = videoRef.current;
    if (!video) return;
    const d = Number(video.duration);
    const total = Number.isFinite(d) && d > 0 ? d : 0;
    const t = Number.isFinite(video.currentTime) ? video.currentTime : 0;
    /* State feeds the mm:ss readout only, so quantize to the displayed
       second — React bails on the identical value, leaving one re-render
       per second instead of one per rAF tick. */
    setDuration(total);
    setCurrentTime(Math.floor(t));
    if (!dragging.current && total > 0) {
      const p = t / total;
      progressRef.current = p;
      /* Continuous position goes straight to the motion value — only the
         thumb/fill transforms consume it, no render needed. Discrete seeks
         still flow through the `progress` state for the tweened snap. */
      const width = trackWidth.current;
      if (width > 0) {
        timeAnim.current?.stop();
        videoX.set(progressToX(p, width));
      }
    }
  }, [videoX]);

  useEffect(() => {
    progressRef.current = progress;
  }, [progress]);
  useEffect(() => {
    mounted.current = true;
  }, []);

  const activeX = useCallback(
    () => (dragging.current || snapping.current ? dragX.get() : videoX.get()),
    [dragX, videoX],
  );

  const stopSnap = useCallback(() => {
    snapToken.current += 1;
    snapAnim.current?.stop();
    snapAnim.current = null;
  }, []);

  const snapTo = useCallback(
    (x: number, done?: () => void) => {
      snapToken.current += 1;
      const token = snapToken.current;
      snapAnim.current?.stop();
      snapAnim.current = animate(dragX, x, {
        ...SNAP_SPRING,
        onComplete: () => {
          if (token === snapToken.current) done?.();
        },
      });
    },
    [dragX],
  );

  /* Track resize keeps every x in sync. */
  useEffect(() => {
    const el = trackRef.current;
    if (!el) return;
    const ro = new ResizeObserver(([entry]) => {
      const width = entry.contentRect.width;
      trackWidth.current = width;
      trackW.set(width);
      const x = progressToX(progressRef.current, width);
      videoX.set(x);
      if (!dragging.current && !snapping.current) dragX.set(x);
    });
    ro.observe(el);
    return () => ro.disconnect();
  }, [videoX, dragX, trackW]);

  /* Video progress → thumb x (tweened so rAF-driven updates stay smooth). */
  useEffect(() => {
    if (dragging.current) return;
    const width = trackWidth.current;
    if (width <= 0) return;
    const x = progressToX(progress, width);
    timeAnim.current?.stop();
    if (mounted.current) {
      timeAnim.current = animate(videoX, x, TIME_TWEEN);
    } else {
      videoX.set(x);
      dragX.set(x);
    }
  }, [progress, videoX, dragX]);

  /* While playing, poll time on rAF for a smooth readout. */
  useEffect(() => {
    if (!isPlaying) return;
    let raf = 0;
    const tick = () => {
      readVideo();
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [isPlaying, readVideo]);

  /* Auto-hide the play/pause overlay while playing. */
  const clearHide = useCallback(() => {
    if (hideTimer.current) {
      window.clearTimeout(hideTimer.current);
      hideTimer.current = 0;
    }
  }, []);
  const scheduleHide = useCallback(() => {
    clearHide();
    if (isPlaying && !dragging.current) {
      hideTimer.current = window.setTimeout(() => setControlsVisible(false), 1000);
    }
  }, [clearHide, isPlaying]);
  const wake = useCallback(() => {
    setControlsVisible(true);
    if (isPlaying) scheduleHide();
  }, [isPlaying, scheduleHide]);
  useEffect(() => {
    setControlsVisible(true);
    if (isPlaying) scheduleHide();
    else clearHide();
  }, [isPlaying, scheduleHide, clearHide]);
  useEffect(() => () => clearHide(), [clearHide]);

  const onEnded = useCallback(() => {
    setIsPlaying(false);
    progressRef.current = 1;
    setProgress(1);
  }, []);

  const togglePlay = useCallback(() => {
    const video = videoRef.current;
    if (!video) return;
    if (video.paused) {
      video.play();
      setIsPlaying(true);
    } else {
      video.pause();
      setIsPlaying(false);
    }
    setControlsVisible(true);
  }, []);

  const seekTo = useCallback((p: number) => {
    progressRef.current = p;
    setProgress(p);
    const video = videoRef.current;
    if (!video || !(video.duration > 0)) return;
    const t = p * video.duration;
    video.currentTime = t;
    setCurrentTime(Math.floor(t));
  }, []);

  /* Keyboard seeking for the slider role: arrows ±5s, Home/End. */
  const onTrackKeyDown = useCallback(
    (e: React.KeyboardEvent<HTMLDivElement>) => {
      const video = videoRef.current;
      if (!video || !(video.duration > 0)) return;
      const step = 5 / video.duration;
      let next: number | null = null;
      if (e.key === "ArrowRight" || e.key === "ArrowUp") {
        next = Math.min(1, progressRef.current + step);
      } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
        next = Math.max(0, progressRef.current - step);
      } else if (e.key === "Home") {
        next = 0;
      } else if (e.key === "End") {
        next = 1;
      }
      if (next === null) return;
      e.preventDefault();
      seekTo(next);
    },
    [seekTo],
  );

  /* Hover ghost segment between the cursor and the fill edge. */
  const updateHover = useCallback(
    (cursorX: number, width: number) => {
      const snapped = Math.max(0, Math.min(1, Math.max(0, Math.min(cursorX, width)) / width));
      const targetX = snapped * width;
      const fillEdge = activeX() + THUMB / 2;
      const info: HoverInfo = {
        left: Math.min(fillEdge, targetX),
        width: Math.abs(targetX - fillEdge),
        onFilledSide: targetX < fillEdge,
        snappedProgress: snapped,
        cursorX: targetX,
      };
      setHover((prev) =>
        prev &&
        Math.abs(prev.left - info.left) < 0.25 &&
        Math.abs(prev.width - info.width) < 0.25 &&
        Math.abs(prev.snappedProgress - info.snappedProgress) < 0.001 &&
        Math.abs(prev.cursorX - info.cursorX) < 0.25 &&
        prev.onFilledSide === info.onFilledSide
          ? prev
          : info,
      );
    },
    [activeX],
  );

  useEffect(() => {
    if (!stretchEffect) {
      stretch.set(0);
      stretchDir.set(0);
      stretchOrigin.set(0.5);
    }
  }, [stretchEffect, stretch, stretchDir, stretchOrigin]);

  const pointerProgress = useCallback((e: ReactPointerEvent) => {
    const track = trackRef.current;
    if (!track) return 0;
    const rect = track.getBoundingClientRect();
    const local = e.clientX - rect.left - THUMB / 2;
    const usable = rect.width - THUMB;
    if (usable <= 0) return 0;
    return Math.max(0, Math.min(1, Math.max(0, Math.min(usable, local)) / usable));
  }, []);

  const onPointerDown = useCallback(
    (e: ReactPointerEvent<HTMLDivElement>) => {
      if (e.pointerType === "mouse" && e.button !== 0) return;
      e.preventDefault();
      e.stopPropagation();
      timeAnim.current?.stop();
      stopSnap();
      snapping.current = false;
      setIsSnapping(false);
      e.currentTarget.setPointerCapture(e.pointerId);
      pointerId.current = e.pointerId;
      dragMoved.current = false;
      dragging.current = true;
      setIsDragging(true);

      const p = pointerProgress(e);
      const width = trackWidth.current;
      if (width > 0) {
        const x = progressToX(p, width);
        snapping.current = true;
        setIsSnapping(true);
        snapTo(x, () => {
          if (!dragging.current) {
            snapping.current = false;
            setIsSnapping(false);
            dragX.set(x);
            videoX.set(x);
          }
        });
      }
      seekTo(p);
      const rect = trackRef.current?.getBoundingClientRect();
      if (rect) updateHover(p * rect.width, rect.width);
    },
    [pointerProgress, seekTo, updateHover, dragX, videoX, snapTo, stopSnap],
  );

  const onPointerMove = useCallback(
    (e: ReactPointerEvent<HTMLDivElement>) => {
      if (!dragging.current) return;
      e.stopPropagation();
      dragMoved.current = true;
      stopSnap();
      snapping.current = false;
      setIsSnapping(false);

      const rect = trackRef.current?.getBoundingClientRect();
      if (rect) {
        if (stretchEffect) {
          const local = e.clientX - rect.left - THUMB / 2;
          const usable = rect.width - THUMB;
          const underflow = Math.max(0, -local);
          const overflow = Math.max(0, local - usable);
          const pull = Math.max(underflow, overflow);
          const dir = underflow > overflow ? -1 : overflow > 0 ? 1 : 0;
          const amount = Math.pow(Math.max(0, Math.min(1, pull / 2000)), 0.5);
          stretch.set(amount);
          stretchDir.set(dir);
          stretchOrigin.set(dir < 0 ? 1 : dir > 0 ? 0 : 0.5);
        } else {
          stretch.set(0);
          stretchDir.set(0);
          stretchOrigin.set(0.5);
        }
      }
      const p = pointerProgress(e);
      const width = trackWidth.current;
      if (width > 0) dragX.set(progressToX(p, width));
      seekTo(p);
      if (rect) updateHover(p * rect.width, rect.width);
    },
    [pointerProgress, dragX, seekTo, updateHover, stretch, stretchDir, stretchOrigin, stretchEffect, stopSnap],
  );

  const endDrag = useCallback(() => {
    if (!dragging.current) return;
    dragging.current = false;
    pointerId.current = null;
    setIsDragging(false);
    animate(stretch, 0, { type: "spring", stiffness: 680, damping: 20, mass: 0.8 });
    animate(stretchDir, 0, { type: "spring", stiffness: 520, damping: 28, mass: 0.8 });
    animate(stretchOrigin, 0.5, { type: "tween", duration: 0.15, ease: "easeOut" });

    const width = trackWidth.current;
    if (width > 0) {
      const settled = progressToX(progressRef.current, width);
      if (Math.abs(dragX.get() - settled) < 1.5) {
        snapping.current = false;
        setIsSnapping(false);
        stopSnap();
        dragX.set(settled);
        videoX.set(settled);
      } else {
        snapping.current = true;
        setIsSnapping(true);
        snapTo(settled, () => {
          snapping.current = false;
          setIsSnapping(false);
          dragX.set(settled);
          videoX.set(settled);
        });
      }
    }
  }, [dragX, videoX, stretch, stretchDir, stretchOrigin, snapTo, stopSnap]);

  const onPointerUp = useCallback(
    (e: ReactPointerEvent<HTMLDivElement>) => {
      if (pointerId.current !== null && e.pointerId !== pointerId.current) return;
      if (e.currentTarget.hasPointerCapture(e.pointerId)) {
        e.currentTarget.releasePointerCapture(e.pointerId);
      }
      if (!dragMoved.current) {
        dragging.current = false;
        pointerId.current = null;
        setIsDragging(false);
        return;
      }
      endDrag();
    },
    [endDrag],
  );

  const onTrackLeave = useCallback(() => {
    setIsHovering(false);
    setHover(null);
    if (dragging.current) endDrag();
  }, [endDrag]);

  useEffect(() => {
    const settle = () => endDrag();
    window.addEventListener("pointerup", settle);
    window.addEventListener("pointercancel", settle);
    window.addEventListener("blur", settle);
    return () => {
      window.removeEventListener("pointerup", settle);
      window.removeEventListener("pointercancel", settle);
      window.removeEventListener("blur", settle);
    };
  }, [endDrag]);

  const inflated = isHovering || isDragging;
  const tooltipTime = hover ? hover.snappedProgress * duration : currentTime;
  const fillEdge = activeX() + THUMB / 2;

  useEffect(() => {
    animate(lift, inflated ? 16 : 0, {
      type: "spring",
      stiffness: 500,
      damping: 30,
      delay: inflated ? 0.1 : 0,
    });
  }, [inflated, lift]);

  return (
    <div className={cn("relative w-full select-none", className)}>
      <div className="relative" onMouseMove={wake} onPointerMove={wake} onTouchStart={wake}>
        <video
          ref={videoRef}
          src={src}
          poster={poster}
          playsInline
          preload="metadata"
          onLoadedMetadata={readVideo}
          onDurationChange={readVideo}
          onTimeUpdate={readVideo}
          onEnded={onEnded}
          className="block w-full rounded-xl"
        />
        <button
          onClick={togglePlay}
          aria-label={isPlaying ? "Pause" : "Play"}
          className="absolute inset-0 h-full w-full cursor-pointer rounded-xl bg-transparent focus:outline-none"
        >
          <motion.span
            className="pointer-events-none absolute inset-0 flex items-center justify-center"
            animate={{
              scale: isPlaying ? 0 : 1,
              opacity: controlsVisible ? (isPlaying ? 0 : 1) : 0,
              translateX: isPlaying ? -20 : 0,
            }}
            transition={OVERLAY_SPRING}
          >
            <span className="rounded-full bg-black/40 p-4">
              <Play className="size-8 text-white" weight="Bold" />
            </span>
          </motion.span>
          <motion.span
            className="pointer-events-none absolute inset-0 flex items-center justify-center"
            animate={{
              scale: isPlaying ? 1 : 0,
              opacity: controlsVisible ? (isPlaying ? 1 : 0) : 0,
              translateX: isPlaying ? 0 : 20,
            }}
            transition={OVERLAY_SPRING}
            initial={{ scale: 0, opacity: 0 }}
          >
            <span className="rounded-full bg-black/40 p-4">
              <Pause className="size-8 text-white" weight="Bold" />
            </span>
          </motion.span>
        </button>
      </div>

      <div className="pt-2">
        <div
          ref={trackRef}
          role="slider"
          tabIndex={0}
          aria-label="Seek"
          aria-valuemin={0}
          aria-valuemax={Math.max(0, Math.round(duration))}
          aria-valuenow={Math.round(currentTime)}
          aria-valuetext={`${formatTime(currentTime)} of ${formatTime(duration)}`}
          onKeyDown={onTrackKeyDown}
          onPointerEnter={() => setIsHovering(true)}
          onPointerLeave={onTrackLeave}
          onMouseMove={(e) => {
            if (dragging.current) return;
            const rect = trackRef.current?.getBoundingClientRect();
            if (!rect) return;
            updateHover(Math.max(0, Math.min(rect.width, e.clientX - rect.left)), rect.width);
          }}
          onPointerDown={onPointerDown}
          onPointerMove={onPointerMove}
          onPointerUp={onPointerUp}
          onPointerCancel={onPointerUp}
          onLostPointerCapture={endDrag}
          className={cn(
            "relative flex h-20 w-full touch-none items-center rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-white/50",
            isDragging ? "cursor-grabbing" : "cursor-grab",
          )}
        >
          {/* Hover time tooltip */}
          <AnimatePresence>
            {hover && (
              <motion.div
                key="hover-tip"
                className="pointer-events-none absolute z-20 -translate-x-1/2"
                initial={{ opacity: 0, y: 4 }}
                animate={{ opacity: 1, y: -22, left: hover.cursorX }}
                exit={{ opacity: 0, y: 4 }}
                transition={HOVER_TWEEN}
                style={{ top: 8 }}
              >
                <span className="whitespace-nowrap rounded-md bg-zinc-900 px-2 py-1 text-xs font-medium tabular-nums text-white dark:bg-white dark:text-zinc-900">
                  {formatTime(tooltipTime)}
                </span>
              </motion.div>
            )}
          </AnimatePresence>

          {/* Time labels */}
          <motion.span
            className="pointer-events-none absolute left-3 top-1/2 z-[15] -translate-y-1/2 rounded-md px-2 py-1 text-xs font-medium tabular-nums text-zinc-900 transition-colors dark:text-zinc-100"
            animate={{
              opacity: inflated ? 1 : 0.8,
              x: inflated ? 0 : -20,
              y: inflated ? 0 : -20,
              scale: inflated ? 1 : 0.9,
              backgroundColor: inflated ? "rgba(255,255,255,1)" : "rgba(255,255,255,0)",
            }}
            transition={GROW_SPRING}
          >
            {formatTime(currentTime)}
          </motion.span>
          <motion.span
            className="pointer-events-none absolute right-3 top-1/2 z-[15] -translate-y-1/2 rounded-md px-2 py-1 text-xs font-medium tabular-nums text-zinc-900 transition-colors dark:text-zinc-100"
            animate={{
              x: inflated ? 0 : 20,
              y: inflated ? 0 : -20,
              scale: inflated ? 1 : 0.9,
              backgroundColor: inflated ? "rgba(255,255,255,1)" : "rgba(255,255,255,0)",
            }}
            transition={GROW_SPRING}
          >
            {formatTime(duration)}
          </motion.span>

          {/* Track */}
          <motion.div
            className="relative w-full overflow-hidden rounded-xl bg-zinc-900/30 dark:bg-white/30"
            animate={{
              height: inflated ? 52 : 6,
              marginTop: inflated ? -6 : 0,
              marginBottom: inflated ? -6 : 0,
              opacity: inflated ? 1 : 0.8,
            }}
            transition={GROW_SPRING}
            style={{
              scaleX: stretchEffect ? scaleX : 1,
              scaleY: stretchEffect ? scaleY : 1,
              x: stretchEffect ? shear : 0,
              originX: stretchEffect ? stretchOrigin : 0.5,
            }}
          >
            <motion.div
              className="absolute left-0 top-0 h-full rounded-xl bg-black dark:bg-white"
              style={{ width: fillWidth }}
            />
            {/* Ghost segment: cursor beyond the fill */}
            <motion.div
              className="pointer-events-none absolute h-full rounded-xl bg-zinc-900/20 dark:bg-white/20"
              initial={false}
              animate={{
                left: hover && !hover.onFilledSide ? hover.left : fillEdge,
                width: hover && !hover.onFilledSide ? hover.width : 0,
                opacity: !hover || hover.onFilledSide || isDragging ? 0 : 1,
              }}
              transition={{ ...HOVER_TWEEN, opacity: { duration: 0.3 } }}
            />
            {/* Ghost segment: cursor inside the fill */}
            <motion.div
              className="pointer-events-none absolute z-[2] h-full rounded-xl bg-white/25 dark:bg-zinc-900/25"
              initial={false}
              animate={{
                left: hover?.onFilledSide ? hover.left : fillEdge,
                width: hover?.onFilledSide ? hover.width + 16 : 0,
                opacity: hover?.onFilledSide && !isDragging ? 1 : 0,
              }}
              transition={{ ...HOVER_TWEEN, opacity: { duration: 0.3 } }}
            />
          </motion.div>

          {/* Thumb */}
          <motion.span
            className="pointer-events-none absolute top-1/2 flex items-center justify-center"
            style={{ width: THUMB, height: THUMB, marginTop: -THUMB / 2, x: thumbX, left: 0, zIndex: 10 }}
            initial={false}
            transition={isDragging || isSnapping ? { duration: 0.4 } : GROW_SPRING}
          >
            <motion.span
              className={cn(
                "block rounded-xl bg-white transition-colors",
                inflated ? "shadow-sm" : "dark:bg-white",
              )}
              initial={false}
              style={{ scaleY: stretchEffect ? scaleY : 1 }}
              animate={{ width: inflated ? 6 : 14, height: inflated ? 42 : 14 }}
              transition={{ ...GROW_SPRING, delay: inflated ? 0.06 : 0 }}
            />
          </motion.span>
        </div>
      </div>
    </div>
  );
}