Date Time Picker

// 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;

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

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

"use client";

import { useEffect, useState } from "react";

/**
 * Returns true only on devices that have a true hover (mouse / trackpad).
 * Touch devices fire phantom `:hover` on tap that sticks until tap-elsewhere
 * — gate hover-only effects (scale lifts, magnetic pulls) behind this.
 */
export function useHoverCapable() {
  const [canHover, setCanHover] = useState(false);

  useEffect(() => {
    if (typeof window === "undefined" || !window.matchMedia) return;
    const mq = window.matchMedia("(hover: hover) and (pointer: fine)");
    const update = () => setCanHover(mq.matches);
    update();
    mq.addEventListener?.("change", update);
    return () => mq.removeEventListener?.("change", update);
  }, []);

  return canHover;
}

// Synthesizes a short, dry mechanical detent for gesture feedback (e.g. the
// WheelPicker row-cross click) entirely at runtime. Several inharmonic modes
// make it read as a tiny physical impact instead of an oscillator beep, while
// the high-passed transient gives it definition through phone speakers.

const DURATION = 0.016; // seconds, short enough to stay distinct during a fling
const MASTER_GAIN = 0.055;

const MODES = [
  { frequency: 980, decay: 0.0038, gain: 0.5, phase: 0 },
  { frequency: 1820, decay: 0.0024, gain: 0.3, phase: 0.65 },
  { frequency: 3160, decay: 0.00115, gain: 0.12, phase: 1.3 },
] as const;

type AudioContextCtor = typeof AudioContext;

function getAudioContextCtor(): AudioContextCtor | undefined {
  if (typeof window === "undefined") return undefined;
  return (
    window.AudioContext ??
    (window as unknown as { webkitAudioContext?: AudioContextCtor })
      .webkitAudioContext
  );
}

// One shared context/buffer/gain for the whole page, ref-counted across every
// `createTickPlayer()` caller. Components like WheelPicker commonly compose
// several side by side (a date made of month/day/year drums) — giving each
// its own AudioContext would waste resources and risk hitting a browser's cap
// on concurrent contexts. The context only closes once every consumer that
// created a player has called `dispose()`.
let ctx: AudioContext | null = null;
let masterGain: GainNode | null = null;
let clickBuffer: AudioBuffer | null = null;
let consumers = 0;

function buildClickBuffer(context: AudioContext): AudioBuffer {
  const sampleRate = context.sampleRate;
  const length = Math.ceil(DURATION * sampleRate);
  const buffer = context.createBuffer(1, length, sampleRate);
  const data = buffer.getChannelData(0);

  let peak = 0;
  let previousNoise = 0;
  for (let i = 0; i < length; i++) {
    const t = i / sampleRate;
    const attack = Math.min(1, t / 0.00012);
    const fadeOut = Math.min(1, (DURATION - t) / 0.001);
    let resonance = 0;
    for (const mode of MODES) {
      resonance +=
        Math.sin(2 * Math.PI * mode.frequency * t + mode.phase) *
        Math.exp(-t / mode.decay) *
        mode.gain;
    }

    // Differencing consecutive noise samples removes the low, papery part of
    // white noise and leaves only a tiny impact at the front of the sound.
    const noise = Math.random() * 2 - 1;
    const transient =
      (noise - previousNoise) * Math.exp(-t / 0.00038) * 0.035;
    previousNoise = noise;

    data[i] = (resonance + transient) * attack * fadeOut;
    peak = Math.max(peak, Math.abs(data[i]));
  }
  if (peak > 0) {
    const norm = 0.9 / peak;
    for (let i = 0; i < length; i++) data[i] *= norm;
  }

  return buffer;
}

function ensureContext() {
  if (ctx) return;
  const Ctor = getAudioContextCtor();
  if (!Ctor) return;
  ctx = new Ctor();
  masterGain = ctx.createGain();
  masterGain.gain.value = MASTER_GAIN;
  masterGain.connect(ctx.destination);
  clickBuffer = buildClickBuffer(ctx);
}

