Music Player

// Shared motion tokens. Easing curves mirror the CSS custom properties in
// globals.css; springs are the canonical physics used across components.
// Strong custom variants — defaults like `ease-in`/`ease-out` feel weak.

export const EASE_OUT = [0.16, 1, 0.3, 1] as const;
export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;
export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const;

/** CSS string form of EASE_OUT for inline style transitions. */
export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)";

/** Press feedback on buttons and other tappable surfaces. */
export const SPRING_PRESS = {
  type: "spring",
  stiffness: 500,
  damping: 30,
  mass: 0.6,
} as const;

/** Content swaps — label/icon slots trading places inside a control. */
export const SPRING_SWAP = {
  type: "spring",
  stiffness: 460,
  damping: 30,
  mass: 0.55,
} as const;

/** Overlay panel entrances — modals and sheets summoned by pointer. */
export const SPRING_PANEL = {
  type: "spring",
  stiffness: 420,
  damping: 40,
  mass: 0.5,
} as const;

/** Shared-layout glides — pills, indicators and panels morphing between positions. */
export const SPRING_LAYOUT = {
  type: "spring",
  stiffness: 360,
  damping: 32,
  mass: 0.6,
} as const;

/** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */
export const SPRING_MOUSE = {
  stiffness: 200,
  damping: 15,
  mass: 0.3,
} as const;

/** Dragged handles and fills (sliders) — critically damped `useSpring` config,
 * so the value follows the pointer butterily and never rebounds off an end. */
export const SPRING_GLIDE = {
  stiffness: 700,
  damping: 50,
  mass: 0.5,
} as const;

"use client";

import { type KeyboardEvent, type PointerEvent, useCallback, useRef, useState } from "react";
import { capturePointer, releasePointer } from "@/lib/touch";

const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));

/** Nearest legal value on [min, max] for the given step. max counts as a
 * candidate when the step does not divide the range, so a pointer near the end
 * does not snap back onto the last whole step. */
export function snapSliderValue(next: number, min: number, max: number, step: number): number {
  // Neither case has a grid to walk. An empty range has exactly one legal
  // point, and a non-positive step only needs a clamp, which also keeps the
  // division below away from zero.
  if (!(max > min)) return min;
  if (!(step > 0)) return clamp(next, min, max);
  const whole = Math.floor(Number(((max - min) / step).toFixed(6)));
  const lastWhole = Number((min + whole * step).toFixed(6));
  const toGrid = clamp(Math.round((next - min) / step) * step + min, min, lastWhole);
  const snapped =
    lastWhole < max && Math.abs(next - max) <= Math.abs(next - toGrid) ? max : toGrid;
  return Number(snapped.toFixed(6));
}

export interface SliderOptions {
  value?: number;
  defaultValue?: number;
  onValueChange?: (value: number) => void;
  min?: number;
  max?: number;
  step?: number;
  disabled?: boolean;
  "aria-label"?: string;
  /** Announced instead of the raw number — pass one when the value carries a
   * unit or a suffix ("72.5 kg", "35%"); a bare number needs no valueText. */
  formatValueText?: (value: number) => string;
}

/**
 * Shared value + input plumbing for slider designs: controlled/uncontrolled
 * value, step snapping, pointer-capture drag along a track and arrow-key
 * control. Visuals and motion live in the component; this only owns the number.
 */
export function useSlider({
  value,
  defaultValue = 0,
  onValueChange,
  min = 0,
  max = 100,
  step = 1,
  disabled = false,
  "aria-label": ariaLabel,
  formatValueText,
}: SliderOptions) {
  const trackRef = useRef<HTMLDivElement>(null);
  const sliderEl = useRef<HTMLElement | null>(null);
  // The state drives visuals. Move reads this ref instead, so the first
  // pointermove after pointerdown does not have to wait on a re-render.
  const draggingRef = useRef(false);
  const [internal, setInternal] = useState(defaultValue);
  const [dragging, setDragging] = useState(false);
  const controlled = value !== undefined;
  // Collapse inverted or empty ranges and non-positive steps here, so that
  // percent, ticks and the keyboard maths never divide by zero or walk a
  // NaN grid.
  const lo = min;
  const hi = max > min ? max : min;
  const stride = step > 0 ? step : 1;
  const current = clamp(controlled ? value : internal, lo, hi);
  const percent = hi > lo ? ((current - lo) / (hi - lo)) * 100 : 0;

  const commit = useCallback(
    (next: number) => {
      const clean = snapSliderValue(next, lo, hi, stride);
      if (!controlled) setInternal(clean);
      onValueChange?.(clean);
    },
    [controlled, onValueChange, lo, hi, stride],
  );

  const commitFromX = useCallback(
    (clientX: number) => {
      const rect = trackRef.current?.getBoundingClientRect();
      if (!rect || rect.width === 0) return;
      const ratio = clamp((clientX - rect.left) / rect.width, 0, 1);
      commit(lo + ratio * (hi - lo));
    },
    [commit, lo, hi],
  );

  const onPointerDown = useCallback(
    (event: PointerEvent<HTMLDivElement>) => {
      if (disabled) return;
      // Start the drag first: capture is a convenience, and a browser that
      // refuses it — or a test DOM that has no pointer capture at all — must
      // not take the drag down with it.
      draggingRef.current = true;
      setDragging(true);
      capturePointer(event.currentTarget, event.pointerId);
      // A click on the track should land keyboard focus on the handle.
      sliderEl.current?.focus({ preventScroll: true });
      commitFromX(event.clientX);
    },
    [disabled, commitFromX],
  );

  const onPointerMove = useCallback(
    (event: PointerEvent<HTMLDivElement>) => {
      if (!draggingRef.current || disabled) return;
      commitFromX(event.clientX);
    },
    [disabled, commitFromX],
  );

  const endDrag = useCallback((event: PointerEvent<HTMLDivElement>) => {
    releasePointer(event.currentTarget, event.pointerId);
    draggingRef.current = false;
    setDragging(false);
  }, []);

  const onKeyDown = useCallback(
    (event: KeyboardEvent<HTMLElement>) => {
      if (disabled) return;
      const map: Record<string, number> = {
        ArrowRight: current + stride,
        ArrowUp: current + stride,
        ArrowLeft: current - stride,
        ArrowDown: current - stride,
        PageUp: current + stride * 10,
        PageDown: current - stride * 10,
        Home: lo,
        End: hi,
      };
      if (event.key in map) {
        event.preventDefault();
        commit(map[event.key]);
      }
    },
    [disabled, current, stride, lo, hi, commit],
  );

  return {
    current,
    percent,
    dragging,
    min: lo,
    max: hi,
    step: stride,
    commit,
    /** Pointer handlers for the track element — drag anywhere on it. */
    trackProps: {
      ref: trackRef,
      onPointerDown,
      onPointerMove,
      onPointerUp: endDrag,
      onPointerCancel: endDrag,
      onLostPointerCapture: endDrag,
    },
    /** ARIA + keyboard props for the focusable slider element. */
    sliderProps: {
      // Callback keeps the handle typed across button/div/motion hosts.
      ref: (node: HTMLElement | null) => {
        sliderEl.current = node;
      },
      role: "slider" as const,
      tabIndex: disabled ? -1 : 0,
      "aria-label": ariaLabel,
      "aria-valuemin": lo,
      "aria-valuemax": hi,
      "aria-valuenow": current,
      "aria-valuetext": formatValueText?.(current),
      "aria-disabled": disabled || undefined,
      onKeyDown,
    },
  };
}

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

