import React,{useState,useMemo,useTransition,useEffect}from'react';interface User{id:string;name:string;email:string;role:string;profile:string;active:boolean;lastLogin: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 mockUsers:User[]=[{id:'u001',name:'Jane Smith',email:'jane@acme.com',role:'Sales Manager',profile:'Standard User',active:true,lastLogin:'2025-02-13'},{id:'u002',name:'John Doe',email:'john@acme.com',role:'Admin',profile:'System Administrator',active:true,lastLogin:'2025-02-13'},{id:'u003',name:'Alice Johnson',email:'alice@acme.com',role:'Sales Rep',profile:'Standard User',active:true,lastLogin:'2025-02-12'},{id:'u004',name:'Bob Wilson',email:'bob@acme.com',role:'Support',profile:'Support User',active:false,lastLogin:'2025-01-20'}];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 filteredUsers=useMemo(()=>{return mockUsers.filter(user=>{const matchesSearch=user.name.toLowerCase().includes(debouncedSearch.toLowerCase())||user.email.toLowerCase().includes(debouncedSearch.toLowerCase());const matchesStatus=statusFilter==='All'||(statusFilter==='Active'&&user.active)||(statusFilter==='Inactive'&&!user.active);return matchesSearch&&matchesStatus})},[debouncedSearch,statusFilter]);const stats=useMemo(()=>({total:mockUsers.length,active:mockUsers.filter(u=>u.active).length,inactive:mockUsers.filter(u=>!u.active).length,admins:mockUsers.filter(u=>u.role==='Admin').length}),[]);const handleSearch=(e:React.ChangeEvent<HTMLInputElement>)=>{startTransition(()=>{setSearchQuery(e.target.value)})};const handleManageUser=(user:User)=>{show(`Managing ${user.name}`)};return(<div className="app-container"><header className="app-header"><h1>User Admin</h1><p>Users, roles, profiles, and permissions</p></header><div className="stats-grid"><div className="stat-card"><div className="stat-label">Total Users</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">Inactive</div><div className="stat-value">{stats.inactive}</div></div><div className="stat-card"><div className="stat-label">Admins</div><div className="stat-value">{stats.admins}</div></div></div><div className="controls"><input type="text" placeholder="Search users..." 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></select></div>{filteredUsers.length===0?(<div className="empty-state"><div className="empty-icon">👥</div><h3>No users found</h3><p>Try adjusting your filters</p></div>):(<div className="data-grid"><table><thead><tr><th>Name</th><th>Email</th><th>Role</th><th>Profile</th><th>Status</th><th>Last Login</th><th>Actions</th></tr></thead><tbody className={isPending?'loading':''}>{filteredUsers.map(user=>(<tr key={user.id}><td><strong>{user.name}</strong></td><td>{user.email}</td><td>{user.role}</td><td>{user.profile}</td><td><span className={`badge ${user.active?'badge-success':'badge-error'}`}>{user.active?'Active':'Inactive'}</span></td><td>{user.lastLogin}</td><td><button className="btn-primary" onClick={()=>handleManageUser(user)}>Manage</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;
