/* ═══════════════════════════════════════════════════════════
   OpAgent Inside — Physician module (point of care)
   ═══════════════════════════════════════════════════════════ */

function ActionRow({ a, onStage }){
  return (
    <div className="arow">
      <div className="a-main">
        <div className="a-top">
          <EngineChip name={a.engine}/>
          {a.type==="em" && <Chip kind="sev-info">E/M documentation</Chip>}
          {a.type==="proc" && <Chip kind="sev-ok">procedure to confirm</Chip>}
        </div>
        <div className="a-play" dangerouslySetInnerHTML={{__html:a.play}}/>
        <div className="a-detail">{a.missing}</div>
        <div className="a-meta">
          <OwnerChip name={a.owner}/>
          <ClockChip when={a.clock}/>
        </div>
      </div>
      <div className="a-side">
        {a.dollar && <Dollar amount={a.dollar} refTag={a.ref}/>}
        <DeepLink onStage={()=>onStage(a)}/>
      </div>
    </div>
  );
}

function Gate({ g }){
  return (
    <div className={"gate"+(g.met?" met":"")}>
      <span className="gi">{g.met?"✓":"!"}</span>
      <span className="gt">
        <b>{g.label}</b> — {g.req} <span className="gtag">· {g.tag}</span>
        <span style={{display:"block",marginTop:4,fontFamily:"var(--fm)",fontSize:10,color:"var(--ink-faint)",letterSpacing:".04em"}}>{g.engine} · documentation gate</span>
      </span>
    </div>
  );
}

function PatientCard({ p, onStage }){
  return (
    <div className="pcard">
      <div className="pcard-head">
        <span className="when">{p.time}</span>
        <div>
          <div className="nm">{p.name}</div>
          <div className="meta">{p.mrn} · {p.age} · {p.visit}</div>
        </div>
        <div className="right">
          <PayerChip name={p.payer}/>
          <OwnerChip name={p.provider}/>
        </div>
      </div>
      <div className="pcard-body">
        {p.actions.map((a,i)=><ActionRow key={i} a={a} onStage={onStage}/>)}
        {p.gates.length>0 && (
          <div style={{marginTop:10, display:"flex", flexDirection:"column", gap:8}}>
            {p.gates.map((g,i)=><Gate key={i} g={g}/>)}
          </div>
        )}
      </div>
    </div>
  );
}

function PhysicianCards({ onStage }){
  const P = window.DEMO.physician;
  const live = !!P.__live;
  const [filled, setFilled] = useState({}); // appointmentId -> { actions, gates }

  // Live: fill cards from already-cached cascades only (status-first; one cascade
  // read per ready row, serialized — never a synchronous hammer on every row).
  useEffect(()=>{
    if(!live || !P.schedule.length) return;
    let on = true;
    (async()=>{
      const rows = P.schedule.map(s=>({ appointmentId:s.appointmentId, patientRef:s.patientRef, row:s }));
      const st = await window.Adapters.syncProviderPrefetch(P.__date, rows);
      if(!on) return;
      const readyRows = P.schedule.filter(s=>st.ready.has(s.appointmentId));
      for(const s of readyRows){
        if(!on) return;
        const c = await window.Adapters.runCascade({ appointmentId:s.appointmentId, patientRef:s.patientRef, row:s });
        if(!on) return;
        if(c && !c.error && !c.sessionExpired){
          setFilled(f=>({...f,[s.appointmentId]:{ actions:window.Adapters.adaptEncounterActions(c), gates:window.Adapters.adaptEncounterGates(c) }}));
        }
      }
    })();
    return ()=>{ on=false; };
  },[live]);

  const cards = P.schedule.map(s=>{
    const f = live ? filled[s.appointmentId] : null;
    return f ? Object.assign({}, s, { actions:f.actions, gates:f.gates }) : s;
  });

  return (
    <div className="screen">
      <div className="tiles">
        {P.tiles.map((t,i)=><Tile key={i} {...t}/>)}
      </div>

      <SHead title="Today's schedule" count={P.schedule.length+" encounters · live from DrChrono"}/>
      {cards.map((p,i)=><PatientCard key={i} p={p} onStage={onStage}/>)}

      <div className="foot-note">
        E/M nudges cite the single missing MDM element from your note — never "bill higher." Procedures are extracted for your confirmation. Figures marked <Ref/> are reference-derived (Medicare PFS), not your contracted rate.
      </div>
    </div>
  );
}

Object.assign(window, { PhysicianCards });