// Shared touch primitives. iOS and iPadOS run their own gestures on top of the
// page — the long-press selection callout and the selection it drags in with
// it — and they win: once the platform claims a touch it cancels ours
// mid-gesture, so a press-and-hold or a drag simply dies. Surfaces that own
// their gesture have to opt out.
//
// What the two classes below cover, precisely:
// - `-webkit-touch-callout: none` stops iOS's long-press callout. WebKit-only:
//   it is not a property other engines have, so it is inert everywhere else.
// - `user-select: none` stops the long-press selection on every engine,
//   Android included, and stops a drag from painting a selection under the
//   cursor. It is inherited, so it reaches every descendant — which is why the
//   two classes differ only in whether they apply it unconditionally.
// What neither covers:
// - Chrome for Android's long-press menu on a link or an image. No CSS
//   suppresses it; a gesture surface that wraps one needs its own
//   `onContextMenu` with `preventDefault()`.
// - The native drag of an `<img>` or `<a>` descendant. `-webkit-user-drag` is
//   not inherited and plain divs and buttons are not drag sources, so setting
//   it on the surface does nothing — the child itself needs `draggable={false}`.

/**
 * Classes for a surface that *is* the control: a thumb, a drum, a stage, a
 * handle, a hold button. Selection is suppressed on every input, because a
 * drag that highlights the control's own label is wrong on a mouse too.
 * Compose with `touch-none` when the surface also owns the scroll axis — leave
 * it off when the page must still scroll from there.
 */
export const TOUCH_GESTURE_CLASS = "select-none [-webkit-touch-callout:none]";

/**
 * The same opt-out for a gesture surface that wraps content the consumer owns:
 * a scroller, a context-menu trigger, a sheet header, a list row. Selection is
 * suppressed only where the platform runs its own press gestures — a coarse
 * pointer — so a mouse user can still select and copy that content. If the
 * gesture itself would paint a selection under the cursor, add `select-none`
 * for the duration of the gesture rather than reaching for
 * `TOUCH_GESTURE_CLASS`.
 *
 * `pointer: coarse` describes the *primary* pointer and nothing else, so a
 * hybrid machine reads it wrong in both directions: a tablet with a mouse
 * plugged in keeps touch as primary and loses mouse selection, and a laptop
 * with a touchscreen keeps the mouse as primary and leaves selection live
 * under a finger. No media query can answer per interaction — the query is
 * about the device, and the question is about the gesture in progress. The
 * default stays here because it is right on the machines that are one thing or
 * the other, and losing a selection is a nuisance; where the miss costs a
 * *gesture* instead, the surface pairs it with `holdSelection` on the press.
 */
export const TOUCH_GESTURE_CONTENT_CLASS =
  "[-webkit-touch-callout:none] pointer-coarse:select-none";

/**
 * Grow a small control's *hit area* to at least 44×44px (WCAG 2.5.5, Apple
 * HIG) on a coarse pointer, without changing what it looks like or the space
 * it takes in layout. An invisible `::after` box, centered on the control and
 * `max(100%, 2.75rem)` on each axis, catches the taps: a 32px icon button
 * reaches 6px past each edge, a wide 40px button only grows vertically, and a
 * control already 44px or larger is left as it is. Hit-testing a pseudo
 * element lands on its owner, so handlers, focus and `:active` all behave.
 *
 * Mouse and trackpad rendering is untouched — nothing here applies outside
 * `pointer: coarse`. Requirements on the element it goes on:
 * - It must be the containing block: add `relative` (and keep it mergeable, so
 *   a consumer's `absolute` still wins through `cn`).
 * - It must not clip itself (`overflow-hidden`), or the overhang is clipped
 *   away along with its hit area.
 * - It must render children: `<input>` and other void elements have no
 *   `::after`. Put it on the wrapper or label instead.
 * - It must not already use `::after` for something visible.
 *
 * Centered 44px means two 32px buttons with a 4px gap overlap by 8px; the
 * later one wins that strip, which still ends well short of the earlier
 * button's visual center. Below a ~32px pitch the later neighbour starts
 * eating into that center — use `TOUCH_TARGET_Y_CLASS` for such dense rows.
 *
 * The overhang is real geometry: inside a scroll container it counts as
 * scrollable overflow, so a control flush against a scroller's edge can add a
 * few pixels of scroll on touch screens. Give such a scroller a little padding
 * on that side.
 */
export const TOUCH_TARGET_CLASS =
  "pointer-coarse:after:absolute pointer-coarse:after:top-1/2 pointer-coarse:after:left-1/2 pointer-coarse:after:size-[max(100%,2.75rem)] pointer-coarse:after:-translate-x-1/2 pointer-coarse:after:-translate-y-1/2 pointer-coarse:after:content-['']";

/**
 * `TOUCH_TARGET_CLASS` on the vertical axis only, for controls packed tighter
 * than ~32px apart in a row (pagination dots, dense swatches), where growing
 * sideways would hand most of each control to its neighbour. Same rules.
 */
export const TOUCH_TARGET_Y_CLASS =
  "pointer-coarse:after:absolute pointer-coarse:after:inset-x-0 pointer-coarse:after:top-1/2 pointer-coarse:after:h-[max(100%,2.75rem)] pointer-coarse:after:-translate-y-1/2 pointer-coarse:after:content-['']";

/**
 * Suppress selection on `element` for as long as a gesture is running on it,
 * whatever the primary pointer of the machine happens to be. Returns the
 * release. Inline, so it wins over the class above and is gone again the
 * moment the gesture ends.
 *
 * For the press gestures a native selection would otherwise steal — a
 * long-press that opens a menu. Elsewhere prefer the classes: a surface that
 * takes selection away for the whole session is a surface whose text nobody
 * can copy.
 */
export function holdSelection(element: HTMLElement) {
  element.style.setProperty("user-select", "none");
  element.style.setProperty("-webkit-user-select", "none");
  return () => {
    element.style.removeProperty("user-select");
    element.style.removeProperty("-webkit-user-select");
  };
}

