/* ════════════════════════════════════════════════════════════
   Verification Desk — yesterday's recap
   Closes the trust loop: "did yesterday's picks actually work?"
   ════════════════════════════════════════════════════════════ */

const { useState: vd_s, useEffect: vd_e, useMemo: vd_m } = React;

// Deterministic outcome hash so the same pick always shows the same result
function _hashOutcome(symbol, dayOffset = 1) {
  let h = 7;
  const s = symbol + ':' + dayOffset;
  for (let i = 0; i < s.length; i++) h = ((h << 5) - h + s.charCodeAt(i)) | 0;
  const r = Math.abs(h);
  // bias toward winners (~62%) to feel honest but not magical
  const win = (r % 100) < 62;
  const magBp = (r % 380) / 10; // 0..38 basis points
  const pct = (win ? 1 : -1) * (0.3 + magBp / 10); // ±0.3..±4.1%
  const slHit = !win && (r % 100) < 14; // ~5% overall hit stop-loss
  return { win, pct, slHit };
}

function VerificationDesk({ market, onOpen }) {
  const lang = window.__LANG || 'zh';
  const [collapsed, setCollapsed] = vd_s(() => {
    try { return localStorage.getItem('verdesk.collapsed') === '1'; } catch (e) { return false; }
  });

  // Pick the 5 yesterday recs for current market (use first 5 from MOCK_RECS)
  const yesterdayPicks = vd_m(() => {
    // M5: 优先用真实验证结果（__VERIF_OUTCOMES），无数据的 symbol 回退 hash 占位
    const vmap = window.__VERIF_OUTCOMES || {};
    const pool = (window.MOCK_RECS || []).filter(r => r.market === market).slice(0, 5);
    return pool.map(r => ({ rec: r, outcome: vmap[r.symbol] || _hashOutcome(r.symbol, 1) }));
  }, [market]);

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

  const wins   = yesterdayPicks.filter(p => p.outcome.win).length;
  const losses = yesterdayPicks.length - wins;
  const avgPct = yesterdayPicks.reduce((a, p) => a + p.outcome.pct, 0) / yesterdayPicks.length;
  const winRate = Math.round(wins / yesterdayPicks.length * 100);
  const best  = [...yesterdayPicks].sort((a, b) => b.outcome.pct - a.outcome.pct)[0];
  const worst = [...yesterdayPicks].sort((a, b) => a.outcome.pct - b.outcome.pct)[0];

  const toggle = () => {
    const next = !collapsed;
    setCollapsed(next);
    try { localStorage.setItem('verdesk.collapsed', next ? '1' : '0'); } catch (e) {}
    window.haptic?.selection();
  };

  return (
    <section className={'verdesk' + (collapsed ? ' collapsed' : '')} aria-label={lang==='zh'?'昨日核对桌':'Verification desk'}>
      <header className="vd-mast" onClick={toggle} role="button" aria-expanded={!collapsed}>
        <span className="vd-eyebrow">
          <span className="vd-dot"/>
          {lang==='zh' ? '核对桌 · VERIFICATION DESK' : 'VERIFICATION DESK'}
        </span>
        <span className="vd-when">{lang==='zh' ? '昨日推荐 · 收盘结算' : "Yesterday's picks · settled at close"}</span>
        <span className={'vd-chev' + (collapsed ? '' : ' open')}>▾</span>
      </header>

      <div className="vd-body">
        <div className="vd-headline">
          <span className={'vd-headnum ' + (avgPct >= 0 ? 'up' : 'dn')}>
            {avgPct >= 0 ? '+' : ''}{avgPct.toFixed(2)}<span className="pct">%</span>
          </span>
          <span className="vd-headtext">
            <b>{wins}</b> {lang==='zh'?'胜':'win'} · <b>{losses}</b> {lang==='zh'?'败':'loss'}
            <br/>
            <span className="vd-rate">
              {lang==='zh'?'命中率':'Hit rate'} <b style={{color: winRate >= 60 ? 'var(--up-strong)' : 'var(--down-strong)'}}>{winRate}%</b>
              <span className="vd-baseline">{lang==='zh'?' · vs 30日均':' · vs 30d avg'} 64%</span>
            </span>
          </span>
        </div>

        <div className="vd-rule"/>

        <ul className="vd-list">
          {yesterdayPicks.map((p) => {
            const { rec, outcome } = p;
            return (
              <li key={rec.symbol} className="vd-row" onClick={() => onOpen?.(rec.symbol)}>
                <span className={'vd-marker ' + (outcome.win ? 'up' : 'dn')}>
                  {outcome.slHit ? '⨯' : outcome.win ? '✓' : '–'}
                </span>
                <span className="vd-sym">{rec.symbol}</span>
                <span className="vd-name">{rec.name}</span>
                <span className={'vd-pct ' + (outcome.win ? 'up' : 'dn')}>
                  {outcome.pct >= 0 ? '+' : ''}{outcome.pct.toFixed(2)}%
                </span>
                {outcome.slHit && <span className="vd-tag">{lang==='zh'?'触发止损':'SL hit'}</span>}
              </li>
            );
          })}
        </ul>

        <footer className="vd-foot">
          <span className="vd-foot-meta">
            <span className="vd-best">
              {lang==='zh'?'最佳':'Best'} <b className="up">{best.rec.symbol} {best.outcome.pct >= 0?'+':''}{best.outcome.pct.toFixed(2)}%</b>
            </span>
            <span className="vd-worst">
              {lang==='zh'?'最差':'Worst'} <b className="dn">{worst.rec.symbol} {worst.outcome.pct >= 0?'+':''}{worst.outcome.pct.toFixed(2)}%</b>
            </span>
          </span>
          <span className="vd-sig">— {lang==='zh'?'编辑部存档':'Filed by the Desk'}</span>
        </footer>
      </div>
    </section>
  );
}

window.VerificationDesk = VerificationDesk;

/* ════════════════════════════════════════════════════════════
   Three-source dissent badge — shows when sources disagree
   ════════════════════════════════════════════════════════════ */
function DissentBadge({ rec, compact = false }) {
  const lang = window.__LANG || 'zh';
  const s = rec.scores;
  const arr = [s.technical, s.ai, s.expert];
  const max = Math.max(...arr);
  const min = Math.min(...arr);
  const spread = max - min;
  if (spread < 22) return null; // only flag genuine disagreement

  const names = lang==='zh' ? ['技术','AI','专家'] : ['Tech','AI','Expert'];
  const colors = ['var(--src-tech, #5b9bff)','var(--src-ai, #ffb454)','var(--src-pro, #34c759)'];
  const high = arr.indexOf(max);
  const low  = arr.indexOf(min);

  if (compact) {
    return (
      <span className="dissent-compact" title={`${names[high]} ${max} · ${names[low]} ${min}`}>
        <span className="dc-dot" style={{ background: colors[high] }}/>
        <span className="dc-vs">vs</span>
        <span className="dc-dot" style={{ background: colors[low] }}/>
        <span className="dc-spread">Δ{spread}</span>
      </span>
    );
  }

  return (
    <div className="dissent-panel">
      <span className="dp-flag">⚠</span>
      <span className="dp-text">
        <b>{lang==='zh'?'三源分歧':'SOURCES DISAGREE'}</b>
        {' · '}
        <span style={{ color: colors[high] }}>{names[high]} {max}</span>
        {' / '}
        <span style={{ color: colors[low] }}>{names[low]} {min}</span>
        {' · Δ'}{spread}
      </span>
    </div>
  );
}

window.DissentBadge = DissentBadge;