Share Sheet

'use client'

import { useEffect, useState, type ReactNode } from 'react'
import './share-sheet.css'

export type ShareAccess = 'anyone' | 'team' | 'invite'
export interface ShareSheetProps {
  url: string
  title?: string
  defaultAccess?: ShareAccess
  onAccessChange?: (a: ShareAccess) => void
  fill?: 'dark' | 'light'
  className?: string
}

const HINT: Record<ShareAccess, string> = { anyone: 'Anyone with the link can view', team: 'Only people in Acme can view', invite: 'Only people you invite can open it' }
const I = (d: string) => <svg viewBox="0 0 18 18" aria-hidden><path d={d} /></svg>

/** Copy link, access level and share targets. */
export function ShareSheet({ url, title = 'Q4 roadmap', defaultAccess = 'anyone', onAccessChange, fill = 'dark', className }: ShareSheetProps) {
  const [acc, setAcc] = useState(defaultAccess)
  const [copied, setCopied] = useState(false)
  const [native, setNative] = useState(false)
  useEffect(() => { setNative(typeof navigator !== 'undefined' && 'share' in navigator) }, [])
  useEffect(() => { if (!copied) return; const t = setTimeout(() => setCopied(false), 1600); return () => clearTimeout(t) }, [copied])
  const enc = encodeURIComponent
  const targets: [string, string, ReactNode][] = [
    ['Email', `mailto:?subject=${enc(title)}&body=${enc(url)}`, I('M2.5 4.5h13v9h-13zM2.5 4.5 9 9.5l6.5-5')],
    ['Message', `sms:?&body=${enc(url)}`, I('M3 3.5h12v8.5H8l-3.5 3v-3H3z')],
    ['X', `https://x.com/intent/post?url=${enc(url)}`, I('M3.5 3.5l11 11M14.5 3.5l-11 11')],
    ['LinkedIn', `https://www.linkedin.com/sharing/share-offsite/?url=${enc(url)}`, I('M4 7.5v7M4 4.2v.1M7.5 14.5v-7M7.5 10.5c0-2 1.2-3 2.8-3s2.7 1 2.7 3v4')],
  ]
  return (
    <div className={['sd-shs', className].filter(Boolean).join(' ')} data-fill={fill}>
      <div className="sd-shs__h">Share “{title}”</div>
      <div className="sd-shs__s">{url}</div>
      <div className="sd-shs__link">
        <input readOnly value={url} aria-label="Share link" onFocus={(e) => e.target.select()} />
        <button type="button" className="sd-shs__copy" onClick={async () => { try { await navigator.clipboard.writeText(url) } catch {} setCopied(true) }}>
          {copied && <svg viewBox="0 0 14 14" aria-hidden><path d="m3 7.5 2.5 2.5L11 4" /></svg>}{copied ? 'Copied' : 'Copy link'}
        </button>
      </div>
      <span className="sr" aria-live="polite">{copied ? 'Link copied' : ''}</span>
      <div className="sd-shs__acc">
        {acc === 'invite' ? I('M5 8V6a4 4 0 0 1 8 0v2M4 8h10v7H4z') : I('M9 2.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13M2.5 9h13M9 2.5c2 2 2 11 0 13M9 2.5c-2 2-2 11 0 13')}
        <div>
          <select aria-label="Who can access" aria-describedby="shs-hint" value={acc} onChange={(e) => { const v = e.target.value as ShareAccess; setAcc(v); onAccessChange?.(v) }}>
            <option value="anyone">Anyone with the link</option>
            <option value="team">People at Acme</option>
            <option value="invite">Invite only</option>
          </select>
          <div id="shs-hint" key={acc} className="sd-shs__hint">{HINT[acc]}</div>
        </div>
      </div>
      <div className="sd-shs__tg">
        {targets.map(([l, href, ic]) => <a key={l} className="sd-shs__t" href={href} target="_blank" rel="noreferrer"><span>{ic}</span>{l}</a>)}
        <button type="button" className="sd-shs__t" disabled={!native} onClick={() => navigator.share?.({ title, url }).catch(() => {})} style={{ opacity: native ? 1 : 0.4 }}><span>{I('M4.5 9h.1M9 9h.1M13.5 9h.1')}</span>More</button>
      </div>
    </div>
  )
}

.sd-shs { --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-shs[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-shs button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sd-shs :focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.sd-shs .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sd-shs { width: min(100%, 320px); padding: 16px; border-radius: 22px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.sd-shs__h { font-weight: 650; font-size: 15px; }
.sd-shs__s { font-size: 12.5px; color: var(--mute); margin: 2px 0 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-shs__link { display: flex; align-items: center; gap: 6px; height: 42px; padding: 0 4px 0 12px; border-radius: 12px; background: var(--soft); }
.sd-shs__link input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--fg); font: 12.5px/1 ui-monospace, monospace; }
.sd-shs__copy { height: 34px; padding: 0 12px; border-radius: 9px; background: var(--strong) !important; color: var(--on) !important; font-weight: 600; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; transition: transform 120ms; }
.sd-shs__copy:active { transform: scale(0.95); }
.sd-shs__copy svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: sd-shs-pop 300ms cubic-bezier(0.3, 1.7, 0.4, 1); }
@keyframes sd-shs-pop { from { transform: scale(0); } }
.sd-shs__acc { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.sd-shs__acc svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sd-shs__acc select { height: 30px; padding: 0 6px; margin-left: -6px; border: 0; border-radius: 8px; background: none; color: var(--fg); font: inherit; font-size: 13.5px; font-weight: 600; }
.sd-shs__acc select:hover { background: var(--soft); }
.sd-shs__hint { font-size: 12px; color: var(--mute); animation: sd-shs-in 200ms ease; }
@keyframes sd-shs-in { from { opacity: 0; } }
.sd-shs__tg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.sd-shs__t { display: grid; justify-items: center; gap: 6px; font-size: 11px; color: var(--mute); text-decoration: none; }
.sd-shs__t span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); color: var(--fg); transition: background-color 150ms, transform 120ms; }
.sd-shs__t:hover span { background: var(--soft); }
.sd-shs__t:active span { transform: scale(0.92); }
.sd-shs__t svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .sd-shs *, .sd-shs *::before, .sd-shs *::after { animation: none !important; transition: none !important; } }