import React,{useState,useMemo,useTransition,useEffect}from'react';interface Integration{id:string;name:string;type:string;apiCalls:number;limit:number;status:'Active'|'Inactive'|'Error';lastSync: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 mockIntegrations:Integration[]=[{id:'i001',name:'Marketing Cloud',type:'Connected App',apiCalls:12450,limit:15000,status:'Active',lastSync:'2025-02-13 14:30'},{id:'i002',name:'Data Warehouse',type:'API Integration',apiCalls:8920,limit:10000,status:'Active',lastSync:'2025-02-13 13:15'},{id:'i003',name:'Legacy CRM',type:'Connected App',apiCalls:200,limit:5000,status:'Inactive',lastSync:'2025-02-10 10:00'},{id:'i004',name:'Analytics Platform',type:'API Integration',apiCalls:4950,limit:5000,status:'Error',lastSync:'2025-02-13 12:00'}];const App:React.FC=()=>{const[searchQuery,setSearchQuery]=useState('');const[statusFilter,setStatusFilter]=useState<string>('All');const[isPending,startTransition]=useTransition();const{toasts,show}=useToast();const debouncedSearch=useDebounce(searchQuery,300);const filteredIntegrations=useMemo(()=>{return mockIntegrations.filter(i=>{const matchesSearch=i.name.toLowerCase().includes(debouncedSearch.toLowerCase());const matchesStatus=statusFilter==='All'||i.status===statusFilter;return matchesSearch&&matchesStatus})},[debouncedSearch,statusFilter]);const stats=useMemo(()=>({total:mockIntegrations.length,active:mockIntegrations.filter(i=>i.status==='Active').length,totalCalls:mockIntegrations.reduce((sum,i)=>sum+i.apiCalls,0),avgUsage:Math.round((mockIntegrations.reduce((sum,i)=>sum+(i.apiCalls/i.limit*100),0)/mockIntegrations.length))}),[]);const handleSearch=(e:React.ChangeEvent<HTMLInputElement>)=>{startTransition(()=>{setSearchQuery(e.target.value)})};const handleViewIntegration=(integration:Integration)=>{show(`Viewing ${integration.name}`)};return(<div className="app-container"><header className="app-header"><h1>Integration Monitor</h1><p>API usage, limits, and connected apps</p></header><div className="stats-grid"><div className="stat-card"><div className="stat-label">Total Integrations</div><div className="stat-value">{stats.total}</div></div><div className="stat-card"><div className="stat-label">Active</div><div className="stat-value">{stats.active}</div></div><div className="stat-card"><div className="stat-label">Total API Calls</div><div className="stat-value">{(stats.totalCalls/1000).toFixed(1)}K</div></div><div className="stat-card"><div className="stat-label">Avg Usage</div><div className="stat-value">{stats.avgUsage}%</div></div></div><div className="controls"><input type="text" placeholder="Search integrations..." value={searchQuery} onChange={handleSearch} className="search-input"/><select value={statusFilter} onChange={e=>setStatusFilter(e.target.value)} className="filter-select"><option value="All">All Status</option><option value="Active">Active</option><option value="Inactive">Inactive</option><option value="Error">Error</option></select></div>{filteredIntegrations.length===0?(<div className="empty-state"><div className="empty-icon">🔌</div><h3>No integrations found</h3><p>Try adjusting your filters</p></div>):(<div className="data-grid"><table><thead><tr><th>Name</th><th>Type</th><th>API Calls</th><th>Limit</th><th>Usage</th><th>Status</th><th>Last Sync</th><th>Actions</th></tr></thead><tbody className={isPending?'loading':''}>{filteredIntegrations.map(i=>(<tr key={i.id}><td><strong>{i.name}</strong></td><td>{i.type}</td><td>{i.apiCalls.toLocaleString()}</td><td>{i.limit.toLocaleString()}</td><td>{Math.round((i.apiCalls/i.limit)*100)}%</td><td><span className={`badge badge-${i.status.toLowerCase()}`}>{i.status}</span></td><td>{i.lastSync}</td><td><button className="btn-primary" onClick={()=>handleViewIntegration(i)}>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;
