Feedback and status

'use client';
import { useRef, useState } from 'react';
import { Bell, RotateCcw } from '@lucide/icons';
import { Icon } from '@fayegram-ai/faye-ui/core/icon';
import { Alert } from '@fayegram-ai/faye-ui/feedback/alert';
import { BadgeIndicator } from '@fayegram-ai/faye-ui/feedback/badge-indicator';
import { Badge } from '@fayegram-ai/faye-ui/feedback/badge';
import { Spinner, Skeleton } from '@fayegram-ai/faye-ui/feedback/loading';
import { Progress, LinearProgress } from '@fayegram-ai/faye-ui/feedback/progress';
import { CircularProgress } from '@fayegram-ai/faye-ui/feedback/circular-progress';
import { Meter } from '@fayegram-ai/faye-ui/feedback/meter';
import { Toast } from '@fayegram-ai/faye-ui/feedback/toast';
import { Toaster, type ToastPlacement } from '@fayegram-ai/faye-ui/patterns/toaster';
import { Button } from '@fayegram-ai/faye-ui/controls/button';
import { Inline, Stack } from '@fayegram-ai/faye-ui/layout/layout';
import { Section } from '../example';
import { Choice } from '../choice';
function ToastAction() {
    const manager = Toast.useToastManager();
    const [type, setType] = useState('success'), [placement, setPlacement] = useState<ToastPlacement>('bottom-end'), [undone, setUndone] = useState(false), [content, setContent] = useState('compact');
    const titles: Record<string,string> = { neutral:'Preferences updated', info:'Updates available', success:'Draft saved', warning:'Working offline', danger:'Save failed' };
    return <Stack gap="3"><Inline wrap align="end">
        <Choice label="Notification severity" value={type} onValueChange={setType} options={['neutral','info','success','warning','danger'].map(value=>({value,label:value}))}/>
        <Choice label="Notification position" value={placement} onValueChange={value=>setPlacement(value as ToastPlacement)} options={['top-start','top-center','top-end','bottom-start','bottom-center','bottom-end'].map(value=>({value,label:value}))}/>
        <Choice label="Notification content" value={content} onValueChange={setContent} options={[{value:'compact',label:'Brief message'},{value:'detail',label:'With supporting detail'},{value:'long',label:'Long message'}]}/>
        <Button onClick={() => { setUndone(false); const id = manager.add({ title: content==='long' ? 'Your changes are saved on this device and will sync when you are connected again.' : titles[type], ...(content==='detail'?{description:'Your draft is retained on this device.'}:{}), type, actionProps: { children: 'Undo', onClick: () => { setUndone(true); manager.close(id); } } }); }}>Show notification</Button>
    </Inline><span role="status">{undone ? 'The preview change was undone.' : 'Notifications leave the rest of the page available.'}</span><Toaster placement={placement}/></Stack>;
}
function ToastCustomAction() { const manager = Toast.useToastManager(); return <Button onClick={() => manager.add({title:'Custom notification',description:'Rendered from public toast parts.',actionProps:{children:'Keep working',onClick:()=>manager.add({title:'Action handled',description:'The custom action keeps the current draft.'})}})}>Show custom notification</Button>; }
function CustomToastView() {
    const { toasts } = Toast.useToastManager();
    return <Toast.Portal><Toast.Viewport>{toasts.map(toast => <Toast.Root key={toast.id} toast={toast}><Toast.Content><Toast.Icon><Icon icon={Bell}/></Toast.Icon><Toast.Message><Toast.Title>{toast.title}</Toast.Title>{toast.description!=null && <Toast.Description>{toast.description}</Toast.Description>}</Toast.Message><Toast.Actions>{toast.actionProps && <Toast.Action/>}<Toast.Close aria-label="Dismiss custom notification"/></Toast.Actions></Toast.Content></Toast.Root>)}</Toast.Viewport></Toast.Portal>;
}
export default function Feedback() {
    const [progress, setProgress] = useState(35), [retried,setRetried] = useState(false), [animationDirection,setAnimationDirection]=useState<'ltr'|'rtl'>('ltr');
    return <><Section title="Messages and compact statuses"><Stack gap="3">{(['neutral', 'info', 'success', 'warning', 'danger'] as const).map(tone => <Alert key={tone} tone={tone}>{{neutral:'Changes are stored on this device.',info:'A new version is available.',success:'Your collection is saved.',warning:'You are offline. Changes are safe.',danger:'We could not save your changes.'}[tone]}</Alert>)}<Inline wrap><BadgeIndicator count={7} label="7 unread notifications"><Button aria-label="Notifications">Inbox</Button></BadgeIndicator><Badge dot>Draft</Badge><Badge tone="accent">In review</Badge><Badge tone="success" dot>Ready</Badge><Badge tone="warning">Needs attention</Badge><Badge tone="danger">Failed</Badge></Inline></Stack></Section><Section title="Inline feedback with an action"><Alert tone={retried?"success":"warning"} action={<Button size="sm" variant="soft" startIcon={<Icon icon={RotateCcw} size="sm"/>} onClick={()=>setRetried(n=>!n)}>{retried?"Reset":"Retry"}</Button>}>{retried?"Connection restored.":"You are offline. Your changes are safe."}</Alert></Section><Section title="Progress, meter and loading"><Progress.Root value={progress} aria-label="Import progress"><Progress.Label>Import progress</Progress.Label><Progress.Track><Progress.Buffer aria-hidden="true" style={{ width: `${Math.min(100, progress + 20)}%` }}/><Progress.Indicator /></Progress.Track><Progress.Value /></Progress.Root><Button onClick={() => setProgress(n => n >= 100 ? 0 : n + 5)}>Advance progress</Button><Inline><CircularProgress label="Circular import progress" value={progress}/><CircularProgress label="Discovering files"/></Inline><LinearProgress label="Buffered preview" mode="buffer" value={progress} bufferValue={Math.min(100, progress + 20)}/><Choice label="Progress direction" value={animationDirection} onValueChange={value=>setAnimationDirection(value as typeof animationDirection)} options={[{value:'ltr',label:'Left to right'},{value:'rtl',label:'Right to left'}]}/><LinearProgress label="Finding updates" mode="query" animationDirection={animationDirection}/><Meter.Root value={72} min={0} max={100} aria-label="Storage used"><Meter.Label>Storage usage</Meter.Label><Meter.Track><Meter.Indicator /></Meter.Track><Meter.Value /></Meter.Root><Inline><Spinner label="Loading preview"/><span>Loading preview</span></Inline><Skeleton height="1rem" width="70%"/><Skeleton shape="text" width="45%"/><Inline><Skeleton shape="circle"/><Skeleton animation="wave" height="3rem"/></Inline></Section><Section title="Notifications"><Toast.Provider timeout={5000} limit={3}><ToastAction /></Toast.Provider></Section><Section title="Custom toast anatomy"><Toast.Provider><ToastCustomAction/><CustomToastView/></Toast.Provider></Section><Section title="Anchored notification"><Toast.Provider timeout={5000} limit={1}><AnchoredNotification/></Toast.Provider></Section></>;
}

function AnchoredNotification() {
    const anchor=useRef<HTMLButtonElement>(null),manager=Toast.useToastManager();
    return <><Button ref={anchor} onClick={()=>manager.add({title:'Place saved locally',type:'success'})}>Save place with anchored feedback</Button><Toast.Portal><Toast.Viewport className="docs-anchored-notifications">{manager.toasts.map(toast=><Toast.Positioner key={toast.id} toast={toast} anchor={anchor.current} side="top" sideOffset={8}><Toast.Root toast={toast}><Toast.Arrow/><Toast.Content><Toast.Icon><Icon icon={Bell}/></Toast.Icon><Toast.Message><Toast.Title>{toast.title}</Toast.Title></Toast.Message><Toast.Actions><Toast.Close aria-label="Dismiss anchored notification"/></Toast.Actions></Toast.Content></Toast.Root></Toast.Positioner>)}</Toast.Viewport></Toast.Portal></>;
}