import React, {useMemo, useState} from 'react';
import {createRoot} from 'react-dom/client';
import {Shield, Bell, Users, Activity, Lock, WifiOff, Radio, Phone, AlertTriangle, CheckCircle2, UserCheck, Building2, Brain, Mic, Package, CalendarCheck, IndianRupee, Megaphone, BarChart3, Settings, Search, Menu, Home, ClipboardCheck, UserRound, LogOut, Zap} from 'lucide-react';
import './styles.css';

const COLORS={bg:'#0B0F14',card:'#151B23',border:'#1D2530',emerald:'#00C896',red:'#FF4D4F'};

const team={
 'pratik@securesociety.co.in':{name:'Pratik',role:'CEO',pass:'Secure@123'},
 'amresh@securesociety.co.in':{name:'Amresh',role:'COO',pass:'Secure@123'},
 'nizamm@securesociety.co.in':{name:'Nizam',role:'CMO',pass:'Secure@123'},
 'abhishekv@securesociety.co.in':{name:'Abhishek',role:'CRM Lead',pass:'Secure@123'},
 'luckyg@securesociety.co.in':{name:'Lucky',role:'Finance Controller',pass:'Secure@123'},
 'guard@securesociety.co.in':{name:'Gate Team',role:'Guard',pass:'Secure@123'},
 'resident@securesociety.co.in':{name:'Resident',role:'Resident',pass:'Secure@123'},
 'admin@securesociety.co.in':{name:'Society Admin',role:'Society Admin',pass:'Secure@123'}
};

const navByRole={
 CEO:['Command','Societies','Revenue','Safety','Intel'],
 COO:['Operations','Onboarding','Guard Ops','Escalations','SOP'],
 CMO:['SecureScore','Campaigns','Leads','Trust UX','Referrals'],
 'Finance Controller':['Revenue','Dues','Invoices','Vendors','Forecast'],
 'CRM Lead':['Leads','Pilots','Tickets','Followups','Residents'],
 Guard:['Gate','Visitors','Offline','Incidents','SOS'],
 Resident:['Home','Visitors','SOS','Parcels','Bookings'],
 'Society Admin':['Dashboard','Members','Guards','Alerts','Billing']
};

const liveFeed=['Unknown visitor flagged at Tower B','Parcel return pending: A-1402','SOS drill completed by Guard 2','New pilot lead: Kandivali East','Offline queue synced: 18 records','Child gate-pass hold triggered: C-803'];
const societies=['Aarna Heights','Emerald Residency','Shivneri Enclave','Palm Grove CHS','Lakeview Towers'];

function Metric({icon:Icon,label,value,sub,tone='emerald'}){return <div className="metric glass"><div className="metricTop"><div className={`icon ${tone}`}><Icon size={18}/></div><span>{label}</span></div><b>{value}</b><small>{sub}</small></div>}
function Card({title,children,action}){return <section className="card"><div className="cardHead"><h3>{title}</h3>{action&&<button className="ghost">{action}</button>}</div>{children}</section>}
function Pill({children,tone='emerald'}){return <span className={`pill ${tone}`}>{children}</span>}

function Login({setUser}){const [email,setEmail]=useState('pratik@securesociety.co.in');const [pass,setPass]=useState('Secure@123');const [err,setErr]=useState('');function go(e){e.preventDefault();const u=team[email?.toLowerCase()]; if(u&&u.pass===pass){setUser({...u,email:email.toLowerCase()});} else setErr('Invalid access. Use mapped SecureSociety login.');}return <main className="login"><div className="orb one"/><div className="orb two"/><form onSubmit={go} className="loginBox"><div className="brand"><div className="logo"><Shield/></div><div><h1>SecureSociety</h1><p>Residential Safety OS</p></div></div><h2>Command access</h2><p className="muted">Role-based login for CEO, COO, CMO, CRM, Finance, Admin, Guard and Resident workflows.</p><label>Email</label><input value={email} onChange={e=>setEmail(e.target.value)} /><label>Password</label><input type="password" value={pass} onChange={e=>setPass(e.target.value)} /><button className="primary">Enter Secure Command</button>{err&&<p className="error">{err}</p>}<div className="loginGrid"><Pill>No Ads</Pill><Pill>Number Masking</Pill><Pill>Offline Guard</Pill><Pill>Realtime Sync</Pill></div></form></main>}

