import React,{useState,useMemo,useTransition,useEffect}from'react';interface Activity{id:string;type:'Call'|'Email'|'Meeting'|'Task';subject:string;relatedTo:string;timestamp:string;who:string}const useDebounce=<T,>(value:T,delay:number):T=>{const[debouncedValue,setDebouncedValue]=useState(value);useEffect(()=>{const handler=setTimeout(()=>setDebouncedValue(value),delay);return()=>clearTimeout(handler)},[value,delay]);return debouncedValue};const useToast=()=>{const[toasts,setToasts]=useState<Array<{id:number;message:string}>>([]);const show=(message:string)=>{const id=Date.now();setToasts(prev=>[...prev,{id,message}]);setTimeout(()=>setToasts(prev=>prev.filter(t=>t.id!==id)),3000)};return{toasts,show}};const mockActivities:Activity[]=[{id:'a001',type:'Call',subject:'Follow-up call',relatedTo:'Acme Corp',timestamp:'2025-02-13 14:30',who:'Jane Smith'},{id:'a002',type:'Email',subject:'Proposal sent',relatedTo:'Global Inc',timestamp:'2025-02-13 10:15',who:'John Doe'},{id:'a003',type:'Meeting',subject:'Product demo',relatedTo:'TechStart',timestamp:'2025-02-12 15:00',who:'Alice Johnson'},{id:'a004',type:'Task',subject:'Update CRM',relatedTo:'Internal',timestamp:'2025-02-12 09:00',who:'Bob Wilson'}];const App:React.FC=()=>{const[searchQuery,setSearchQuery]=useState('');const[typeFilter,setTypeFilter]=useState<string>('All');const[isPending,startTransition]=useTransition();const{toasts,show}=useToast();const debouncedSearch=useDebounce(searchQuery,300);const filteredActivities=useMemo(()=>{return mockActivities.filter(a=>{const matchesSearch=a.subject.toLowerCase().includes(debouncedSearch.toLowerCase())||a.relatedTo.toLowerCase().includes(debouncedSearch.toLowerCase());const matchesType=typeFilter==='All'||a.type===typeFilter;return matchesSearch&&matchesType}).sort((a,b)=>new Date(b.timestamp).getTime()-new Date(a.timestamp).getTime())},[debouncedSearch,typeFilter]);const stats=useMemo(()=>({total:mockActivities.length,calls:mockActivities.filter(a=>a.type==='Call').length,emails:mockActivities.filter(a=>a.type==='Email').length,meetings:mockActivities.filter(a=>a.type==='Meeting').length}),[]);const handleSearch=(e:React.ChangeEvent<HTMLInputElement>)=>{startTransition(()=>{setSearchQuery(e.target.value)})};const handleViewActivity=(activity:Activity)=>{show(`Viewing: ${activity.subject}`)};return(<div className="app-container"><header className="app-header"><h1>Activity Timeline</h1><p>Activities across records, chronological feed</p></header><div className="stats-grid"><div className="stat-card"><div className="stat-label">Total Activities</div><div className="stat-value">{stats.total}</div></div><div className="stat-card"><div className="stat-label">Calls</div><div className="stat-value">{stats.calls}</div></div><div className="stat-card"><div className="stat-label">Emails</div><div className="stat-value">{stats.emails}</div></div><div className="stat-card"><div className="stat-label">Meetings</div><div className="stat-value">{stats.meetings}</div></div></div><div className="controls"><input type="text" placeholder="Search activities..." value={searchQuery} onChange={handleSearch} className="search-input"/><select value={typeFilter} onChange={e=>setTypeFilter(e.target.value)} className="filter-select"><option value="All">All Types</option><option value="Call">Call</option><option value="Email">Email</option><option value="Meeting">Meeting</option><option value="Task">Task</option></select></div>{filteredActivities.length===0?(<div className="empty-state"><div className="empty-icon">⏱️</div><h3>No activities found</h3><p>Try adjusting your filters</p></div>):(<div className="data-grid"><table><thead><tr><th>Type</th><th>Subject</th><th>Related To</th><th>Timestamp</th><th>Who</th><th>Actions</th></tr></thead><tbody className={isPending?'loading':''}>{filteredActivities.map(a=>(<tr key={a.id}><td><span className="badge">{a.type}</span></td><td><strong>{a.subject}</strong></td><td>{a.relatedTo}</td><td>{a.timestamp}</td><td>{a.who}</td><td><button className="btn-primary" onClick={()=>handleViewActivity(a)}>View</button></td></tr>))}</tbody></table></div>)}<div className="toast-container">{toasts.map(toast=>(<div key={toast.id} className="toast">{toast.message}</div>))}</div></div>)};export default App;
