/* ============================================================
   AUTH + APP SHELL
   ============================================================ */
(function(){
const {Icon,Btn,Avatar,RoleBadge,Field,Input,Banner}=window;
const {useState}=React;

/* ---------------- Login (real auth) ---------------- */
function Login(){
  const {auth,go,toast}=window.useStore();
  const [email,setEmail]=useState('');
  const [password,setPassword]=useState('');
  const [busy,setBusy]=useState(false);
  const [err,setErr]=useState('');

  async function doSignIn(em,pw){
    if(busy) return; setBusy(true); setErr('');
    const res=await auth.signIn(em,pw);
    setBusy(false);
    if(!res.ok){ setErr(res.error); return; }
    const land=window.GOV.ROLES[res.me.role].land;
    go(land);
    toast({kind:'audit', icon:'shield', title:'Signed in as '+window.GOV.ROLES[res.me.role].label, desc:'Login recorded to the audit trail.'});
  }

  return <div className="login">
    <div className="login__card">
      <div className="login__strip"/>
      <div className="login__bd">
        <div className="login__logo"><img src={window.LOGO} alt="BHF"/></div>
        <h2 style={{textAlign:'center',margin:'0 0 4px',fontSize:22,color:'var(--bhf-ink)'}}>Sign in to BHF Hub</h2>
        <p style={{textAlign:'center',color:'var(--fg-3)',fontSize:13,margin:'0 0 20px'}}>Partner Hospital case portal · invite-only access</p>

        {err && <div style={{marginBottom:14}}><Banner variant="danger" title="Unable to sign in">{err}</Banner></div>}

        <form onSubmit={e=>{e.preventDefault();doSignIn(email,password);}}>
          <Field label="Email"><Input type="email" value={email} onChange={e=>setEmail(e.target.value)} placeholder="you@hospital.org"/></Field>
          <Field label="Password"><Input type="password" value={password} onChange={e=>setPassword(e.target.value)} placeholder="••••••••"/></Field>
          <div style={{display:'flex',justifyContent:'flex-end',marginTop:-6,marginBottom:14}}>
            <a href="#" onClick={e=>{e.preventDefault();toast({title:'Contact BHF',desc:'Password resets are handled by the BHF team for now. Reach out and we’ll reset it.'});}} style={{fontSize:13}}>Forgot password?</a>
          </div>
          <Btn type="submit" variant="primary" disabled={busy||!email||!password} style={{width:'100%',justifyContent:'center'}}>{busy?'Signing in…':'Sign in'}</Btn>
        </form>

        <div className="banner banner-info" style={{margin:'16px 0 0',padding:'10px 12px',fontSize:12.5}}>
          <span className="ico"><Icon name="shield" size={16}/></span>
          <div>Invite-only access. If you're a partner hospital and need an account, contact the BHF team.</div>
        </div>
      </div>
    </div>
  </div>;
}

/* ---------------- App Shell ---------------- */
const TITLES={dashboard:'Dashboard',submit:'Submit New Patient',success:'Request submitted',requests:'Requests',
  detail:'Request detail',queue:'My Queue',partners:'Partners',users:'Users',reports:'Reports',audit:'Audit Log',settings:'Settings'};

function AppShell({title, children}){
  const {state,me,route,go,sel,navOpen,setNavOpen,dispatch,toast,auth}=window.useStore();
  const [notifOpen,setNotifOpen]=useState(false);
  const nav=window.GOV.NAV[me.role];

  // counts
  const myReqs=sel.visibleRequests();
  const counts={
    requests: me.role==='partner'? myReqs.length : state.requests.length,
    queue: state.requests.filter(r=>r.reviewerId===me.id).length,
    needs: myReqs.filter(r=>r.status==='needs_info').length,
  };
  // notifications: needs-info for partner; new submissions / assignments for team
  const notifs = me.role==='partner'
    ? myReqs.filter(r=>r.status==='needs_info').map(r=>({id:r.id,t:r.id+' needs your information',d:r.patient.ref,to:r.id}))
    : state.requests.filter(r=>['submitted'].includes(r.status)||r.reviewerId===me.id&&r.status==='needs_info')
        .slice(0,6).map(r=>({id:r.id,t:r.id+' · '+window.GOV.STATUS[r.status].label,d:sel.hospitalName(r.hospitalId),to:r.id}));

  function navItem(it){
    if(it.sec) return <div key={it.sec} className="sb-sec">{it.sec}</div>;
    const active=route.screen===it.key || (route.screen==='detail'&&['requests','queue'].includes(it.key)&&false);
    let count=null,alert=false;
    if(it.key==='requests'&&counts.requests) count=counts.requests;
    if(it.key==='queue'&&counts.queue) count=counts.queue;
    if(it.key==='requests'&&me.role==='partner'&&counts.needs){count=counts.needs;alert=true;}
    return <div key={it.key} className={'sb-item'+(route.screen===it.key?' on':'')} onClick={()=>go(it.key)}>
      <Icon name={it.icon} size={18}/><span>{it.label}</span>
      {count!=null && <span className={'count'+(alert?' alert':'')}>{count}</span>}
    </div>;
  }

  return <div className={'app'+(navOpen?' nav-open':'')}>
    <div className="sb-backdrop" onClick={()=>setNavOpen(false)}/>
    <aside className="sidebar sb-top">
      <div className="sb-brand">
        <div className="sb-brand__logo"><img src={window.LOGO} alt=""/></div>
        <div className="sb-brand__t">BHF Hub<small>Partner case portal</small></div>
      </div>
      <nav className="sb-nav">{nav.map(navItem)}</nav>
      <div className="sb-user">
        <Avatar name={me.name} size={34}/>
        <div className="sb-user__meta">
          <div className="sb-user__name">{me.name}</div>
          <RoleBadge role={me.role}/>
        </div>
        <span className="sb-user__logout" title="Log out" onClick={()=>{auth.signOut();}}>
          <Icon name="logout" size={17}/>
        </span>
      </div>
    </aside>

    <div className="main">
      <header className="topbar">
        <button className="icon-btn hamburger" onClick={()=>setNavOpen(true)}><Icon name="menu" size={20}/></button>
        <div className="topbar__title">{title}</div>
        <div style={{flex:1}}/>
        {me.role!=='partner' && <div className="topbar__search"><Icon name="search" size={16}/><input placeholder="Search requests, partners…"/></div>}
        <div style={{position:'relative'}}>
          <button className="icon-btn" onClick={()=>setNotifOpen(o=>!o)}>
            <Icon name="bell" size={19}/>{notifs.length>0 && <span className="dot-alert"/>}
          </button>
          {notifOpen && <Notif notifs={notifs} onGo={(id)=>{setNotifOpen(false);go('detail',id);}} onClose={()=>setNotifOpen(false)}/>}
        </div>
        <Avatar name={me.name} size={34}/>
      </header>
      <div className="content">{children}</div>
    </div>
  </div>;
}

function Notif({notifs,onGo,onClose}){
  return <>
    <div style={{position:'fixed',inset:0,zIndex:30}} onClick={onClose}/>
    <div className="card" style={{position:'absolute',right:0,top:46,width:300,zIndex:31,boxShadow:'var(--shadow-lg)',padding:0,overflow:'hidden'}}>
      <div style={{padding:'12px 14px',borderBottom:'1px solid var(--border-default)',fontWeight:600,fontSize:13}}>Notifications</div>
      {notifs.length===0
        ? <div style={{padding:'22px 14px',textAlign:'center',color:'var(--fg-3)',fontSize:13}}>You're all caught up.</div>
        : notifs.map(n=><div key={n.id} onClick={()=>onGo(n.to)} style={{padding:'11px 14px',borderBottom:'1px solid var(--border-default)',cursor:'pointer',display:'flex',gap:10,alignItems:'flex-start'}} className="notif-row">
            <span style={{color:'var(--bhf-orange)',marginTop:1}}><Icon name="activity" size={15}/></span>
            <div><div style={{fontSize:13,fontWeight:600,color:'var(--fg-1)'}}>{n.t}</div><div style={{fontSize:12,color:'var(--fg-3)'}}>{n.d}</div></div>
          </div>)}
    </div>
  </>;
}

window.Login=Login;
window.AppShell=AppShell;
window.SHELL_TITLES=TITLES;
})();