Async Switch

'use client'

import { useId, useState } from 'react'
import './async-switch.css'

export interface AsyncSwitchProps {
  label: string
  description?: string
  checked?: boolean
  defaultChecked?: boolean
  onCheckedChange: (on: boolean) => Promise<void>
  fill?: 'dark' | 'light'
  className?: string
}

/** Optimistic switch with pending and revert states. */
export function AsyncSwitch({ label, description, defaultChecked = false, onCheckedChange, fill = 'dark', className }: AsyncSwitchProps) {
  const [on, setOn] = useState(defaultChecked)
  const [busy, setBusy] = useState(false)
  const [err, setErr] = useState('')
  const [shake, setShake] = useState(0)
  const id = useId()
  const flip = async () => {
    if (busy) return
    const next = !on
    setOn(next); setBusy(true); setErr('')
    try { await onCheckedChange(next) } catch (e) { setOn(!next); setShake((s) => s + 1); setErr(e instanceof Error ? e.message : 'Couldn’t save. Try again.') }
    setBusy(false)
  }
  return (
    <div className={['sd-asw', className].filter(Boolean).join(' ')} data-fill={fill}>
      <div className="sd-asw__row">
        <div className="sd-asw__txt"><div className="sd-asw__l" id={`${id}-l`}>{label}</div>{description && <div className="sd-asw__d" id={`${id}-d`}>{description}</div>}</div>
        <button key={shake} type="button" role="switch" className="sd-asw__sw" aria-checked={on} aria-busy={busy} aria-labelledby={`${id}-l`} aria-describedby={description ? `${id}-d` : undefined} data-shake={shake ? '' : undefined} onClick={flip}>
          <span className="sd-asw__k">{busy && <span className="sd-asw__spin" aria-hidden />}</span>
        </button>
      </div>
      {err && <p className="sd-asw__err" role="alert">{err}</p>}
    </div>
  )
}

.sd-asw { --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-asw[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-asw button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sd-asw :focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.sd-asw .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sd-asw { width: min(100%, 320px); display: grid; gap: 4px; }
.sd-asw__row { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.sd-asw__txt { flex: 1; }
.sd-asw__l { font-size: 14px; font-weight: 600; }
.sd-asw__d { font-size: 12.5px; color: var(--mute); margin-top: 2px; }
.sd-asw__sw { position: relative; flex: none; width: 48px; height: 28px; border-radius: 99px; background: var(--soft) !important; box-shadow: inset 0 0 0 1px var(--line); transition: background-color 220ms; }
.sd-asw__sw[aria-checked='true'] { background: var(--strong) !important; box-shadow: none; }
.sd-asw__k { position: absolute; top: 3px; left: 3px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 99px; background: var(--mute); transition: transform 300ms cubic-bezier(0.3, 1.5, 0.4, 1), background-color 200ms; }
.sd-asw__sw[aria-checked='true'] .sd-asw__k { transform: translateX(20px); background: var(--on); }
.sd-asw__sw[data-shake] { animation: sd-asw-shake 320ms; }
@keyframes sd-asw-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.sd-asw__spin { width: 12px; height: 12px; border-radius: 99px; border: 2px solid var(--strong); border-right-color: transparent; animation: sd-asw-rot 650ms linear infinite; }
.sd-asw__sw[aria-checked='false'] .sd-asw__spin { border-color: var(--bg); border-right-color: transparent; }
@keyframes sd-asw-rot { to { transform: rotate(360deg); } }
.sd-asw__err { margin: 0 4px; font-size: 12px; animation: sd-asw-in 200ms ease; }
@keyframes sd-asw-in { from { opacity: 0; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .sd-asw *, .sd-asw *::before, .sd-asw *::after { animation: none !important; transition: none !important; } }