/* ════════════════════════════════════════════════════════════
   StickyDetailBar — appears when user scrolls past hero,
   gives one-tap access to the three key actions.
   ════════════════════════════════════════════════════════════ */

const { useState: sdb_s, useEffect: sdb_e } = React;

function StickyDetailBar({ rec, onBack }) {
  const [show, setShow] = sdb_s(false);
  const [signed, setSigned] = sdb_s(false);
  const lang = window.__LANG || 'zh';

  sdb_e(() => {
    const sc = document.getElementById('app-scroll') || document.querySelector('.app-scroll') || document.scrollingElement;
    if (!sc) return;
    const onScroll = () => {
      const y = sc.scrollTop || window.scrollY || 0;
      setShow(y > 240);
    };
    sc.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => sc.removeEventListener('scroll', onScroll);
  }, [rec.symbol]);

  sdb_e(() => {
    try { setSigned(!!localStorage.getItem('sig.' + rec.symbol)); } catch (e) {}
    const t = setInterval(() => {
      try { setSigned(!!localStorage.getItem('sig.' + rec.symbol)); } catch (e) {}
    }, 600);
    return () => clearInterval(t);
  }, [rec.symbol]);

  const onSign = () => {
    if (window.openSignModal) window.openSignModal(rec);
  };
  const onWatch = () => {
    window.haptic?.success();
    window.toast?.({ msg: lang==='zh'?`已加入自选 · ${rec.symbol}`:`Watching · ${rec.symbol}`, kind: 'success' });
  };
  const onShare = () => {
    window.haptic?.light();
    window.toast?.({ msg: lang==='zh'?'已复制简报链接':'Briefing link copied', kind: 'info' });
  };

  const verdict = rec.scores.fusion >= 80
    ? (lang==='zh'?'强烈推荐':'Strong Buy')
    : rec.scores.fusion >= 65
      ? (lang==='zh'?'推荐':'Buy')
      : (lang==='zh'?'观察':'Watch');
  const verdictTone = rec.scores.fusion >= 65 ? 'up' : 'neutral';

  return (
    <div className={'sticky-detail-bar' + (show ? ' on' : '')} role="region" aria-label={lang==='zh'?'快速操作栏':'Quick action bar'}>
      <div className="sdb-left">
        <button className="sdb-back" onClick={onBack} aria-label="back">←</button>
        <div className="sdb-stack">
          <div className="sdb-sym">
            <span className="sym">{rec.symbol}</span>
            <span className={'sdb-verdict ' + verdictTone}>{verdict}</span>
          </div>
          <div className="sdb-meta">
            <span className="px">{rec.price.currency==='USD'?'$':'¥'}{rec.price.current.toFixed(2)}</span>
            <span className={'chg ' + (rec.price.change_pct >= 0 ? 'up' : 'dn')}>
              {rec.price.change_pct >= 0 ? '+' : ''}{rec.price.change_pct.toFixed(2)}%
            </span>
            <span className="sep">·</span>
            <span className="fus">Fusion <b>{rec.scores.fusion}</b></span>
          </div>
        </div>
      </div>
      <div className="sdb-right">
        <button className="sdb-icon" onClick={onShare} aria-label={lang==='zh'?'分享':'share'}>↗</button>
        <button className="sdb-icon" onClick={onWatch} aria-label={lang==='zh'?'自选':'watch'}>★</button>
        <button className={'sdb-primary' + (signed ? ' signed' : '')} onClick={onSign}>
          {signed
            ? (lang==='zh' ? '已签署 ✓' : 'Signed ✓')
            : (lang==='zh' ? '签署承诺' : 'Sign')}
        </button>
      </div>
    </div>
  );
}

window.StickyDetailBar = StickyDetailBar;