/**
 * Pointer capture, best effort. WebKit throws `NotFoundError` when the pointer
 * is already gone by the time the handler runs — routine on iOS, where the
 * system can claim the touch first — and an uncaught throw takes the rest of
 * the handler, the gesture included, down with it. Touch pointers carry
 * implicit capture anyway, so losing it is never fatal.
 */
export function capturePointer(element: Element, pointerId: number) {
  try {
    element.setPointerCapture(pointerId);
  } catch {
    // Pointer is no longer active — implicit capture still applies on touch.
  }
}

/** Release a capture taken with `capturePointer`, ignoring a stale pointer. */
export function releasePointer(element: Element, pointerId: number) {
  try {
    if (element.hasPointerCapture(pointerId)) {
      element.releasePointerCapture(pointerId);
    }
  } catch {
    // Capture was already dropped by the browser.
  }
}

/**
 * Whether this event came from a pointer that is *hovering*: not a touch, and
 * not currently pressed. Which input the user is holding right now is not
 * something a device capability can answer — a touchscreen laptop hovers and
 * taps, and iPadOS reports a fine hovering pointer for a finger — so both
 * paths stay live and each handler branches on the event it was given.
 *
 * A pen resting on the glass is making contact, not hovering: `buttons` is the
 * tell, and it sends a pen tap down the same route a finger takes.
 *
 * This answers what an *enter* asks. A leave is the other half of a pair and
 * has to be read against the enter that started it — `useHoverGesture` in
 * `lib/hooks/use-hover-gesture` does that, and hover surfaces should use it
 * rather than asking this question twice.
 */
export const isHoveringPointer = (event: {
  pointerType: string;
  buttons: number;
}) => event.pointerType !== "touch" && event.buttons === 0;

"use client";
// karaui.kamisama-v0.my.id/components/blocks/music-player

import {
  ListMusic,
  Pause,
  Play,
  Repeat,
  Repeat1,
  Shuffle,
  SkipBack,
  SkipForward,
  Volume1,
  Volume2,
  VolumeX,
  X,
} from "lucide-react";
import {
  AnimatePresence,
  motion,
  useMotionValue,
  useReducedMotion,
  useTransform,
} from "motion/react";
import { type ReactNode, useCallback, useEffect, useId, useRef, useState } from "react";
import { Toggle } from "@/components/motion/toggle-group";
import { EASE_IN_OUT, EASE_OUT, SPRING_LAYOUT, SPRING_PANEL, SPRING_SWAP } from "@/lib/ease";
import { useSlider } from "@/lib/hooks/use-slider";
import { cn } from "@/lib/utils";

export interface MusicTrack {
  id: string;
  title: string;
  artist: string;
  album?: string;
  /** Length in seconds. Drives the simulated clock when there is no `src`. */
  duration: number;
  /** Cover image URL. Without one a gradient from the theme's chart tokens is drawn. */
  cover?: string;
  /** Optional audio file. Without one playback is simulated. */
  src?: string;
}

export type MusicRepeat = "off" | "all" | "one";

export interface MusicPlayerProps {
  tracks: MusicTrack[];
  /** Controlled track index. */
  index?: number;
  defaultIndex?: number;
  onIndexChange?: (index: number) => void;
  /** Controlled playing state. */
  playing?: boolean;
  defaultPlaying?: boolean;
  onPlayingChange?: (playing: boolean) => void;
  /** Controlled volume, 0–1. */
  volume?: number;
  defaultVolume?: number;
  onVolumeChange?: (volume: number) => void;
  defaultShuffle?: boolean;
  defaultRepeat?: MusicRepeat;
  /** Open the queue drawer initially. */
  defaultQueueOpen?: boolean;
  className?: string;
}

function useControllable<T>(
  value: T | undefined,
  defaultValue: T,
  onChange: ((next: T) => void) | undefined,
) {
  const [internal, setInternal] = useState(defaultValue);
  const controlled = value !== undefined;
  const current = controlled ? value : internal;
  const set = useCallback(
    (next: T) => {
      if (!controlled) setInternal(next);
      onChange?.(next);
    },
    [controlled, onChange],
  );
  return [current, set] as const;
}

const formatTime = (seconds: number) => {
  const s = Math.max(0, Math.floor(seconds));
  return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
};

/** Deterministic shuffle (mulberry32) that keeps `first` at the front. */
function shuffledOrder(length: number, first: number, seed: number) {
  let t = seed >>> 0;
  const rand = () => {
    t += 0x6d2b79f5;
    let r = Math.imul(t ^ (t >>> 15), 1 | t);
    r ^= r + Math.imul(r ^ (r >>> 7), 61 | r);
    return ((r ^ (r >>> 14)) >>> 0) / 4294967296;
  };
  const rest = Array.from({ length }, (_, i) => i).filter((i) => i !== first);
  for (let i = rest.length - 1; i > 0; i--) {
    const j = Math.floor(rand() * (i + 1));
    [rest[i], rest[j]] = [rest[j], rest[i]];
  }
  return [first, ...rest];
}

// Simulated network: the buffer starts this many seconds ahead and fills at
// this multiple of real time, so the buffered bar visibly leads the playhead.
const SIM_PREBUFFER = 14;
const SIM_BUFFER_RATE = 3;

/** Two chart tokens per track, picked deterministically from its index. */
function coverGradient(i: number) {
  const a = (i % 5) + 1;
  const b = ((i + 2) % 5) + 1;
  return `radial-gradient(circle at 25% 20%, color-mix(in oklab, var(--chart-${b}) 70%, transparent), transparent 60%), linear-gradient(135deg, var(--chart-${a}), var(--chart-${b}))`;
}

/**
 * Now-playing card: cover art that breathes with playback, title/artist that
 * cross-fade in the skip direction, a scrub bar with buffered and played
 * layers, a play/pause icon swap, shuffle and repeat toggles, volume, and a
 * queue drawer that slides up over the card. Playback is simulated unless a
 * track has a `src`, in which case a hidden `<audio>` element drives the clock.
 */
