// ============================================================
// Pre-Market Structural Bias — desktop section (React wrapper around cone-core.js)
// Exports window.StructuralBias. Loads data/premarket_sectors.json itself.
// ============================================================
(function () {
  const { useState: sbState, useEffect: sbEffect, useRef: sbRef } = React;

  function StructuralBias() {
    const [data, setData] = sbState(null);
    const [sel, setSel] = sbState(null);      // selected sector id or null
    const svgRef = sbRef(null);
    const apiRef = sbRef(null);

    sbEffect(() => {
      let alive = true;
      fetch('data/premarket_sectors.json', { cache: 'no-store' })
        .then((r) => { if (!r.ok) throw 0; return r.json(); })
        .then((j) => { if (alive) setData(j); })
        .catch(() => {});
      return () => { alive = false; };
    }, []);

    // mount cone once data + svg are ready
    sbEffect(() => {
      if (!data || !svgRef.current || !window.ConeMap) return;
      apiRef.current = window.ConeMap.cone(svgRef.current, data, {
        onSelect: (s) => setSel((prev) => prev === s.id ? null : s.id)
      });
    }, [data]);

    // reflect selection into the cone (highlight / dim)
    sbEffect(() => { if (apiRef.current) apiRef.current.select(sel); }, [sel]);

    if (!data) return null;
    const m = data.meta;
    const sector = sel && data.sectors.find((x) => x.id === sel);

    const meta = [
      ['SESSION', m.session_label], ['RULEBOOK', m.rulebook]
    ];

    let panel;
    if (sector) {
      const body = window.ConeMap.detailHTML(sector, data)
        .replace(/^<div class="cm-eyebrow">[\s\S]*?<\/div>/, '');
      panel = (
        React.createElement(React.Fragment, null,
          React.createElement('div', { className: 'cm-eyebrow' },
            React.createElement('span', null, 'SECTOR DETAIL · ' + m.session_label),
            React.createElement('button', { className: 'cm-backbtn', onClick: () => setSel(null) }, '‹ All sectors')),
          React.createElement('div', { dangerouslySetInnerHTML: { __html: body } })));
    } else {
      panel = React.createElement('div', { dangerouslySetInnerHTML: { __html: window.ConeMap.compositeHTML(data) } });
    }

    return (
      React.createElement('section', { className: 'sbias', id: 'structural-bias' },
        React.createElement('div', { className: 'sbias-wrap' },
          React.createElement('div', { className: 'sbias-head' },
            React.createElement('h2', { className: 'sbias-h' }, 'Pre-Market Structural Bias'),
            React.createElement('div', { className: 'sbias-meta' },
              meta.map((f, i) => React.createElement('div', { key: i, className: 'sbias-mf' },
                React.createElement('span', { className: 'k' }, f[0]),
                React.createElement('span', { className: 'v' }, f[1]))))),
          React.createElement('div', { className: 'sbias-main' },
            React.createElement('div', { className: 'cone-host' },
              React.createElement('svg', { ref: svgRef, 'aria-label': 'Sector cone' })),
            React.createElement('aside', { className: 'sbias-panel' },
              React.createElement('div', { className: 'panel-inner' }, panel))))));
  }

  window.StructuralBias = StructuralBias;
})();