function prepareContext() {
  ensureContext();
  if (ctx?.state === "suspended") {
    // Browsers may reject this when it is not called from a trusted gesture.
    // Pointer, touch, wheel and keyboard entry points call `prepare()` first;
    // this repeat attempt keeps direct `play()` calls safe as well.
    void ctx.resume().catch(() => undefined);
  }
}

interface TickPlayer {
  prepare: () => void;
  play: () => void;
  dispose: () => void;
}

/**
 * Lazily-initialized tick player. No `AudioContext` is created until the first
 * `prepare()` or `play()` call anywhere on the page. Every player shares the
 * same context/buffer, ref-counted so `dispose()` only tears it down once the
 * last consumer is gone. Safe during SSR or in browsers without Web Audio:
 * `prepare()` and `play()` become silent no-ops.
 */
export function createTickPlayer(): TickPlayer {
  consumers++;
  let disposed = false;
  let activeSource: AudioBufferSourceNode | null = null;

  return {
    prepare() {
      if (disposed) return;
      prepareContext();
    },
    play() {
      if (disposed) return;
      prepareContext();
      if (!ctx || !masterGain || !clickBuffer) return;
      // A fast fling can cross rows more quickly than the tail of a tick.
      // Cutting that tail keeps the feedback dry instead of stacking into a
      // louder metallic ring.
      activeSource?.stop();
      const source = ctx.createBufferSource();
      source.buffer = clickBuffer;
      source.connect(masterGain);
      source.onended = () => {
        source.disconnect();
        if (activeSource === source) activeSource = null;
      };
      activeSource = source;
      source.start();
    },
    dispose() {
      if (disposed) return;
      disposed = true;
      activeSource?.stop();
      activeSource = null;
      consumers = Math.max(0, consumers - 1);
      if (consumers === 0 && ctx) {
        ctx.close();
        ctx = null;
        masterGain = null;
        clickBuffer = null;
      }
    },
  };
}

// 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";

/**
 * 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";
// asharca.github.io/ui/components/motion/date-time-picker

import {
	CalendarDays,
	ChevronDown,
	ChevronLeft,
	ChevronRight,
	Clock3,
} from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import {
	type KeyboardEvent,
	useId,
	useLayoutEffect,
	useRef,
	useState,
} from "react";
import { Button } from "@/components/motion/button/base";
import {
	DAY,
	iso,
	monthOf,
	parse,
	shiftMonth,
} from "@/components/motion/date-range-picker/date-utils";
import {
	MorphPopover,
	MorphPopoverContent,
	MorphPopoverTrigger,
} from "@/components/motion/popover-morph";
import { WheelPicker } from "@/components/motion/wheel-picker";
import { EASE_OUT, SPRING_LAYOUT, SPRING_PRESS } from "@/lib/ease";
import { cn } from "@/lib/utils";

export type DateTimePickerClassNames = {
	trigger?: string;
	content?: string;
	calendar?: string;
	day?: string;
	selectedDay?: string;
	time?: string;
	confirmButton?: string;
};

export interface DateTimePickerProps {
	/** Local wall-clock time, YYYY-MM-DDTHH:mm. No timezone conversion is applied. */
	value?: string;
	defaultValue?: string;
	/** Called only when Confirm is pressed. Dismissing discards the draft. */
	onValueChange?: (value: string) => void;
	label?: string;
	disabled?: boolean;
	name?: string;
	className?: string;
	classNames?: DateTimePickerClassNames;
}