export function MusicPlayer({
  tracks,
  index: indexProp,
  defaultIndex = 0,
  onIndexChange,
  playing: playingProp,
  defaultPlaying = false,
  onPlayingChange,
  volume: volumeProp,
  defaultVolume = 0.8,
  onVolumeChange,
  defaultShuffle = false,
  defaultRepeat = "off",
  defaultQueueOpen = false,
  className,
}: MusicPlayerProps) {
  const reduce = useReducedMotion();
  const baseId = useId();
  const [index, setIndex] = useControllable(indexProp, defaultIndex, onIndexChange);
  const [playing, setPlaying] = useControllable(playingProp, defaultPlaying, onPlayingChange);
  const [volume, setVolume] = useControllable(volumeProp, defaultVolume, onVolumeChange);
  const [muted, setMuted] = useState(false);
  const [shuffle, setShuffle] = useState(defaultShuffle);
  const [order, setOrder] = useState<number[]>(() =>
    defaultShuffle
      ? shuffledOrder(tracks.length, defaultIndex, tracks.length * 31 + defaultIndex)
      : tracks.map((_, i) => i),
  );
  const [repeat, setRepeat] = useState<MusicRepeat>(defaultRepeat);
  const [queueOpen, setQueueOpen] = useState(defaultQueueOpen);
  const [dir, setDir] = useState<1 | -1>(1);
  const [second, setSecond] = useState(0);

  const safeIndex = Math.min(Math.max(index, 0), Math.max(tracks.length - 1, 0));
  const track = tracks[safeIndex];
  const duration = track?.duration ?? 0;

  const audioRef = useRef<HTMLAudioElement>(null);
  const time = useMotionValue(0);
  const buffered = useMotionValue(0);
  const playedScale = useTransform(time, (t) => (duration > 0 ? t / duration : 0));
  const bufferedScale = useTransform(buffered, (b) => (duration > 0 ? b / duration : 0));
  const thumbX = useTransform(playedScale, (p) => `${p * 100}%`);

  const syncSecond = useCallback(
    (t: number) => setSecond((prev) => (Math.floor(t) === prev ? prev : Math.floor(t))),
    [],
  );

  const seek = useCallback(
    (t: number) => {
      const next = Math.min(Math.max(t, 0), duration);
      time.set(next);
      if (buffered.get() < next) buffered.set(Math.min(duration, next + SIM_PREBUFFER));
      if (audioRef.current) audioRef.current.currentTime = next;
      syncSecond(next);
    },
    [duration, time, buffered, syncSecond],
  );

  const go = useCallback(
    (nextIndex: number, direction: 1 | -1) => {
      // Same track (one-song queue): the reset effect won't fire, so rewind here.
      if (nextIndex === safeIndex) seek(0);
      setDir(direction);
      setIndex(nextIndex);
    },
    [setIndex, safeIndex, seek],
  );

  const step = useCallback(
    (direction: 1 | -1, auto = false) => {
      const pos = order.indexOf(safeIndex);
      const target = pos + direction;
      if (target >= order.length) {
        if (auto && repeat === "off") {
          setPlaying(false);
          seek(0);
          return;
        }
        go(order[0], 1);
      } else if (target < 0) {
        go(order[order.length - 1], -1);
      } else {
        go(order[target], direction);
      }
    },
    [order, safeIndex, repeat, go, setPlaying, seek],
  );

  const previous = () => {
    if (time.get() > 3) seek(0);
    else step(-1);
  };

  // Reset the clock whenever the track changes.
  const trackId = track?.id;
  useEffect(() => {
    if (trackId === undefined) return;
    time.set(0);
    buffered.set(Math.min(duration, SIM_PREBUFFER));
    setSecond(0);
  }, [trackId, duration, time, buffered]);

  // Drive the real element when a source exists.
  // biome-ignore lint/correctness/useExhaustiveDependencies: a new track swaps `src`, which stops playback, so it has to resume.
  useEffect(() => {
    const audio = audioRef.current;
    if (!audio) return;
    if (playing) audio.play().catch(() => setPlaying(false));
    else audio.pause();
  }, [playing, setPlaying, trackId]);

  useEffect(() => {
    if (audioRef.current) audioRef.current.volume = muted ? 0 : volume;
  }, [volume, muted]);

  // One frame loop advances the playhead (simulated) or mirrors the audio
  // element, written to motion values so the bar never re-renders React.
  const onEnded = useRef<() => void>(() => {});
  onEnded.current = () => {
    if (repeat === "one") {
      seek(0);
      audioRef.current?.play().catch(() => {});
    } else step(1, true);
  };
  useEffect(() => {
    if (!playing || duration <= 0) return;
    let frame = 0;
    let last = performance.now();
    // Fire the end handler once per arrival at the end; a rewind re-arms it.
    let ended = false;
    const tick = (now: number) => {
      const dt = (now - last) / 1000;
      last = now;
      const audio = audioRef.current;
      let t: number;
      if (audio) {
        t = audio.currentTime;
        const ranges = audio.buffered;
        if (ranges.length > 0) buffered.set(ranges.end(ranges.length - 1));
      } else {
        t = Math.min(duration, time.get() + dt);
        buffered.set(Math.min(duration, Math.max(buffered.get(), t) + dt * SIM_BUFFER_RATE));
      }
      time.set(t);
      syncSecond(t);
      if (!audio && t >= duration) {
        if (!ended) {
          ended = true;
          onEnded.current();
        }
      } else ended = false;
      frame = requestAnimationFrame(tick);
    };
    frame = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(frame);
  }, [playing, duration, time, buffered, syncSecond]);

  const toggleShuffle = (on: boolean) => {
    setShuffle(on);
    // Seeded from the queue and the current track so it is stable per toggle.
    setOrder(
      on
        ? shuffledOrder(tracks.length, safeIndex, tracks.length * 31 + safeIndex)
        : tracks.map((_, i) => i),
    );
  };

  const cycleRepeat = () =>
    setRepeat((r) => (r === "off" ? "all" : r === "all" ? "one" : "off"));

  const scrub = useSlider({
    value: second,
    onValueChange: seek,
    min: 0,
    max: Math.max(1, Math.floor(duration)),
    step: 1,
    "aria-label": "Seek",
    formatValueText: (v) => `${formatTime(v)} of ${formatTime(duration)}`,
  });

  const shownVolume = muted ? 0 : volume;
  const vol = useSlider({
    value: Math.round(shownVolume * 100),
    onValueChange: (v) => {
      setMuted(false);
      setVolume(v / 100);
    },
    min: 0,
    max: 100,
    step: 5,
    "aria-label": "Volume",
    formatValueText: (v) => `${v}%`,
  });

  if (!track) return null;

  // Variants read the skip direction through `custom`, so the outgoing item
  // (whose props froze on its last render) still exits the right way.
  const textSlide = {
    enter: (d: number) => (reduce ? { opacity: 0 } : { opacity: 0, x: d * 24 }),
    center: { opacity: 1, x: 0 },
    exit: (d: number) => (reduce ? { opacity: 0 } : { opacity: 0, x: d * -24 }),
  };
  const coverSlide = {
    enter: (d: number) => (reduce ? { opacity: 0 } : { opacity: 0, x: d * 40, scale: 0.9 }),
    exit: (d: number) =>
      reduce
        ? { opacity: 0 }
        : { opacity: 0, x: d * -40, scale: 0.85, transition: { duration: 0.18 } },
  };

  const VolumeIcon = shownVolume === 0 ? VolumeX : shownVolume < 0.5 ? Volume1 : Volume2;
  const queueId = `${baseId}-queue`;

  return (
    <section
      aria-label="Music player"
      className={cn(
        "relative w-full max-w-sm overflow-hidden rounded-3xl border border-border bg-card p-5 text-card-foreground shadow-lg",
        className,
      )}
    >
      {track.src ? (
        // biome-ignore lint/a11y/useMediaCaption: music playback; there is no spoken content to caption.
        <audio
          ref={audioRef}
          src={track.src}
          preload="metadata"
          onEnded={() => onEnded.current()}
          className="hidden"
        />
      ) : null}

      <div className="flex items-center gap-4">
        <div className="relative size-28 shrink-0">
          <AnimatePresence initial={false} mode="popLayout" custom={dir}>
            <motion.div
              key={track.id}
              custom={dir}
              variants={coverSlide}
              initial="enter"
              animate={{
                opacity: 1,
                x: 0,
                scale: reduce || playing ? 1 : 0.9,
              }}
              exit="exit"
              transition={SPRING_LAYOUT}
              className="absolute inset-0 overflow-hidden rounded-2xl shadow-md"
              style={track.cover ? undefined : { backgroundImage: coverGradient(safeIndex) }}
            >
              {track.cover ? (
                // biome-ignore lint/performance/noImgElement: library component, framework-agnostic.
                <img src={track.cover} alt="" className="size-full object-cover" />
              ) : (
                <span
                  aria-hidden
                  className="absolute inset-0 grid place-items-center text-3xl font-semibold text-background/80"
                >
                  {track.title.slice(0, 1)}
                </span>
              )}
            </motion.div>
          </AnimatePresence>
        </div>

        <div className="relative min-w-0 flex-1 self-stretch overflow-hidden">
          <AnimatePresence initial={false} mode="popLayout" custom={dir}>
            <motion.div
              key={track.id}
              custom={dir}
              variants={textSlide}
              initial="enter"
              animate="center"
              exit="exit"
              transition={{ duration: 0.24, ease: EASE_OUT }}
              className="flex h-full flex-col justify-center"
            >
              <p className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
                {playing ? "Now playing" : "Paused"}
              </p>
              <h3 className="mt-1 truncate text-base font-semibold">{track.title}</h3>
              <p className="truncate text-sm text-muted-foreground">{track.artist}</p>
              {track.album ? (
                <p className="truncate text-xs text-muted-foreground/80">{track.album}</p>
              ) : null}
            </motion.div>
          </AnimatePresence>
        </div>
      </div>

      {/* Scrub bar */}
      <div className="mt-5">
        <div
          {...scrub.trackProps}
          className="group relative flex h-4 cursor-pointer touch-none items-center"
        >
          <div className="relative h-1.5 w-full overflow-hidden rounded-full bg-foreground/10">
            <motion.div
              style={{ scaleX: bufferedScale }}
              className="absolute inset-0 origin-left rounded-full bg-foreground/15"
            />
            <motion.div
              style={{ scaleX: playedScale }}
              className="absolute inset-0 origin-left rounded-full bg-primary"
            />
          </div>
          {/* Full-width layer translated by the played fraction carries the thumb. */}
          <motion.div style={{ x: thumbX }} className="pointer-events-none absolute inset-0">
            <span
              {...scrub.sliderProps}
              className={cn(
                "pointer-events-auto absolute top-1/2 left-0 size-3.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary shadow-sm outline-none ring-primary/30 transition-transform focus-visible:ring-4",
                scrub.dragging ? "scale-125" : "scale-0 group-hover:scale-100 focus-visible:scale-100",
              )}
            />
          </motion.div>
        </div>
        <div className="mt-1 flex justify-between text-[11px] tabular-nums text-muted-foreground">
          <span>{formatTime(second)}</span>
          <span>-{formatTime(duration - second)}</span>
        </div>
      </div>

      {/* Transport */}
      <div className="mt-2 flex items-center justify-between">
        <Toggle
          size="sm"
          variant="outline"
          aria-label="Shuffle"
          pressed={shuffle}
          onPressedChange={toggleShuffle}
          className={cn("rounded-full", shuffle && "text-primary")}
        >
          <Shuffle aria-hidden />
        </Toggle>
        <div className="flex items-center gap-2">
          <TransportButton label="Previous track" onClick={previous}>
            <SkipBack aria-hidden className="size-5 fill-current" />
          </TransportButton>
          <motion.button
            type="button"
            aria-label={playing ? "Pause" : "Play"}
            onClick={() => setPlaying(!playing)}
            whileTap={reduce ? undefined : { scale: 0.9 }}
            transition={SPRING_SWAP}
            className="grid size-12 place-items-center rounded-full bg-primary text-primary-foreground shadow-md outline-none focus-visible:ring-4 focus-visible:ring-primary/30"
          >
            <AnimatePresence initial={false} mode="popLayout">
              <motion.span
                key={playing ? "pause" : "play"}
                initial={reduce ? { opacity: 0 } : { opacity: 0, scale: 0.4, rotate: -90 }}
                animate={{ opacity: 1, scale: 1, rotate: 0 }}
                exit={reduce ? { opacity: 0 } : { opacity: 0, scale: 0.4, rotate: 90 }}
                transition={SPRING_SWAP}
                className="grid place-items-center"
              >
                {playing ? (
                  <Pause aria-hidden className="size-5 fill-current" />
                ) : (
                  <Play aria-hidden className="ml-0.5 size-5 fill-current" />
                )}
              </motion.span>
            </AnimatePresence>
          </motion.button>
          <TransportButton label="Next track" onClick={() => step(1)}>
            <SkipForward aria-hidden className="size-5 fill-current" />
          </TransportButton>
        </div>
        <button
          type="button"
          aria-label={`Repeat: ${repeat}`}
          aria-pressed={repeat !== "off"}
          onClick={cycleRepeat}
          className={cn(
            "grid size-7 place-items-center rounded-full outline-none transition-colors focus-visible:ring-2 focus-visible:ring-primary [&_svg]:size-3.5",
            repeat === "off" ? "text-muted-foreground hover:text-foreground" : "bg-muted text-primary",
          )}
        >
          <AnimatePresence initial={false} mode="popLayout">
            <motion.span
              key={repeat === "one" ? "one" : "all"}
              initial={{ opacity: 0, scale: reduce ? 1 : 0.6 }}
              animate={{ opacity: 1, scale: 1 }}
              exit={{ opacity: 0, scale: reduce ? 1 : 0.6 }}
              transition={SPRING_SWAP}
            >
              {repeat === "one" ? <Repeat1 aria-hidden /> : <Repeat aria-hidden />}
            </motion.span>
          </AnimatePresence>
        </button>
      </div>

      {/* Volume + queue */}
      <div className="mt-3 flex items-center gap-2">
        <button
          type="button"
          aria-label={muted ? "Unmute" : "Mute"}
          onClick={() => setMuted(!muted)}
          className="grid size-7 shrink-0 place-items-center rounded-full text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary"
        >
          <VolumeIcon aria-hidden className="size-4" />
        </button>
        <div {...vol.trackProps} className="relative flex h-4 flex-1 cursor-pointer touch-none items-center">
          <div className="relative h-1 w-full overflow-hidden rounded-full bg-foreground/10">
            <motion.div
              animate={{ scaleX: vol.percent / 100 }}
              transition={vol.dragging || reduce ? { duration: 0 } : SPRING_LAYOUT}
              className="absolute inset-0 origin-left rounded-full bg-foreground/60"
            />
          </div>
          <motion.div
            animate={{ x: `${vol.percent}%` }}
            transition={vol.dragging || reduce ? { duration: 0 } : SPRING_LAYOUT}
            className="pointer-events-none absolute inset-0"
          >
            <span
              {...vol.sliderProps}
              className="pointer-events-auto absolute top-1/2 left-0 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full border border-border bg-background shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-primary"
            />
          </motion.div>
        </div>
        <button
          type="button"
          aria-label="Queue"
          aria-expanded={queueOpen}
          aria-controls={queueId}
          onClick={() => setQueueOpen(!queueOpen)}
          className={cn(
            "grid size-7 shrink-0 place-items-center rounded-full outline-none transition-colors focus-visible:ring-2 focus-visible:ring-primary",
            queueOpen ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground",
          )}
        >
          <ListMusic aria-hidden className="size-4" />
        </button>
      </div>

      {/* Queue drawer */}
      <AnimatePresence>
        {queueOpen ? (
          <motion.div
            id={queueId}
            key="queue"
            initial={reduce ? { opacity: 0 } : { y: "100%" }}
            animate={reduce ? { opacity: 1 } : { y: 0 }}
            exit={reduce ? { opacity: 0 } : { y: "100%", transition: { duration: 0.2, ease: EASE_OUT } }}
            transition={SPRING_PANEL}
            className="absolute inset-x-0 bottom-0 z-10 flex max-h-[75%] flex-col rounded-t-3xl border-t border-border bg-card/95 shadow-lg backdrop-blur"
          >
            <div className="flex items-center justify-between px-5 pt-4 pb-2">
              <h4 className="text-sm font-semibold">Up next</h4>
              <button
                type="button"
                aria-label="Close queue"
                onClick={() => setQueueOpen(false)}
                className="grid size-7 place-items-center rounded-full text-muted-foreground outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary"
              >
                <X aria-hidden className="size-4" />
              </button>
            </div>
            <ol className="flex-1 overflow-y-auto px-2 pb-3 [scrollbar-color:var(--border-strong)_transparent] [scrollbar-width:thin]">
              {order.map((i, pos) => {
                const t = tracks[i];
                const current = i === safeIndex;
                return (
                  <motion.li
                    key={t.id}
                    initial={reduce ? false : { opacity: 0, y: 8 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.2, ease: EASE_OUT, delay: reduce ? 0 : pos * 0.03 }}
                  >
                    <button
                      type="button"
                      aria-current={current ? "true" : undefined}
                      onClick={() => {
                        go(i, i >= safeIndex ? 1 : -1);
                        setPlaying(true);
                      }}
                      className="relative flex w-full items-center gap-3 rounded-xl px-3 py-2 text-left outline-none focus-visible:ring-2 focus-visible:ring-primary"
                    >
                      {current ? (
                        <motion.span
                          layoutId={`${baseId}-queue-active`}
                          transition={reduce ? { duration: 0 } : SPRING_LAYOUT}
                          className="absolute inset-0 rounded-xl bg-muted"
                        />
                      ) : null}
                      <span
                        aria-hidden
                        className="relative size-8 shrink-0 rounded-md"
                        style={t.cover ? undefined : { backgroundImage: coverGradient(i) }}
                      >
                        {t.cover ? (
                          // biome-ignore lint/performance/noImgElement: library component, framework-agnostic.
                          <img src={t.cover} alt="" className="size-full rounded-md object-cover" />
                        ) : null}
                      </span>
                      <span className="relative min-w-0 flex-1">
                        <span className={cn("block truncate text-sm", current && "font-medium")}>
                          {t.title}
                        </span>
                        <span className="block truncate text-xs text-muted-foreground">{t.artist}</span>
                      </span>
                      {current && playing ? (
                        <Equalizer reduce={Boolean(reduce)} />
                      ) : (
                        <span className="relative text-xs tabular-nums text-muted-foreground">
                          {formatTime(t.duration)}
                        </span>
                      )}
                    </button>
                  </motion.li>
                );
              })}
            </ol>
          </motion.div>
        ) : null}
      </AnimatePresence>
    </section>
  );
}

