Create Account

Complete all fields to register your AIF

AIF Category *

{form.pw&&(

{[1,2,3,4].map(i=>

)}

{strLabels[str]} password

)}

setDone(true)} style={{width:"100%",justifyContent:"center",marginTop:8}} size="lg">Create Account →

Already registered?{" "}

); } // ─── LAYOUT ─────────────────────────────────────────────────────────────────── function Layout({user,view,setView,onLogout,children}){ const overdue=mockCompliance.filter(c=>c.status==="overdue"&&(!user.category||c.category.includes(user.category))).length; const adminNav=[ {icon:"⊞",label:"Dashboard",key:"dashboard"}, {icon:"📅",label:"Compliance Calendar",key:"calendar"}, {icon:"📋",label:"SEBI Circulars",key:"circulars"}, {icon:"👥",label:"Manage Users",key:"users"}, {icon:"📣",label:"Broadcast Notification",key:"broadcast"}, {icon:"✉️",label:"Contact Email",key:"contactemail"}, {icon:"🔑",label:"Account Settings",key:"changepassword"}, {icon:"⚙️",label:"SMTP Settings",key:"smtp"}, ]; const userNav=[ {icon:"⊞",label:"Dashboard",key:"dashboard"}, {icon:"📅",label:"Compliance Calendar",key:"calendar"}, {icon:"📋",label:"SEBI Circulars",key:"circulars"}, {icon:"🔐",label:"Password Vault",key:"vault"}, {icon:"✏️",label:"My Compliance",key:"custom"}, {icon:"🔔",label:"Notifications",key:"notifications"}, {icon:"💬",label:"Need Assistance",key:"assistance"}, {icon:"⚙️",label:"Account Settings",key:"usersettings"}, ]; const nav=user.role==="admin"?adminNav:userNav; return(

{user.name}

{user.category&&

{categoryLabel(user.category)}

}

{user.role==="admin"?"Platform Administrator":user.sebi}

{children}

); } // ─── DASHBOARD ──────────────────────────────────────────────────────────────── function Dashboard({user,setView,setCalendarFilter}){ const items=mockCompliance.filter(c=>!user.category||c.category.includes(user.category)); const overdue=items.filter(c=>c.status==="overdue").length; const dueSoon=items.filter(c=>c.status==="due-soon").length; const upcoming=items.filter(c=>c.status==="upcoming").length; const quickActions=[ {icon:"🔐",title:"Password Vault",desc:"Access your regulatory portal credentials",key:"vault"}, {icon:"✏️",title:"My Compliance",desc:"Track internal compliance obligations",key:"custom"}, {icon:"💬",title:"Get Assistance",desc:"Send a query to your compliance advisor",key:"assistance"}, {icon:"🔔",title:"Manage Emails",desc:"Update notification email addresses",key:"notifications"}, ]; return(

{user.role!=="admin"&&(

SEBI Registration

{user.sebi}

Fund Category

{categoryLabel(user.category)}

)}

{[ {label:"Overdue",value:overdue,color:C.red,bg:"#fff",key:"overdue"}, {label:"Due This Week",value:dueSoon,color:C.amber,bg:"#fff",key:"due-soon"}, {label:"Upcoming",value:upcoming,color:C.blue,bg:"#fff",key:"upcoming"}, ].map(s=>(

{setCalendarFilter(s.key);setView("calendar");}} style={{background:s.bg,borderRadius:10,padding:"16px 20px",border:`1px solid ${C.blueBorder}`,cursor:"pointer",transition:"all 0.15s",boxShadow:"0 1px 4px rgba(7,26,62,0.05)",borderLeft:`4px solid ${s.color}`}} onMouseEnter={e=>{e.currentTarget.style.boxShadow=`0 4px 16px rgba(7,26,62,0.1)`;e.currentTarget.style.transform="translateY(-1px)";}} onMouseLeave={e=>{e.currentTarget.style.boxShadow="0 1px 4px rgba(7,26,62,0.05)";e.currentTarget.style.transform="translateY(0)";}}>

{s.label}

{s.value}

compliance items

))}

Upcoming Deadlines

{items.filter(c=>c.status!=="done").slice(0,5).map(item=>(

setView("calendar")} style={{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"10px 8px",borderBottom:`1px solid ${C.surface}`,cursor:"pointer",borderRadius:7,transition:"background 0.12s",margin:"0 -8px"}} onMouseEnter={e=>e.currentTarget.style.background=C.bluePale} onMouseLeave={e=>e.currentTarget.style.background="transparent"}>

{item.explanation.slice(0,52)}…

{new Date(item.dueDate).toLocaleDateString("en-IN",{day:"numeric",month:"short",year:"numeric"})}

))} {user.role==="admin"?(

Registered Funds

{mockUsers.map(u=>(

{u.name.slice(0,2)}

{u.name}

{categoryLabel(u.category)} · {u.sebi}

{u.active?"Active":"Inactive"}

))} ):(

Quick Actions

{quickActions.map(a=>(

setView(a.key)} style={{display:"flex",alignItems:"center",gap:14,padding:"11px 10px",borderRadius:8,cursor:"pointer",transition:"all 0.15s",marginBottom:2,border:"1px solid transparent"}} onMouseEnter={e=>{e.currentTarget.style.background=C.bluePale;e.currentTarget.style.borderColor=C.blueBorder;}} onMouseLeave={e=>{e.currentTarget.style.background="transparent";e.currentTarget.style.borderColor="transparent";}}> {a.icon}

{a.title}

{a.desc}

›

))} )}

); } // ─── COMPLIANCE CALENDAR ────────────────────────────────────────────────────── function ComplianceCalendar({user,isCirculars,initialFilter="all",doneSet={},setDoneSet,remarkMap={},setRemarkMap}){ const [page,setPage]=useState(0); const [filter,setFilter]=useState(initialFilter); // doneSet and remarkMap come from App-level props — persist across navigation and re-login const _setDone=setDoneSet||(()=>{}); const _setRemark=setRemarkMap||(()=>{}); const [showAdd,setShowAdd]=useState(false); const [newItem,setNewItem]=useState({dueDate:"",explanation:"",link:"",category:[1,2,3]}); const PER=10; let items=mockCompliance.filter(c=>!user.category||c.category.includes(user.category)); if(filter!=="all") items=items.filter(c=>(doneSet[c.id]?"done":c.status)===filter); const total=items.length; const paged=items.slice(page*PER,page*PER+PER); const pages=Math.ceil(total/PER); return(

setShowAdd(true)} size="sm">+ Add Item} />

Filter: {[ {key:"all",label:"All"}, {key:"overdue",label:"Overdue",color:C.red}, {key:"due-soon",label:"Due Soon",color:C.amber}, {key:"upcoming",label:"Upcoming",color:C.blue}, {key:"done",label:"Completed",color:C.green}, ].map(f=>( ))}

{["Due Date","Compliance Requirement","Reference",user.category?"Remark":"Categories","Status","Action"].map(h=>( ))} {paged.length===0&&( )} {paged.map((item,idx)=>{ const done=!!doneSet[item.id]; return( e.currentTarget.style.background=C.bluePale} onMouseLeave={e=>e.currentTarget.style.background=idx%2===0?"#fff":"#FAFCFF"}> ); })}

{h.toUpperCase()}
📋 No compliance items match this filter.
{new Date(item.dueDate).toLocaleDateString("en-IN",{day:"numeric",month:"short",year:"numeric"})}	{item.explanation}	View ↗	{user.category?( _setRemark(m=>({...m,[item.id]:e.target.value}))} style={{border:`1px solid ${C.blueBorder}`,borderRadius:6,padding:"5px 8px",fontSize:12,width:140,color:C.text,background:"#FAFCFF"}}/> ):( item.category.map(c=>Cat {c}) )}		{!done ? :✓ Done }

{pages>1&&(

Showing {page*PER+1}–{Math.min((page+1)*PER,total)} of {total}

setPage(p=>Math.max(0,p-1))} style={{opacity:page===0?0.4:1}}>← Prev setPage(p=>Math.min(pages-1,p+1))} style={{opacity:page>=pages-1?0.4:1}}>Next →

)} {showAdd&&user.role==="admin"&&( setShowAdd(false)}>

Applicable Categories *

{[1,2,3].map(c=>( setNewItem(n=>({...n,category:e.target.checked?[...n.category,c]:n.category.filter(x=>x!==c)}))} style={{display:"none"}}/> Cat {c} ))}

setNewItem(n=>({...n,dueDate:v}))} required/>

Compliance Explanation *

setNewItem(n=>({...n,explanation:e.target.value}))} rows={3} placeholder="Plain-language explanation of the obligation…" style={{width:"100%",padding:"9px 12px",borderRadius:7,border:`1.5px solid ${C.blueBorder}`,fontSize:14,color:C.text,resize:"vertical",boxSizing:"border-box",background:"#FAFCFF"}}/>
          </div>
          <Input label="Circular Reference Link" value={newItem.link} onChange={v=>setNewItem(n=>({...n,link:v}))} placeholder="https://www.sebi.gov.in/circulars/…"/>
          <div style={{display:"flex",gap:10,justifyContent:"flex-end",marginTop:16}}>
            <Btn variant="outline" onClick={()=>setShowAdd(false)}>Cancel</Btn>
            <Btn onClick={()=>setShowAdd(false)}>Save Item</Btn>
          </div>
        </Modal>
      )}
    </div>
  );
}

// ─── OTP FLOW (reusable) ──────────────────────────────────────────────────────
// Simulates OTP send/verify. In production this would call a real backend.
// ─── EMAIL LINK FLOW (reusable) ───────────────────────────────────────────────
// Simulates sending a password-reset link to the registered email.
// In production this would call a real backend to send an email with a secure token.
function EmailLinkFlow({title,emailDisplay,realEmail,userName="",type="login",onVerified,onCancel}){
  const [sent,setSent]=useState(false);
  const [sending,setSending]=useState(false);
  const [sendErr,setSendErr]=useState("");
  const [resendTimer,setResendTimer]=useState(0);

if(!sent) return(
    <div>
      <div style={{background:C.bluePale,border:`1px solid ${C.blueBorder}`,borderRadius:8,padding:"14px 16px",marginBottom:20,fontSize:13,color:C.navy,lineHeight:1.7}}>
        <strong>{title}</strong><br/>
        <span style={{fontSize:12,color:C.muted}}>A password reset link will be sent to your registered email address.</span>
      </div>
      <div style={{background:C.surface,borderRadius:8,padding:"11px 14px",marginBottom:20,display:"flex",alignItems:"center",gap:10,border:`1px solid ${C.blueBorder}`}}>
        <span style={{fontSize:18}}>📧</span>
        <div>
          <div style={{fontSize:11,color:C.muted,fontWeight:700,letterSpacing:0.4,textTransform:"uppercase",marginBottom:2}}>Reset link will be sent to</div>
          <div style={{fontSize:13,fontWeight:700,color:C.navy}}>{emailDisplay}</div>
        </div>
      </div>
      {sendErr&&<div style={{background:C.redBg,color:C.red,padding:"9px 13px",borderRadius:7,fontSize:13,marginBottom:14,border:`1px solid ${C.red}22`,fontWeight:600}}>{sendErr}</div>}
      <div style={{display:"flex",gap:10}}>
        <Btn variant="outline" onClick={onCancel} style={{opacity:sending?0.5:1}}>Cancel</Btn>
        <Btn onClick={sendLink} style={{flex:1,justifyContent:"center",opacity:sending?0.7:1}}>
          {sending?"Sending…":"Send Reset Link →"}
        </Btn>
      </div>
    </div>
  );

return(
    <div>
      <div style={{background:C.greenBg,border:`1px solid ${C.green}33`,borderRadius:8,padding:"14px 16px",marginBottom:18,fontSize:13,color:C.green}}>
        <strong>✓ Reset link sent!</strong><br/>
        A reset link has been sent to <strong>{emailDisplay}</strong>. Check your inbox and click the link to reset your {type==="vault"?"vault password":"password"}.
      </div>
      <div style={{background:C.bluePale,border:`1px solid ${C.blueBorder}`,borderRadius:8,padding:"11px 14px",marginBottom:18,fontSize:12,color:C.navy,lineHeight:1.7}}>
        📬 <strong>Check your email inbox</strong> — the link is valid for <strong>30 minutes</strong>.<br/>
        <span style={{color:C.muted}}>Can't find it? Check your spam folder or resend below.</span>
      </div>
      <div style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
        <button onClick={onCancel} style={{background:"none",border:"none",cursor:"pointer",color:C.muted,fontSize:12,padding:0}}>← Cancel</button>
        {resendTimer>0
          ?<span style={{fontSize:12,color:C.muted}}>Resend in {resendTimer}s</span>
          :<button onClick={sendLink} style={{background:"none",border:"none",cursor:"pointer",color:C.blue,fontSize:12,fontWeight:600,padding:0}}>Resend link</button>
        }
      </div>
    </div>
  );
}

