/* ═══════════════════════════════════════════════════════════
   OpAgent Inside — app shell + routing
   ═══════════════════════════════════════════════════════════ */

function AppBar({ user, onSignOut }){
  return (
    <div className="appbar">
      <div className="appbar-in">
        <div className="brand"><Reticle size={26}/><Wordmark/><span className="bar-inside-div"></span><span className="bar-inside">Inside</span></div>
        <div className="live-badge"><span className="ld"></span>live · <b>Dr. Chrono</b></div>
        <span className="spacer"></span>
        <div className="user"><span className="av">{user.initials}</span>{user.name}</div>
        <button className="signout" onClick={onSignOut}>Sign out</button>
      </div>
    </div>
  );
}

function Tabs({ tab, setTab, adminCount }){
  const items = [
    { id:"physician", name:"Provider" },
    { id:"admin", name:"Admin", badge:adminCount },
    { id:"neurcm", name:"neu-RCM" }
  ];
  return (
    <div className="tabs">
      <div className="tabs-in">
        {items.map(it=>(
          <button key={it.id} className={"tab"+(tab===it.id?" on":"")} onClick={()=>setTab(it.id)}>
            {it.name}{it.badge>0 && <span className="tab-badge">{it.badge}</span>}
          </button>
        ))}
      </div>
    </div>
  );
}

function DataModeBanner({ mode }){
  if(!mode || mode==="live") return null;
  const txt = mode==="partial"
    ? "Live tiles · detail on offline seed (no live encounters / mapping this phase)"
    : "Offline seed — live endpoint unavailable";
  return (
    <div className="datamode-banner" style={{
      display:"flex",alignItems:"center",gap:8,margin:"0 0 14px",padding:"7px 12px",
      borderRadius:8,fontFamily:"var(--fm)",fontSize:11,letterSpacing:".04em",
      background:"rgba(196,151,62,.10)",border:"1px solid rgba(196,151,62,.32)",color:"#7a5a1e"
    }}>
      <span style={{width:7,height:7,borderRadius:"50%",background:"#C4973E",display:"inline-block"}}></span>
      {txt}
    </div>
  );
}

function Dashboard({ onSignOut }){
  const D = window.DEMO;
  const [tab, setTab] = useState("physician");
  const [toast, setToast] = useState({ show:false, msg:"", sub:"" });
  const [ready, setReady] = useState(false);
  const [mode, setMode] = useState({});
  const timer = useRef(null);

  // Pull live /api/* data into window.DEMO/DEMO_PHYS/DEMO_ADMIN before rendering
  // the tabs. Each tab degrades to its offline seed if its endpoint is down.
  useEffect(()=>{
    let on = true;
    (async ()=>{
      let m = {};
      try { m = await window.Adapters.hydrate(); } catch(e){ console.warn("hydrate failed", e); }
      if(on){ setMode(m); setReady(true); }
    })();
    return ()=>{ on = false; };
  },[]);

  // patients the provider has sent to Admin prep (pre-seeded with Carlos)
  const [adminQueue, setAdminQueue] = useState([
    { id:"rivera", time:"09:00", name:"Carlos J. Rivera", payer:"Medicare NY-Downstate 13202",
      procedure:"RFA L3–L5 · 64635 + 50", sentBy:"Dr. Liabaud", sentAt:"9:42a" }
  ]);

  function showToast(msg, sub){
    setToast({ show:true, msg, sub });
    clearTimeout(timer.current);
    timer.current = setTimeout(()=>setToast(t=>({...t, show:false})), 3200);
  }
  function stage(item){
    showToast((item&&item.label) ? item.label : "Staged", "OpAgent stages it — you commit the change in DrChrono");
  }
  function sendToAdmin(pt){
    setAdminQueue(q => q.find(x=>x.id===pt.id) ? q.map(x=>x.id===pt.id?{...x,sentAt:"just now"}:x) : [{...pt, sentAt:"just now"}, ...q]);
    showToast(pt.name+" sent to Admin prep", "AuthCheck · Gap analysis · PaQet queued for the admin team");
  }

  useEffect(()=>{ window.scrollTo({top:0, behavior:"smooth"}); },[tab]);

  return (
    <div className="app">
      <AppBar user={D.practice.user} onSignOut={onSignOut}/>
      <Tabs tab={tab} setTab={setTab} adminCount={adminQueue.length}/>
      <div className="work">
        {!ready ? (
          <div className="login-load" style={{padding:"60px 0"}}>
            <div className="ring"></div>
            <div className="lt">Reading live data from Dr. Chrono…</div>
          </div>
        ) : (
          <>
            <DataModeBanner mode={mode[tab]}/>
            {tab==="physician" && <PhysicianModule onStage={stage} onSendToAdmin={sendToAdmin}/>}
            {tab==="admin" && <AdminModule onStage={stage} queue={adminQueue}/>}
            {tab==="neurcm" && <NeuRcmModule onStage={stage}/>}
          </>
        )}
      </div>
      <Toast {...toast}/>
    </div>
  );
}

function App(){
  const [route, setRoute] = useState("landing"); // landing | login | dashboard
  const [emr, setEmr] = useState(null);

  return (
    <>
      {route==="landing" && <Landing onConnect={(e)=>{ setEmr(e); setRoute("login"); }}/>}
      {route==="login" && <Login emr={emr} onBack={()=>setRoute("landing")} onSignIn={()=>setRoute("dashboard")}/>}
      {route==="dashboard" && <Dashboard onSignOut={()=>{ setRoute("landing"); setEmr(null); }}/>}
      {route!=="login" && <QiWatermark/>}
    </>
  );
}

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