// ============================================================
// Pre-Market Structural Bias — MOBILE section (React wrapper around cone-core.js)
// Compact cone + dark bottom sheet (mirrors the calendar sheet animation).
// Exports window.MStructuralBias.
// ============================================================
(function () {
  const { useState: mbState, useEffect: mbEffect, useRef: mbRef } = React;

  function MStructuralBias() {
    const [data, setData] = mbState(null);
    const [sel, setSel] = mbState(null);     // selected sector id (sheet open when set)
    const svgRef = mbRef(null);
    const scaleRef = mbRef(null);
    const sheetRef = mbRef(null);
    const apiRef = mbRef(null);
    const dragRef = mbRef({ active: false, startY: 0, last: 0, t0: 0 });

    mbEffect(() => {
      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; };
    }, []);

    function fit() {
      const sc = scaleRef.current; if (!sc) return;
      const avail = Math.min(window.innerWidth, 480) - 36;
      const s = Math.min(1, avail / 526);
      sc.style.transform = 'scale(' + s + ')';
      sc.style.height = (545 * s) + 'px';
    }

    mbEffect(() => {
      if (!data || !svgRef.current || !window.ConeMap) return;
      apiRef.current = window.ConeMap.cone(svgRef.current, data, {
        compact: true, onSelect: (s) => setSel(s.id)
      });
      fit();
      window.addEventListener('resize', fit);
      return () => window.removeEventListener('resize', fit);
    }, [data]);

    mbEffect(() => { if (apiRef.current) apiRef.current.select(sel); }, [sel]);
    mbEffect(() => {
      const onKey = (e) => { if (e.key === 'Escape') setSel(null); };
      document.addEventListener('keydown', onKey);
      return () => document.removeEventListener('keydown', onKey);
    }, []);

    const close = () => setSel(null);
    const onGripDown = (e) => { dragRef.current = { active: true, startY: e.clientY, last: 0, t0: performance.now() }; e.currentTarget.setPointerCapture && e.currentTarget.setPointerCapture(e.pointerId); };
    const onGripMove = (e) => { const d = dragRef.current; if (!d.active) return; const dy = Math.max(0, e.clientY - d.startY); d.last = dy; const sh = sheetRef.current; if (sh) { sh.classList.add('dragging'); sh.style.transform = 'translateY(' + dy + 'px)'; } };
    const onGripUp = () => { const d = dragRef.current; if (!d.active) return; const dy = d.last, dt = performance.now() - d.t0; d.active = false; const sh = sheetRef.current; if (sh) { sh.classList.remove('dragging'); sh.style.transform = ''; } if (dy > 150 || dy / Math.max(1, dt) > 0.8) close(); };

    if (!data) return null;
    const m = data.meta, CM = window.ConeMap;
    const c = { bullish: 0, neutral: 0, bearish: 0 };
    data.sectors.forEach((s) => { if (c[s.verdict] != null) c[s.verdict]++; });
    const sector = sel && data.sectors.find((x) => x.id === sel);
    const tc = (v, label, n) => React.createElement('div', { className: 'sbias-m-tc' },
      React.createElement('span', { className: 'n', style: { color: CM.COL[v] } }, n),
      React.createElement('span', { className: 'l' }, label));

    return (
      React.createElement(React.Fragment, null,
        React.createElement('section', { className: 'sbias-m', id: 'structural-bias' },
          React.createElement('div', { className: 'sbias-m-head' },
            React.createElement('h2', { className: 'sbias-m-h' }, 'Pre-Market Structural Bias')),
          React.createElement('div', { className: 'sbias-m-comp' },
            React.createElement('div', { className: 'sbias-m-date' }, m.session_label),
            React.createElement('div', { className: 'sbias-m-verdict' }, m.composite.label),
            React.createElement('p', { className: 'sbias-m-lead' }, m.composite.summary || m.composite.headline),
            React.createElement('div', { className: 'sbias-m-setups', dangerouslySetInnerHTML: { __html: CM.setupsHTML(m.composite) } }),
            React.createElement('div', { className: 'sbias-m-tally' },
              tc('bull', 'Bullish', c.bullish), tc('neut', 'Neutral', c.neutral), tc('bear', 'Bearish', c.bearish))),
          React.createElement('div', { className: 'sbias-m-hero' },
            React.createElement('div', { className: 'cone-scale', ref: scaleRef },
              React.createElement('div', { className: 'cone-host' },
                React.createElement('svg', { ref: svgRef, 'aria-label': 'Sector cone' })))),
          React.createElement('div', { className: 'sbias-m-taphint' }, 'Tap any sector in the map for its full indicator work-up')),

        React.createElement('div', { className: 'sb-backdrop' + (sel ? ' open' : ''), onClick: close }),
        React.createElement('div', { className: 'sb-sheet' + (sel ? ' open' : ''), ref: sheetRef, role: 'dialog', 'aria-modal': 'true' },
          React.createElement('div', { className: 'sb-grip', onPointerDown: onGripDown, onPointerMove: onGripMove, onPointerUp: onGripUp, onPointerCancel: onGripUp },
            React.createElement('span', { className: 'bar' })),
          React.createElement('div', { className: 'sb-head' },
            React.createElement('button', { className: 'sb-close', onClick: close, 'aria-label': 'Close' }, '×')),
          React.createElement('div', { className: 'sb-body' },
            sector ? React.createElement('div', { dangerouslySetInnerHTML: { __html: CM.detailHTML(sector, data) } }) : null))));
  }

  window.MStructuralBias = MStructuralBias;
})();