function TransportButton({
  label,
  onClick,
  children,
}: {
  label: string;
  onClick: () => void;
  children: ReactNode;
}) {
  const reduce = useReducedMotion();
  return (
    <motion.button
      type="button"
      aria-label={label}
      onClick={onClick}
      whileTap={reduce ? undefined : { scale: 0.85 }}
      transition={SPRING_SWAP}
      className="grid size-10 place-items-center rounded-full text-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary"
    >
      {children}
    </motion.button>
  );
}

// Bar heights for the equalizer loop, as scaleY keyframes per bar.
const EQ_BARS = [
  [0.35, 1, 0.5, 0.8, 0.35],
  [1, 0.45, 0.9, 0.3, 1],
  [0.6, 0.85, 0.3, 1, 0.6],
];

function Equalizer({ reduce }: { reduce: boolean }) {
  return (
    <span aria-hidden className="relative flex h-3.5 items-end gap-0.5">
      {EQ_BARS.map((frames, i) => (
        <motion.span
          // biome-ignore lint/suspicious/noArrayIndexKey: fixed decorative bars.
          key={i}
          className="h-full w-0.5 origin-bottom rounded-full bg-primary"
          initial={{ scaleY: frames[0] }}
          animate={reduce ? { scaleY: 0.6 } : { scaleY: frames }}
          transition={
            reduce ? { duration: 0 } : { duration: 1.1, repeat: Number.POSITIVE_INFINITY, ease: EASE_IN_OUT }
          }
        />
      ))}
    </span>
  );
}