// ─── PASSWORD VAULT ───────────────────────────────────────────────────────────
function Vault({initialVaultPin="",onVaultPinChange,vaultUnlocked,setVaultUnlocked,userEmail=""}){
  // ── Vault PIN gate ──
  const [vaultPin,setVaultPin]=useState(initialVaultPin); // saved PIN (empty = not set yet)
  const setAndPersistPin=pin=>{setVaultPin(pin);if(onVaultPinChange)onVaultPinChange(pin);};
  const [pinInput,setPinInput]=useState("");
  const [pinError,setPinError]=useState("");
  // vaultUnlocked and setVaultUnlocked come from App-level props — persists across navigation

// Setup flow: "enter" | "forgot" | "newpin"
  const [vaultFlow,setVaultFlow]=useState("enter");
  const [setupError,setSetupError]=useState("");

// After unlocking
  const [creds,setCreds]=useState({});
  const [visible,setVisible]=useState({});
  const [authModal,setAuthModal]=useState(null);
  const [authPw,setAuthPw]=useState("");
  const [copied,setCopied]=useState(null);
  const [customPortals,setCustomPortals]=useState([]);
  const [regOverrides,setRegOverrides]=useState({});

const [showAddPortal,setShowAddPortal]=useState(false);
  const [newPortal,setNewPortal]=useState({name:"",url:"",user:"",pw:""});
  const [newPortalPwVisible,setNewPortalPwVisible]=useState(false);
  const [addFormErr,setAddFormErr]=useState("");
  const [editPortal,setEditPortal]=useState(null);
  const [editForm,setEditForm]=useState({name:"",url:"",user:"",pw:""});
  const [editPwVisible,setEditPwVisible]=useState(false);
  const [editFormErr,setEditFormErr]=useState("");
  const [deleteConfirm,setDeleteConfirm]=useState(null);

// ── PIN Gate UI ──
  if(!vaultUnlocked){
    // SETUP FLOW — no PIN set yet (single step, no confirm)
    if(!vaultPin){
      return(
        <div style={{padding:28}}>
          <PageHeader title="Password Vault" subtitle="Secure portal credential manager"/>
          <div style={{maxWidth:400,margin:"0 auto",marginTop:24}}>
            <Card>
              <div style={{textAlign:"center",marginBottom:22}}>
                <div style={{fontSize:40,marginBottom:10}}>🔐</div>
                <h3 style={{margin:0,fontSize:16,fontWeight:800,color:C.navy}}>Set Up Vault Password</h3>
                <p style={{fontSize:13,color:C.muted,margin:"8px 0 0",lineHeight:1.6}}>Create a password to protect your Password Vault. This is separate from your login password and can only be changed via a reset link sent to your registered email.</p>
              </div>
              <div style={{marginBottom:14}}>
                <label style={{fontSize:11,fontWeight:700,color:C.muted,display:"block",marginBottom:5,letterSpacing:0.4,textTransform:"uppercase"}}>Create Vault Password</label>
                <input type="password" value={pinInput} onChange={e=>setPinInput(e.target.value)} placeholder="Minimum 4 characters" maxLength={20} autoFocus
                  style={{width:"100%",padding:"10px 13px",borderRadius:7,border:`1.5px solid ${C.blueBorder}`,fontSize:14,color:C.text,background:"#FAFCFF",boxSizing:"border-box"}}
                  onKeyDown={e=>e.key==="Enter"&&pinInput.length>=4&&(setAndPersistPin(pinInput),setVaultUnlocked(true),setPinInput(""))}/>
              </div>
              {setupError&&<div style={{background:C.redBg,color:C.red,padding:"8px 12px",borderRadius:6,fontSize:12,marginBottom:12,fontWeight:600}}>{setupError}</div>}
              <Btn onClick={()=>{
                if(pinInput.length<4){setSetupError("Password must be at least 4 characters.");return;}
                setAndPersistPin(pinInput);setVaultUnlocked(true);setPinInput("");setSetupError("");
              }} size="lg" style={{width:"100%",justifyContent:"center"}}>Activate Vault →</Btn>
            </Card>
          </div>
        </div>
      );
    }

// ENTER PASSWORD FLOW
    return(
      <div style={{padding:28}}>
        <PageHeader title="Password Vault" subtitle="Secure portal credential manager"/>
        <div style={{maxWidth:400,margin:"0 auto",marginTop:24}}>
          <Card>
            <div style={{textAlign:"center",marginBottom:22}}>
              <div style={{fontSize:40,marginBottom:10}}>🔒</div>
              <h3 style={{margin:0,fontSize:16,fontWeight:800,color:C.navy}}>Vault Locked</h3>
              <p style={{fontSize:13,color:C.muted,margin:"8px 0 0"}}>Enter your vault password to access your stored credentials.</p>
            </div>
            {vaultFlow==="forgot"?(
              <EmailLinkFlow
                title="Reset Vault Password"
                emailDisplay={userEmail?userEmail.replace(/(.{3}).+(@.+)/,"$1***$2"):"comp***@pinnaclevc.in"}
                realEmail={userEmail}
                type="vault"
                onVerified={()=>{
                  setAndPersistPin("");setVaultFlow("newpin");setPinInput("");setPinError("");
                }}
                onCancel={()=>{setVaultFlow("enter");setPinInput("");setPinError("");}}
              />
            ):vaultFlow==="newpin"?(
              <>
                <div style={{background:C.greenBg,border:`1px solid ${C.green}33`,borderRadius:8,padding:"10px 14px",marginBottom:16,fontSize:13,color:C.green,fontWeight:700}}>✓ Link verified! Set your new vault password.</div>
                <div style={{marginBottom:14}}>
                  <label style={{fontSize:11,fontWeight:700,color:C.muted,display:"block",marginBottom:5,letterSpacing:0.4,textTransform:"uppercase"}}>New Vault Password</label>
                  <input type="password" value={pinInput} onChange={e=>setPinInput(e.target.value)} placeholder="Minimum 4 characters" autoFocus
                    style={{width:"100%",padding:"10px 13px",borderRadius:7,border:`1.5px solid ${C.blueBorder}`,fontSize:14,color:C.text,background:"#FAFCFF",boxSizing:"border-box"}}/>
                </div>
                {pinError&&<div style={{background:C.redBg,color:C.red,padding:"8px 12px",borderRadius:6,fontSize:12,marginBottom:12,fontWeight:600}}>{pinError}</div>}
                <div style={{display:"flex",gap:10}}>
                  <Btn variant="outline" onClick={()=>{setVaultFlow("enter");setPinInput("");}}>Cancel</Btn>
                  <Btn onClick={()=>{
                    if(pinInput.length<4){setPinError("Password must be at least 4 characters.");return;}
                    setAndPersistPin(pinInput);setVaultUnlocked(true);setVaultFlow("enter");setPinInput("");setPinError("");
                  }} style={{flex:1,justifyContent:"center"}}>Set New Password</Btn>
                </div>
              </>
            ):(
              <>
                <div style={{marginBottom:14}}>
                  <label style={{fontSize:11,fontWeight:700,color:C.muted,display:"block",marginBottom:5,letterSpacing:0.4,textTransform:"uppercase"}}>Vault Password</label>
                  <input type="password" value={pinInput} onChange={e=>setPinInput(e.target.value)} placeholder="Enter your vault password" autoFocus
                    style={{width:"100%",padding:"10px 13px",borderRadius:7,border:`1.5px solid ${C.blueBorder}`,fontSize:14,color:C.text,background:"#FAFCFF",boxSizing:"border-box"}}
                    onKeyDown={e=>e.key==="Enter"&&(pinInput===vaultPin?(setVaultUnlocked(true),setPinInput("")):setPinError("Incorrect password. Please try again."))}/>
                </div>
                {pinError&&<div style={{background:C.redBg,color:C.red,padding:"8px 12px",borderRadius:6,fontSize:12,marginBottom:12,fontWeight:600}}>{pinError}</div>}
                <Btn onClick={()=>{
                  if(pinInput===vaultPin){setVaultUnlocked(true);setPinInput("");setPinError("");}
                  else setPinError("Incorrect password. Please try again.");
                }} size="lg" style={{width:"100%",justifyContent:"center"}}>Unlock Vault</Btn>
                <button onClick={()=>{setVaultFlow("forgot");setPinInput("");setPinError("");}}
                  style={{width:"100%",marginTop:12,background:"none",border:"none",cursor:"pointer",color:C.blue,fontSize:12,fontWeight:600,textAlign:"center",padding:4}}>
                  Forgot vault password? Reset via email link
                </button>
              </>
            )}
          </Card>
        </div>
      </div>
    );
  }

// ─── VAULT CONTENT (unlocked) ─────────────────────────────────────────────
  const allPortals=[...vaultPortals,...customPortals];

// Shared password field used in both add & edit modals
  const PwField=({value,onChange,visible:show,onToggle,placeholder="Enter portal password"})=>(
    <div style={{marginBottom:18}}>
      <label style={{fontSize:12,fontWeight:800,color:C.navy,display:"block",marginBottom:5,letterSpacing:0.3,textTransform:"uppercase"}}>Password</label>
      <div style={{display:"flex",gap:6}}>
        <input type={show?"text":"password"} value={value} onChange={e=>onChange(e.target.value)} placeholder={placeholder}
          style={{flex:1,padding:"9px 12px",borderRadius:7,border:`1.5px solid ${C.blueBorder}`,fontSize:14,color:C.text,background:"#FAFCFF"}}/>
        <button onClick={onToggle}
          style={{padding:"9px 13px",borderRadius:7,border:`1.5px solid ${C.blueBorder}`,background:"#fff",cursor:"pointer",fontSize:14,color:C.muted}}>
          {show?"🙈":"👁"}</button>
      </div>
    </div>
  );

return(
    <div style={{padding:28}}>
      <PageHeader
        title="Password Vault"
        subtitle="Securely store and access your portal credentials. All passwords encrypted with AES-256."
        action={<div style={{display:"flex",gap:8}}><Btn variant="outline" onClick={()=>{setVaultUnlocked(false);setPinInput("");setVaultFlow("enter");}} size="sm">🔒 Lock</Btn><Btn onClick={()=>{resetAddForm();setShowAddPortal(true);}} size="sm">+ Add Portal</Btn></div>}
      />

{/* Security banner */}
      <div style={{background:`linear-gradient(110deg,${C.navy} 0%,${C.navyMid} 100%)`,borderRadius:10,padding:"14px 20px",marginBottom:20,display:"flex",alignItems:"center",gap:14,boxShadow:`0 4px 20px rgba(7,26,62,0.18)`}}>
        <span style={{fontSize:22,flexShrink:0}}>🔐</span>
        <div style={{flex:1}}>
          <div style={{color:"#fff",fontSize:13,fontWeight:700,marginBottom:1}}>AES-256 Encrypted Vault</div>
          <div style={{color:"rgba(255,255,255,0.45)",fontSize:12}}>Credentials are stored locally in your session only. Never transmitted in plaintext. Re-authentication required to reveal passwords.</div>
        </div>
        <div style={{color:"rgba(255,255,255,0.35)",fontSize:12,textAlign:"right",flexShrink:0}}>
          <div style={{fontWeight:700,color:"rgba(255,255,255,0.7)",fontSize:20,lineHeight:1}}>{allPortals.length}</div>
          <div>portals saved</div>
        </div>
      </div>

{/* Regulatory Portals */}
      <div style={{fontSize:11,fontWeight:800,color:C.muted,letterSpacing:0.6,textTransform:"uppercase",marginBottom:12}}>Regulatory Portals</div>
      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:14,marginBottom:customPortals.length>0?24:16}}>
        {vaultPortals.map(p=><PortalCard key={p.id} p={p}/>)}
      </div>

{/* Custom Portals */}
      {customPortals.length>0&&(<>
        <div style={{fontSize:11,fontWeight:800,color:C.muted,letterSpacing:0.6,textTransform:"uppercase",marginBottom:12}}>My Custom Portals</div>
        <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:14}}>
          {customPortals.map(p=><PortalCard key={p.id} p={p}/>)}
        </div>
      </>)}

{/* ── Add Portal Modal ── */}
      {showAddPortal&&(
        <Modal title="Add Custom Portal" onClose={()=>{setShowAddPortal(false);resetAddForm();}}>
          <p style={{fontSize:13,color:C.muted,margin:"0 0 18px",lineHeight:1.6}}>Save credentials for any portal or website. All entries are stored securely in your vault.</p>
          {addFormErr&&<div style={{background:C.redBg,color:C.red,padding:"9px 13px",borderRadius:7,fontSize:13,marginBottom:14,border:`1px solid ${C.red}22`,fontWeight:600}}>{addFormErr}</div>}
          <Input label="Portal Name" value={newPortal.name} onChange={v=>setNewPortal(p=>({...p,name:v}))} placeholder="e.g. MCA21, NSE Listing, CERSAI" required/>
          <Input label="Portal Link" value={newPortal.url} onChange={v=>setNewPortal(p=>({...p,url:v}))} placeholder="https://www.example.gov.in" required/>
          <Input label="Username / ID" value={newPortal.user} onChange={v=>setNewPortal(p=>({...p,user:v}))} placeholder="Login username or user ID"/>
          <PwField value={newPortal.pw} onChange={v=>setNewPortal(p=>({...p,pw:v}))} visible={newPortalPwVisible} onToggle={()=>setNewPortalPwVisible(v=>!v)}/>
          <div style={{display:"flex",gap:10,justifyContent:"flex-end"}}>
            <Btn variant="outline" onClick={()=>{setShowAddPortal(false);resetAddForm();}}>Cancel</Btn>
            <Btn onClick={handleAddPortal}>Save to Vault</Btn>
          </div>
        </Modal>
      )}

{/* ── Edit Portal Modal ── */}
      {editPortal&&(
        <Modal title={`Edit — ${(editPortal.custom?editPortal:resolvePortal(editPortal)).name}`} onClose={()=>setEditPortal(null)}>
          {!editPortal.custom&&(
            <div style={{background:C.bluePale,border:`1px solid ${C.blueBorder}`,borderRadius:8,padding:"10px 14px",marginBottom:16,fontSize:12,color:C.navy,lineHeight:1.6}}>
              <strong>Regulatory portal:</strong> You can update the display name and link for this session. Use "Reset to default" to restore the original values.
            </div>
          )}
          {editFormErr&&<div style={{background:C.redBg,color:C.red,padding:"9px 13px",borderRadius:7,fontSize:13,marginBottom:14,border:`1px solid ${C.red}22`,fontWeight:600}}>{editFormErr}</div>}
          <Input label="Portal Name" value={editForm.name} onChange={v=>setEditForm(f=>({...f,name:v}))} placeholder="Portal name" required/>
          <Input label="Portal Link" value={editForm.url} onChange={v=>setEditForm(f=>({...f,url:v}))} placeholder="https://www.example.gov.in" required/>
          <Input label="Username / ID" value={editForm.user} onChange={v=>setEditForm(f=>({...f,user:v}))} placeholder="Login username or user ID"/>
          <PwField value={editForm.pw} onChange={v=>setEditForm(f=>({...f,pw:v}))} visible={editPwVisible} onToggle={()=>setEditPwVisible(v=>!v)} placeholder="Leave blank to keep current password"/>
          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginTop:4}}>
            {!editPortal.custom&®Overrides[editPortal.id]?(
              <button onClick={()=>{setRegOverrides(o=>{const n={...o};delete n[editPortal.id];return n;});setEditPortal(null);}}
                style={{fontSize:12,color:C.muted,background:"none",border:"none",cursor:"pointer",textDecoration:"underline",padding:0}}>
                Reset to default
              </button>
            ):<span/>}
            <div style={{display:"flex",gap:10}}>
              <Btn variant="outline" onClick={()=>setEditPortal(null)}>Cancel</Btn>
              <Btn onClick={handleSaveEdit}>Save Changes</Btn>
            </div>
          </div>
        </Modal>
      )}

