// ============================================================
// SHARE CARD — "Share my edge" growth card.
// ============================================================
function ShareCard({ trades, user, onClose }) {
  const { Btn, Icon, nameOf, t } = { ...window.CJUI, nameOf: window.CJData.nameOf };
  const D = window.CJData;
  const combo = D.bestCombinations(trades)[0] || null;
  const discipline = D.disciplineScore(trades, user.minConfluences);
  const s = D.summary(trades, user.minConfluences);
  const sessLabel = D.SESSIONS.filter((x) => user.sessions.includes(x.id)).map((x) => t('sess.' + x.id)).join(' / ') || '—';

  const cardRef = React.useRef(null);
  const savePng = async () => {
    if (!window.html2canvas || !cardRef.current) return;
    const canvas = await window.html2canvas(cardRef.current, { backgroundColor: null, scale: 2, useCORS: true });
    canvas.toBlob((blob) => {
      if (!blob) return;
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a'); a.href = url; a.download = 'confluence-score-edge.png'; a.click();
      URL.revokeObjectURL(url);
    });
  };

  const copy = () => {
    const txt = `${t('sc.copyText')}\n` +
      (combo ? `Best combo: ${combo.label} → ${combo.winRate}% (${combo.trades} trades)\n` : '') +
      `Discipline: ${discipline}% · Win rate: ${s.winRate}%\n${user.instrument} · ${sessLabel}`;
    navigator.clipboard?.writeText(txt);
  };

  return (
    <div className="share-scrim" onClick={onClose}>
      <div onClick={(e) => e.stopPropagation()} style={{ width: 440 }}>
        <div className="share-card" ref={cardRef}>
          <div className="sc-grid" />
          <div className="sc-pad">
            <div className="sc-head">
              <div className="sc-mark">
                <div className="m">C</div>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 13, letterSpacing: '-.01em', whiteSpace: 'nowrap' }}>Confluence Score</div>
                  <div className="sc-meta" style={{ fontSize: 10 }}>{t('sc.myEdge')}</div>
                </div>
              </div>
              <div className="sc-meta">{user.instrument} · {sessLabel}</div>
            </div>

            <div style={{ marginTop: 30 }}>
              <div className="sc-meta" style={{ marginBottom: 6 }}>{t('sc.bestCombo')}</div>
              {combo ? (
                <>
                  <div className="sc-wr">{combo.winRate}%</div>
                  <div className="sc-combo-names">
                    {combo.ids.map((id) => <span key={id} className="sc-chip">{nameOf(id)}</span>)}
                  </div>
                  <div className="sc-meta" style={{ marginTop: 8 }}>{t('sc.across', { n: combo.trades })}</div>
                </>
              ) : (
                <div style={{ color: '#b8ac95', fontSize: 14, marginTop: 8 }}>{t('sc.notEnough')}</div>
              )}
            </div>

            <div className="sc-foot">
              <div className="sc-stat"><div className="k">{t('stat.discipline')}</div><div className="v" style={{ color: discipline >= 80 ? 'var(--long)' : discipline >= 60 ? 'var(--warn)' : 'var(--short)' }}>{discipline}%</div></div>
              <div className="sc-stat"><div className="k">{t('stat.winRate')}</div><div className="v">{s.winRate}%</div></div>
              <div className="sc-stat"><div className="k">{t('stat.trades')}</div><div className="v">{s.count}</div></div>
              <div className="sc-stat" style={{ textAlign: 'right' }}><div className="k">{t('stat.profitFactor')}</div><div className="v" style={{ color: 'var(--long)' }}>{s.profitFactor === Infinity ? '∞' : s.profitFactor.toFixed(2)}</div></div>
            </div>
          </div>
        </div>

        <div className="sc-actions">
          <Btn kind="ghost" className="" onClick={onClose} style={{ flex: 1 }}>{t('common.close')}</Btn>
          <Btn kind="ghost" icon="download" style={{ flex: 1 }} onClick={savePng}>{t('sc.savePng')}</Btn>
          <Btn kind="primary" icon="share" style={{ flex: 1.4 }} onClick={copy}>{t('sc.copyShare')}</Btn>
        </div>
      </div>
    </div>
  );
}

window.ShareCard = ShareCard;