const NODE_META = {
  foreign_buy: {
    label: '외국인',
    description: '외국인 누적 순매수 강도 — 최근 N일(기본 5일) 외국인 순매수 합계를 시가총액으로 나눈 비율의 백분위',
  },
  volume_surge: {
    label: '거래량 급증',
    description: '최근 3일 평균 거래량 vs 직전 20일 평균의 log(비율) 백분위 — 매집/관심 급증 신호',
  },
  momentum: {
    label: '20일 모멘텀',
    description: '20일 누적 수익률 백분위 — 단기 상승 추세 강도',
  },
  high52w: {
    label: '52주 신고가 근접도',
    description: '현재가 / 52주 최고가 (룰 기반: 70% 미만 0점, 100% 도달 100점, 선형) — 미너비니 SEPA 핵심',
  },
  rs_rating: {
    label: 'RS Rating',
    description: '시장(KOSPI) 대비 3·6·9·12개월 초과수익 가중합 (IBD 표준 2:1:1:1) 백분위 — 상대강도',
  },
  ma_alignment: {
    label: '이평선 정배열',
    description: '현재가>MA50, MA50>MA150, MA150>MA200, 현재가>MA200, 52주 저점+25% 이상 — 5조건 만족도 × 20점',
  },
  vcp_lite: {
    label: 'VCP-lite (변동성 수축)',
    description: '단기(40일) vs 장기(252일) 일중 변동성 비율 백분위 — 변동성 수축 = 돌파 직전 패턴',
  },
};

export default function ScoreChips({ scores }) {
  return (
    <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
      {Object.entries(scores || {}).map(([name, s]) => {
        const meta = NODE_META[name];
        if (!meta) return null;
        const active = s >= 70;
        const score = Math.round(s);
        return (
          <span
            key={name}
            title={`${meta.label} ${score}점\n\n${meta.description}\n\n(70점 이상이면 강조 표시)`}
            style={{
              padding: '3px 8px', borderRadius: 4, fontSize: 11,
              background: active ? '#fbbf24' : '#1f2937',
              color: active ? '#0b0f17' : '#9ca3af',
              cursor: 'help',
              fontWeight: active ? 600 : 400,
            }}
          >
            {meta.label} {score}
          </span>
        );
      })}
    </div>
  );
}