{/* ── Delete Confirm Modal ── */}
      {deleteConfirm&&(
        <Modal title="Remove Portal" onClose={()=>setDeleteConfirm(null)}>
          <p style={{fontSize:14,color:C.muted,marginBottom:20,lineHeight:1.6}}>Are you sure you want to remove <strong style={{color:C.navy}}>{customPortals.find(p=>p.id===deleteConfirm)?.name}</strong> from your vault? This cannot be undone.</p>
          <div style={{display:"flex",gap:10,justifyContent:"flex-end"}}>
            <Btn variant="outline" onClick={()=>setDeleteConfirm(null)}>Keep It</Btn>
            <Btn variant="danger" onClick={()=>handleDeletePortal(deleteConfirm)}>Yes, Remove</Btn>
          </div>
        </Modal>
      )}

{/* ── Auth / Reveal Modal ── */}
      {authModal&&(
        <Modal title="Verify Identity" onClose={()=>{setAuthModal(null);setAuthPw("");}}>
          <p style={{fontSize:14,color:C.muted,marginBottom:16,lineHeight:1.6}}>Re-enter your AIF NEXT password to reveal this credential.</p>
          <Input type="password" label="AIF NEXT Password" value={authPw} onChange={setAuthPw} placeholder="Enter your platform password"/>
          <div style={{display:"flex",gap:10,justifyContent:"flex-end"}}>
            <Btn variant="outline" onClick={()=>{setAuthModal(null);setAuthPw("");}}>Cancel</Btn>
            <Btn onClick={()=>{if(authPw==="User@1234"||authPw==="Admin@123"){setVisible(v=>({...v,[authModal]:true}));setAuthModal(null);setAuthPw("");}}}>Verify & Show</Btn>
          </div>
        </Modal>
      )}
    </div>
  );
}

