import React,{useState,useMemo,useTransition,useEffect}from'react';interface OrgMetric{category:string;metric:string;value:string;limit:string;percentage:number}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 mockMetrics:OrgMetric[]=[{category:'Storage',metric:'Data Storage',value:'45 GB',limit:'50 GB',percentage:90},{category:'Storage',metric:'File Storage',value:'12 GB',limit:'20 GB',percentage:60},{category:'Licenses',metric:'User Licenses',value:'185',limit:'200',percentage:92},{category:'Licenses',metric:'Permission Sets',value:'42',limit:'50',percentage:84},{category:'API',metric:'API Calls (24h)',value:'12500',limit:'15000',percentage:83}];const App:React.FC=()=>{const[searchQuery,setSearchQuery]=useState('');const[categoryFilter,setCategoryFilter]=useState<string>('All');const[isPending,startTransition]=useTransition();const{toasts,show}=useToast();const debouncedSearch=useDebounce(searchQuery,300);const filteredMetrics=useMemo(()=>{return mockMetrics.filter(m=>{const matchesSearch=m.metric.toLowerCase().includes(debouncedSearch.toLowerCase());const matchesCategory=categoryFilter==='All'||m.category===categoryFilter;return matchesSearch&&matchesCategory})},[debouncedSearch,categoryFilter]);const stats=useMemo(()=>({total:mockMetrics.length,highUsage:mockMetrics.filter(m=>m.percentage>80).length,avgUsage:Math.round(mockMetrics.reduce((sum,m)=>sum+m.percentage,0)/mockMetrics.length),critical:mockMetrics.filter(m=>m.percentage>90).length}),[]);const handleSearch=(e:React.ChangeEvent<HTMLInputElement>)=>{startTransition(()=>{setSearchQuery(e.target.value)})};const handleViewMetric=(metric:OrgMetric)=>{show(`Viewing ${metric.metric}`)};return(<div className="app-container"><header className="app-header"><h1>Org Overview</h1><p>Org-level metrics, storage, and license usage</p></header><div className="stats-grid"><div className="stat-card"><div className="stat-label">Total Metrics</div><div className="stat-value">{stats.total}</div></div><div className="stat-card"><div className="stat-label">High Usage</div><div className="stat-value">{stats.highUsage}</div></div><div className="stat-card"><div className="stat-label">Avg Usage</div><div className="stat-value">{stats.avgUsage}%</div></div><div className="stat-card"><div className="stat-label">Critical</div><div className="stat-value">{stats.critical}</div></div></div><div className="controls"><input type="text" placeholder="Search metrics..." value={searchQuery} onChange={handleSearch} className="search-input"/><select value={categoryFilter} onChange={e=>setCategoryFilter(e.target.value)} className="filter-select"><option value="All">All Categories</option><option value="Storage">Storage</option><option value="Licenses">Licenses</option><option value="API">API</option></select></div>{filteredMetrics.length===0?(<div className="empty-state"><div className="empty-icon">🏢</div><h3>No metrics found</h3><p>Try adjusting your filters</p></div>):(<div className="data-grid"><table><thead><tr><th>Category</th><th>Metric</th><th>Value</th><th>Limit</th><th>Usage</th><th>Actions</th></tr></thead><tbody className={isPending?'loading':''}>{filteredMetrics.map((m,idx)=>(<tr key={idx}><td>{m.category}</td><td><strong>{m.metric}</strong></td><td>{m.value}</td><td>{m.limit}</td><td><div style={{width:'100px',height:'20px',background:'var(--bg-tertiary)',borderRadius:'4px',overflow:'hidden'}}><div style={{width:`${m.percentage}%`,height:'100%',background:m.percentage>90?'var(--error)':m.percentage>75?'var(--warning)':'var(--success)',transition:'width 0.3s'}}></div></div>{m.percentage}%</td><td><button className="btn-primary" onClick={()=>handleViewMetric(m)}>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;
