/* ════════════════════════════════════════════════════════════
   AlertsRail — horizontal scroll of "things that need you now"
   Sits at top of dashboard between mast & cards.
   Each card is dismissable. Stories are deterministic per day.
   ════════════════════════════════════════════════════════════ */

const { useState: ar_s, useEffect: ar_e, useMemo: ar_m } = React;

function _hashAlertSeed(market) {
  const d = new Date();
  const key = d.toISOString().slice(0,10) + ':' + market;
  let h = 5381;
  for (let i = 0; i < key.length; i++) h = ((h << 5) + h + key.charCodeAt(i)) | 0;
  return Math.abs(h);
}

function _pickN(arr, n, seed) {
  const out = []; const used = new Set();
  let s = seed;
  while (out.length < n && used.size < arr.length) {
    s = (s * 1103515245 + 12345) & 0x7fffffff;
    const i = s % arr.length;
    if (!used.has(i)) { used.add(i); out.push(arr[i]); }
  }
  return out;
}

function AlertsRail({ market, onOpen }) {
  const lang = window.__LANG || 'zh';
  const [dismissed, setDismissed] = ar_s(() => {
    try { return JSON.parse(localStorage.getItem('alerts.dismissed') || '{}'); } catch (e) { return {}; }
  });

  const dismiss = (id) => {
    const next = { ...dismissed, [id]: Date.now() };
    setDismissed(next);
    try { localStorage.setItem('alerts.dismissed', JSON.stringify(next)); } catch (e) {}
    window.haptic?.light();
  };

  const alerts = ar_m(() => {
    const seed = _hashAlertSeed(market);
    const pool = (window.MOCK_RECS || []).filter(r => r.market === market);
    if (pool.length < 3) return [];
    const [a, b, c, d] = _pickN(pool, Math.min(4, pool.length), seed);

    const out = [];
    if (a) out.push({
      id: 'sl-' + a.symbol,
      tone: 'red',
      kicker: lang==='zh' ? '止损预警 · STOP-LOSS WATCH' : 'STOP-LOSS WATCH',
      head: a.symbol,
      sub: a.name,
      body: lang==='zh'
        ? <>距止损 <b style={{color:'var(--down-strong)'}}>−1.8%</b> · 已下跌 <b>3 日</b></>
        : <>Within <b style={{color:'var(--down-strong)'}}>1.8%</b> of stop · down <b>3 days</b></>,
      stat: '−2.94%',
      statTone: 'dn',
      cta: lang==='zh'?'回顾承诺':'Review',
      onTap: () => onOpen?.(a.symbol)
    });
    if (b) out.push({
      id: 'new-' + b.symbol,
      tone: 'green',
      kicker: lang==='zh' ? '今日新推 · HOT OF THE DESK' : 'HOT OF THE DESK',
      head: b.symbol,
      sub: b.name,
      body: lang==='zh'
        ? <>三源命中 · Fusion <b style={{color:'var(--up-strong)'}}>{b.scores.fusion}</b> · 信号最强</>
        : <>Three-source hit · Fusion <b style={{color:'var(--up-strong)'}}>{b.scores.fusion}</b> · top signal</>,
      stat: '+' + b.price.change_pct.toFixed(2) + '%',
      statTone: b.price.change_pct >= 0 ? 'up' : 'dn',
      cta: lang==='zh'?'查看推荐':'Open',
      onTap: () => onOpen?.(b.symbol)
    });
    if (c) out.push({
      id: 'flip-' + c.symbol,
      tone: 'amber',
      kicker: lang==='zh' ? '立场翻转 · DESK REVERSED' : 'DESK REVERSED',
      head: c.symbol,
      sub: c.name,
      body: lang==='zh'
        ? <>昨日 <b>HOLD</b> → 今日 <b style={{color:'var(--up-strong)'}}>BUY</b> · 新闻驱动</>
        : <>Yesterday <b>HOLD</b> → today <b style={{color:'var(--up-strong)'}}>BUY</b> · news-driven</>,
      stat: 'Δ+18',
      statTone: 'amber',
      cta: lang==='zh'?'查看理由':'Why',
      onTap: () => onOpen?.(c.symbol)
    });
    if (d) out.push({
      id: 'earn-' + d.symbol,
      tone: 'neutral',
      kicker: lang==='zh' ? '财报临近 · EARNINGS AHEAD' : 'EARNINGS AHEAD',
      head: d.symbol,
      sub: d.name,
      body: lang==='zh'
        ? <>明日盘后 · 预期 EPS <b>2.18</b> · IV <b>43%</b></>
        : <>After-hours tomorrow · est EPS <b>2.18</b> · IV <b>43%</b></>,
      stat: 'T−1',
      statTone: 'neutral',
      cta: lang==='zh'?'查看':'Open',
      onTap: () => onOpen?.(d.symbol)
    });

    return out.filter(a => !dismissed[a.id]);
  }, [market, dismissed, lang]);

  if (alerts.length === 0) return null;

  return (
    <section className="alerts-rail" aria-label={lang==='zh'?'需要关注':'Alerts'}>
      <div className="ar-mast">
        <span className="ar-eb">
          <span className="ar-pulse"/>
          {lang==='zh'?'需要关注 · NEEDS YOUR EYE':'NEEDS YOUR EYE'}
        </span>
        <span className="ar-count">{alerts.length}</span>
      </div>
      <div className="ar-scroll">
        {alerts.map((a) => (
          <article key={a.id} className={'ar-card tone-' + a.tone}>
            <button className="ar-x" onClick={() => dismiss(a.id)} aria-label="dismiss">×</button>
            <div className="ar-kicker">{a.kicker}</div>
            <div className="ar-head">
              <div>
                <div className="ar-sym">{a.head}</div>
                <div className="ar-sub">{a.sub}</div>
              </div>
              <div className={'ar-stat ' + a.statTone}>{a.stat}</div>
            </div>
            <div className="ar-body">{a.body}</div>
            <button className="ar-cta" onClick={a.onTap}>
              {a.cta} <span className="ar-arrow">→</span>
            </button>
          </article>
        ))}
      </div>
    </section>
  );
}

window.AlertsRail = AlertsRail;