// ─── MY COMPLIANCE ────────────────────────────────────────────────────────────
function CustomCompliance({items,setItems}){
  const [showAdd,setShowAdd]=useState(false);
  const [form,setForm]=useState({dueDate:"",explanation:"",link:""});
  const set=k=>v=>setForm(f=>({...f,[k]:v}));
  return(
    <div style={{padding:28}}>
      <PageHeader title="My Compliance Items" subtitle="Private obligations visible only to you" action={<Btn onClick={()=>setShowAdd(true)} size="sm">+ Add Item</Btn>}/>
      <Card style={{padding:0,overflow:"hidden"}}>
        <table style={{width:"100%",borderCollapse:"collapse"}}>
          <thead>
            <tr style={{background:C.surface}}>
              {["DUE DATE","DESCRIPTION","REFERENCE","STATUS","ACTION"].map(h=><th key={h} style={{padding:"11px 14px",textAlign:"left",fontSize:11,fontWeight:700,color:C.muted,letterSpacing:0.5,borderBottom:`1px solid ${C.blueBorder}`}}>{h}</th>)}
            </tr>
          </thead>
          <tbody>
            {items.length===0&&(
              <tr><td colSpan={5} style={{padding:"36px 14px",textAlign:"center",color:C.muted,fontSize:14}}>
                <div style={{fontSize:28,marginBottom:8}}>✏️</div>
                No custom compliance items yet. Add your first one above.
              </td></tr>
            )}
            {items.map((item,idx)=>(
              <tr key={item.id} style={{background:idx%2===0?"#fff":"#FAFCFF",transition:"background 0.1s"}}
                onMouseEnter={e=>e.currentTarget.style.background=C.bluePale}
                onMouseLeave={e=>e.currentTarget.style.background=idx%2===0?"#fff":"#FAFCFF"}>
                <td style={{padding:"12px 14px",fontSize:12,fontWeight:800,color:C.navy,borderBottom:`1px solid ${C.surface}`,whiteSpace:"nowrap"}}>{new Date(item.dueDate).toLocaleDateString("en-IN",{day:"numeric",month:"short",year:"numeric"})}</td>
                <td style={{padding:"12px 14px",fontSize:13,color:C.text,maxWidth:280,borderBottom:`1px solid ${C.surface}`,lineHeight:1.4}}>{item.explanation}</td>
                <td style={{padding:"12px 14px",borderBottom:`1px solid ${C.surface}`}}>{item.link?<a href={item.link} style={{fontSize:11,color:C.blueLight,fontWeight:700}}>View ↗</a>:<span style={{fontSize:12,color:C.muted}}>—</span>}</td>
                <td style={{padding:"12px 14px",borderBottom:`1px solid ${C.surface}`}}><StatusBadge status={item.done?"done":item.status}/></td>
                <td style={{padding:"12px 14px",borderBottom:`1px solid ${C.surface}`}}>
                  <div style={{display:"flex",gap:6}}>
                    {!item.done&&<button onClick={()=>setItems(a=>a.map(x=>x.id===item.id?{...x,done:true}:x))} style={{padding:"4px 10px",borderRadius:6,border:`1.5px solid ${C.green}`,background:"#fff",color:C.green,fontSize:11,fontWeight:700,cursor:"pointer",letterSpacing:0.2}}>Done</button>}
                    <button onClick={()=>setItems(a=>a.filter(x=>x.id!==item.id))} style={{padding:"4px 10px",borderRadius:6,border:`1.5px solid ${C.blueBorder}`,background:"#fff",color:C.muted,fontSize:11,fontWeight:700,cursor:"pointer"}}>Remove</button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
      {showAdd&&<Modal title="Add My Compliance Item" onClose={()=>setShowAdd(false)}>
        <Input label="Due Date" type="date" value={form.dueDate} onChange={set("dueDate")} required/>
        <div style={{marginBottom:14}}>
          <label style={{fontSize:12,fontWeight:800,color:C.navy,display:"block",marginBottom:5,letterSpacing:0.3,textTransform:"uppercase"}}>Description <span style={{color:C.red}}>*</span></label>
          <textarea value={form.explanation} onChange={e=>set("explanation")(e.target.value)} rows={3} placeholder="Describe the compliance obligation…" style={{width:"100%",padding:"9px 12px",borderRadius:7,border:`1.5px solid ${C.blueBorder}`,fontSize:14,color:C.text,resize:"vertical",boxSizing:"border-box",background:"#FAFCFF"}}/>
        </div>
        <Input label="Reference Link (optional)" value={form.link} onChange={set("link")} placeholder="Any supporting URL"/>
        <div style={{display:"flex",gap:10,justifyContent:"flex-end",marginTop:16}}>
          <Btn variant="outline" onClick={()=>setShowAdd(false)}>Cancel</Btn>
          <Btn onClick={()=>{setItems(a=>[...a,{id:Date.now(),...form,status:"upcoming",done:false}]);setShowAdd(false);setForm({dueDate:"",explanation:"",link:""});}}>Save Item</Btn>
        </div>
      </Modal>}
    </div>
  );
}

// ─── ASSISTANCE ───────────────────────────────────────────────────────────────
function Assistance({user,adminEmail}){
  const [form,setForm]=useState({subject:"",message:"",files:[]});
  const [sent,setSent]=useState(false);
  const [sending,setSending]=useState(false);
  const [sendErr,setSendErr]=useState("");
  const set=k=>v=>setForm(f=>({...f,[k]:v}));

if(sent) return(
    <div style={{padding:28}}>
      <div style={{maxWidth:480,margin:"60px auto",textAlign:"center"}}>
        <div style={{width:60,height:60,borderRadius:"50%",background:C.greenBg,border:`2px solid ${C.green}`,display:"flex",alignItems:"center",justifyContent:"center",fontSize:22,margin:"0 auto 16px",color:C.green,fontWeight:700}}>✓</div>
        <h2 style={{color:C.navy,fontWeight:800,letterSpacing:-0.3}}>Query Submitted</h2>
        <p style={{color:C.muted,fontSize:14,lineHeight:1.6}}>
          Your query has been sent to the compliance team at <strong style={{color:C.navy}}>{adminEmail||"admin@aifnext.com"}</strong>. We'll respond within 24 hours.
        </p>
        <Btn onClick={()=>{setSent(false);setForm({subject:"",message:"",files:[]});}} style={{marginTop:16}}>Submit Another</Btn>
      </div>
    </div>
  );
  return(
    <div style={{padding:28}}>
      <PageHeader title="Need Assistance?" subtitle="Send your compliance query to the platform advisor"/>
      <div style={{maxWidth:580}}>
        <Card>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12,marginBottom:18,background:C.surface,borderRadius:8,padding:"12px 14px",border:`1px solid ${C.blueBorder}`}}>
            {[["Fund Name",user.name],["Category",categoryLabel(user.category)],["Email",user.email],["SEBI No.",user.sebi]].map(([k,v])=>(
              <div key={k}>
                <div style={{fontSize:10,color:C.muted,fontWeight:700,letterSpacing:0.4,textTransform:"uppercase",marginBottom:2}}>{k}</div>
                <div style={{fontSize:13,color:C.navy,fontWeight:600}}>{v||"—"}</div>
              </div>
            ))}
          </div>
          {adminEmail&&(
            <div style={{background:C.bluePale,border:`1px solid ${C.blueBorder}`,borderRadius:8,padding:"9px 14px",marginBottom:16,fontSize:12,color:C.navy,display:"flex",alignItems:"center",gap:8}}>
              <span>✉️</span>
              <span>Your query will be sent to: <strong>{adminEmail}</strong></span>
            </div>
          )}
          <Input label="Subject" value={form.subject} onChange={set("subject")} placeholder="Brief description of your query" required/>
          <div style={{marginBottom:14}}>
            <label style={{fontSize:12,fontWeight:700,color:C.navy,display:"block",marginBottom:5,letterSpacing:0.3,textTransform:"uppercase"}}>Message <span style={{color:C.red}}>*</span></label>
            <textarea value={form.message} onChange={e=>set("message")(e.target.value)} rows={5} placeholder="Describe your query in detail…" style={{width:"100%",padding:"9px 12px",borderRadius:7,border:`1.5px solid ${C.blueBorder}`,fontSize:14,color:C.text,resize:"vertical",boxSizing:"border-box",background:"#FAFCFF"}}/>
          </div>

{/* Attachment section with real file picker */}
          <div style={{marginBottom:18}}>
            <label style={{fontSize:12,fontWeight:700,color:C.navy,display:"block",marginBottom:8,letterSpacing:0.3,textTransform:"uppercase"}}>Attachments <span style={{fontSize:11,color:C.muted,fontWeight:400,textTransform:"none"}}>— optional, up to 5 files</span></label>
            {form.files.length>0&&(
              <div style={{marginBottom:10,display:"flex",flexDirection:"column",gap:6}}>
                {form.files.map((f,i)=>(
                  <div key={i} style={{display:"flex",alignItems:"center",gap:10,padding:"7px 12px",background:C.surface,borderRadius:7,border:`1px solid ${C.blueBorder}`}}>
                    <span style={{fontSize:16}}>📄</span>
                    <span style={{flex:1,fontSize:13,color:C.text,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{f.name}</span>
                    <span style={{fontSize:11,color:C.muted,flexShrink:0}}>{(f.size/1024).toFixed(0)} KB</span>
                    <button onClick={()=>removeFile(i)} style={{background:"none",border:"none",color:C.red,cursor:"pointer",fontSize:16,lineHeight:1,flexShrink:0}}>×</button>
                  </div>
                ))}
              </div>
            )}
            {form.files.length<5&&(
              <label style={{display:"inline-flex",alignItems:"center",gap:8,padding:"9px 18px",borderRadius:7,border:`1.5px dashed ${C.blueBorder}`,background:"#FAFCFF",cursor:"pointer",fontSize:13,color:C.blue,fontWeight:600,transition:"all 0.15s",width:"100%",justifyContent:"center",boxSizing:"border-box"}}
                onMouseEnter={e=>{e.currentTarget.style.background=C.bluePale;e.currentTarget.style.borderColor=C.blue;}}
                onMouseLeave={e=>{e.currentTarget.style.background="#FAFCFF";e.currentTarget.style.borderColor=C.blueBorder;}}>
                <span style={{fontSize:18}}>📎</span>
                Click to attach files — documents, PDFs, images
                <input type="file" multiple accept=".pdf,.doc,.docx,.xls,.xlsx,.png,.jpg,.jpeg,.txt,.csv" onChange={handleFileChange} style={{display:"none"}}/>
              </label>
            )}
          </div>

{sendErr&&<div style={{background:C.redBg,color:C.red,padding:"9px 13px",borderRadius:7,fontSize:13,marginBottom:14,border:`1px solid ${C.red}22`,fontWeight:600}}>{sendErr}</div>}
          <Btn onClick={handleSubmit} size="lg" style={{width:"100%",justifyContent:"center",marginTop:4,opacity:sending?0.7:1}}>
            {sending?"Sending…":"Submit Query →"}
          </Btn>
        </Card>
      </div>
    </div>
  );
}

// ─── NOTIFICATIONS ────────────────────────────────────────────────────────────
function Notifications({broadcasts=[],userRole,onDelete}){
  const [emails,setEmails]=useState(["compliance@pinnaclevc.in","cfo@pinnaclevc.in"]);
  const [newEmail,setNewEmail]=useState("");
  return(
    <div style={{padding:28}}>
      <PageHeader title="Notifications" subtitle="Manage your email alerts and view messages from the platform admin"/>
      <div style={{maxWidth:600}}>
        {/* Admin broadcasts */}
        {broadcasts.length>0&&(
          <div style={{marginBottom:24}}>
            <div style={{fontSize:11,fontWeight:800,color:C.muted,letterSpacing:0.6,textTransform:"uppercase",marginBottom:12}}>Messages from Admin</div>
            <div style={{display:"flex",flexDirection:"column",gap:10}}>
              {broadcasts.map((b,i)=>(
                <div key={i} style={{background:"#fff",border:`1px solid ${C.blueBorder}`,borderRadius:10,padding:"14px 18px",borderLeft:`4px solid ${C.blue}`}}>
                  <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start",marginBottom:6}}>
                    <div style={{fontSize:13,fontWeight:700,color:C.navy}}>{b.subject}</div>
                    <div style={{display:"flex",alignItems:"center",gap:10,flexShrink:0,marginLeft:12}}>
                      <div style={{fontSize:11,color:C.muted}}>{b.sentAt}</div>
                      {userRole==="admin"&&onDelete&&(
                        <button onClick={()=>onDelete(i)} title="Delete notification"
                          style={{background:"none",border:`1px solid ${C.red}33`,borderRadius:5,color:C.red,cursor:"pointer",fontSize:11,fontWeight:700,padding:"2px 8px",lineHeight:1.5}}>Delete</button>
                      )}
                    </div>
                  </div>
                  <div style={{fontSize:13,color:C.text,lineHeight:1.6}}>{b.message}</div>
                </div>
              ))}
            </div>
          </div>
        )}
        {broadcasts.length===0&&(
          <div style={{background:"#fff",border:`1px dashed ${C.blueBorder}`,borderRadius:10,padding:"20px 18px",marginBottom:24,textAlign:"center",color:C.muted,fontSize:13}}>
            <div style={{fontSize:24,marginBottom:8}}>🔔</div>
            No messages from the admin yet.
          </div>
        )}

{/* Email management */}
        <div style={{fontSize:11,fontWeight:800,color:C.muted,letterSpacing:0.6,textTransform:"uppercase",marginBottom:12}}>Notification Emails</div>
        <Card>
          <p style={{fontSize:13,color:C.muted,margin:"0 0 16px",lineHeight:1.6}}>All listed addresses receive weekly (30-day) and daily (7-day) reminders. Up to 5 additional emails allowed.</p>
          {emails.map((e,i)=>(
            <div key={e} style={{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"11px 14px",border:`1px solid ${C.blueBorder}`,borderRadius:8,marginBottom:7,background:i===0?C.surface:"#fff",borderLeft:i===0?`3px solid ${C.blue}`:"1px solid "+C.blueBorder}}>
              <div style={{display:"flex",alignItems:"center",gap:10}}>
                <span style={{fontSize:16}}>✉️</span>
                <span style={{fontSize:14,color:C.text,fontWeight:i===0?700:400}}>{e}</span>
                {i===0&&<span style={{fontSize:10,background:C.blue,color:"#fff",padding:"2px 8px",borderRadius:10,fontWeight:700,letterSpacing:0.3}}>PRIMARY</span>}
              </div>
              {i!==0&&<button onClick={()=>setEmails(a=>a.filter(x=>x!==e))} style={{background:"none",border:"none",color:C.red,cursor:"pointer",fontSize:18,lineHeight:1,padding:"0 4px"}}>×</button>}
            </div>
          ))}
          {emails.length<6&&(
            <div style={{display:"flex",gap:10,marginTop:14}}>
              <input value={newEmail} onChange={e=>setNewEmail(e.target.value)} placeholder="Add email address…" style={{flex:1,padding:"9px 12px",borderRadius:7,border:`1.5px solid ${C.blueBorder}`,fontSize:14,color:C.text,background:"#FAFCFF"}}
                onKeyDown={e=>e.key==="Enter"&&newEmail&&!emails.includes(newEmail)&&(setEmails(a=>[...a,newEmail]),setNewEmail(""))}/>
              <Btn onClick={()=>{if(newEmail&&!emails.includes(newEmail)){setEmails(a=>[...a,newEmail]);setNewEmail("");}}}>Add</Btn>
            </div>
          )}
          <div style={{marginTop:18,padding:14,background:C.bluePale,borderRadius:8,fontSize:13,color:C.navy,border:`1px solid ${C.blueBorder}`}}>
            <strong>Reminder schedule:</strong> Items due in >7 days → weekly email Monday. Items due ≤7 days → daily morning email. Once marked Done, reminders stop immediately.
          </div>
        </Card>
      </div>
    </div>
  );
}

// ─── ADMIN EMAIL SETTINGS ─────────────────────────────────────────────────────
// Saves Zoho SMTP config to localStorage "aif_smtp"
// Backend server.js reads these and sends via nodemailer
function SmtpSettings(){
  const defaultConfig={
    zohoHost:     "smtp.zoho.in",
    zohoPort:     "587",
    zohoUser:     "",
    zohoPw:       "",
    zohoFrom:     "contact@aifnext.com",
    zohoFromName: "AIF NEXT Platform",
    adminEmail:   "contact@aifnext.com",
  };
  const load=()=>{try{const s=localStorage.getItem("aif_smtp");return s?{...defaultConfig,...JSON.parse(s)}:defaultConfig;}catch{return defaultConfig;}};
  const [form,setForm]=useState(load);
  const [saved,setSaved]=useState(false);
  const [testing,setTesting]=useState(false);
  const [testResult,setTestResult]=useState(null);
  const set=k=>v=>setForm(f=>({...f,[k]:v}));

const handleSave=()=>{
    try{localStorage.setItem("aif_smtp",JSON.stringify(form));}catch(e){}
    window._smtpConfig=form;
    setSaved(true);
    setTimeout(()=>setSaved(false),3000);
  };

return(
    <div style={{padding:28}}>
      <PageHeader title="Email Settings" subtitle="Configure Zoho SMTP for password resets, notifications and assistance queries"/>
      <div style={{maxWidth:540}}>
        <Card style={{marginBottom:18}}>
          <div style={{fontSize:13,fontWeight:700,color:C.navy,marginBottom:14,textTransform:"uppercase",letterSpacing:0.4}}>🔷 Zoho SMTP Configuration</div>
          <div style={{display:"grid",gridTemplateColumns:"2fr 1fr",gap:14}}>
            <Input label="SMTP Host" value={form.zohoHost} onChange={set("zohoHost")} placeholder="smtp.zoho.in"/>
            <Input label="Port" value={form.zohoPort} onChange={set("zohoPort")} placeholder="587"/>
          </div>
          <Input label="Zoho Email (Login / Username)" value={form.zohoUser} onChange={set("zohoUser")} placeholder="contact@aifnext.com"/>
          <Input label="App Password" type="password" value={form.zohoPw} onChange={set("zohoPw")} placeholder="Your Zoho app-specific password"/>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:14}}>
            <Input label="From Email" value={form.zohoFrom} onChange={set("zohoFrom")} placeholder="contact@aifnext.com"/>
            <Input label="From Name" value={form.zohoFromName} onChange={set("zohoFromName")} placeholder="AIF NEXT Platform"/>
          </div>
          <Input label="Admin Email (receives Need Assistance queries)" value={form.adminEmail} onChange={set("adminEmail")} placeholder="contact@aifnext.com"/>
          <div style={{background:C.bluePale,borderRadius:8,padding:"10px 14px",fontSize:12,color:C.blue,border:`1px solid ${C.blueBorder}`,marginTop:4,lineHeight:1.6}}>
            💡 To get your Zoho App Password: <strong>Zoho Mail → Settings → Security → App Passwords → Generate New</strong>
          </div>
        </Card>

{testResult&&(
          <div style={{background:testResult.startsWith("✓")?C.greenBg:C.redBg,
            color:testResult.startsWith("✓")?C.green:C.red,
            padding:"10px 14px",borderRadius:8,fontSize:13,marginBottom:14,
            border:`1px solid ${testResult.startsWith("✓")?C.green:C.red}33`,fontWeight:600}}>
            {testResult}
          </div>
        )}
        {saved&&(
          <div style={{background:C.greenBg,color:C.green,padding:"10px 14px",borderRadius:8,fontSize:13,marginBottom:14,fontWeight:700,border:`1px solid ${C.green}33`,display:"flex",alignItems:"center",gap:8}}>
            ✓ Settings saved successfully!
          </div>
        )}
        <div style={{display:"flex",gap:10}}>
          <Btn variant="outline" onClick={handleTest} style={{opacity:testing?0.6:1}}>
            {testing?"Sending…":"Send Test Email"}
          </Btn>
          <Btn onClick={handleSave}>Save Settings</Btn>
        </div>
      </div>
    </div>
  );
}

// ─── ADMIN CHANGE PASSWORD ────────────────────────────────────────────────────
// ─── ADMIN CHANGE PASSWORD & EMAIL ───────────────────────────────────────────
function AdminChangePassword({adminLoginEmail,onEmailChange}){
  const [tab,setTab]=useState("password"); // "password" | "email"

// Password tab state
  const [form,setForm]=useState({current:"",newPw:"",confirm:""});
  const [showCurrent,setShowCurrent]=useState(false);
  const [showNew,setShowNew]=useState(false);
  const [showConfirm,setShowConfirm]=useState(false);
  const [pwErr,setPwErr]=useState("");
  const [pwSuccess,setPwSuccess]=useState(false);

// Email tab state
  const [emailDraft,setEmailDraft]=useState(adminLoginEmail);
  const [emailErr,setEmailErr]=useState("");
  const [emailSuccess,setEmailSuccess]=useState(false);

const strength=p=>{let s=0;if(p.length>=8)s++;if(/[A-Z]/.test(p))s++;if(/[0-9]/.test(p))s++;if(/[^A-Za-z0-9]/.test(p))s++;return s;};
  const str=strength(form.newPw);
  const strColors=["",C.red,"#D4820A","#D4820A",C.green];
  const strLabels=["","Weak","Fair","Good","Strong"];

const handleSaveEmail=()=>{
    if(!emailDraft.trim()||!emailDraft.includes("@")){setEmailErr("Please enter a valid email address.");return;}
    onEmailChange(emailDraft.trim());
    setEmailErr("");setEmailSuccess(true);
    setTimeout(()=>setEmailSuccess(false),4000);
  };

const PwRow=({label,value,onChange,show,onToggle,placeholder})=>(
    <div style={{marginBottom:14}}>
      <label style={{fontSize:12,fontWeight:700,color:C.navy,display:"block",marginBottom:5,letterSpacing:0.3,textTransform:"uppercase"}}>{label}</label>
      <div style={{display:"flex",gap:6}}>
        <input type={show?"text":"password"} value={value} onChange={e=>onChange(e.target.value)} placeholder={placeholder}
          style={{flex:1,padding:"9px 12px",borderRadius:7,border:`1.5px solid ${C.blueBorder}`,fontSize:14,color:C.text,background:"#FAFCFF"}}/>
        <button onClick={onToggle} style={{padding:"9px 13px",borderRadius:7,border:`1.5px solid ${C.blueBorder}`,background:"#fff",cursor:"pointer",fontSize:14,color:C.muted}}>
          {show?"🙈":"👁"}
        </button>
      </div>
    </div>
  );

return(
    <div style={{padding:28}}>
      <PageHeader title="Account Settings" subtitle="Update your admin login credentials — visible only to you"/>
      <div style={{maxWidth:480}}>
        {/* Tab switcher */}
        <div style={{display:"flex",gap:0,marginBottom:20,border:`1px solid ${C.blueBorder}`,borderRadius:9,overflow:"hidden",background:"#fff"}}>
          {[{key:"password",label:"🔑 Change Password"},{key:"email",label:"✉️ Change Email"}].map(t=>(
            <button key={t.key} onClick={()=>setTab(t.key)}
              style={{flex:1,padding:"11px 16px",fontSize:13,fontWeight:tab===t.key?700:500,border:"none",cursor:"pointer",background:tab===t.key?C.navy:"#fff",color:tab===t.key?"#fff":C.muted,transition:"all 0.15s",letterSpacing:0.1}}>
              {t.label}
            </button>
          ))}
        </div>

{/* Password tab */}
        {tab==="password"&&(
          <Card>
            <div style={{background:C.bluePale,border:`1px solid ${C.blueBorder}`,borderRadius:8,padding:"10px 14px",marginBottom:18,fontSize:12,color:C.navy,lineHeight:1.6}}>
              🔒 Password changes take effect immediately on your next login.
            </div>
            {pwErr&&<div style={{background:C.redBg,color:C.red,padding:"9px 13px",borderRadius:7,fontSize:13,marginBottom:14,border:`1px solid ${C.red}22`,fontWeight:600}}>{pwErr}</div>}
            {pwSuccess&&<div style={{background:C.greenBg,color:C.green,padding:"9px 13px",borderRadius:7,fontSize:13,marginBottom:14,border:`1px solid ${C.green}22`,fontWeight:700}}>✓ Password changed successfully!</div>}
            <PwRow label="Current Password" value={form.current} onChange={v=>setForm(f=>({...f,current:v}))} show={showCurrent} onToggle={()=>setShowCurrent(v=>!v)} placeholder="Enter your current password"/>
            <PwRow label="New Password" value={form.newPw} onChange={v=>setForm(f=>({...f,newPw:v}))} show={showNew} onToggle={()=>setShowNew(v=>!v)} placeholder="Min 8 chars, uppercase, number, symbol"/>
            {form.newPw&&(
              <div style={{marginBottom:14,marginTop:-6}}>
                <div style={{display:"flex",gap:3,marginBottom:5}}>
                  {[1,2,3,4].map(i=><div key={i} style={{flex:1,height:3,borderRadius:3,background:i<=str?strColors[str]:C.blueBorder,transition:"background 0.2s"}}/>)}
                </div>
                <span style={{fontSize:11,color:strColors[str],fontWeight:700,letterSpacing:0.3,textTransform:"uppercase"}}>{strLabels[str]} password</span>
              </div>
            )}
            <PwRow label="Confirm New Password" value={form.confirm} onChange={v=>setForm(f=>({...f,confirm:v}))} show={showConfirm} onToggle={()=>setShowConfirm(v=>!v)} placeholder="Re-enter your new password"/>
            <Btn onClick={handleSavePw} size="lg" style={{width:"100%",justifyContent:"center",marginTop:8}}>Update Password</Btn>
          </Card>
        )}

{/* Email tab */}
        {tab==="email"&&(
          <Card>
            <div style={{background:C.bluePale,border:`1px solid ${C.blueBorder}`,borderRadius:8,padding:"10px 14px",marginBottom:18,fontSize:12,color:C.navy,lineHeight:1.6}}>
              ✉️ This is the email used to log in to your admin account.
            </div>
            <div style={{marginBottom:14}}>
              <label style={{fontSize:12,fontWeight:700,color:C.navy,display:"block",marginBottom:5,letterSpacing:0.3,textTransform:"uppercase"}}>Current Admin Email</label>
              <div style={{padding:"9px 14px",background:C.surface,borderRadius:7,border:`1px solid ${C.blueBorder}`,fontSize:14,color:C.navy,fontWeight:600}}>{adminLoginEmail}</div>
            </div>
            <div style={{marginBottom:16}}>
              <label style={{fontSize:12,fontWeight:700,color:C.navy,display:"block",marginBottom:5,letterSpacing:0.3,textTransform:"uppercase"}}>New Admin Email</label>
              <input value={emailDraft} onChange={e=>setEmailDraft(e.target.value)} placeholder="Enter new admin email"
                style={{width:"100%",padding:"9px 12px",borderRadius:7,border:`1.5px solid ${C.blueBorder}`,fontSize:14,color:C.text,background:"#FAFCFF",boxSizing:"border-box"}}/>
            </div>
            {emailErr&&<div style={{background:C.redBg,color:C.red,padding:"9px 13px",borderRadius:7,fontSize:13,marginBottom:14,border:`1px solid ${C.red}22`,fontWeight:600}}>{emailErr}</div>}
            {emailSuccess&&<div style={{background:C.greenBg,color:C.green,padding:"9px 13px",borderRadius:7,fontSize:13,marginBottom:14,border:`1px solid ${C.green}22`,fontWeight:700}}>✓ Admin email updated to <strong>{adminLoginEmail}</strong>!</div>}
            <Btn onClick={handleSaveEmail} size="lg" style={{width:"100%",justifyContent:"center",marginTop:8}}>Update Email</Btn>
          </Card>
        )}
      </div>
    </div>
  );
}

// ─── ADMIN CONTACT EMAIL ──────────────────────────────────────────────────────
function AdminContactEmail({adminEmail,onEmailChange}){
  const [draft,setDraft]=useState(adminEmail);
  const [saved,setSaved]=useState(false);
  const [err,setErr]=useState("");

const handleSave=()=>{
    if(!draft.trim()||!draft.includes("@")){setErr("Please enter a valid email address.");return;}
    onEmailChange(draft.trim());
    setSaved(true);
    setErr("");
    setTimeout(()=>setSaved(false),3000);
  };

return(
    <div style={{padding:28}}>
      <PageHeader title="Contact Email" subtitle="Set the email address where users' assistance queries are delivered"/>
      <div style={{maxWidth:520}}>
        <Card>
          <div style={{background:C.bluePale,border:`1px solid ${C.blueBorder}`,borderRadius:8,padding:"12px 14px",marginBottom:18,fontSize:13,color:C.navy,lineHeight:1.6}}>
            <strong>How this works:</strong> When a user submits a query via "Need Assistance", the message is delivered to this email address. Users are also shown this address so they know who they're contacting.
          </div>
          <div style={{marginBottom:8}}>
            <label style={{fontSize:12,fontWeight:700,color:C.navy,display:"block",marginBottom:5,letterSpacing:0.3,textTransform:"uppercase"}}>Current Contact Email</label>
            <div style={{padding:"9px 14px",background:C.surface,borderRadius:7,border:`1px solid ${C.blueBorder}`,fontSize:14,color:C.navy,fontWeight:600}}>{adminEmail}</div>
          </div>
          <div style={{marginBottom:16,marginTop:16}}>
            <label style={{fontSize:12,fontWeight:700,color:C.navy,display:"block",marginBottom:5,letterSpacing:0.3,textTransform:"uppercase"}}>Update Contact Email</label>
            <input value={draft} onChange={e=>setDraft(e.target.value)} placeholder="e.g. compliance@yourfirm.in"
              style={{width:"100%",padding:"9px 12px",borderRadius:7,border:`1.5px solid ${C.blueBorder}`,fontSize:14,color:C.text,background:"#FAFCFF",boxSizing:"border-box"}}/>
          </div>
          {err&&<div style={{background:C.redBg,color:C.red,padding:"9px 13px",borderRadius:7,fontSize:13,marginBottom:14,border:`1px solid ${C.red}22`,fontWeight:600}}>{err}</div>}
          {saved&&<div style={{background:C.greenBg,color:C.green,padding:"9px 13px",borderRadius:7,fontSize:13,marginBottom:14,border:`1px solid ${C.green}22`,fontWeight:700}}>✓ Contact email updated to <strong>{adminEmail}</strong>!</div>}
          <Btn onClick={handleSave}>Save Email</Btn>
        </Card>
      </div>
    </div>
  );
}

// ─── ADMIN BROADCAST NOTIFICATION ────────────────────────────────────────────
function BroadcastNotification({broadcasts=[],onSend,onDelete}){
  const allRegisteredEmails=[
    ...mockUsers.flatMap(u=>[u.email]),
    "cfo@pinnaclevc.in",
    "cfo@bluridge.in",
  ];
  const [subject,setSubject]=useState("");
  const [message,setMessage]=useState("");
  const [selectedEmails,setSelectedEmails]=useState(allRegisteredEmails);
  const [sent,setSent]=useState(false);
  const [err,setErr]=useState("");

const toggleEmail=e=>{
    setSelectedEmails(a=>a.includes(e)?a.filter(x=>x!==e):[...a,e]);
  };

if(sent) return(
    <div style={{padding:28}}>
      <div style={{maxWidth:480,margin:"40px auto",textAlign:"center"}}>
        <div style={{width:60,height:60,borderRadius:"50%",background:C.greenBg,border:`2px solid ${C.green}`,display:"flex",alignItems:"center",justifyContent:"center",fontSize:22,margin:"0 auto 16px",color:C.green,fontWeight:700}}>✓</div>
        <h2 style={{color:C.navy,fontWeight:800,letterSpacing:-0.3}}>Notification Sent</h2>
        <p style={{color:C.muted,fontSize:14,lineHeight:1.6}}>
          Your broadcast was sent to <strong style={{color:C.navy}}>{selectedEmails.length} email address{selectedEmails.length!==1?"es":""}</strong>.
        </p>
        <Btn onClick={()=>{setSent(false);setSubject("");setMessage("");setSelectedEmails(allRegisteredEmails);}} style={{marginTop:16}}>Send Another</Btn>
      </div>
      {broadcasts.length>0&&<SentBroadcastsList broadcasts={broadcasts} onDelete={onDelete}/>}
    </div>
  );

return(
    <div style={{padding:28}}>
      <PageHeader title="Broadcast Notification" subtitle="Send a message to all registered user email addresses"/>
      <div style={{maxWidth:640}}>
        <div style={{display:"grid",gridTemplateColumns:"1fr 1.4fr",gap:16,marginBottom:24}}>
          {/* Recipients panel */}
          <Card>
            <h3 style={{fontSize:11,fontWeight:800,color:C.muted,margin:"0 0 14px",letterSpacing:0.5,textTransform:"uppercase",borderBottom:`1px solid ${C.blueBorder}`,paddingBottom:10}}>
              Recipients ({selectedEmails.length}/{allRegisteredEmails.length})
            </h3>
            <div style={{display:"flex",gap:8,marginBottom:12}}>
              <button onClick={()=>setSelectedEmails([...allRegisteredEmails])} style={{fontSize:11,fontWeight:700,color:C.blue,background:"none",border:`1px solid ${C.blueBorder}`,borderRadius:6,padding:"4px 10px",cursor:"pointer"}}>Select All</button>
              <button onClick={()=>setSelectedEmails([])} style={{fontSize:11,fontWeight:700,color:C.muted,background:"none",border:`1px solid ${C.blueBorder}`,borderRadius:6,padding:"4px 10px",cursor:"pointer"}}>Clear</button>
            </div>
            <div style={{display:"flex",flexDirection:"column",gap:6}}>
              {allRegisteredEmails.map(e=>(
                <label key={e} style={{display:"flex",alignItems:"center",gap:9,padding:"8px 10px",borderRadius:7,border:`1px solid ${selectedEmails.includes(e)?C.blue:C.blueBorder}`,background:selectedEmails.includes(e)?C.bluePale:"#fff",cursor:"pointer",transition:"all 0.12s"}}>
                  <input type="checkbox" checked={selectedEmails.includes(e)} onChange={()=>toggleEmail(e)} style={{accentColor:C.blue,width:14,height:14,flexShrink:0}}/>
                  <span style={{fontSize:12,color:C.text,wordBreak:"break-all"}}>{e}</span>
                </label>
              ))}
            </div>
          </Card>

{/* Compose panel */}
          <Card>
            <h3 style={{fontSize:11,fontWeight:800,color:C.muted,margin:"0 0 14px",letterSpacing:0.5,textTransform:"uppercase",borderBottom:`1px solid ${C.blueBorder}`,paddingBottom:10}}>Compose</h3>
            <Input label="Subject" value={subject} onChange={setSubject} placeholder="e.g. Important compliance deadline reminder" required/>
            <div style={{marginBottom:14}}>
              <label style={{fontSize:12,fontWeight:700,color:C.navy,display:"block",marginBottom:5,letterSpacing:0.3,textTransform:"uppercase"}}>Message <span style={{color:C.red}}>*</span></label>
              <textarea value={message} onChange={e=>setMessage(e.target.value)} rows={7} placeholder="Write your notification message here…" style={{width:"100%",padding:"9px 12px",borderRadius:7,border:`1.5px solid ${C.blueBorder}`,fontSize:14,color:C.text,resize:"vertical",boxSizing:"border-box",background:"#FAFCFF"}}/>
            </div>
            {err&&<div style={{background:C.redBg,color:C.red,padding:"9px 13px",borderRadius:7,fontSize:13,marginBottom:14,border:`1px solid ${C.red}22`,fontWeight:600}}>{err}</div>}
            <div style={{background:C.surface,borderRadius:7,padding:"10px 13px",marginBottom:14,fontSize:12,color:C.muted}}>
              Will be sent to: <strong style={{color:C.navy}}>{selectedEmails.length} recipient{selectedEmails.length!==1?"s":""}</strong>
            </div>
            <Btn onClick={handleSend} size="lg" style={{width:"100%",justifyContent:"center"}}>📣 Send Broadcast</Btn>
          </Card>
        </div>
        {/* Previously sent notifications */}
        {broadcasts.length>0&&<SentBroadcastsList broadcasts={broadcasts} onDelete={onDelete}/>}
      </div>
    </div>
  );
}

// ─── SEBI CIRCULARS ───────────────────────────────────────────────────────────
const mockCirculars=[
  {id:1,link:"https://www.sebi.gov.in/legal/circulars/jan-2025/guidelines-for-aif-valuation-2025_90123.html",analysis:"SEBI mandates independent valuation of unlisted securities for all AIF categories. Valuers must be registered with IBBI. Effective from 1 April 2025.",category:"Valuation",date:"15 Jan 2025"},
  {id:2,link:"https://www.sebi.gov.in/legal/circulars/mar-2025/esg-reporting-framework-aif_90234.html",analysis:"Category I and II AIFs must disclose ESG metrics in annual reports including carbon footprint, board diversity, and governance scores. Template provided in Annexure A.",category:"ESG",date:"3 Mar 2025"},
  {id:3,link:"https://www.sebi.gov.in/legal/circulars/apr-2025/aif-leverage-limits_90345.html",analysis:"Category III AIFs face revised leverage limits: 2x NAV for long-only strategies and 1x for derivative-heavy strategies. Quarterly reporting of leverage positions is mandatory.",category:"Risk Management",date:"10 Apr 2025"},
  {id:4,link:"https://www.sebi.gov.in/legal/circulars/may-2025/kyc-norms-aif-investors_90456.html",analysis:"Enhanced KYC norms for investors in AIFs. Re-KYC mandatory for investors not verified in last 2 years. CERSAI linkage required for all entities.",category:"KYC / AML",date:"22 May 2025"},
  {id:5,link:"https://www.sebi.gov.in/legal/circulars/jun-2025/aif-disclosure-ppn_90567.html",analysis:"Private Placement Notice (PPN) must include detailed risk factors, exit mechanism, and illustrative returns. Format standardized across all fund categories.",category:"Disclosure",date:"5 Jun 2025"},
];

const categoryColors={"Valuation":"#6B4FBB","ESG":"#167040","Risk Management":"#B02020","KYC / AML":"#B07000","Disclosure":"#1249AA"};

return(
    <div style={{padding:28}}>
      <PageHeader
        title="SEBI Circulars & Regulations"
        subtitle={`${circulars.length} regulatory circulars — latest SEBI guidance for Alternative Investment Funds`}
        action={isAdmin&&<Btn onClick={openAdd} size="sm">+ Add Circular</Btn>}
      />
      <div style={{display:"flex",flexDirection:"column",gap:14}}>
        {circulars.map((c,idx)=>(
          <Card key={c.id} style={{padding:0,overflow:"hidden"}}>
            <div style={{display:"flex",alignItems:"stretch"}}>
              {/* Left accent bar */}
              <div style={{width:4,background:categoryColors[c.category]||C.blue,flexShrink:0}}/>
              <div style={{flex:1,padding:"16px 20px"}}>
                <div style={{display:"flex",alignItems:"flex-start",justifyContent:"space-between",gap:12,marginBottom:10}}>
                  <div style={{flex:1,minWidth:0}}>
                    <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:6,flexWrap:"wrap"}}>
                      <span style={{fontSize:10,fontWeight:800,padding:"3px 10px",borderRadius:20,background:(categoryColors[c.category]||C.blue)+"18",color:categoryColors[c.category]||C.blue,border:`1px solid ${(categoryColors[c.category]||C.blue)}33`,letterSpacing:0.4,textTransform:"uppercase",whiteSpace:"nowrap"}}>{c.category}</span>
                      <span style={{fontSize:11,color:C.muted,fontWeight:500}}>{c.date}</span>
                    </div>
                    {/* Link */}
                    <div style={{marginBottom:8}}>
                      <span style={{fontSize:10,fontWeight:700,color:C.muted,letterSpacing:0.4,textTransform:"uppercase",display:"block",marginBottom:3}}>Circular Link</span>
                      <a href={c.link} target="_blank" rel="noreferrer" style={{fontSize:12,color:C.blueLight,fontWeight:600,textDecoration:"none",wordBreak:"break-all",display:"inline-flex",alignItems:"center",gap:4}}>
                        {c.link.length>72?c.link.slice(0,72)+"…":c.link} <span style={{fontSize:10}}>↗</span>
                      </a>
                    </div>
                    {/* Analysis */}
                    <div>
                      <span style={{fontSize:10,fontWeight:700,color:C.muted,letterSpacing:0.4,textTransform:"uppercase",display:"block",marginBottom:3}}>Analysis</span>
                      <p style={{margin:0,fontSize:13,color:C.text,lineHeight:1.7}}>{c.analysis}</p>
                    </div>
                  </div>
                  {isAdmin&&(
                    <div style={{display:"flex",gap:6,flexShrink:0}}>
                      <button onClick={()=>openEdit(c)} style={{padding:"4px 10px",borderRadius:6,border:`1px solid ${C.blueBorder}`,background:"#fff",color:C.blue,fontSize:11,fontWeight:700,cursor:"pointer"}}>✏️ Edit</button>
                      <button onClick={()=>setDeleteConfirm(c)} style={{padding:"4px 10px",borderRadius:6,border:`1px solid ${C.red}22`,background:C.redBg,color:C.red,fontSize:11,fontWeight:700,cursor:"pointer"}}>Delete</button>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </Card>
        ))}
        {circulars.length===0&&(
          <Card>
            <div style={{textAlign:"center",padding:"36px 14px",color:C.muted}}>
              <div style={{fontSize:32,marginBottom:8}}>📋</div>
              <div style={{fontSize:14}}>No circulars added yet. {isAdmin?"Click '+ Add Circular' to get started.":""}</div>
            </div>
          </Card>
        )}
      </div>

{/* Add / Edit Modal */}
      {(showAdd||editCircular)&&(
        <Modal title={editCircular?"Edit Circular":"Add SEBI Circular"} onClose={()=>{setShowAdd(false);setEditCircular(null);}}>
          <div style={{marginBottom:12}}>
            <label style={{fontSize:11,fontWeight:700,color:C.muted,display:"block",marginBottom:5,letterSpacing:0.4,textTransform:"uppercase"}}>Circular Link <span style={{color:C.red}}>*</span></label>
            <input value={form.link} onChange={e=>set("link")(e.target.value)} placeholder="https://www.sebi.gov.in/legal/circulars/…"
              style={{width:"100%",padding:"9px 12px",borderRadius:7,border:`1.5px solid ${C.blueBorder}`,fontSize:13,color:C.text,background:"#FAFCFF",boxSizing:"border-box"}}/>
          </div>
          <div style={{marginBottom:12}}>
            <label style={{fontSize:11,fontWeight:700,color:C.muted,display:"block",marginBottom:5,letterSpacing:0.4,textTransform:"uppercase"}}>Category <span style={{color:C.red}}>*</span></label>
            <input value={form.category} onChange={e=>set("category")(e.target.value)} placeholder="e.g. Valuation, ESG, Risk Management, KYC / AML, Disclosure"
              style={{width:"100%",padding:"9px 12px",borderRadius:7,border:`1.5px solid ${C.blueBorder}`,fontSize:13,color:C.text,background:"#FAFCFF",boxSizing:"border-box"}}/>
          </div>
          <div style={{marginBottom:12}}>
            <label style={{fontSize:11,fontWeight:700,color:C.muted,display:"block",marginBottom:5,letterSpacing:0.4,textTransform:"uppercase"}}>Date</label>
            <input value={form.date} onChange={e=>set("date")(e.target.value)} placeholder="e.g. 15 Jan 2025"
              style={{width:"100%",padding:"9px 12px",borderRadius:7,border:`1.5px solid ${C.blueBorder}`,fontSize:13,color:C.text,background:"#FAFCFF",boxSizing:"border-box"}}/>
          </div>
          <div style={{marginBottom:18}}>
            <label style={{fontSize:11,fontWeight:700,color:C.muted,display:"block",marginBottom:5,letterSpacing:0.4,textTransform:"uppercase"}}>Analysis / Summary <span style={{color:C.red}}>*</span></label>
            <textarea value={form.analysis} onChange={e=>set("analysis")(e.target.value)} rows={4}
              placeholder="Plain-language analysis of what this circular requires…"
              style={{width:"100%",padding:"9px 12px",borderRadius:7,border:`1.5px solid ${C.blueBorder}`,fontSize:13,color:C.text,resize:"vertical",boxSizing:"border-box",background:"#FAFCFF"}}/>
          </div>
          <div style={{display:"flex",gap:10,justifyContent:"flex-end"}}>
            <Btn variant="outline" onClick={()=>{setShowAdd(false);setEditCircular(null);}}>Cancel</Btn>
            <Btn onClick={handleSave}>{editCircular?"Save Changes":"Add Circular"}</Btn>
          </div>
        </Modal>
      )}

{/* Delete Confirm */}
      {deleteConfirm&&(
        <Modal title="Delete Circular" onClose={()=>setDeleteConfirm(null)}>
          <div style={{background:C.redBg,border:`1px solid ${C.red}33`,borderRadius:8,padding:"12px 14px",marginBottom:18,fontSize:13,color:C.text}}>
            Are you sure you want to delete the <strong>{deleteConfirm.category}</strong> circular? This cannot be undone.
          </div>
          <div style={{display:"flex",gap:10,justifyContent:"flex-end"}}>
            <Btn variant="outline" onClick={()=>setDeleteConfirm(null)}>Cancel</Btn>
            <Btn variant="danger" onClick={()=>{setCirculars(a=>a.filter(x=>x.id!==deleteConfirm.id));setDeleteConfirm(null);}}>Delete</Btn>
          </div>
        </Modal>
      )}
    </div>
  );
}

