import React, { useMemo, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { ShieldCheck, Siren, Users, QrCode, PackageCheck, CalendarCheck, MessageSquare, Leaf, LockKeyhole, WifiOff, Bell, UserCheck, Building2, ClipboardList, PhoneCall, Baby, Search, Settings, Home, RadioTower, Camera, Languages, DatabaseZap } from 'lucide-react';
import './styles.css';

const modules = [
  { key:'dashboard', label:'Dashboard', icon:Home },
  { key:'security', label:'Security OS', icon:ShieldCheck },
  { key:'visitors', label:'Visitors', icon:QrCode },
  { key:'parcels', label:'Parcels', icon:PackageCheck },
  { key:'community', label:'Community', icon:MessageSquare },
  { key:'bookings', label:'Bookings', icon:CalendarCheck },
  { key:'admin', label:'Admin', icon:Settings },
];

const featureCards = [
  ['Emergency SOS', Siren, 'One-tap emergency alerts with live guard/admin escalation and active incident tracking.'],
  ['Guard Console', RadioTower, 'Realtime gate dashboard for approvals, hold actions, visitor verification and security logs.'],
  ['Unknown Visitor Detection', Camera, 'Flag repeat/suspicious visitors and maintain searchable society safety history.'],
  ['Child Exit Protection', Baby, 'Immediate gate-side hold until registered guardian approves child exit.'],
  ['Offline Gate Mode', WifiOff, 'Guards can approve/log key actions during poor network and sync automatically later.'],
  ['Number Masking', PhoneCall, 'Privacy-first calling between resident and guard without exposing personal numbers.'],
  ['Data Protected', LockKeyhole, 'No ads, no resale, encrypted-ready architecture and sensitive data auto-redaction.'],
  ['Multi-language', Languages, 'English, Hindi and Marathi-ready structure for Maharashtra launch.'],
  ['Firebase Ready', DatabaseZap, 'Firestore/Auth/Storage ready files with clean modular connection layer.'],
];

const alerts = [
  {type:'SOS', flat:'A-1402', status:'Active', severity:'red', time:'2 min ago'},
  {type:'Suspicious visitor', flat:'Gate 2', status:'Investigating', severity:'gold', time:'12 min ago'},
  {type:'Fire drill', flat:'Tower B', status:'Resolved', severity:'green', time:'Today'},
];
const visitors = [
  {name:'Amit Sharma', type:'Guest', flat:'B-902', status:'Approved', tag:'green'},
  {name:'Zomato Delivery', type:'Delivery', flat:'C-1201', status:'At Gate', tag:'gold'},
  {name:'Unknown Vendor', type:'Service', flat:'N/A', status:'Hold', tag:'red'},
];
const parcels = [
  {id:'PKG-2031', flat:'A-802', status:'Held at gate', otp:'4821'},
  {id:'PKG-2032', flat:'B-1101', status:'Resident notified', otp:'9012'},
  {id:'RET-118', flat:'C-303', status:'Return pickup', otp:'6350'},
];
const notices = [
  'Water tank cleaning: Sunday 9 AM to 12 PM',
  'New privacy policy: 30-day visitor data auto-redaction',
  'Clubhouse unavailable on 30 April for private event'
];

function Layout(){
  const [tab,setTab]=useState('dashboard');
  const ActiveIcon = modules.find(m=>m.key===tab)?.icon || Home;
  return <div className="app">
    <aside className="sidebar">
      <div className="brand"><div className="logo">SS</div><div><h1>SecureSociety</h1><p>Safety-first society OS</p></div></div>
      <div className="nav">{modules.map(m=>{const I=m.icon;return <button key={m.key} onClick={()=>setTab(m.key)} className={tab===m.key?'active':''}><I size={19}/>{m.label}</button>})}</div>
      <div className="card section"><span className="pill"><ShieldCheck size={14}/> Data Protected</span><p className="small" style={{marginTop:12}}>Premium no-ad privacy positioning for securesociety.co.in</p></div>
    </aside>
    <main className="main">
      <div className="topbar"><div className="title"><h2><ActiveIcon size={27}/> {modules.find(m=>m.key===tab)?.label}</h2><p>Premium gated community safety, privacy and operations platform.</p></div><div style={{display:'flex',gap:10,flexWrap:'wrap'}}><span className="pill"><Bell size={15}/> Live demo mode</span><button className="cta">Launch Society</button></div></div>
      {tab==='dashboard'&&<Dashboard setTab={setTab}/>} {tab==='security'&&<Security/>} {tab==='visitors'&&<Visitors/>} {tab==='parcels'&&<Parcels/>} {tab==='community'&&<Community/>} {tab==='bookings'&&<Bookings/>} {tab==='admin'&&<Admin/>}
    </main>
    <div className="mobilebar">{modules.slice(0,5).map(m=>{const I=m.icon;return <button key={m.key} onClick={()=>setTab(m.key)} className={tab===m.key?'active':''}><I size={21}/></button>})}</div>
  </div>
}
function Dashboard({setTab}){return <><div className="card hero"><div style={{maxWidth:720,position:'relative',zIndex:1}}><span className="pill"><Building2 size={15}/> Maharashtra launch ready</span><h1 style={{fontSize:44,margin:'18px 0 8px'}}>SecureSociety: premium safety layer for modern Indian apartments.</h1><p style={{color:'var(--muted)',lineHeight:1.6}}>A MyGate-level community app with your safety-first USP protected: emergency, visitor intelligence, guard tools, privacy, offline mode, clubhouse, communication and admin operations.</p><div style={{display:'flex',gap:12,flexWrap:'wrap',marginTop:20}}><button className="cta sos" onClick={()=>setTab('security')}>Trigger Demo SOS</button><button className="ghost" onClick={()=>setTab('visitors')}>Open Gate Console</button></div></div></div><div className="grid cols4 section"><Metric icon={Users} value="4,280" label="Residents onboardable"/><Metric icon={ShieldCheck} value="99.9%" label="Safety audit visibility"/><Metric icon={WifiOff} value="Offline" label="Gate mode ready"/><Metric icon={LockKeyhole} value="No Ads" label="Privacy USP"/></div><div className="grid cols3 section">{featureCards.map(([t,I,d])=><Feature key={t} title={t} Icon={I} desc={d}/>)}</div></>}
function Metric({icon:Icon,value,label}){return <div className="card metric"><div><h3>{value}</h3><p>{label}</p></div><div className="icon"><Icon size={22}/></div></div>}
function Feature({title,Icon,desc}){return <div className="card feature"><div className="icon" style={{display:'inline-flex'}}><Icon size={22}/></div><h3>{title}</h3><p>{desc}</p></div>}
function Security(){return <div className="grid cols2"><div className="card"><h2>Live Security Command</h2><button className="cta sos" style={{width:'100%',fontSize:18,margin:'10px 0 18px'}}><Siren/> Emergency SOS</button>{alerts.map(a=><div className="row" key={a.type}><div><b>{a.type}</b><p className="small">{a.flat} • {a.time}</p></div><span className={`badge ${a.severity}`}>{a.status}</span></div>)}</div><div className="card"><h2>Safety Intelligence Timeline</h2><div className="timeline">{['Visitor denied at Gate 2','Child exit approval requested','Parcel OTP released','Night patrol completed'].map(x=><div className="dot" key={x} style={{margin:'18px 0'}}><b>{x}</b><p className="small">Logged with guard, resident and admin references.</p></div>)}</div></div></div>}
function Visitors(){return <div className="grid cols2"><div className="card"><h2>Gate Visitor Console</h2>{visitors.map(v=><div className="row" key={v.name}><div><b>{v.name}</b><p className="small">{v.type} • {v.flat}</p></div><span className={`badge ${v.tag}`}>{v.status}</span></div>)}<div style={{display:'flex',gap:10,marginTop:16}}><button className="cta"><QrCode/> Generate QR</button><button className="ghost">Immediate Hold</button></div></div><div className="card"><h2>Pre-approval Form</h2><div className="form"><input className="input" placeholder="Visitor name"/><select className="input"><option>Guest</option><option>Delivery</option><option>Service Staff</option></select><input className="input" placeholder="Flat number"/><button className="cta">Approve Secure Entry</button></div></div></div>}
function Parcels(){return <div className="card"><h2>Parcel & Return Management</h2>{parcels.map(p=><div className="row" key={p.id}><div><b>{p.id}</b><p className="small">Flat {p.flat} • OTP {p.otp}</p></div><span className="badge gold">{p.status}</span></div>)}</div>}
function Community(){return <div className="grid cols2"><div className="card"><h2>Internal Communication</h2>{notices.map(n=><div className="row" key={n}><div><b>{n}</b><p className="small">Admin broadcast</p></div><MessageSquare color="var(--emerald)"/></div>)}</div><div className="card"><h2>Community Environment</h2><Feature title="Green Society Score" Icon={Leaf} desc="Track cleanliness drives, waste collection, energy-saving and resident participation."/></div></div>}
function Bookings(){return <div className="grid cols2"><div className="card"><h2>Clubhouse Booking</h2>{['Clubhouse','Badminton Court','Party Hall','Guest Parking'].map((x,i)=><div className="row" key={x}><div><b>{x}</b><p className="small">{i%2?'Available today':'Booked 7 PM - 10 PM'}</p></div><button className="ghost">Book</button></div>)}</div><div className="card"><h2>Duplicate Booking Protection</h2><p style={{color:'var(--muted)',lineHeight:1.6}}>The Firebase structure includes date + timeSlot uniqueness checks before confirmation so admins avoid double bookings.</p><button className="cta">Check Availability</button></div></div>}
function Admin(){return <div className="grid cols2"><div className="card"><h2>Society Activation</h2>{['Create society','Invite admin','Add residents','Assign guards','Enable modules'].map((x,i)=><div className="row" key={x}><b>{i+1}. {x}</b><span className="badge green">Ready</span></div>)}</div><div className="card"><h2>Firestore Collections</h2>{['users','societies','alerts','visitors','parcels','bookings','notices','complaints','guardLogs'].map(x=><div className="row" key={x}><code>{x}</code><span className="badge">connected-ready</span></div>)}</div></div>}

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