const pad = (value: number) => String(value).padStart(2, "0");
const HOURS = Array.from({ length: 12 }, (_, index) => pad(index + 1));
const MINUTES = Array.from({ length: 60 }, (_, index) => pad(index));
const dateFormat = new Intl.DateTimeFormat("en-US", {
	month: "short",
	day: "numeric",
	year: "numeric",
	timeZone: "UTC",
});
const monthFormat = new Intl.DateTimeFormat("en-US", {
	month: "long",
	year: "numeric",
	timeZone: "UTC",
});
const dayFormat = new Intl.DateTimeFormat("en-US", {
	dateStyle: "full",
	timeZone: "UTC",
});
const focusClass =
	"outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";

function localNow() {
	const now = new Date();
	return `${String(now.getFullYear()).padStart(4, "0")}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}T${pad(now.getHours())}:${pad(now.getMinutes())}`;
}

function validate(value: string) {
	if (!/^\d{4}-\d{2}-\d{2}T(?:[01]\d|2[0-3]):[0-5]\d$/.test(value))
		throw new Error(
			"DateTimePicker expects local time in YYYY-MM-DDTHH:mm format.",
		);
	parse(value.slice(0, 10));
	return value;
}

function timeLabel(value: string) {
	const hour = Number(value.slice(11, 13));
	return `${pad(hour % 12 || 12)}:${value.slice(14)} ${hour < 12 ? "AM" : "PM"}`;
}

/** Calendar and time-wheel popover with an explicit draft/confirm boundary. */
export function DateTimePicker({
	value: controlledValue,
	defaultValue = "",
	onValueChange,
	label = "Choose date and time",
	disabled = false,
	name,
	className,
	classNames,
}: DateTimePickerProps) {
	const [internal, setInternal] = useState(defaultValue);
	const value = controlledValue ?? internal;
	if (value) validate(value);
	const [open, setOpen] = useState(false);
	const [draft, setDraft] = useState("");
	const [session, setSession] = useState(0);
	const trigger = useRef<HTMLButtonElement>(null);
	const changeOpen = (next: boolean) => {
		if (disabled) return;
		if (next) {
			setDraft(value || localNow());
			setSession((current) => current + 1);
		}
		setOpen(next);
	};

	return (
		<MorphPopover
			open={open && !disabled}
			onOpenChange={changeOpen}
			className={cn("max-w-full", className)}
		>
			{name && (
				<input type="hidden" name={name} value={value} disabled={disabled} />
			)}
			<MorphPopoverTrigger>
				<Button
					ref={trigger}
					variant="outline"
					disabled={disabled}
					aria-label={`${label}: ${value ? `${dateFormat.format(parse(value.slice(0, 10)))}, ${timeLabel(value)}` : "not selected"}`}
					className={cn(
						"h-9 max-w-full gap-2 rounded-xl bg-background px-3 text-[13px] font-medium",
						focusClass,
						classNames?.trigger,
					)}
				>
					<CalendarDays aria-hidden="true" className="size-4 shrink-0" />
					{value ? (
						<>
							<span className="whitespace-nowrap">
								{dateFormat.format(parse(value.slice(0, 10)))}
							</span>
							<span aria-hidden="true" className="h-4 w-px bg-border" />
							<Clock3
								aria-hidden="true"
								className="hidden size-4 shrink-0 min-[400px]:block"
							/>
							<span className="whitespace-nowrap tabular-nums">
								{timeLabel(value)}
							</span>
						</>
					) : (
						<span className="text-muted-foreground">{label}</span>
					)}
					<ChevronDown
						aria-hidden="true"
						className={cn(
							"ml-1 size-4 shrink-0 text-muted-foreground transition-transform motion-reduce:transition-none",
							open && "rotate-180",
						)}
					/>
				</Button>
			</MorphPopoverTrigger>
			<MorphPopoverContent
				align="start"
				radius={16}
				sideOffset={8}
				className={cn("w-[480px] max-w-[calc(100vw-1.5rem)]", classNames?.content)}
				onOpenAutoFocus={(content) =>
					content
						.querySelector<HTMLElement>('[data-calendar-day][tabindex="0"]')
						?.focus({ preventScroll: true })
				}
			>
				{draft && (
					<DateTimePanel
						key={session}
						initialValue={draft}
						classNames={classNames}
						onConfirm={(next) => {
							if (controlledValue === undefined) setInternal(next);
							onValueChange?.(next);
							setOpen(false);
							trigger.current?.focus({ preventScroll: true });
						}}
					/>
				)}
			</MorphPopoverContent>
		</MorphPopover>
	);
}

