import React,{useState,useMemo,useTransition,useEffect}from'react';interface QualityIssue{id:string;recordId:string;recordName:string;issueType:'Duplicate'|'Incomplete'|'Invalid';field:string;severity:'Low'|'Medium'|'High'}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 mockIssues:QualityIssue[]=[{id:'q001',recordId:'001',recordName:'Acme Corp',issueType:'Duplicate',field:'Name',severity:'High'},{id:'q002',recordId:'002',recordName:'Global Inc',issueType:'Incomplete',field:'Email',severity:'Medium'},{id:'q003',recordId:'003',recordName:'TechStart',issueType:'Invalid',field:'Phone',severity:'Low'},{id:'q004',recordId:'004',recordName:'Premier LLC',issueType:'Duplicate',field:'Email',severity:'High'}];const App:React.FC=()=>{const[searchQuery,setSearchQuery]=useState('');const[severityFilter,setSeverityFilter]=useState<string>('All');const[isPending,startTransition]=useTransition();const{toasts,show}=useToast();const debouncedSearch=useDebounce(searchQuery,300);const filteredIssues=useMemo(()=>{return mockIssues.filter(i=>{const matchesSearch=i.recordName.toLowerCase().includes(debouncedSearch.toLowerCase());const matchesSeverity=severityFilter==='All'||i.severity===severityFilter;return matchesSearch&&matchesSeverity})},[debouncedSearch,severityFilter]);const stats=useMemo(()=>({total:mockIssues.length,duplicates:mockIssues.filter(i=>i.issueType==='Duplicate').length,incomplete:mockIssues.filter(i=>i.issueType==='Incomplete').length,highSeverity:mockIssues.filter(i=>i.severity==='High').length}),[]);const handleSearch=(e:React.ChangeEvent<HTMLInputElement>)=>{startTransition(()=>{setSearchQuery(e.target.value)})};const handleFix=(issue:QualityIssue)=>{show(`Fixing issue: ${issue.recordName}`)};return(<div className="app-container"><header className="app-header"><h1>Data Quality</h1><p>Duplicate detection and field completeness</p></header><div className="stats-grid"><div className="stat-card"><div className="stat-label">Total Issues</div><div className="stat-value">{stats.total}</div></div><div className="stat-card"><div className="stat-label">Duplicates</div><div className="stat-value">{stats.duplicates}</div></div><div className="stat-card"><div className="stat-label">Incomplete</div><div className="stat-value">{stats.incomplete}</div></div><div className="stat-card"><div className="stat-label">High Severity</div><div className="stat-value">{stats.highSeverity}</div></div></div><div className="controls"><input type="text" placeholder="Search by record name..." value={searchQuery} onChange={handleSearch} className="search-input"/><select value={severityFilter} onChange={e=>setSeverityFilter(e.target.value)} className="filter-select"><option value="All">All Severity</option><option value="High">High</option><option value="Medium">Medium</option><option value="Low">Low</option></select></div>{filteredIssues.length===0?(<div className="empty-state"><div className="empty-icon">🎯</div><h3>No issues found</h3><p>Try adjusting your filters</p></div>):(<div className="data-grid"><table><thead><tr><th>Record Name</th><th>Issue Type</th><th>Field</th><th>Severity</th><th>Actions</th></tr></thead><tbody className={isPending?'loading':''}>{filteredIssues.map(i=>(<tr key={i.id}><td><strong>{i.recordName}</strong></td><td><span className="badge">{i.issueType}</span></td><td>{i.field}</td><td><span className={`badge badge-${i.severity.toLowerCase()}`}>{i.severity}</span></td><td><button className="btn-primary" onClick={()=>handleFix(i)}>Fix</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;
