Inline Confirm

'use client'

import { useEffect, useRef, useState, type KeyboardEvent } from 'react'
import './inline-confirm.css'

type Phase = 'idle' | 'ask' | 'done'

export interface InlineConfirmProps {
  /** Text on the resting button. */
  label?: string
  question?: string
  confirmLabel?: string
  cancelLabel?: string
  doneLabel?: string
  onConfirm?: () => void
  /** Seconds before the done state returns to the resting button. 0 keeps it. */
  resetAfter?: number
  shape?: 'pill' | 'rounded'
  fill?: 'dark' | 'light'
  /** Drive the phase from outside (for demos). */
  phase?: Phase
  className?: string
}

const Trash = () => (
  <svg viewBox="0 0 16 16" aria-hidden className="sd-ic__ico">
    <path d="M2.5 4.5h11M6 4.5V3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1.5M4 4.5l.6 8.1a1.5 1.5 0 0 0 1.5 1.4h3.8a1.5 1.5 0 0 0 1.5-1.4l.6-8.1" />
  </svg>
)
const Check = () => (
  <svg viewBox="0 0 16 16" aria-hidden className="sd-ic__ico">
    <path d="M3 8.5l3.2 3L13 4.5" />
  </svg>
)

/** A destructive button that asks "Sure?" in place instead of opening a dialog. */
export function InlineConfirm({ label = 'Delete', question = 'Delete file?', confirmLabel = 'Delete', cancelLabel = 'Cancel', doneLabel = 'Deleted', onConfirm, resetAfter = 2, shape = 'pill', fill = 'dark', phase: forced, className }: InlineConfirmProps) {
  const [own, setOwn] = useState<Phase>('idle')
  const phase = forced ?? own
  const trigger = useRef<HTMLButtonElement>(null)
  const cancel = useRef<HTMLButtonElement>(null)
  const user = useRef(false)

  useEffect(() => {
    if (!user.current) return
    if (phase === 'ask') cancel.current?.focus()
    if (phase === 'idle') trigger.current?.focus()
  }, [phase])
  useEffect(() => {
    if (phase !== 'done' || !resetAfter || forced) return
    const t = setTimeout(() => setOwn('idle'), resetAfter * 1000)
    return () => clearTimeout(t)
  }, [phase, resetAfter, forced])

  const go = (p: Phase) => {
    user.current = true
    setOwn(p)
  }
  const onKey = (e: KeyboardEvent) => {
    if (e.key === 'Escape' && phase === 'ask') {
      e.preventDefault()
      go('idle')
    }
  }

  return (
    <div className={['sd-ic', className].filter(Boolean).join(' ')} data-fill={fill} data-shape={shape} data-phase={phase} onKeyDown={onKey}>
      {phase === 'idle' && (
        <button ref={trigger} type="button" className="sd-ic__btn sd-ic__main" onClick={() => go('ask')} aria-haspopup="true">
          <Trash />
          {label}
        </button>
      )}
      {phase === 'ask' && (
        <div className="sd-ic__ask" role="group" aria-label={question}>
          <span className="sd-ic__q">{question}</span>
          <button ref={cancel} type="button" className="sd-ic__btn sd-ic__ghost" onClick={() => go('idle')}>
            {cancelLabel}
          </button>
          <button
            type="button"
            className="sd-ic__btn sd-ic__main"
            onClick={() => {
              go('done')
              onConfirm?.()
            }}
          >
            {confirmLabel}
          </button>
        </div>
      )}
      {phase === 'done' && (
        <p className="sd-ic__done">
          <Check />
          {doneLabel}
        </p>
      )}
      <span className="sd-ic__sr" role="status" aria-live="polite">
        {phase === 'done' ? doneLabel : ''}
      </span>
    </div>
  )
}

.sd-ic { --bg: #1d1d1d; --fg: #f7f7f7; --mute: #8e8e8e; --line: rgb(255 255 255 / 0.09); --soft: rgb(255 255 255 / 0.08); --r: 999px;
  display: inline-flex; align-items: center; height: 52px; padding: 6px; border-radius: var(--r); background: var(--bg); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line);
  interpolate-size: allow-keywords; transition: width 420ms cubic-bezier(0.2, 1, 0.3, 1); overflow: hidden; max-width: 100%; }
.sd-ic[data-fill='light'] { --bg: #fff; --fg: #121212; --mute: #6f6f6f; --line: rgb(0 0 0 / 0.08); --soft: rgb(0 0 0 / 0.05); }
.sd-ic[data-shape='rounded'] { --r: 16px; }
.sd-ic__btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: calc(var(--r) - 6px); font-size: 14px; font-weight: 500; white-space: nowrap; transition: transform 160ms, background-color 200ms; }
.sd-ic[data-shape='pill'] .sd-ic__btn { border-radius: 999px; }
.sd-ic__btn:active { transform: scale(0.95); }
.sd-ic__main { background: var(--fg); color: var(--bg); }
.sd-ic__main:hover { background: color-mix(in srgb, var(--fg) 88%, var(--bg)); }
.sd-ic__ghost { background: var(--soft); color: var(--fg); }
.sd-ic__ghost:hover { background: color-mix(in srgb, var(--soft) 100%, var(--fg) 6%); }
.sd-ic__ask, .sd-ic__done { display: flex; align-items: center; gap: 6px; animation: sd-ic-in 380ms cubic-bezier(0.2, 1, 0.3, 1); }
.sd-ic__q { padding: 0 8px 0 10px; font-size: 14px; color: var(--mute); white-space: nowrap; }
.sd-ic__done { margin: 0; height: 40px; padding: 0 16px 0 12px; font-size: 14px; font-weight: 500; }
.sd-ic__ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sd-ic__done .sd-ic__ico { stroke-width: 1.9; animation: sd-ic-pop 420ms cubic-bezier(0.2, 1.5, 0.4, 1); }
.sd-ic__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sd-ic button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
@keyframes sd-ic-in { from { opacity: 0; transform: translateX(8px); filter: blur(2px); } }
@keyframes sd-ic-pop { from { transform: scale(0.3); } }
@media (prefers-reduced-motion: reduce) { .sd-ic, .sd-ic * { animation: none !important; transition: none !important; } }