function Header({user,setUser}){return <header className="top"><div className="brand mini"><div className="logo"><Shield size={20}/></div><div><h1>SecureSociety</h1><p>{user.role} Console</p></div></div><div className="topActions"><button className="ghost"><Search size={17}/> Search</button><button className="ghost"><Bell size={17}/> Live</button><button className="avatar" onClick={()=>setUser(null)}>{user.name[0]} <LogOut size={14}/></button></div></header>}
function BottomNav({items,active,setActive}){const icons=[Home,Activity,Users,Shield,Brain];return <nav className="bottom">{items.slice(0,5).map((n,i)=>{const I=icons[i]||Shield;return <button className={active===n?'on':''} onClick={()=>setActive(n)} key={n}><I size={18}/><span>{n}</span></button>})}</nav>}

function CEO(){return <><div className="hero"><div><Pill>LIVE CEO COMMAND CENTER</Pill><h2>India’s most premium Residential Safety Operating System.</h2><p>Single operational cockpit for growth, onboarding, emergency monitoring, staff performance, revenue and AI bottleneck intelligence.</p></div><div className="radar"><Radio/><span>Realtime</span></div></div><div className="metrics"><Metric icon={Building2} label="Active Societies" value="50" sub="5 pilot-ready clusters"/><Metric icon={IndianRupee} label="MRR Potential" value="₹24.7L" sub="at ₹99 / flat"/><Metric icon={AlertTriangle} label="Escalations" value="7" sub="2 critical now" tone="red"/><Metric icon={Brain} label="AI Insights" value="18" sub="bottlenecks detected"/></div><div className="grid"><Card title="Live Command Feed" action="View all"><Feed/></Card><Card title="Operational Bottlenecks"><List items={['3 societies pending guard training','Tower B visitor approval delay above normal','Finance: 12 invoices awaiting society confirmation','CMO: SecureScore drop-off at question 6']}/></Card><Card title="Growth Pipeline"><Progress label="Mumbai pilots" val="78%"/><Progress label="Secretary meetings" val="64%"/><Progress label="Agent onboarding" val="41%"/></Card><Card title="Safety Pulse"><List items={['Unknown visitor detection active','Child exit immediate-hold enabled','Guard offline queue ready','Emergency broadcast tested']}/></Card></div></>}
function Guard(){return <><div className="guardHero"><h2>Gate Command Center</h2><p>Ultra-fast guard workflow: approve, call, hold, log, sync.</p><button className="danger"><AlertTriangle/> SOS Broadcast</button></div><div className="quick"><button><UserCheck/> Approve Visitor</button><button><Phone/> Call Resident</button><button><Package/> Parcel Entry</button><button><WifiOff/> Offline Log</button><button><Mic/> Hindi Voice Note</button></div><div className="grid"><Card title="Pending Visitors"><Visitor name="Ramesh Courier" flat="A-1402" status="Approval waiting"/><Visitor name="Unknown Guest" flat="B-703" status="Flagged" danger/><Visitor name="Driver - Ola" flat="C-1101" status="Pre-approved"/></Card><Card title="Offline Queue"><List items={['18 entries stored locally','6 exits awaiting sync','2 incident photos queued','Auto-sync when internet returns']}/></Card><Card title="Child Safety Hold"><List items={['C-803 child exit blocked','Guardian mismatch detected','Resident notified instantly','Guard call button enabled']}/></Card></div></>}
function Resident(){return <><div className="hero"><div><Pill>RESIDENT TRUST HOME</Pill><h2>Your home safety, one tap away.</h2><p>Approve visitors, receive emergency alerts, track parcels, book facilities and stay connected with society security.</p></div></div><div className="quick"><button><UserCheck/> Approve Guest</button><button><AlertTriangle/> SOS</button><button><Package/> Parcels</button><button><CalendarCheck/> Book Facility</button></div><div className="grid"><Card title="Today"><List items={['Maid entered 8:12 AM','Milk vendor exited 8:45 AM','Parcel delivered at gate','Clubhouse booking confirmed 7 PM']}/></Card><Card title="Security Alerts"><List items={['Unknown visitor blocked at B gate','Fire drill tomorrow 11 AM','Number masking active for calls']}/></Card></div></>}
function Functional({role}){const map={COO:['Onboarding control tower','Guard roster and shift tasks','Society SOP checklist','Escalation aging and owner mapping'],CMO:['SecureScore viral funnel','Area benchmarking and readiness meter','Trust-first campaign dashboard','Referral and society meeting tracker'],'Finance Controller':['Setup fee tracking','MRR forecast','Society dues and invoices','Vendor onboarding revenue'], 'CRM Lead':['Pilot society pipeline','Ticket and follow-up queue','Resident onboarding status','Secretary communication log'],'Society Admin':['Member controls','Guard assignment','Emergency announcements','Maintenance and billing overview']};return <><div className="hero"><div><Pill>{role.toUpperCase()} WORKSPACE</Pill><h2>{role} operational dashboard</h2><p>Only relevant modules are visible. No clutter, no dead pages, no generic admin layout.</p></div></div><div className="metrics"><Metric icon={ClipboardCheck} label="Open Tasks" value="24" sub="department mapped"/><Metric icon={Activity} label="Live Updates" value="93" sub="today"/><Metric icon={CheckCircle2} label="Completed" value="81%" sub="weekly"/><Metric icon={Zap} label="Automation" value="Active" sub="role workflows"/></div><div className="grid">{(map[role]||[]).map(x=><Card key={x} title={x}><List items={['Realtime status visible','Owner assigned','Next action mapped','Mobile-first workflow ready']}/></Card>)}</div></>}

