// v1c Epic 1 — persistent summary column.
// Read-only. Reads from state + window.RD.computeAll(state, calc).
// No inputs, no recomputation, no side effects.

function SummaryColumn({ state, calc, children }) {
  const RD = window.RD;
  const derived = RD.computeAll(state, calc);
  const bmi = RD.computeBMI(state);
  const age = parseFloat(state.age);
  const bmiInfo = Number.isFinite(bmi) ? RD.bmiStatus(bmi, age) : null;

  const dash = <span className="sm-dash">—</span>;
  const fmt0 = n => Number.isFinite(n) ? Math.round(n).toLocaleString() : null;
  const fmt1 = n => Number.isFinite(n) ? n.toFixed(1) : null;

  function Row({ label, value, sub }) {
    return (
      <div className="sm-row">
        <span className="sm-k">{label}</span>
        <span className="sm-v">
          {value == null || value === "" ? dash : value}
          {sub && <span className="sm-sub">{sub}</span>}
        </span>
      </div>
    );
  }

  const sexLabel = state.sex === "F" ? "Female" : state.sex === "M" ? "Male" : "";

  return (
    <aside className="summary" aria-label="Patient summary">
      <div className="summary-inner">
        <header className="sm-head">
          <span className="sm-eyebrow">At a glance</span>
          <h2 className="sm-title">Patient summary</h2>
          <p className="sm-note">Live read-only view · mirrors the chart</p>
        </header>

        <section className="sm-group">
          <div className="sm-group-title">Demographics</div>
          <Row label="Age" value={state.age ? `${state.age} y` : null} />
          <Row label="Sex" value={sexLabel} />
        </section>

        <section className="sm-group">
          <div className="sm-group-title">Anthropometrics</div>
          <Row label="Height" value={state.height ? `${state.height} ${state.heightUnit}` : null} />
          <Row label="Weight" value={state.weight ? `${state.weight} ${state.weightUnit}` : null} />
          <div className="sm-row">
            <span className="sm-k">BMI</span>
            <span className="sm-v">
              {Number.isFinite(bmi) ? (
                <>
                  <span className="sm-bmi-num">{bmi.toFixed(1)}</span>
                  {bmiInfo && <span className={`status-chip ${bmiInfo.cls}`}>{bmiInfo.label}</span>}
                </>
              ) : dash}
            </span>
          </div>
        </section>

        <section className="sm-group">
          <div className="sm-group-title">Clinical</div>
          <div className="sm-row">
            <span className="sm-k">Diagnosis</span>
            <span className="sm-v">
              {state.diagnosis ? (
                <>
                  <span>{state.diagnosis.label}</span>
                  {state.diagnosis.tier && <span className={`tier-chip tier-${state.diagnosis.tier}`}>{RD.TIER_LABEL[state.diagnosis.tier]}</span>}
                </>
              ) : dash}
            </span>
          </div>
          <div className="sm-row">
            <span className="sm-k">Comorbidities</span>
            <span className="sm-v">
              {state.comorbidities && state.comorbidities.length
                ? <span className="sm-chips">{state.comorbidities.map(c => <span key={c} className="sm-chip">{c}</span>)}</span>
                : dash}
            </span>
          </div>
          <Row label="Activity" value={(() => {
            const a = RD.ACTIVITY.find(x => x.id === state.activity);
            return a ? a.label : null;
          })()} />
        </section>

        <section className="sm-group sm-results">
          <div className="sm-group-title">Results</div>
          <div className="sm-row big">
            <span className="sm-k">Energy</span>
            <span className="sm-v">
              {derived.energyNeeds != null
                ? <><span className="sm-num">{fmt0(derived.energyNeeds)}</span><span className="sm-unit">kcal/day</span></>
                : dash}
            </span>
          </div>
          {derived.energyPerKg != null && (
            <div className="sm-row sub">
              <span className="sm-k">&nbsp;</span>
              <span className="sm-v"><span className="sm-sub">{fmt1(derived.energyPerKg)} kcal/kg/day</span></span>
            </div>
          )}
          <div className="sm-row big">
            <span className="sm-k">Protein</span>
            <span className="sm-v">
              {derived.proteinG != null
                ? <><span className="sm-num">{fmt0(derived.proteinG)}</span><span className="sm-unit">g/day</span></>
                : dash}
            </span>
          </div>
          {derived.proteinBasis != null && (
            <div className="sm-row sub">
              <span className="sm-k">&nbsp;</span>
              <span className="sm-v"><span className="sm-sub">{derived.proteinBasis.toFixed(2)} g/kg · {derived.proteinBasisLabel} body weight</span></span>
            </div>
          )}
          <div className="sm-row big">
            <span className="sm-k">Fluid</span>
            <span className="sm-v">
              {derived.fluid != null
                ? <><span className="sm-num">{fmt0(derived.fluid)}</span><span className="sm-unit">mL/day</span></>
                : dash}
            </span>
          </div>
        </section>
      </div>
      {children}
    </aside>
  );
}

window.SummaryColumn = SummaryColumn;