// Union variant: editorial surface + dossier depth
// Depends on: variants.jsx (MiniSpark, ChangePct, FlippableCard), components.jsx (Icon, fmt, t)

const { useState: uSU } = React;

function UnionCard({ rec, index, onClick }) {
  const [open, setOpen] = uSU(false);
  const [rs, upgradeRs] = window.useReadState ? window.useReadState(rec.symbol) : [null, ()=>{}];
  const lang = window.__LANG || 'zh';
  const cmp = window.compareScore ? window.compareScore(rec) : { avg: rec.scores.fusion, diff: 0 };
  const kickerSet = lang === 'zh'
    ? ['头条 · LEAD', '聚焦 · FOCUS', '观察 · WATCH', '高确信 · CONVICTION', '简报 · BRIEFING', '今日之选 · PICK', '案头 · DESK']
    : ['LEAD STORY', 'IN FOCUS', 'WATCH-LIST', 'CONVICTION', 'BRIEFING', 'IDEA OF THE DAY', 'DESK PICK'];
  const kicker = kickerSet[index % kickerSet.length];

  const stop = (e) => { e.stopPropagation(); };

  return (
    <article className={'un-card' + (open ? ' open' : '')} data-rs={rs} onClick={() => { upgradeRs('seen'); onClick(); }}>
      <div className="kicker">
        <span>{kicker} · {t('dashboard.market_' + rec.market)} · {t('dashboard.' + rec.term + '_term')}</span>
        <span className="case-no">REC.{String(index + 1).padStart(3, '0')}</span>
      </div>

      <div className="head">
        <span className="sym">{rec.symbol}</span>
        <span className="name">{rec.name}</span>
        <span className={'cmp-badge ' + (cmp.diff >= 0 ? 'up' : 'dn')} title="vs 30d avg score">
          {cmp.diff >= 0 ? '+' : ''}{cmp.diff} {lang==='zh'?'· 近月均':'· 30d avg'} {cmp.avg}
        </span>
        {window.DissentBadge && <window.DissentBadge rec={rec} compact />}
      </div>

      <div className="body">
        <div className="lede">
          <span className="opener">
            {rec.scores.fusion}<span className="slash">/</span>100.
          </span>{' '}
          {rec.reasoning.ai}
        </div>
        <div className="pricecol">
          <div className="px">{fmt.price(rec.price.current, rec.price.currency)}</div>
          <ChangePct value={rec.price.change_pct} />
          <MiniSpark up={rec.price.change_pct >= 0} width={116} height={36} />
        </div>
      </div>

      <div className="surface-meta">
        <span>
          {lang === 'zh' ? '持有' : 'Hold'}
          <span className="v">{rec.recommendation.hold_period_days}d</span>
        </span>
        <span>
          {lang === 'zh' ? '止损' : 'Stop'}
          <span className="v">{fmt.price(rec.recommendation.stop_loss, rec.price.currency)}</span>
        </span>
        <span>
          {lang === 'zh' ? '胜率' : 'Win'}
          <span className="v">{Math.round(rec.backtest.win_rate * 100)}%</span>
          {rec.backtest.sample_size < 30 && <span className="v warn"> ⚠</span>}
        </span>
        <span>
          {lang === 'zh' ? '亏损率' : 'Loss prob.'}
          <span className="v up">{Math.round(rec.risk.loss_probability * 100)}%</span>
        </span>
      </div>

      <button className="dossier-toggle" onClick={(e) => { stop(e); setOpen(!open); upgradeRs('opened'); window.felix?.flip_sfx?.(); }}>
        <span className="ln" />
        <span>{open ? (lang === 'zh' ? '收起卷宗' : 'CLOSE DOSSIER') : (lang === 'zh' ? '展开卷宗' : 'OPEN DOSSIER')}</span>
        <span className="chev">▾</span>
        <span className="ln" />
      </button>

      <div className="dossier-body">
        <div className="inner">
          <div className="row"><span className="lab">Fusion</span><span className="v">{rec.scores.fusion}/100</span></div>
          <div className="row"><span className="lab">Tech · AI · Exp</span><span className="v">{rec.scores.technical}·{rec.scores.ai}·{rec.scores.expert}</span></div>
          <div className="row"><span className="lab">Action</span><span className="v" style={{ textTransform: 'uppercase' }}>{rec.recommendation.action}</span></div>
          <div className="row"><span className="lab">Confidence</span><span className="v">{Math.round(rec.recommendation.confidence * 100)}%</span></div>
          <div className="row"><span className="lab">Take Profit</span><span className="v">{fmt.price(rec.recommendation.take_profit, rec.price.currency)}</span></div>
          <div className="row"><span className="lab">Avg Return</span><span className="v" style={{ color: rec.backtest.avg_return_pct >= 0 ? 'var(--up-strong)' : 'var(--down-strong)' }}>{rec.backtest.avg_return_pct >= 0 ? '+' : ''}{rec.backtest.avg_return_pct.toFixed(2)}%</span></div>
          <div className="row"><span className="lab">Max DD</span><span className="v" style={{ color: 'var(--up-strong)' }}>−{rec.risk.max_drawdown_pct.toFixed(1)}%</span></div>
          <div className="row"><span className="lab">Risk Level</span><span className="v" style={{ color: rec.risk.level === 'high' ? 'var(--up-strong)' : rec.risk.level === 'medium' ? 'var(--accent-paper)' : 'var(--down-strong)' }}>{rec.risk.level.toUpperCase()}</span></div>
          <div className="sig-row">
            <div className="meta">
              gen · {new Date(rec.generated_at).toISOString().slice(0, 16).replace('T', ' ')} UTC<br/>
              Δ {rec.data_freshness_minutes}m · n = {rec.backtest.sample_size}
            </div>
            <div className="sig">F. Analyst</div>
          </div>
        </div>
      </div>
      {window.ContractFollowup && <window.ContractFollowup rec={rec} />}
    </article>
  );
}

window.UnionCard = UnionCard;