/* ============================================================
   ROOT — router, role guards, boot skeleton
   ============================================================ */
window.LOGO='assets/bhf-logomark.png';
const {useState:useStateR,useEffect:useEffectR}=React;

const ALLOWED={
  partner:['dashboard','submit','success','requests','detail'],
  reviewer:['queue','detail'],
  admin:['dashboard','requests','queue','detail','partners','users','reports','audit'],
  founder:['dashboard','requests','detail','partners','users','reports','audit','settings'],
};

function Router(){
  const {me,route,go}=window.useStore();
  const [booting,setBooting]=useStateR(true);
  useEffectR(()=>{ const t=setTimeout(()=>setBooting(false),550); return ()=>clearTimeout(t); },[]);

  if(!me) return <window.Login/>;

  let screen=route.screen;
  if(screen==='dashboard'&&me.role==='reviewer') screen='queue';

  const title = screen==='detail' ? (route.id||'Request')
    : screen==='requests' ? (me.role==='partner'?'My Requests':'All Requests')
    : window.SHELL_TITLES[screen]||'BHF Hub';

  let Body;
  if(!ALLOWED[me.role].includes(screen)) Body=()=><window.PermDenied what="open this page"/>;
  else switch(screen){
    case 'dashboard': Body=(me.role==='partner')?window.PartnerDashboard:window.AdminDashboard; break;
    case 'submit':    Body=window.SubmitPatient; break;
    case 'success':   Body=window.SubmitSuccess; break;
    case 'requests':  Body=()=> <window.MyRequests admin={me.role!=='partner'}/>; break;
    case 'detail':    Body=window.RequestDetail; break;
    case 'queue':     Body=window.ReviewerQueue; break;
    case 'partners':  Body=window.PartnerMgmt; break;
    case 'users':     Body=window.UserMgmt; break;
    case 'reports':   Body=window.Reports; break;
    case 'audit':     Body=window.AuditLog; break;
    case 'settings':  Body=window.Settings; break;
    default: Body=()=><window.PermDenied what="open this page"/>;
  }

  return <window.AppShell title={title}>
    {booting ? <div className="content-in"><div className="row jcb aic" style={{marginBottom:18}}><div className="sk" style={{height:26,width:200}}/><div className="sk" style={{height:38,width:150,borderRadius:10}}/></div>
        <div className="grid" style={{gridTemplateColumns:'repeat(4,1fr)',marginBottom:18}}>{[0,1,2,3].map(i=><div key={i} className="sk" style={{height:96,borderRadius:10}}/>)}</div>
        <window.Skeleton rows={5}/></div>
      : <Body/>}
  </window.AppShell>;
}

function App(){
  return <window.StoreProvider>
    <Router/>
    <window.Toaster/>
  </window.StoreProvider>;
}

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