Snooze Menu

'use client'

import { useEffect, useRef, useState } from 'react'
import './snooze-menu.css'

export interface SnoozeMenuProps {
  onSnooze?: (until: Date) => void
  now?: Date
  hour12?: boolean
  fill?: 'dark' | 'light'
  className?: string
}

const at = (base: Date, days: number, h: number) => new Date(base.getFullYear(), base.getMonth(), base.getDate() + days, h, 0)

/** Snooze presets that show their resolved time. */
export function SnoozeMenu({ onSnooze, now: nowProp, hour12 = true, fill = 'dark', className }: SnoozeMenuProps) {
  const [open, setOpen] = useState(false)
  const [hours, setHours] = useState(3)
  const [until, setUntil] = useState<Date | null>(null)
  const [now, setNow] = useState<Date | null>(nowProp ?? null)
  useEffect(() => { if (!nowProp) setNow(new Date()) }, [nowProp])
  const items = useRef<(HTMLButtonElement | null)[]>([])
  const trig = useRef<HTMLButtonElement>(null)
  const n = now ?? new Date(2026, 0, 1, 9)
  const later = n.getHours() < 17 ? at(n, 0, Math.max(n.getHours() + 3, 17)) : at(n, 1, 9)
  const toMon = ((8 - n.getDay()) % 7) || 7
  const presets: [string, Date][] = [['Later today', later], ['Tomorrow', at(n, 1, 9)], ['This weekend', at(n, (6 - n.getDay() + 7) % 7 || 7, 9)], ['Next week', at(n, toMon, 9)]]
  const fmt = (d: Date) => {
    const day = d.toDateString() === n.toDateString() ? '' : `${d.toLocaleDateString('en-US', { weekday: 'short' })} `
    return day + d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12 })
  }
  const choose = (d: Date) => { setUntil(d); setOpen(false); onSnooze?.(d); trig.current?.focus() }
  useEffect(() => { if (open) items.current[0]?.focus() }, [open])
  const clock = <svg viewBox="0 0 16 16" aria-hidden><circle cx="8" cy="8" r="5.5" /><path d="M8 5v3l2 1.5" /></svg>
  return (
    <div className={['sd-snz', className].filter(Boolean).join(' ')} data-fill={fill} onKeyDown={(e) => { if (e.key === 'Escape' && open) { setOpen(false); trig.current?.focus() } }}>
      <button ref={trig} type="button" className="sd-snz__trig" aria-haspopup="menu" aria-expanded={open} onClick={() => setOpen(!open)}>{clock}Snooze</button>
      {open && (
        <div className="sd-snz__menu" role="menu" aria-label="Snooze until">
          {presets.map(([l, d], i) => (
            <button
              key={l}
              ref={(el) => { items.current[i] = el }}
              type="button"
              role="menuitem"
              className="sd-snz__it"
              onClick={() => choose(d)}
              onKeyDown={(e) => {
                const k = e.key === 'ArrowDown' ? 1 : e.key === 'ArrowUp' ? -1 : 0
                if (k) { e.preventDefault(); items.current[(i + k + presets.length) % presets.length]?.focus() }
              }}
            >
              <span>{l}</span><span>{fmt(d)}</span>
            </button>
          ))}
          <div className="sd-snz__sep" />
          <div className="sd-snz__cust">
            <span>In</span>
            <button type="button" className="sd-snz__step" aria-label="Fewer hours" onClick={() => setHours((h) => Math.max(1, h - 1))}>−</button>
            <span className="sd-snz__h" aria-live="polite">{hours}h</span>
            <button type="button" className="sd-snz__step" aria-label="More hours" onClick={() => setHours((h) => Math.min(72, h + 1))}>+</button>
            <button type="button" className="sd-snz__set" onClick={() => choose(new Date(n.getTime() + hours * 3.6e6))}>Set</button>
          </div>
        </div>
      )}
      {until && !open && (
        <div className="sd-snz__pill" role="status">{clock}Back {fmt(until)}<button type="button" onClick={() => setUntil(null)}>Cancel</button></div>
      )}
    </div>
  )
}

.sd-snz { --bg: #1c1c1c; --fg: #f6f6f6; --mute: #8e8e8e; --line: rgb(255 255 255 / 0.1); --soft: rgb(255 255 255 / 0.07); --strong: #fafafa; --on: #111; 
  color: var(--fg); font-size: 14px; line-height: 1.4; -webkit-tap-highlight-color: transparent; }
.sd-snz[data-fill='light'] { --bg: #fff; --fg: #121212; --mute: #6f6f6f; --line: rgb(0 0 0 / 0.09); --soft: rgb(0 0 0 / 0.05); --strong: #111; --on: #fff; }
.sd-snz button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sd-snz :focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.sd-snz .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sd-snz { position: relative; width: min(100%, 300px); align-self: start; margin-top: 24px; display: grid; justify-items: start; }
.sd-snz__trig { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 11px; box-shadow: inset 0 0 0 1px var(--line); font-weight: 500; font-size: 13.5px; background: var(--bg) !important; }
.sd-snz__trig[aria-expanded='true'] { box-shadow: inset 0 0 0 1.5px var(--fg); }
.sd-snz__trig svg, .sd-snz__it svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sd-snz__menu { position: absolute; top: 46px; left: 0; width: 100%; padding: 5px; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line), 0 20px 40px -18px rgb(0 0 0 / 0.55); transform-origin: top left; animation: sd-snz-in 200ms cubic-bezier(0.2, 1.2, 0.3, 1); z-index: 2; }
@keyframes sd-snz-in { from { opacity: 0; transform: scale(0.95) translateY(-4px); } }
.sd-snz__it { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 10px; border-radius: 9px; font-size: 13.5px; text-align: left; outline: 0; }
.sd-snz__it:hover, .sd-snz__it:focus-visible { background: var(--soft) !important; }
.sd-snz__it span:last-child { margin-left: auto; color: var(--mute); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.sd-snz__sep { height: 1px; margin: 4px 6px; background: var(--line); }
.sd-snz__cust { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 10px; font-size: 13px; }
.sd-snz__cust > span { flex: 1; color: var(--mute); }
.sd-snz__step { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; }
.sd-snz__h { min-width: 30px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.sd-snz__set { height: 28px; padding: 0 10px; border-radius: 8px; background: var(--strong) !important; color: var(--on) !important; font-weight: 600; font-size: 12px; }
.sd-snz__pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--soft); font-size: 12.5px; animation: sd-snz-in 240ms ease; }
.sd-snz__pill button { color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .sd-snz *, .sd-snz *::before, .sd-snz *::after { animation: none !important; transition: none !important; } }