// ─── MANAGE USERS ─────────────────────────────────────────────────────────────
function ManageUsers({users,setUsers}){
  const [deleteConfirm,setDeleteConfirm]=useState(null);
  const [editUser,setEditUser]=useState(null);
  const [editForm,setEditForm]=useState({});
  const [showPw,setShowPw]=useState(false);
  const [showVaultPw,setShowVaultPw]=useState(false);
  const [editSuccess,setEditSuccess]=useState(false);

const openEdit=u=>{
    setEditUser(u);
    setEditForm({name:u.name,email:u.email,phone:u.phone,sebi:u.sebi,category:u.category,password:u.password||"User@1234",vaultPin:u.vaultPin||""});
    setShowPw(false);setShowVaultPw(false);setEditSuccess(false);
  };

const handleSaveEdit=()=>{
    setUsers(a=>a.map(x=>x.id===editUser.id?{...x,...editForm}:x));
    setEditSuccess(true);
    setTimeout(()=>{setEditUser(null);setEditSuccess(false);},1200);
  };

const handleDelete=id=>{
    setUsers(a=>a.filter(x=>x.id!==id));
    setDeleteConfirm(null);
  };

const FieldRow=({label,value,onChange,type="text",placeholder=""})=>(
    <div style={{marginBottom:12}}>
      <label style={{fontSize:11,fontWeight:700,color:C.muted,display:"block",marginBottom:4,letterSpacing:0.4,textTransform:"uppercase"}}>{label}</label>
      <input type={type} value={value} onChange={e=>onChange(e.target.value)} placeholder={placeholder}
        style={{width:"100%",padding:"8px 11px",borderRadius:7,border:`1.5px solid ${C.blueBorder}`,fontSize:13,color:C.text,background:"#FAFCFF",boxSizing:"border-box"}}/>
    </div>
  );

return(
    <div style={{padding:28}}>
      <PageHeader title="Manage Users" subtitle={`${users.length} registered Alternative Investment Fund${users.length!==1?"s":""}`}/>
      <Card style={{padding:0,overflow:"hidden"}}>
        <table style={{width:"100%",borderCollapse:"collapse"}}>
          <thead>
            <tr style={{background:C.surface}}>
              {["FUND NAME","SEBI REG. NO.","CATEGORY","EMAIL","PHONE","STATUS","ACTIONS"].map(h=><th key={h} style={{padding:"10px 14px",textAlign:"left",fontSize:10,fontWeight:800,color:C.muted,borderBottom:`1px solid ${C.blueBorder}`,whiteSpace:"nowrap",letterSpacing:0.6}}>{h}</th>)}
            </tr>
          </thead>
          <tbody>
            {users.length===0&&(
              <tr><td colSpan={7} style={{padding:"36px 14px",textAlign:"center",color:C.muted,fontSize:14}}>
                <div style={{fontSize:28,marginBottom:8}}>👥</div>No registered funds yet.
              </td></tr>
            )}
            {users.map((u,idx)=>(
              <tr key={u.id} style={{background:idx%2===0?"#fff":"#FAFCFF",transition:"background 0.1s"}}
                onMouseEnter={e=>e.currentTarget.style.background=C.bluePale}
                onMouseLeave={e=>e.currentTarget.style.background=idx%2===0?"#fff":"#FAFCFF"}>
                <td style={{padding:"12px 14px",fontSize:13,fontWeight:700,color:C.navy,borderBottom:`1px solid ${C.surface}`}}>{u.name}</td>
                <td style={{padding:"12px 14px",fontSize:11,fontFamily:"monospace",color:C.muted,borderBottom:`1px solid ${C.surface}`,letterSpacing:0.3}}>{u.sebi}</td>
                <td style={{padding:"12px 14px",borderBottom:`1px solid ${C.surface}`}}><span style={{fontSize:10,background:C.bluePale,color:C.blue,padding:"3px 9px",borderRadius:8,fontWeight:800,letterSpacing:0.3}}>{categoryLabel(u.category)}</span></td>
                <td style={{padding:"12px 14px",fontSize:12,color:C.text,borderBottom:`1px solid ${C.surface}`}}>{u.email}</td>
                <td style={{padding:"12px 14px",fontSize:12,color:C.text,borderBottom:`1px solid ${C.surface}`}}>{u.phone}</td>
                <td style={{padding:"12px 14px",borderBottom:`1px solid ${C.surface}`}}>
                  <span style={{fontSize:10,fontWeight:800,padding:"3px 9px",borderRadius:20,background:u.active?C.greenBg:"#F0F0F5",color:u.active?C.green:C.muted,letterSpacing:0.4,textTransform:"uppercase"}}>{u.active?"Active":"Inactive"}</span>
                </td>
                <td style={{padding:"12px 14px",borderBottom:`1px solid ${C.surface}`}}>
                  <div style={{display:"flex",gap:6,flexWrap:"wrap"}}>
                    <button onClick={()=>openEdit(u)} style={{padding:"4px 11px",borderRadius:6,border:`1.5px solid ${C.blueBorder}`,background:"#fff",color:C.blue,fontSize:11,fontWeight:700,cursor:"pointer",letterSpacing:0.2,whiteSpace:"nowrap"}}>✏️ Edit</button>
                    <button onClick={()=>setUsers(a=>a.map(x=>x.id===u.id?{...x,active:!x.active}:x))} style={{padding:"4px 11px",borderRadius:6,border:`1.5px solid ${u.active?C.blueBorder:C.green}`,background:"#fff",color:u.active?C.muted:C.green,fontSize:11,fontWeight:700,cursor:"pointer",letterSpacing:0.2,whiteSpace:"nowrap"}}>
                      {u.active?"Deactivate":"Activate"}
                    </button>
                    <button onClick={()=>setDeleteConfirm(u)} style={{padding:"4px 11px",borderRadius:6,border:`1.5px solid ${C.red}22`,background:C.redBg,color:C.red,fontSize:11,fontWeight:700,cursor:"pointer",letterSpacing:0.2,whiteSpace:"nowrap"}}>Delete</button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>

{/* Edit User Modal */}
      {editUser&&(
        <Modal title={`Edit — ${editUser.name}`} onClose={()=>setEditUser(null)}>
          {editSuccess&&<div style={{background:C.greenBg,color:C.green,padding:"9px 13px",borderRadius:7,fontSize:13,marginBottom:14,fontWeight:700,border:`1px solid ${C.green}22`}}>✓ Changes saved successfully!</div>}
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:"0 14px"}}>
            <FieldRow label="Fund Name" value={editForm.name} onChange={v=>setEditForm(f=>({...f,name:v}))}/>
            <FieldRow label="SEBI Reg. No." value={editForm.sebi} onChange={v=>setEditForm(f=>({...f,sebi:v}))}/>
            <FieldRow label="Email" value={editForm.email} onChange={v=>setEditForm(f=>({...f,email:v}))} type="email"/>
            <FieldRow label="Phone" value={editForm.phone} onChange={v=>setEditForm(f=>({...f,phone:v}))} type="tel"/>
          </div>
          <div style={{marginBottom:12}}>
            <label style={{fontSize:11,fontWeight:700,color:C.muted,display:"block",marginBottom:4,letterSpacing:0.4,textTransform:"uppercase"}}>Category</label>
            <select value={editForm.category} onChange={e=>setEditForm(f=>({...f,category:parseInt(e.target.value)}))}
              style={{width:"100%",padding:"8px 11px",borderRadius:7,border:`1.5px solid ${C.blueBorder}`,fontSize:13,color:C.text,background:"#FAFCFF"}}>
              <option value={1}>Category I</option>
              <option value={2}>Category II</option>
              <option value={3}>Category III</option>
            </select>
          </div>
          {/* Login Password */}
          <div style={{marginBottom:12}}>
            <label style={{fontSize:11,fontWeight:700,color:C.muted,display:"block",marginBottom:4,letterSpacing:0.4,textTransform:"uppercase"}}>Login Password</label>
            <div style={{display:"flex",gap:6}}>
              <input type={showPw?"text":"password"} value={editForm.password} onChange={e=>setEditForm(f=>({...f,password:e.target.value}))}
                style={{flex:1,padding:"8px 11px",borderRadius:7,border:`1.5px solid ${C.blueBorder}`,fontSize:13,color:C.text,background:"#FAFCFF"}}/>
              <button onClick={()=>setShowPw(v=>!v)} style={{padding:"8px 12px",borderRadius:7,border:`1.5px solid ${C.blueBorder}`,background:"#fff",cursor:"pointer",fontSize:13,color:C.muted}}>{showPw?"🙈":"👁"}</button>
            </div>
          </div>
          {/* Vault Access PIN */}
          <div style={{marginBottom:16,background:C.bluePale,padding:"12px 14px",borderRadius:8,border:`1px solid ${C.blueBorder}`}}>
            <label style={{fontSize:11,fontWeight:700,color:C.navy,display:"block",marginBottom:6,letterSpacing:0.4,textTransform:"uppercase"}}>🔐 Vault Access PIN (if set)</label>
            <div style={{display:"flex",gap:6}}>
              <input type={showVaultPw?"text":"password"} value={editForm.vaultPin} onChange={e=>setEditForm(f=>({...f,vaultPin:e.target.value}))} placeholder="User's vault unlock password"
                style={{flex:1,padding:"8px 11px",borderRadius:7,border:`1.5px solid ${C.blueBorder}`,fontSize:13,color:C.text,background:"#fff"}}/>
              <button onClick={()=>setShowVaultPw(v=>!v)} style={{padding:"8px 12px",borderRadius:7,border:`1.5px solid ${C.blueBorder}`,background:"#fff",cursor:"pointer",fontSize:13,color:C.muted}}>{showVaultPw?"🙈":"👁"}</button>
            </div>
            <div style={{fontSize:11,color:C.muted,marginTop:6}}>Vault PIN is set by the user. You can view or reset it here.</div>
          </div>
          <div style={{display:"flex",gap:10,justifyContent:"flex-end"}}>
            <Btn variant="outline" onClick={()=>setEditUser(null)}>Cancel</Btn>
            <Btn onClick={handleSaveEdit}>Save Changes</Btn>
          </div>
        </Modal>
      )}

{/* Delete Confirm Modal */}
      {deleteConfirm&&(
        <Modal title="Delete Account" onClose={()=>setDeleteConfirm(null)}>
          <div style={{background:C.redBg,border:`1px solid ${C.red}33`,borderRadius:8,padding:"12px 14px",marginBottom:18}}>
            <div style={{fontSize:13,fontWeight:700,color:C.red,marginBottom:4}}>⚠️ This action cannot be undone</div>
            <div style={{fontSize:13,color:C.text,lineHeight:1.6}}>You are about to permanently delete the account for <strong>{deleteConfirm.name}</strong>.</div>
          </div>
          <div style={{background:C.surface,borderRadius:8,padding:"10px 14px",marginBottom:18,fontSize:12,color:C.muted}}>
            <div><strong style={{color:C.navy}}>SEBI Reg:</strong> {deleteConfirm.sebi}</div>
            <div><strong style={{color:C.navy}}>Email:</strong> {deleteConfirm.email}</div>
            <div><strong style={{color:C.navy}}>Category:</strong> {categoryLabel(deleteConfirm.category)}</div>
          </div>
          <div style={{display:"flex",gap:10,justifyContent:"flex-end"}}>
            <Btn variant="outline" onClick={()=>setDeleteConfirm(null)}>Cancel</Btn>
            <Btn variant="danger" onClick={()=>handleDelete(deleteConfirm.id)}>Yes, Delete Account</Btn>
          </div>
        </Modal>
      )}
    </div>
  );
}

// ─── USER SETTINGS ───────────────────────────────────────────────────────────
function UserSettings({user,onUpdate}){
  const [tab,setTab]=useState("profile"); // "profile" | "password" | "vault"

// Profile tab
  const [profileForm,setProfileForm]=useState({
    name:user.name||"",
    email:user.email||"",
    phone:user.phone||"",
    sebi:user.sebi||"",
  });
  const [profileErr,setProfileErr]=useState("");
  const [profileSuccess,setProfileSuccess]=useState(false);

// Password tab — OTP verified
  const [pwOtpVerified,setPwOtpVerified]=useState(false);
  const [pwForm,setPwForm]=useState({newPw:"",confirm:""});
  const [showNew,setShowNew]=useState(false);
  const [showConfirm,setShowConfirm]=useState(false);
  const [pwErr,setPwErr]=useState("");
  const [pwSuccess,setPwSuccess]=useState(false);

// Vault password tab — OTP verified
  const [vaultOtpVerified,setVaultOtpVerified]=useState(false);
  const [vaultPwForm,setVaultPwForm]=useState({newPw:"",show:false});
  const [vaultPwErr,setVaultPwErr]=useState("");
  const [vaultPwSuccess,setVaultPwSuccess]=useState(false);
  const hasVaultPin=!!(user.vaultPin);

const strength=p=>{let s=0;if(p.length>=8)s++;if(/[A-Z]/.test(p))s++;if(/[0-9]/.test(p))s++;if(/[^A-Za-z0-9]/.test(p))s++;return s;};
  const str=strength(pwForm.newPw);
  const strColors=["",C.red,"#D4820A","#D4820A",C.green];
  const strLabels=["","Weak","Fair","Good","Strong"];

const PwField=({label,value,onChange,show,onToggle,placeholder})=>(
    <div style={{marginBottom:14}}>
      <label style={{fontSize:12,fontWeight:700,color:C.navy,display:"block",marginBottom:5,letterSpacing:0.3,textTransform:"uppercase"}}>{label}</label>
      <div style={{display:"flex",gap:6}}>
        <input type={show?"text":"password"} value={value} onChange={e=>onChange(e.target.value)} placeholder={placeholder}
          style={{flex:1,padding:"9px 12px",borderRadius:7,border:`1.5px solid ${C.blueBorder}`,fontSize:14,color:C.text,background:"#FAFCFF"}}/>
        <button onClick={onToggle} style={{padding:"9px 13px",borderRadius:7,border:`1.5px solid ${C.blueBorder}`,background:"#fff",cursor:"pointer",fontSize:14,color:C.muted}}>{show?"🙈":"👁"}</button>
      </div>
    </div>
  );

return(
    <div style={{padding:28}}>
      <PageHeader title="Account Settings" subtitle="Manage your profile, contact details and security"/>
      <div style={{maxWidth:520}}>
        {/* Tab switcher */}
        <div style={{display:"flex",gap:0,marginBottom:22,border:`1px solid ${C.blueBorder}`,borderRadius:9,overflow:"hidden",background:"#fff"}}>
          {[{key:"profile",label:"👤 Profile"},{key:"password",label:"🔑 Login Password"},{key:"vault",label:"🔐 Vault Password"}].map(t=>(
            <button key={t.key} onClick={()=>setTab(t.key)}
              style={{flex:1,padding:"11px 10px",fontSize:12,fontWeight:tab===t.key?700:500,border:"none",cursor:"pointer",background:tab===t.key?C.navy:"#fff",color:tab===t.key?"#fff":C.muted,transition:"all 0.15s",letterSpacing:0.1}}>
              {t.label}
            </button>
          ))}
        </div>

{/* Profile Tab */}
        {tab==="profile"&&(
          <Card>
            {/* Read-only info banner */}
            <div style={{background:C.surface,borderRadius:8,padding:"10px 14px",marginBottom:18,display:"flex",gap:14,alignItems:"center",border:`1px solid ${C.blueBorder}`}}>
              <div style={{width:40,height:40,borderRadius:10,background:C.bluePale,border:`1px solid ${C.blueBorder}`,display:"flex",alignItems:"center",justifyContent:"center",fontSize:16,fontWeight:800,color:C.blue,flexShrink:0}}>{user.name?.slice(0,2).toUpperCase()}</div>
              <div>
                <div style={{fontSize:13,fontWeight:700,color:C.navy}}>{user.name}</div>
                <div style={{fontSize:11,color:C.muted}}>{categoryLabel(user.category)} · SEBI: {user.sebi}</div>
              </div>
            </div>

{/* Category locked notice */}
            <div style={{background:"#FFF8E6",border:`1px solid ${C.amber}33`,borderRadius:7,padding:"8px 13px",marginBottom:16,fontSize:12,color:C.text,display:"flex",alignItems:"center",gap:8}}>
              <span>🔒</span>
              <span><strong>AIF Category ({categoryLabel(user.category)})</strong> and <strong>SEBI Reg. No.</strong> are locked and cannot be changed after registration.</span>
            </div>

{profileErr&&<div style={{background:C.redBg,color:C.red,padding:"9px 13px",borderRadius:7,fontSize:13,marginBottom:14,border:`1px solid ${C.red}22`,fontWeight:600}}>{profileErr}</div>}
            {profileSuccess&&<div style={{background:C.greenBg,color:C.green,padding:"9px 13px",borderRadius:7,fontSize:13,marginBottom:14,border:`1px solid ${C.green}22`,fontWeight:700}}>✓ Profile updated successfully!</div>}

<Input label="Fund / Entity Name" value={profileForm.name} onChange={v=>setProfileForm(f=>({...f,name:v}))} placeholder="Your registered fund name" required/>
            <Input label="Email Address" type="email" value={profileForm.email} onChange={v=>setProfileForm(f=>({...f,email:v}))} placeholder="your@email.com" required/>
            <Input label="Phone Number" value={profileForm.phone} onChange={v=>setProfileForm(f=>({...f,phone:v}))} placeholder="10-digit mobile number" required/>

{/* Read-only fields */}
            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:14,marginBottom:14}}>
              <div>
                <label style={{fontSize:12,fontWeight:700,color:C.muted,display:"block",marginBottom:5,letterSpacing:0.3,textTransform:"uppercase"}}>AIF Category</label>
                <div style={{padding:"9px 12px",background:C.surface,borderRadius:7,border:`1px solid ${C.blueBorder}`,fontSize:14,color:C.muted,fontWeight:600}}>{categoryLabel(user.category)}</div>
              </div>
              <div>
                <label style={{fontSize:12,fontWeight:700,color:C.muted,display:"block",marginBottom:5,letterSpacing:0.3,textTransform:"uppercase"}}>SEBI Reg. No.</label>
                <div style={{padding:"9px 12px",background:C.surface,borderRadius:7,border:`1px solid ${C.blueBorder}`,fontSize:13,color:C.muted,fontFamily:"monospace",letterSpacing:0.5}}>{user.sebi}</div>
              </div>
            </div>

<Btn onClick={handleSaveProfile} size="lg" style={{width:"100%",justifyContent:"center"}}>Save Profile</Btn>
          </Card>
        )}

{/* Password Tab */}
        {tab==="password"&&(
          <Card>
            {pwSuccess&&<div style={{background:C.greenBg,color:C.green,padding:"9px 13px",borderRadius:7,fontSize:13,marginBottom:14,border:`1px solid ${C.green}22`,fontWeight:700}}>✓ Password changed successfully!</div>}
            {!pwOtpVerified?(
              <>
                <div style={{background:C.bluePale,border:`1px solid ${C.blueBorder}`,borderRadius:8,padding:"12px 14px",marginBottom:18,fontSize:13,color:C.navy,lineHeight:1.7}}>
                  🔒 <strong>Email verification required.</strong><br/>
                  <span style={{fontSize:12,color:C.muted}}>To change your password, we'll send a reset link to your registered email address.</span>
                </div>
                <EmailLinkFlow
                  title="Verify to Change Password"
                  emailDisplay={user.email?user.email.replace(/(.{3}).+(@.+)/,"$1***$2"):"comp***@fund.in"}
                  realEmail={user.email||""}
                  userName={user.name||""}
                  type="login"
                  onVerified={()=>setPwOtpVerified(true)}
                  onCancel={()=>setTab("profile")}
                />
              </>
            ):(
              <>
                <div style={{background:C.greenBg,border:`1px solid ${C.green}33`,borderRadius:8,padding:"10px 14px",marginBottom:18,fontSize:13,color:C.green,fontWeight:700}}>✓ Link verified — set your new password below.</div>
                {pwErr&&<div style={{background:C.redBg,color:C.red,padding:"9px 13px",borderRadius:7,fontSize:13,marginBottom:14,border:`1px solid ${C.red}22`,fontWeight:600}}>{pwErr}</div>}
                <PwField label="New Password" value={pwForm.newPw} onChange={v=>setPwForm(f=>({...f,newPw:v}))} show={showNew} onToggle={()=>setShowNew(v=>!v)} placeholder="Min 8 chars, uppercase, number, symbol"/>
                {pwForm.newPw&&(
                  <div style={{marginBottom:14,marginTop:-6}}>
                    <div style={{display:"flex",gap:3,marginBottom:5}}>
                      {[1,2,3,4].map(i=><div key={i} style={{flex:1,height:3,borderRadius:3,background:i<=str?strColors[str]:C.blueBorder,transition:"background 0.2s"}}/>)}
                    </div>
                    <span style={{fontSize:11,color:strColors[str],fontWeight:700,letterSpacing:0.3,textTransform:"uppercase"}}>{strLabels[str]} password</span>
                  </div>
                )}
                <PwField label="Confirm New Password" value={pwForm.confirm} onChange={v=>setPwForm(f=>({...f,confirm:v}))} show={showConfirm} onToggle={()=>setShowConfirm(v=>!v)} placeholder="Re-enter your new password"/>
                <Btn onClick={handleSavePw} size="lg" style={{width:"100%",justifyContent:"center",marginTop:8}}>Update Password</Btn>
              </>
            )}
          </Card>
        )}
        {/* Vault Password Tab */}
        {tab==="vault"&&(
          <Card>
            {vaultPwSuccess&&<div style={{background:C.greenBg,color:C.green,padding:"9px 13px",borderRadius:7,fontSize:13,marginBottom:14,border:`1px solid ${C.green}22`,fontWeight:700}}>✓ Vault password updated successfully!</div>}

{/* Status banner */}
            <div style={{background:hasVaultPin?C.bluePale:C.surface,border:`1px solid ${C.blueBorder}`,borderRadius:8,padding:"12px 14px",marginBottom:18,display:"flex",alignItems:"center",gap:12}}>
              <span style={{fontSize:22}}>{hasVaultPin?"🔐":"🔓"}</span>
              <div>
                <div style={{fontSize:13,fontWeight:700,color:C.navy,marginBottom:2}}>{hasVaultPin?"Vault Password is Set":"No Vault Password Set"}</div>
                <div style={{fontSize:12,color:C.muted}}>{hasVaultPin?"Your vault is protected. Use a reset link to change your vault password.":"You haven't set up a vault password yet. Visit the Password Vault to create one."}</div>
              </div>
            </div>

{!hasVaultPin?(
              <div style={{textAlign:"center",padding:"12px 0 8px"}}>
                <Btn onClick={()=>{}} variant="outline" style={{opacity:0.5,cursor:"not-allowed"}}>No vault password to change</Btn>
                <p style={{fontSize:12,color:C.muted,marginTop:10}}>First set up your vault password by visiting the <strong>Password Vault</strong> tab.</p>
              </div>
            ):!vaultOtpVerified?(
              <>
                <div style={{background:"#FFF8E6",border:`1px solid ${C.amber}33`,borderRadius:8,padding:"12px 14px",marginBottom:18,fontSize:13,color:C.navy,lineHeight:1.7}}>
                  🔐 <strong>Email verification required.</strong><br/>
                  <span style={{fontSize:12,color:C.muted}}>Changing your vault password requires a reset link sent to your registered email address.</span>
                </div>
                <EmailLinkFlow
                  title="Change Vault Password"
                  emailDisplay={user.email?user.email.replace(/(.{3}).+(@.+)/,"$1***$2"):"comp***@fund.in"}
                  realEmail={user.email||""}
                  userName={user.name||""}
                  type="vault"
                  onVerified={()=>setVaultOtpVerified(true)}
                  onCancel={()=>setTab("profile")}
                />
              </>
            ):(
              <>
                <div style={{background:C.greenBg,border:`1px solid ${C.green}33`,borderRadius:8,padding:"10px 14px",marginBottom:18,fontSize:13,color:C.green,fontWeight:700}}>✓ Link verified — set your new vault password below.</div>
                {vaultPwErr&&<div style={{background:C.redBg,color:C.red,padding:"9px 13px",borderRadius:7,fontSize:13,marginBottom:14,border:`1px solid ${C.red}22`,fontWeight:600}}>{vaultPwErr}</div>}
                <div style={{marginBottom:18}}>
                  <label style={{fontSize:12,fontWeight:700,color:C.navy,display:"block",marginBottom:5,letterSpacing:0.3,textTransform:"uppercase"}}>New Vault Password</label>
                  <div style={{display:"flex",gap:6}}>
                    <input type={vaultPwForm.show?"text":"password"} value={vaultPwForm.newPw} onChange={e=>setVaultPwForm(f=>({...f,newPw:e.target.value}))} placeholder="Minimum 4 characters"
                      style={{flex:1,padding:"9px 12px",borderRadius:7,border:`1.5px solid ${C.blueBorder}`,fontSize:14,color:C.text,background:"#FAFCFF"}}/>
                    <button onClick={()=>setVaultPwForm(f=>({...f,show:!f.show}))} style={{padding:"9px 13px",borderRadius:7,border:`1.5px solid ${C.blueBorder}`,background:"#fff",cursor:"pointer",fontSize:14,color:C.muted}}>{vaultPwForm.show?"🙈":"👁"}</button>
                  </div>
                  <div style={{fontSize:11,color:C.muted,marginTop:5}}>This is separate from your login password. You'll use it every time you open the Password Vault.</div>
                </div>
                <Btn onClick={handleSaveVaultPw} size="lg" style={{width:"100%",justifyContent:"center"}}>Update Vault Password</Btn>
              </>
            )}
          </Card>
        )}
      </div>
    </div>
  );
}
// ─── RESET FROM LINK PAGE ─────────────────────────────────────────────────────
// Shown when user clicks the reset link from their email
function ResetFromLinkPage({email,type,token,users,onComplete}){
  const [newPw,setNewPw]=useState("");
  const [confirm,setConfirm]=useState("");
  const [showNew,setShowNew]=useState(false);
  const [showConfirm,setShowConfirm]=useState(false);
  const [err,setErr]=useState("");
  const [done,setDone]=useState(false);

const strColors=["","#B02020","#B07000","#1670A0","#167040"];
  const strLabels=["","Weak","Fair","Good","Strong"];
  const str=!newPw?0:newPw.length<6?1:newPw.length<8?2:/[A-Z]/.test(newPw)&&/[0-9]/.test(newPw)&&/[^A-Za-z0-9]/.test(newPw)?4:/[A-Z]/.test(newPw)&&/[0-9]/.test(newPw)?3:2;

return(
    <div style={{minHeight:"100vh",background:`linear-gradient(145deg,#071A3E 0%,#0A1F50 40%,#0D2760 70%,#0E3280 100%)`,display:"flex",alignItems:"center",justifyContent:"center",padding:20}}>
      <div style={{width:"100%",maxWidth:420}}>
        <div style={{textAlign:"center",marginBottom:24}}>
          <div style={{display:"inline-block",background:"#fff",borderRadius:14,padding:"12px 22px",boxShadow:"0 4px 16px rgba(7,26,62,0.18)",border:"1.5px solid #E8F0FC"}}><LogoMark size={72}/></div>
        </div>
        <div style={{background:"#fff",borderRadius:16,padding:32,boxShadow:"0 24px 64px rgba(0,0,0,0.28)"}}>
          {done?(
            <div style={{textAlign:"center"}}>
              <div style={{width:56,height:56,borderRadius:"50%",background:"#E8F6EE",border:"2px solid #167040",display:"flex",alignItems:"center",justifyContent:"center",fontSize:24,margin:"0 auto 16px"}}>✓</div>
              <h2 style={{color:"#071A3E",fontWeight:800,margin:"0 0 8px"}}>Password Updated!</h2>
              <p style={{color:"#6B7A9F",fontSize:14,margin:"0 0 24px"}}>Your {type==="vault"?"vault password":"login password"} has been changed successfully.</p>
              <Btn size="lg" style={{width:"100%",justifyContent:"center"}} onClick={()=>{try{window.history.replaceState({},"",window.location.pathname);}catch(e){}window.location.reload();}}>
                Go to Login →
              </Btn>
            </div>
          ):(
            <>
              <h2 style={{fontSize:18,fontWeight:800,color:"#071A3E",marginTop:0,marginBottom:4}}>
                Set New {type==="vault"?"Vault Password":"Password"}
              </h2>
              <p style={{fontSize:13,color:"#6B7A9F",marginBottom:20,marginTop:0}}>
                For account: <strong style={{color:"#071A3E"}}>{email}</strong>
              </p>
              {err&&<div style={{background:"#FEF0F0",color:"#B02020",padding:"9px 13px",borderRadius:7,fontSize:13,marginBottom:14,border:"1px solid #B0202022",fontWeight:600}}>{err}</div>}
              <PwField label={type==="vault"?"New Vault Password":"New Password"} value={newPw} onChange={setNewPw} show={showNew} onToggle={()=>setShowNew(v=>!v)} placeholder="Min 8 chars, uppercase, number"/>
              {newPw&&(
                <div style={{marginBottom:14,marginTop:-6}}>
                  <div style={{display:"flex",gap:3,marginBottom:5}}>
                    {[1,2,3,4].map(i=><div key={i} style={{flex:1,height:3,borderRadius:3,background:i<=str?strColors[str]:"#BDCFEE",transition:"background 0.2s"}}/>)}
                  </div>
                  <span style={{fontSize:11,color:strColors[str],fontWeight:700,letterSpacing:0.3,textTransform:"uppercase"}}>{strLabels[str]} password</span>
                </div>
              )}
              <PwField label="Confirm Password" value={confirm} onChange={setConfirm} show={showConfirm} onToggle={()=>setShowConfirm(v=>!v)} placeholder="Re-enter password"/>
              <Btn onClick={handleSave} size="lg" style={{width:"100%",justifyContent:"center",marginTop:8}}>
                Set New {type==="vault"?"Vault Password":"Password"} →
              </Btn>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

const [view,setView]=useState("dashboard");
  const [calendarFilter,setCalendarFilter]=useState("all");
  const [vaultUnlocked,setVaultUnlocked]=useState(false);

// ── Helper: create a persisted state backed by localStorage ──────────────────
  const usePersisted=(key,init)=>{
    const [val,setRaw]=useState(()=>{try{const s=localStorage.getItem(key);return s!==null?JSON.parse(s):init;}catch{return init;}});
    const set=v=>{const next=typeof v==="function"?v(val):v;setRaw(next);try{localStorage.setItem(key,JSON.stringify(next));}catch{}};
    return [val,set];
  };

// ── Persisted state ───────────────────────────────────────────────────────────
  // Logged-in user object (null = logged out)
  const [user,setUserRaw]=usePersisted("aif_user",null);
  const setUser=v=>{const next=typeof v==="function"?v(user):v;setUserRaw(next);};

// Admin settings
  const [adminEmail,setAdminEmail]=usePersisted("aif_adminEmail","admin@aifnext.com");
  const [adminLoginEmail,setAdminLoginEmail]=usePersisted("aif_adminLoginEmail","admin@aifnext.com");

// All registered users (profiles + passwords + vault pins)
  const [users,setUsers]=usePersisted("aif_users",mockUsers.map(u=>({...u,password:"User@1234",vaultPin:""})));

// Broadcasts — survive re-login, only removed when admin deletes
  const [broadcasts,setBroadcasts]=usePersisted("aif_broadcasts",[]);

// Per-user compliance done status (keyed by email)
  const [allDoneSets,setAllDoneSets]=usePersisted("aif_donesets",{});

// Per-user custom compliance items (keyed by email)
  const defaultCustomItems=[
    {id:101,dueDate:"2026-04-20",explanation:"Board meeting minutes to be filed with SEBI-approved CA",link:"",status:"due-soon",done:false},
    {id:102,dueDate:"2026-05-10",explanation:"LP update call and quarterly investor communication",link:"",status:"upcoming",done:false},
  ];
  const [allCustomItems,setAllCustomItems]=usePersisted("aif_customitems",{});

// Per-user SEBI circulars (admin edits)
  const [circularsData,setCircularsData]=usePersisted("aif_circulars",null);
  // ─────────────────────────────────────────────────────────────────────────────

// Derived per-user state
  const userDoneSet      = user ? allDoneSets[user.email]   || {} : {};
  const setUserDoneSet   = ds  => setAllDoneSets(a=>({...a,[user.email]:ds}));
  const userCustomItems  = user ? (allCustomItems[user.email]??defaultCustomItems) : defaultCustomItems;
  const setUserCustomItems = items => setAllCustomItems(a=>({...a,[user.email]:items}));

const handleLogin=u=>{
    // Always load the latest version of this user from persisted users array
    const found=users.find(x=>x.email===u.email)||u;
    setUser(found);setView("dashboard");setScreen("app");
    setVaultUnlocked(false);
  };
  const handleLogout=()=>{setUser(null);setScreen("login");setVaultUnlocked(false);};

// When any user/admin updates their own profile or password, sync both user session and users array
  const handleUserUpdate=updated=>{
    setUser(updated);
    setUsers(a=>a.map(x=>x.id===updated.id?updated:x));
  };

// When admin updates a user from ManageUsers, also update logged-in session if it's the same person
  const handleUsersChange=updated=>{
    setUsers(updated);
    if(user){
      const refreshed=updated.find(x=>x.email===user.email);
      if(refreshed) setUser(refreshed);
    }
  };

const handleDeleteBroadcast=id=>{
    setBroadcasts(a=>a.filter(b=>b.id!==id));
  };

const goToCalendar=()=>{setCalendarFilter("all");setView("calendar");};

// Restore screen from persisted user on mount
  useState(()=>{if(user)setScreen("app");});

if(screen==="register") return <RegisterPage onBack={()=>setScreen("login")}/>;

// ── Handle reset link from email ─────────────────────────────────────────────
  if(screen==="reset_from_link"&&resetTokenData){
    return <ResetFromLinkPage
      email={resetTokenData.email}
      type={resetTokenData.type}
      token={resetToken}
      users={users}
      onComplete={(updatedUsers)=>{
        setUsers(updatedUsers);
        // Clear URL params and go to login
        try{window.history.replaceState({},"",window.location.pathname);}catch(e){}
        setScreen("login");
      }}
    />;
  }

if(screen==="login"||!user) return <LoginPage onLogin={handleLogin} onGoRegister={()=>setScreen("register")}/>;
  const renderView=()=>{
    if(view==="dashboard") return <Dashboard user={user} setView={setView} setCalendarFilter={setCalendarFilter}/>;
    if(view==="calendar") return <ComplianceCalendar user={user} initialFilter={calendarFilter} doneSet={userDoneSet} setDoneSet={setUserDoneSet}/>;
    if(view==="circulars") return <SEBICirculars user={user}/>;
    if(view==="vault") return <Vault
      initialVaultPin={user.vaultPin||""}
      onVaultPinChange={pin=>handleUserUpdate({...user,vaultPin:pin})}
      vaultUnlocked={vaultUnlocked}
      setVaultUnlocked={setVaultUnlocked}
      userEmail={user.email||""}
    />;
    if(view==="custom") return <CustomCompliance items={userCustomItems} setItems={setUserCustomItems}/>;
    if(view==="assistance") return <Assistance user={user} adminEmail={adminEmail}/>;
    if(view==="notifications") return <Notifications broadcasts={broadcasts} userRole={user?.role} onDelete={handleDeleteBroadcast}/>;
    if(view==="smtp") return <SmtpSettings/>;
    if(view==="users") return <ManageUsers users={users} setUsers={handleUsersChange}/>;
    if(view==="changepassword") return <AdminChangePassword adminLoginEmail={adminLoginEmail} onEmailChange={setAdminLoginEmail}/>;
    if(view==="contactemail") return <AdminContactEmail adminEmail={adminEmail} onEmailChange={setAdminEmail}/>;
    if(view==="broadcast") return <BroadcastNotification broadcasts={broadcasts} onSend={msg=>setBroadcasts(a=>[{...msg,id:Date.now()},...a])} onDelete={handleDeleteBroadcast}/>;
    if(view==="usersettings") return <UserSettings user={user} onUpdate={handleUserUpdate}/>;
    return <Dashboard user={user} setView={setView} setCalendarFilter={setCalendarFilter}/>;
  };
  return <Layout user={user} view={view} setView={setView} onLogout={handleLogout}>{renderView()}</Layout>;
}

AIF NEXT

💬 New Assistance Query

AIF NEXT

🔑 Login Password Reset

AIF NEXT

🔐 Vault Password Reset

{title}

{title}

Password Reset!

Reset Password

Forgot Password

Welcome back

Registration Successful

Create Account

Upcoming Deadlines

Registered Funds

Quick Actions