function DateTimePanel({
	initialValue,
	onConfirm,
	classNames,
}: {
	initialValue: string;
	onConfirm: (value: string) => void;
	classNames?: DateTimePickerClassNames;
}) {
	const [draft, setDraft] = useState(initialValue);
	const [cursor, setCursor] = useState(initialValue.slice(0, 10));
	const reduce = useReducedMotion() ?? false;
	const id = useId();
	const calendar = useRef<HTMLTableElement>(null);
	const moveFocus = useRef(true);
	const date = draft.slice(0, 10);
	const month = monthOf(cursor);
	const hour = Number(draft.slice(11, 13));
	const period = hour < 12 ? "AM" : "PM";
	const first = parse(month);
	const start = first - ((new Date(first).getUTCDay() + 6) % 7) * DAY;
	const daysInView =
		Math.ceil((parse(shiftMonth(month, 1)) - start) / DAY / 7) * 7;
	const days = Array.from({ length: daysInView }, (_, index) =>
		iso(start + index * DAY),
	);

	useLayoutEffect(() => {
		if (!moveFocus.current) return;
		calendar.current
			?.querySelector<HTMLElement>(`[data-calendar-day="${cursor}"]`)
			?.focus({ preventScroll: true });
		moveFocus.current = false;
	}, [cursor]);

	const setHour = (next: number) =>
		setDraft(
			(current) => `${current.slice(0, 11)}${pad(next)}${current.slice(13)}`,
		);
	const navigate = (event: KeyboardEvent<HTMLButtonElement>) => {
		const offsets: Record<string, number> = {
			ArrowLeft: -1,
			ArrowRight: 1,
			ArrowUp: -7,
			ArrowDown: 7,
		};
		const key = event.key;
		if (
			!(key in offsets) &&
			!["Home", "End", "PageUp", "PageDown"].includes(key)
		)
			return;
		event.preventDefault();
		moveFocus.current = true;
		setCursor((current) => {
			if (key === "PageUp" || key === "PageDown")
				return shiftMonth(
					current,
					(key === "PageUp" ? -1 : 1) * (event.shiftKey ? 12 : 1),
				);
			const weekday = (new Date(parse(current)).getUTCDay() + 6) % 7;
			return iso(
				parse(current) +
					(key === "Home"
						? -weekday
						: key === "End"
							? 6 - weekday
							: offsets[key]) *
						DAY,
			);
		});
	};

	return (
		<div>
			<div className="grid grid-cols-1 min-[520px]:grid-cols-[1fr_160px]">
				<section aria-label="Calendar" className={cn("min-w-0 p-3.5", classNames?.calendar)}>
					<div className="mb-2 flex items-center justify-between gap-2">
						<Button
							variant="outline"
							size="icon"
							aria-label="Previous month"
							className={focusClass}
							onClick={() => setCursor((current) => shiftMonth(current, -1))}
						>
							<ChevronLeft aria-hidden="true" className="size-4" />
						</Button>
						<h3
							id={`${id}-month`}
							aria-live="polite"
							className="text-sm font-medium"
						>
							{monthFormat.format(first)}
						</h3>
						<Button
							variant="outline"
							size="icon"
							aria-label="Next month"
							className={focusClass}
							onClick={() => setCursor((current) => shiftMonth(current, 1))}
						>
							<ChevronRight aria-hidden="true" className="size-4" />
						</Button>
					</div>
					<p id={`${id}-help`} className="sr-only">
						Use arrow keys for days, Home and End for the week, Page Up and Page
						Down for months, or hold Shift for years. Enter selects a date.
						Confirm saves the date and time; Escape discards changes.
					</p>
					<motion.table
						key={month}
						ref={calendar}
						role="grid"
						aria-labelledby={`${id}-month`}
						aria-describedby={`${id}-help`}
						className="w-full table-fixed"
						initial={{ opacity: reduce ? 1 : 0 }}
						animate={{ opacity: 1 }}
						transition={{ duration: 0.15, ease: EASE_OUT }}
					>
						<thead>
							<tr>
								{["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((day) => (
									<th
										key={day}
										scope="col"
										className="pb-3 text-center text-xs font-normal text-muted-foreground"
									>
										{day}
									</th>
								))}
							</tr>
						</thead>
						<tbody>
							{Array.from({ length: daysInView / 7 }, (_, week) => (
								<tr key={days[week * 7]}>
									{days.slice(week * 7, week * 7 + 7).map((day) => (
										// biome-ignore lint/a11y/useFocusableInteractive: Calendar cells delegate focus to the contained day button.
										<td
											// biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: Gridcell selection semantics belong on the native table cell.
											role="gridcell"
											key={day}
											aria-selected={day === date}
											className="py-0.5"
										>
											<motion.button
												type="button"
												data-calendar-day={day}
												tabIndex={day === cursor ? 0 : -1}
												aria-label={dayFormat.format(parse(day))}
												onKeyDown={navigate}
												onClick={() => {
													moveFocus.current = true;
													setCursor(day);
													setDraft((current) => `${day}${current.slice(10)}`);
												}}
												whileTap={reduce ? undefined : { scale: 0.92 }}
												transition={SPRING_PRESS}
												className={cn(
													"relative mx-auto flex size-8 items-center justify-center rounded-xl text-xs tabular-nums transition-colors",
													focusClass,
													day === date
														? "bg-foreground font-medium text-background shadow-sm"
														: "hover:bg-muted",
													day !== date &&
														monthOf(day) !== month &&
														"text-muted-foreground/40",
													classNames?.day,
													day === date && classNames?.selectedDay,
												)}
											>
												{Number(day.slice(8))}
											</motion.button>
										</td>
									))}
								</tr>
							))}
						</tbody>
					</motion.table>
				</section>
				<section
					aria-label="Time"
					className={cn("m-3.5 mt-0 border-t border-border pt-3.5 min-[520px]:ml-0 min-[520px]:mt-3.5 min-[520px]:border-l min-[520px]:border-t-0 min-[520px]:pl-3.5 min-[520px]:pt-0", classNames?.time)}
				>
					<h3 className="mb-3 text-sm font-medium">Time</h3>
					<div className="flex items-center gap-1 tabular-nums">
						{reduce ? (
							<label className="flex flex-1 flex-col gap-1 text-xs text-muted-foreground">
								Hour
								<select
									aria-label="Hour"
									value={pad(hour % 12 || 12)}
									onChange={(event) =>
										setHour(
											(Number(event.target.value) % 12) +
												(period === "PM" ? 12 : 0),
										)
									}
									className={cn(
										"h-10 rounded-lg border border-border bg-background px-2 text-sm text-foreground",
										focusClass,
									)}
								>
									{HOURS.map((value) => (
										<option key={value}>{value}</option>
									))}
								</select>
							</label>
						) : (
							<WheelPicker
								aria-label="Hour"
								options={HOURS}
								value={pad(hour % 12 || 12)}
								onValueChange={(next) =>
									setHour((Number(next) % 12) + (period === "PM" ? 12 : 0))
								}
								itemHeight={32}
								className="flex-1 rounded-lg border-0 bg-transparent text-base"
							/>
						)}
						<span aria-hidden="true" className="text-muted-foreground">
							:
						</span>
						{reduce ? (
							<label className="flex flex-1 flex-col gap-1 text-xs text-muted-foreground">
								Minute
								<select
									aria-label="Minute"
									value={draft.slice(14)}
									onChange={(event) =>
										setDraft(
											(current) =>
												`${current.slice(0, 14)}${event.target.value}`,
										)
									}
									className={cn(
										"h-10 rounded-lg border border-border bg-background px-2 text-sm text-foreground",
										focusClass,
									)}
								>
									{MINUTES.map((value) => (
										<option key={value}>{value}</option>
									))}
								</select>
							</label>
						) : (
							<WheelPicker
								aria-label="Minute"
								options={MINUTES}
								value={draft.slice(14)}
								onValueChange={(next) =>
									setDraft((current) => `${current.slice(0, 14)}${next}`)
								}
								itemHeight={32}
								className="flex-1 rounded-lg border-0 bg-transparent text-base"
							/>
						)}
					</div>
					<fieldset
						aria-label="Time period"
						className="mt-3 flex rounded-xl border border-border bg-muted/50 p-1"
					>
						{["AM", "PM"].map((next) => (
							<button
								key={next}
								type="button"
								aria-pressed={next === period}
								onClick={() => setHour((hour % 12) + (next === "PM" ? 12 : 0))}
								className={cn(
									"relative flex h-8 flex-1 items-center justify-center rounded-lg text-xs",
									focusClass,
								)}
							>
								{next === period && (
									<motion.span
										aria-hidden="true"
										layoutId={reduce ? undefined : `${id}-period`}
										transition={SPRING_LAYOUT}
										className="absolute inset-0 rounded-lg border border-border bg-background shadow-sm"
									/>
								)}
								<span className="relative">{next}</span>
							</button>
						))}
					</fieldset>
				</section>
			</div>
			<div className="flex items-center justify-between gap-2 border-t border-border px-3.5 py-2.5">
				<span className="text-[11px] text-muted-foreground">
					Local time ·{" "}
					{new Intl.DateTimeFormat("en-US", { timeZoneName: "shortOffset" })
						.formatToParts(new Date(draft))
						.find((part) => part.type === "timeZoneName")
						?.value.replace("GMT", "UTC")}
				</span>
				<div className="flex items-center gap-2">
					<Button
						variant="ghost"
						size="sm"
						className={cn("rounded-lg", focusClass)}
						onClick={() => {
							const now = localNow();
							setDraft(now);
							setCursor(now.slice(0, 10));
						}}
					>
						Now
					</Button>
					<Button
						size="sm"
						className={cn(
							"rounded-lg bg-foreground px-4 text-background hover:bg-foreground/90",
							focusClass,
							classNames?.confirmButton,
						)}
						onClick={() => onConfirm(draft)}
					>
						Confirm
					</Button>
				</div>
			</div>
		</div>
	);
}

