import React,{useState,useMemo,useTransition,useEffect}from'react';interface QueryResult{id:string;Name:string;Type:string;Amount?:number;Status?: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 mockResults:QueryResult[]=[{id:'001',Name:'Acme Corp',Type:'Account',Amount:500000,Status:'Active'},{id:'002',Name:'Global Inc',Type:'Account',Amount:850000,Status:'Active'},{id:'003',Name:'TechStart',Type:'Opportunity',Amount:125000,Status:'Prospecting'}];const App:React.FC=()=>{const[query,setQuery]=useState('SELECT Id, Name FROM Account LIMIT 10');const[results,setResults]=useState<QueryResult[]>([]);const[isPending,startTransition]=useTransition();const{toasts,show}=useToast();const debouncedQuery=useDebounce(query,300);const stats=useMemo(()=>({queries:1,results:results.length,rows:results.length}),[results]);const handleRunQuery=()=>{startTransition(()=>{setResults(mockResults);show('Query executed successfully')})};return(<div className="app-container"><header className="app-header"><h1>SOQL Console</h1><p>Interactive SOQL query editor and results table</p></header><div className="stats-grid"><div className="stat-card"><div className="stat-label">Queries Run</div><div className="stat-value">{stats.queries}</div></div><div className="stat-card"><div className="stat-label">Results</div><div className="stat-value">{stats.results}</div></div><div className="stat-card"><div className="stat-label">Rows</div><div className="stat-value">{stats.rows}</div></div></div><div className="controls"><textarea value={query} onChange={e=>setQuery(e.target.value)} className="search-input" rows={4} placeholder="Enter SOQL query..."/><button className="btn-primary" onClick={handleRunQuery}>Run Query</button></div>{results.length===0?(<div className="empty-state"><div className="empty-icon">💻</div><h3>No results</h3><p>Run a query to see results</p></div>):(<div className="data-grid"><table><thead><tr><th>ID</th><th>Name</th><th>Type</th><th>Amount</th><th>Status</th></tr></thead><tbody className={isPending?'loading':''}>{results.map(r=>(<tr key={r.id}><td>{r.id}</td><td><strong>{r.Name}</strong></td><td>{r.Type}</td><td>{r.Amount?`$${r.Amount.toLocaleString()}`:'-'}</td><td>{r.Status||'-'}</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;