"use client";

import {
  AnimatePresence,
  type HTMLMotionProps,
  motion,
  useReducedMotion,
} from "motion/react";
import {
  createContext,
  forwardRef,
  type KeyboardEvent,
  type ReactNode,
  useCallback,
  useContext,
  useEffect,
  useId,
  useRef,
  useState,
} from "react";
import { SPRING_LAYOUT, SPRING_PRESS, SPRING_SWAP } from "@/lib/ease";
import { TOUCH_TARGET_CLASS } from "@/lib/touch";
import { cn } from "@/lib/utils";

// Toggle / ToggleGroup vs SegmentedControl: `SegmentedControl`
// (segmented-control.tsx) is a radiogroup form control that always holds one
// value and ships a data-driven `ToggleGroup` for quick `items` arrays. This
// file is the composable, shadcn-shaped toolbar primitive: a standalone
// `Toggle`, and a `ToggleGroup` you fill with `ToggleGroupItem` children
// (icons, labels, tooltips, anything), with `default`/`outline` variants. In
// single mode one pressed surface glides between items; in multiple mode each
// item pops its own surface in and out.

export type ToggleVariant = "default" | "outline";
export type ToggleSize = "sm" | "md" | "lg";

const sizeClass: Record<ToggleSize, string> = {
  sm: "h-7 min-w-7 gap-1.5 px-2 text-xs [&_svg]:size-3.5",
  md: "h-9 min-w-9 gap-2 px-2.5 text-sm [&_svg]:size-4",
  lg: "h-11 min-w-11 gap-2 px-3.5 text-sm [&_svg]:size-[18px]",
};