function SecureScorePanel(){return <Card title="SecureScore Engine"><div className="score"><div><b>82</b><span>/100</span><p>Operational readiness score</p></div><List items={['Area benchmark: above Kandivali average','Visitor process: medium risk','Offline gate readiness: strong','Emergency workflow: needs drill']}/></div></Card>}
function Feed(){return <div className="feed">{liveFeed.map((f,i)=><div key={f}><span className="dot"/>{f}<small>{i+1} min ago</small></div>)}</div>}
function List({items}){return <ul className="list">{items.map(i=><li key={i}><CheckCircle2 size={16}/>{i}</li>)}</ul>}
function Progress({label,val}){return <div className="prog"><div><span>{label}</span><b>{val}</b></div><div className="bar"><i style={{width:val}}/></div></div>}
function Visitor({name,flat,status,danger}){return <div className={`visitor ${danger?'dangerLine':''}`}><div><b>{name}</b><span>{flat}</span></div><Pill tone={danger?'red':'emerald'}>{status}</Pill></div>}

function App(){const [user,setUser]=useState(null);const [active,setActive]=useState('Command');const nav=useMemo(()=>user?navByRole[user.role]||['Dashboard']:[],[user]);if(!user)return <Login setUser={setUser}/>;return <main className="app"><Header user={user} setUser={setUser}/><aside><div className="brand mini"><div className="logo"><Shield size={20}/></div><div><h1>SecureSociety</h1><p>Residential Safety OS</p></div></div>{nav.map(n=><button className={active===n?'active':''} onClick={()=>setActive(n)} key={n}>{n}</button>)}<div className="trust"><Lock size={18}/><b>Data Protected</b><span>No ads • Masked numbers • Privacy-first</span></div></aside><section className="content">{user.role==='CEO'?<CEO/>:user.role==='Guard'?<Guard/>:user.role==='Resident'?<Resident/>:<Functional role={user.role}/>}<div className="grid lower"><SecureScorePanel/><Card title="Phase Roadmap"><List items={['Phase 1: safety OS, gate ops, SecureScore','Phase 2: SecureBell voice approvals','Phase 3: SecureIntel AI prediction layer','Cloudflare + Firebase safe architecture']}/></Card></div></section><BottomNav items={nav} active={active} setActive={setActive}/></main>}

createRoot(document.getElementById('root')).render(<App/>);