/* ============================================================
   market-sensor-heroes.jsx — 3 State Hero treatments.
   All render the same pulse.json (data.state / .sensors / .meta).
   A · Regime Badge   B · Action Console   C · Alert Banner
   Tone (colour) is set inline as --tone from window.msrTone(state.color).
   ============================================================ */

function MsrFreshness({ data }) {
  const f = data.data_freshness || {};
  const clock = window.msrRunClockET(data.meta);
  return (
    <div className="msr-fresh">
      <span className="fc">Updated <b>{clock}</b></span>
      <span className="fc">prices <b>{window.msrFresh(f.premarket_quotes || f.closes)}</b></span>
      <span className="fc">news <b>{window.msrFresh(f.news)}</b></span>
      <span className="fc">options <b>{window.msrFresh(f.options_quantdata)}</b></span>
    </div>);

}

function MsrChip({ state, meta, lg }) {
  return (
    <span className={`msr-chip ${lg ? 'lg' : ''} ${meta.pulse ? 'msr-pulse-ring' : ''}`} style={{ ['--tone']: window.msrTone(state.color) }}>
      <span className="gly">{meta.glyph}</span>{state.label}
    </span>);

}

function MsrWhyTag({ meta }) {
  if (meta.informational) return <span className="msr-tag-info">Informational</span>;
  if (meta.why) return <span className="msr-tag-info" title={meta.why}>Why? wide-range warning</span>;
  if (meta.override) return <span className="msr-tag-info">Overrides other states</span>;
  return null;
}

function MsrAction({ tone, label, big }) {
  return (
    <div className="msr-action" style={{ ['--tone']: tone }}>
      <span className="at">{label}</span>
    </div>);

}

/* ===== A · REGIME BADGE ===== */
function HeroBadge({ data }) {
  const s = data.state,meta = window.msrStateMeta(s.label),tone = window.msrTone(s.color);
  const z = data.sensors ? data.sensors.composite_z : null;
  return (
    <div className="msr-hero" style={{ ['--tone']: tone }}>
      <div className="msr-heroA-top">
        <MsrChip state={s} meta={meta} lg />
        <MsrWhyTag meta={meta} />
        <div className="msr-heroA-z">
          <div className="zv" style={{ color: tone }}>{window.msrFmtZ(z)}</div>
          <div className="zl">Composite z</div>
        </div>
      </div>
      <p className="msr-heroA-sub">{meta.sub}</p>
      <p className="msr-heroA-msg">{s.one_line_message}</p>
      <MsrAction tone={tone} label={s.action_label} />
      <MsrFreshness data={data} />
    </div>);

}

/* ===== B · ACTION CONSOLE ===== */
function MsrZMeter({ z, thr, tone }) {
  const LO = -3.5,HI = 3.5;
  const pos = (v) => Math.max(2, Math.min(98, (v - LO) / (HI - LO) * 100));
  const thrPos = pos(thr != null ? thr : -1.5);
  const zPos = pos(z != null ? z : 0);
  return (
    <div className="msr-meter">
      <div className="msr-meter-scale">
        <div className="msr-meter-track" />
        <div className="msr-meter-band" style={{ left: 0, width: thrPos + '%' }} />
        <div className="msr-meter-thr" style={{ left: thrPos + '%' }}>whipsaw {window.msrFmtZ(thr != null ? thr : -1.5)}</div>
        <div className="msr-meter-pin" style={{ left: zPos + '%', ['--tone']: tone }} />
        <div className="msr-meter-ticks"><span>−3</span><span>−1.5</span><span>0</span><span>+1.5</span><span>+3</span></div>
      </div>
    </div>);

}
function HeroConsole({ data }) {
  const s = data.state,meta = window.msrStateMeta(s.label),tone = window.msrTone(s.color);
  const sen = data.sensors || {},pi = data.plan_integration || {};
  const thr = sen.thresholds ? sen.thresholds.whipsaw_z : -1.5;
  return (
    <div className="msr-heroB" style={{ ['--tone']: tone }}>
      <div className="msr-heroB-l">
        <div className="msr-heroB-top">
          <MsrChip state={s} meta={meta} lg />
          <MsrWhyTag meta={meta} />
        </div>
        <MsrZMeter z={sen.composite_z} thr={thr} tone={tone} />
        <div className="msr-heroB-zrow">
          <span className="zv" style={{ color: tone }}>{window.msrFmtZ(sen.composite_z)}</span>
          <span className="zl">Composite z · {meta.sub}</span>
        </div>
      </div>
      <div className="msr-heroB-r">
        <div className="pl" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: 'var(--tone)', fontWeight: 800, fontSize: 13, letterSpacing: '0.02em' }}>
          Today's control mechanism
        </div>
        <MsrAction tone={tone} label={s.action_label} />
      </div>
    </div>);

}

/* ===== C · ALERT BANNER ===== */
function HeroBanner({ data }) {
  const s = data.state,meta = window.msrStateMeta(s.label),tone = window.msrTone(s.color);
  const z = data.sensors ? data.sensors.composite_z : null;
  return (
    <div className="msr-heroC" style={{ ['--tone']: tone }}>
      <div className="msr-heroC-band">
        <div className="msr-heroC-top">
          <MsrChip state={s} meta={meta} />
          <MsrWhyTag meta={meta} />
          <div className="msr-heroC-zbadge">
            <div className="zv">{window.msrFmtZ(z)}</div>
            <div className="zl">Composite z</div>
          </div>
        </div>
        <h2 className="msr-heroC-state">{meta.title}</h2>
        <p className="msr-heroC-msg">{s.one_line_message}</p>
      </div>
      <div className="msr-heroC-strip">
        <span className="arr">{'\u2192'}</span>
        <span className="al">Action</span>
        <span className="at">{s.action_label}</span>
      </div>
      <div style={{ padding: '0 32px 18px' }}><MsrFreshness data={data} /></div>
    </div>);

}

const MSR_HEROES = {
  A: { label: 'Regime Badge', render: HeroBadge },
  B: { label: 'Action Console', render: HeroConsole },
  C: { label: 'Alert Banner', render: HeroBanner }
};

Object.assign(window, { MSR_HEROES, MsrFreshness, MsrChip, MsrAction, MsrWhyTag });