/* ============================================================
   market-sensor-full.jsx — the FULL Market Sensor, embeddable.
   Same body as the standalone market-sensor.html (hero · plan
   integration · catalysts · sensor detail · watchlist · method)
   but WITHOUT the page nav/footer and WITHOUT a ReactDOM.render,
   so app.jsx can drop it inline under the "Market Sensing" stage.
   Reuses window.MSR_HEROES + window.Msr* from the core/cards/heroes
   files (which export to window and have no render side-effects).
   Exports window.MarketSensorFull.
   ============================================================ */
(function () {
  const { useState: msfState, useEffect: msfEffect, useCallback: msfCb } = React;

  function MarketSensorFull() {
    const [data, setData] = msfState(null);
    const [err, setErr] = msfState(null);
    const [loading, setLoading] = msfState(true);

    const load = msfCb(() => {
      setLoading(true);setErr(null);
      const R = window.__resources || {};
      const url = R.pulse || 'data/pulse.json';
      fetch(url, { cache: 'no-store' }).
      then((r) => {if (!r.ok) throw new Error('pulse.json ' + r.status);return r.json();}).
      then((d) => {setData(d);setLoading(false);}).
      catch((e) => {setErr(e.message);setLoading(false);});
    }, []);
    msfEffect(() => {load();}, [load]);

    if (loading && !data) {
      return <div className="msr msr-embed"><div className="msr-wrap"><div className="msr-load"><div className="l">Loading pre-market sensor…</div></div></div></div>;
    }
    if (err && !data) {
      return (
        <div className="msr msr-embed"><div className="msr-wrap"><div className="msr-err">
          <div className="l">Error</div><div className="h">Could not load the Market Sensor.</div>
          <div className="l">{err}</div><button className="msr-retry" onClick={load}>Retry</button>
        </div></div></div>);
    }

    const s = data.state || {};
    const meta = data.meta || {};
    const stale = window.msrStale ? window.msrStale(meta) : { stale: false };
    const unknown = s.label === 'UNKNOWN';
    const HeroRender = window.MSR_HEROES && window.MSR_HEROES.B && window.MSR_HEROES.B.render;
    const { MsrPlanStrip, MsrCatalysts, MsrSensorDetail, MsrWatchlist } = window;
    const _MO = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    const _WD = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    let sessLabel = meta.asof || '';
    if (/^\d{4}-\d{2}-\d{2}$/.test(meta.asof || '')) {
      const [yy, mm, dd] = meta.asof.split('-').map(Number);
      const wd = new Date(Date.UTC(yy, mm - 1, dd)).getUTCDay();
      sessLabel = `${_WD[wd]} · ${String(dd).padStart(2, '0')} ${_MO[mm - 1]} ${yy}`;
    }
    const cz = data.sensors ? data.sensors.composite_z : null;

    return (
      <div className="msr msr-embed">
        <div className="msr-wrap">
          {stale.stale && false &&
          <div className="msr-stale"><span>{'\u26A0'}</span><span><span className="b">Last update was {stale.label}.</span> Data may be stale — the sensor runs ~T-45 before the U.S. open.</span>
              <button className="msr-retry" style={{ marginLeft: 'auto', padding: '7px 14px' }} onClick={load}>Refresh</button></div>
          }

          <div className="msr-head">
            <h2 className="msr-title">Pre-market <em>volatility regime</em> sensor</h2>
            <div className="msr-meta">
              <div className="mm"><span className="k">Session</span><span className="v">{sessLabel}</span></div>
              <div className="mm"><span className="k">State</span><span className="v">{s.label}</span></div>
              <div className="mm"><span className="k">Composite z</span><span className="v">{window.msrFmtZ ? window.msrFmtZ(cz) : cz}</span></div>
            </div>
          </div>

          {unknown ?
          <div className="msr-hero" style={{ ['--tone']: window.msrTone('grey') }}>
                <div className="msr-heroA-top"><span className="msr-chip lg" style={{ ['--tone']: window.msrTone('grey') }}><span className="gly">?</span>UNKNOWN</span></div>
                <p className="msr-heroA-msg">Sensor data is incomplete today. Refer to <a href="#structural-bias" style={{ color: 'var(--mustard)' }}>Structural Bias</a> for direction.</p>
                <button className="msr-retry" onClick={load}>Retry</button>
              </div> :
          HeroRender ? <HeroRender data={data} /> : null}

          <div className="msr-sec" style={{ display: 'none' }}>
            <div className="msr-sec-head"><div><div className="msr-sec-eb">Plan integration</div><h2 className="msr-sec-h">How it changes today's plan</h2></div>
              <span className="msr-sec-note">Structural Bias × Sensor → one combined action.</span></div>
            {MsrPlanStrip ? <MsrPlanStrip data={data} /> : null}
          </div>

          {MsrCatalysts ? <MsrCatalysts data={data} /> : null}
          {MsrSensorDetail ? <MsrSensorDetail data={data} /> : null}
          {MsrWatchlist ? <MsrWatchlist data={data} /> : null}
        </div>
      </div>);
  }

  Object.assign(window, { MarketSensorFull });
})();