const surfaceClass: Record<ToggleVariant, string> = {
  default: "bg-muted ring-1 ring-border-strong",
  outline: "bg-muted",
};

const itemBase =
  "relative isolate inline-flex shrink-0 select-none items-center justify-center whitespace-nowrap font-medium outline-none transition-colors duration-200 focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";

function useControllable<T>(
  value: T | undefined,
  defaultValue: T,
  onChange: ((next: T) => void) | undefined,
) {
  const [internal, setInternal] = useState<T>(defaultValue);
  const controlled = value !== undefined;
  const current = controlled ? value : internal;
  const set = useCallback(
    (next: T) => {
      if (!controlled) setInternal(next);
      onChange?.(next);
    },
    [controlled, onChange],
  );
  return [current, set] as const;
}

type ButtonBaseProps = Omit<HTMLMotionProps<"button">, "children" | "value" | "type">;

/** The pressed surface that pops in and out behind a standalone toggle or a multiple-mode item. */
function PopSurface({ show, variant }: { show: boolean; variant: ToggleVariant }) {
  const reduce = useReducedMotion();
  return (
    <AnimatePresence initial={false}>
      {show ? (
        <motion.span
          key="on"
          aria-hidden
          initial={reduce ? { opacity: 0 } : { opacity: 0, scale: 0.6 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={
            reduce
              ? { opacity: 0 }
              : { opacity: 0, scale: 0.75, transition: { duration: 0.12 } }
          }
          transition={SPRING_SWAP}
          className={cn("absolute inset-0 -z-10 rounded-[inherit]", surfaceClass[variant])}
        />
      ) : null}
    </AnimatePresence>
  );
}

/* ------------------------------------------------------------------------ */
/* Toggle                                                                    */
/* ------------------------------------------------------------------------ */

export interface ToggleProps extends ButtonBaseProps {
  pressed?: boolean;
  defaultPressed?: boolean;
  onPressedChange?: (pressed: boolean) => void;
  variant?: ToggleVariant;
  size?: ToggleSize;
  children?: ReactNode;
}

/** A two-state button (`aria-pressed`) whose pressed surface springs in and out. */
export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(function Toggle(
  {
    pressed,
    defaultPressed = false,
    onPressedChange,
    variant = "default",
    size = "md",
    disabled,
    className,
    children,
    onClick,
    ...rest
  },
  ref,
) {
  const reduce = useReducedMotion();
  const [on, setOn] = useControllable(pressed, defaultPressed, onPressedChange);
  return (
    <motion.button
      ref={ref}
      type="button"
      aria-pressed={on}
      data-state={on ? "on" : "off"}
      disabled={disabled}
      whileTap={reduce || disabled ? undefined : { scale: 0.9 }}
      transition={SPRING_PRESS}
      onClick={(event) => {
        onClick?.(event);
        if (!event.defaultPrevented) setOn(!on);
      }}
      className={cn(
        itemBase,
        TOUCH_TARGET_CLASS,
        "rounded-lg focus-visible:ring-offset-1 focus-visible:ring-offset-background",
        sizeClass[size],
        variant === "outline" && "border border-border",
        on
          ? "text-foreground"
          : "text-muted-foreground enabled:hover:bg-muted/60 enabled:hover:text-foreground",
        className,
      )}
      {...rest}
    >
      <PopSurface show={on} variant={variant} />
      {children}
    </motion.button>
  );
});

/* ------------------------------------------------------------------------ */
/* ToggleGroup                                                               */
/* ------------------------------------------------------------------------ */

interface ToggleGroupContextValue {
  type: "single" | "multiple";
  pressed: string[];
  toggle: (value: string) => void;
  variant: ToggleVariant;
  size: ToggleSize;
  disabled: boolean;
  layoutId: string;
  tabStop: string | null;
  setTabStop: (value: string) => void;
}

const ToggleGroupContext = createContext<ToggleGroupContextValue | null>(null);

type ToggleGroupBase = Omit<
  HTMLMotionProps<"div">,
  "children" | "defaultValue" | "onChange" | "dir"
> & {
  variant?: ToggleVariant;
  size?: ToggleSize;
  disabled?: boolean;
  /** Arrow-key axis for roving focus. Default "horizontal" (both axes still work). */
  orientation?: "horizontal" | "vertical";
  children?: ReactNode;
};

export type ToggleGroupSingleProps = ToggleGroupBase & {
  type: "single";
  /** The pressed item, or `""` when none is pressed. */
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  /** Disallow un-pressing the active item, so one is always pressed. */
  required?: boolean;
};

export type ToggleGroupMultipleProps = ToggleGroupBase & {
  type: "multiple";
  value?: string[];
  defaultValue?: string[];
  onValueChange?: (value: string[]) => void;
};

export type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;

const ITEM_SELECTOR = "[data-toggle-group-item]";

function enabledItems(root: HTMLElement | null) {
  if (!root) return [];
  return Array.from(root.querySelectorAll<HTMLButtonElement>(ITEM_SELECTOR)).filter(
    (el) => !el.disabled && el.closest("[data-toggle-group]") === root,
  );
}

/**
 * Toolbar-style group of `ToggleGroupItem`s. `type="single"` behaves like a
 * set of mutually exclusive toggles (deselectable unless `required`) whose
 * pressed surface glides between items; `type="multiple"` presses any subset.
 * One tab stop, arrow keys / Home / End rove between items, Space/Enter press.
 */
export function ToggleGroup(props: ToggleGroupProps) {
  const {
    type,
    value: _value,
    defaultValue: _defaultValue,
    onValueChange: _onValueChange,
    variant = "default",
    size = "md",
    disabled = false,
    orientation = "horizontal",
    className,
    children,
    onKeyDown,
    ...rest
  } = props;
  // `required` only exists on the single variant; keep it off the DOM.
  const { required: _required, ...domProps } = rest as typeof rest & { required?: boolean };
  const single = props.type === "single";
  const required = props.type === "single" && Boolean(props.required);

  const [pressed, setPressed] = useControllable<string[]>(
    props.value === undefined
      ? undefined
      : props.type === "single"
        ? props.value
          ? [props.value]
          : []
        : props.value,
    props.type === "single"
      ? props.defaultValue
        ? [props.defaultValue]
        : []
      : (props.defaultValue ?? []),
    (next) => {
      if (props.type === "single") props.onValueChange?.(next[0] ?? "");
      else props.onValueChange?.(next);
    },
  );

  const layoutId = useId();
  const rootRef = useRef<HTMLDivElement>(null);
  const [tabStop, setTabStop] = useState<string | null>(pressed[0] ?? null);

  // Keep exactly one reachable tab stop: if the remembered item vanished or
  // got disabled, fall back to the first pressed item, then the first enabled.
  useEffect(() => {
    const items = enabledItems(rootRef.current);
    if (items.some((el) => el.dataset.value === tabStop)) return;
    const fallback =
      items.find((el) => pressed.includes(el.dataset.value ?? "")) ?? items[0];
    const next = fallback?.dataset.value ?? null;
    if (next !== tabStop) setTabStop(next);
  });

  const toggle = (itemValue: string) => {
    const isOn = pressed.includes(itemValue);
    if (single) {
      if (isOn && required) return;
      setPressed(isOn ? [] : [itemValue]);
    } else {
      setPressed(isOn ? pressed.filter((v) => v !== itemValue) : [...pressed, itemValue]);
    }
  };

  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
    onKeyDown?.(event);
    if (event.defaultPrevented) return;
    const items = enabledItems(rootRef.current);
    const index = items.indexOf(document.activeElement as HTMLButtonElement);
    if (index < 0) return;
    const forward = orientation === "vertical" ? "ArrowDown" : "ArrowRight";
    const backward = orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
    let next: number;
    if (event.key === forward || event.key === "ArrowDown" || event.key === "ArrowRight")
      next = (index + 1) % items.length;
    else if (event.key === backward || event.key === "ArrowUp" || event.key === "ArrowLeft")
      next = (index - 1 + items.length) % items.length;
    else if (event.key === "Home") next = 0;
    else if (event.key === "End") next = items.length - 1;
    else return;
    event.preventDefault();
    // Focus moves; pressing stays on Space/Enter — these are toggles, not radios.
    items[next].focus();
  };

  return (
    <ToggleGroupContext.Provider
      value={{
        type,
        pressed,
        toggle,
        variant,
        size,
        disabled,
        layoutId,
        tabStop,
        setTabStop,
      }}
    >
      {/* layoutRoot keeps the gliding surface's projection local to the group,
          so scrolled or transformed ancestors never skew the glide. */}
      <motion.div
        ref={rootRef}
        layoutRoot
        role="group"
        data-toggle-group=""
        data-orientation={orientation}
        aria-disabled={disabled || undefined}
        onKeyDown={handleKeyDown}
        className={cn(
          "inline-flex w-fit items-center",
          orientation === "vertical" && "flex-col items-stretch",
          variant === "default"
            ? "gap-0.5 rounded-xl border border-border bg-card p-1"
            : "rounded-lg",
          disabled && "opacity-60",
          className,
        )}
        {...domProps}
      >
        {children}
      </motion.div>
    </ToggleGroupContext.Provider>
  );
}

export interface ToggleGroupItemProps extends ButtonBaseProps {
  value: string;
  children?: ReactNode;
}

export const ToggleGroupItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
  function ToggleGroupItem(
    { value, disabled: itemDisabled, className, children, onClick, onFocus, ...rest },
    ref,
  ) {
    const ctx = useContext(ToggleGroupContext);
    if (!ctx) throw new Error("ToggleGroupItem must be used inside <ToggleGroup>.");
    const reduce = useReducedMotion();
    const disabled = ctx.disabled || Boolean(itemDisabled);
    const on = ctx.pressed.includes(value);
    const outline = ctx.variant === "outline";

    return (
      <motion.button
        ref={ref}
        type="button"
        data-toggle-group-item=""
        data-value={value}
        data-state={on ? "on" : "off"}
        aria-pressed={on}
        disabled={disabled}
        tabIndex={ctx.tabStop === value ? 0 : -1}
        whileTap={reduce || disabled ? undefined : { scale: 0.88 }}
        transition={SPRING_PRESS}
        onFocus={(event) => {
          ctx.setTabStop(value);
          onFocus?.(event);
        }}
        onClick={(event) => {
          onClick?.(event);
          if (event.defaultPrevented) return;
          ctx.setTabStop(value);
          ctx.toggle(value);
        }}
        className={cn(
          itemBase,
          TOUCH_TARGET_CLASS,
          sizeClass[ctx.size],
          outline
            ? // Joined segments: neighbours overlap their shared border.
              "rounded-none border border-border bg-card -ml-px first:ml-0 first:rounded-l-lg last:rounded-r-lg in-data-[orientation=vertical]:-mt-px in-data-[orientation=vertical]:ml-0 in-data-[orientation=vertical]:first:mt-0 in-data-[orientation=vertical]:first:rounded-l-none in-data-[orientation=vertical]:first:rounded-t-lg in-data-[orientation=vertical]:last:rounded-r-none in-data-[orientation=vertical]:last:rounded-b-lg"
            : "rounded-lg focus-visible:ring-offset-1 focus-visible:ring-offset-card",
          on
            ? "text-foreground"
            : "text-muted-foreground enabled:hover:bg-muted/60 enabled:hover:text-foreground",
          className,
        )}
        {...rest}
      >
        {ctx.type === "single" ? (
          on ? (
            <motion.span
              layoutId={ctx.layoutId}
              aria-hidden
              transition={reduce ? { duration: 0 } : SPRING_LAYOUT}
              className={cn(
                "absolute inset-0 -z-10 rounded-[inherit]",
                surfaceClass[ctx.variant],
              )}
            />
          ) : null
        ) : (
          <PopSurface show={on} variant={ctx.variant} />
        )}
        {children}
      </motion.button>
    );
  },
);