"use client";

import {
  AnimatePresence,
  type HTMLMotionProps,
  motion,
  useReducedMotion,
} from "motion/react";
import {
  forwardRef,
  type PointerEvent,
  type ReactNode,
  useCallback,
  useRef,
  useState,
} from "react";
import { EASE_OUT, SPRING_PRESS } from "@/lib/ease";
import { useHoverCapable } from "@/lib/hooks/use-hover-capable";
import { cn } from "@/lib/utils";

export type ButtonVariant = "primary" | "secondary" | "ghost" | "outline";
export type ButtonSize = "sm" | "md" | "lg" | "icon";

export interface ButtonProps extends Omit<
  HTMLMotionProps<"button">,
  "children"
> {
  variant?: ButtonVariant;
  size?: ButtonSize;
  pressScale?: number;
  /** Spawn a Material-style ripple from the press point. Off by default. */
  ripple?: boolean;
  children?: ReactNode;
}

export interface ButtonLinkProps extends Omit<
  HTMLMotionProps<"a">,
  "children"
> {
  variant?: ButtonVariant;
  size?: ButtonSize;
  pressScale?: number;
  children?: ReactNode;
}

type Ripple = { id: number; x: number; y: number; size: number };

const VARIANT_CLASS: Record<ButtonVariant, string> = {
  primary: "bg-primary text-primary-foreground hover:bg-primary/90",
  secondary: "border border-border bg-card text-foreground hover:border-border",
  ghost: "text-muted-foreground hover:text-foreground hover:bg-muted/60",
  outline:
    "border border-border bg-transparent text-foreground hover:bg-muted/60",
};

