// Banner that mirrors live state.
function Banner({ state, onSeed, onReset, hasData, caseId }) {
  const { computeBMI, bmiStatus, DIAGNOSES } = window.RD;
  // Pulse re-arms every page load (new session) and whenever a new case id starts.
  const [sampleSeen, setSampleSeen] = React.useState(false);
  React.useEffect(() => { setSampleSeen(false); }, [caseId]);
  function seed() {
    setSampleSeen(true);
    onSeed();
  }
  const ageNum = parseFloat(state.age);
  const bmi = computeBMI(state);
  const status = bmi != null ? bmiStatus(bmi, ageNum) : null;

  const initials = (() => {
    if (state.sex && Number.isFinite(ageNum)) return `${ageNum}${state.sex.charAt(0)}`;
    if (state.sex) return state.sex.charAt(0);
    if (Number.isFinite(ageNum)) return `${ageNum}`;
    return null;
  })();

  const dxLabel = state.diagnosis
    ? (state.diagnosis.id === "other" && state.diagnosisOther
        ? state.diagnosisOther
        : state.diagnosis.label.replace(/\s*\(.*?\)\s*/g, "").replace(/ \/.*$/, ""))
    : null;

  return (
    <div className="banner" role="region" aria-label="Patient summary">
      <div className="banner-left">
        <div className={`banner-avatar ${initials ? "populated" : ""}`} aria-hidden="true">
          {initials || (
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8.5" r="3.5"/><path d="M5 20c1.5-3.5 4-5 7-5s5.5 1.5 7 5"/></svg>
          )}
        </div>
        <div className="banner-text">
          {hasData ? (
            <>
              <span className="banner-title">
                {Number.isFinite(ageNum) || state.sex
                  ? `${Number.isFinite(ageNum) ? ageNum + " yo" : "Unknown age"}${state.sex ? " · " + (state.sex === "F" ? "Female" : state.sex === "M" ? "Male" : "Other") : ""}`
                  : "Patient in progress"}
              </span>
              <span className="banner-sub">
                {dxLabel ? dxLabel : "No diagnosis selected"}
                {state.comorbidities.length > 0 && ` · ${state.comorbidities.length} comorbidit${state.comorbidities.length === 1 ? "y" : "ies"}`}
              </span>
            </>
          ) : (
            <>
              <span className="banner-title">New patient</span>
              <span className="banner-sub">No data yet — start typing on the left or in any field below.</span>
            </>
          )}
        </div>
      </div>
      <div className="banner-meta">
        {bmi != null ? (
          <span className="chip-bmi">
            <span className="lbl">BMI</span>
            <span className="val">{bmi.toFixed(1)}</span>
            <span className={`status-chip ${status.cls}`}>{status.label}</span>
          </span>
        ) : (
          <span className="chip-faint">BMI</span>
        )}
        {dxLabel ? (
          <span className="chip-dx" title={dxLabel}>{window.RD.dxShort(state)}</span>
        ) : (
          <span className="chip-faint">primary dx</span>
        )}
        {state.activity ? (
          <span className="chip-meta">
            <span className="lbl">activity</span>
            <span className="val">×{window.RD.ACTIVITY.find(a => a.id === state.activity).mult.toFixed(3)}</span>
          </span>
        ) : null}
        <span className="workspace-actions">
          {!hasData ? (
            <button className={`btn-ghost ${sampleSeen ? "" : "is-nudge"}`} type="button" onClick={seed} data-tip="Populate a fully-loaded sample patient for testing" data-tip-onboard="1">
              <Icon.spark /> Sample patient
            </button>
          ) : (
            <button className="btn-ghost" type="button" onClick={onReset} data-tip="Clear all chart fields and start fresh">
              Clear chart
            </button>
          )}
        </span>
      </div>
    </div>
  );
}

window.Banner = Banner;