// Mobile (<1024px) summary bar + bottom sheet. Reuses SummaryColumn + FullNoteOutput.
function MobileSummary({ state, calc, noteText, open, setOpen }) {
  const RD = window.RD;
  const d = RD.computeAll(state, calc);
  const f0 = n => Number.isFinite(n) ? Math.round(n).toLocaleString() : "—";
  const drag = useRefMs({ y0: null, dy: 0 });
  const sheetRef = useRefMs(null);
  useEffectMs(() => {
    if (!open) return;
    const onKey = e => { if (e.key === "Escape") setOpen(false); };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open]);
  function onStart(e) { drag.current.y0 = e.touches ? e.touches[0].clientY : e.clientY; drag.current.dy = 0; }
  function onMove(e) {
    if (drag.current.y0 == null) return;
    const y = e.touches ? e.touches[0].clientY : e.clientY;
    drag.current.dy = Math.max(0, y - drag.current.y0);
    if (sheetRef.current) sheetRef.current.style.transform = `translateY(${drag.current.dy}px)`;
  }
  function onEnd() {
    if (drag.current.y0 == null) return;
    const close = drag.current.dy > 90;
    drag.current.y0 = null;
    if (sheetRef.current) sheetRef.current.style.transform = "";
    if (close) setOpen(false);
  }
  const chev = <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><polyline points="6 15 12 9 18 15"></polyline></svg>;
  return (
    <>
      <button type="button" className="msum-bar" onClick={() => setOpen(true)} aria-expanded={open} aria-controls="msum-sheet" aria-label="Open patient summary">
        <span className="msum-item"><span className="msum-k">Energy</span><span className="msum-v">{f0(d.energyNeeds)}<em>kcal</em></span></span>
        <span className="msum-item"><span className="msum-k">Protein</span><span className="msum-v">{f0(d.proteinG)}<em>g</em></span></span>
        <span className="msum-item"><span className="msum-k">Fluid</span><span className="msum-v">{f0(d.fluid)}<em>mL</em></span></span>
        <span className="msum-chev">{chev}</span>
      </button>
      <div className={"msum-scrim" + (open ? " open" : "")} onClick={() => setOpen(false)}></div>
      <section id="msum-sheet" ref={sheetRef} className={"msum-sheet" + (open ? " open" : "")} role="dialog" aria-modal="true" aria-label="Patient summary and full note" aria-hidden={!open}>
        <div className="msum-handle" onTouchStart={onStart} onTouchMove={onMove} onTouchEnd={onEnd} onMouseDown={onStart} onMouseMove={onMove} onMouseUp={onEnd} onMouseLeave={onEnd}>
          <span className="msum-grip"></span>
          <button type="button" className="msum-close" onClick={() => setOpen(false)} aria-label="Close summary">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"></polyline></svg>
          </button>
        </div>
        <div className="msum-body">
          <SummaryColumn state={state} calc={calc} />
          <div className="msum-note"><FullNoteOutput noteText={noteText} /></div>
        </div>
      </section>
    </>
  );
}
const { useRef: useRefMs, useEffect: useEffectMs } = React;
window.MobileSummary = MobileSummary;