const SIZE_CLASS: Record<ButtonSize, string> = {
  sm: "h-8 px-3 text-xs gap-1.5 rounded-full",
  md: "h-10 px-5 text-sm gap-2 rounded-full",
  lg: "h-12 px-6 text-base gap-2 rounded-full",
  icon: "h-8 w-8 rounded-lg",
};

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  function Button(
    {
      variant = "primary",
      size = "md",
      pressScale = 0.93,
      ripple = false,
      className,
      children,
      onPointerDown,
      ...rest
    },
    ref,
  ) {
    const reduce = useReducedMotion();
    const canHover = useHoverCapable();
    const [ripples, setRipples] = useState<Ripple[]>([]);
    const nextId = useRef(0);

    const handlePointerDown = useCallback(
      (event: PointerEvent<HTMLButtonElement>) => {
        if (ripple && !reduce) {
          const rect = event.currentTarget.getBoundingClientRect();
          const size = Math.max(rect.width, rect.height) * 2;
          const id = nextId.current++;
          setRipples((prev) => [
            ...prev,
            {
              id,
              x: event.clientX - rect.left,
              y: event.clientY - rect.top,
              size,
            },
          ]);
        }
        onPointerDown?.(event);
      },
      [ripple, reduce, onPointerDown],
    );

    return (
      <motion.button
        ref={ref}
        type="button"
        whileTap={reduce ? undefined : { scale: pressScale }}
        whileHover={reduce || !canHover ? undefined : { scale: 1.02 }}
        transition={SPRING_PRESS}
        onPointerDown={handlePointerDown}
        className={cn(
          "inline-flex items-center justify-center font-medium select-none",
          "transition-colors",
          "disabled:pointer-events-none disabled:opacity-50",
          ripple && "relative overflow-hidden",
          VARIANT_CLASS[variant],
          SIZE_CLASS[size],
          className,
        )}
        {...rest}
      >
        {ripple && !reduce ? (
          <span className="pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]">
            <AnimatePresence>
              {ripples.map((r) => (
                <motion.span
                  key={r.id}
                  className="absolute rounded-full bg-current"
                  style={{
                    left: r.x,
                    top: r.y,
                    width: r.size,
                    height: r.size,
                    x: "-50%",
                    y: "-50%",
                  }}
                  initial={{ scale: 0.05, opacity: 0.3 }}
                  animate={{ scale: 1, opacity: 0 }}
                  exit={{ opacity: 0 }}
                  transition={{ duration: 1.6, ease: EASE_OUT }}
                  onAnimationComplete={() =>
                    setRipples((prev) => prev.filter((x) => x.id !== r.id))
                  }
                />
              ))}
            </AnimatePresence>
          </span>
        ) : null}
        {children}
      </motion.button>
    );
  },
);

export const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
  function ButtonLink(
    {
      variant = "primary",
      size = "md",
      pressScale = 0.93,
      className,
      children,
      ...rest
    },
    ref,
  ) {
    const reduce = useReducedMotion();
    const canHover = useHoverCapable();

    return (
      <motion.a
        ref={ref}
        whileTap={reduce ? undefined : { scale: pressScale }}
        whileHover={reduce || !canHover ? undefined : { scale: 1.02 }}
        transition={SPRING_PRESS}
        className={cn(
          "inline-flex items-center justify-center font-medium select-none",
          "transition-colors",
          VARIANT_CLASS[variant],
          SIZE_CLASS[size],
          className,
        )}
        {...rest}
      >
        {children}
      </motion.a>
    );
  },
);