// 공유 유틸 + 아톰 (3개 시안이 함께 사용) -----------------------------------
const won = (n) => n.toLocaleString('ko-KR');

// 상태 메타 (색/도트)
const STATUS = {
  active:   { color: 'var(--ok)',   soft: 'var(--ok-soft)',   ink: 'var(--ok-ink)' },
  imminent: { color: 'var(--bad)',  soft: 'var(--bad-soft)',  ink: 'var(--bad-ink)' },
  grace:    { color: 'var(--bad)',  soft: 'var(--bad-soft)',  ink: 'var(--bad-ink)' },
  ended:    { color: 'var(--faint)',soft: '#F1F2F6',          ink: 'var(--muted)' },
};
const needsPay = (t) => t === 'imminent' || t === 'grace';

// 사용량 바 색: 90%+ 경고시 amber, 100%+ 위험, 아니면 채널색
function fillColor(pct, channel, ended) {
  if (ended) return 'var(--faint)';
  if (pct >= 90) return 'var(--warn)';
  return channel === 'enroll' ? 'var(--accent)' : 'var(--brand)';
}

// 플랜 배지
function PlanBadge({ plan, ended }) {
  const free = plan === 'FREE';
  return (
    <span className="tnum" style={{
      display: 'inline-flex', alignItems: 'center', height: 18, padding: '0 7px',
      borderRadius: 5, fontSize: 11, fontWeight: 800, letterSpacing: .4,
      color: ended ? 'var(--muted)' : '#fff',
      background: ended ? '#DEE0E8' : (free ? 'var(--ok)' : 'var(--brand)'),
    }}>{plan}</span>
  );
}

// 액션 버튼 — kind: ghost | dark | accent | danger
function ActionBtn({ act, ended }) {
  const base = {
    height: 32, padding: '0 13px', borderRadius: 8, fontSize: 13, fontWeight: 700,
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    border: '1px solid transparent', whiteSpace: 'nowrap', transition: 'all .12s',
  };
  const styles = {
    ghost:  { background: '#fff', borderColor: 'var(--line)', color: 'var(--ink-2)' },
    dark:   { background: 'var(--ink)', color: '#fff' },
    accent: { background: 'var(--brand-soft)', color: 'var(--brand-ink)' },
    danger: { background: 'var(--bad)', color: '#fff' },
  };
  const muted = ended ? { background: '#F1F2F6', borderColor: 'var(--line)', color: 'var(--muted)' } : null;
  return <button style={{ ...base, ...(styles[act.kind] || styles.ghost), ...(muted || {}) }}>{act.label}</button>;
}

// 가격 표시 (할인/무료 처리)
function PriceLine({ price, size = 20, color = 'var(--ink)' }) {
  if (price.free) return <span className="tnum" style={{ fontSize: size, fontWeight: 800, color }}>0<span style={{ fontSize: size * .68, fontWeight: 700 }}> 원</span></span>;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'baseline', gap: 6, flexWrap: 'wrap' }}>
      {price.original && (
        <span className="tnum" style={{ fontSize: size * .62, color: 'var(--faint)', textDecoration: 'line-through' }}>{won(price.original)}</span>
      )}
      <span className="tnum" style={{ fontSize: size, fontWeight: 800, color }}>{won(price.amount)}<span style={{ fontSize: size * .68, fontWeight: 700 }}> 원</span></span>
      {price.discountPct && (
        <span className="tnum" style={{ fontSize: size * .58, fontWeight: 800, color: 'var(--bad)' }}>{price.discountPct}%↓</span>
      )}
    </span>
  );
}

// 정렬 토글 (정적 — 보기용)
function SortBar({ active = 'usage', accentVar = 'var(--brand)' }) {
  const opts = [{ k: 'recent', label: '최근 등록순' }, { k: 'usage', label: '사용량순' }, { k: 'pay', label: '결제일순' }];
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <span style={{ fontSize: 12.5, color: 'var(--faint)', fontWeight: 600 }}>정렬</span>
      <div style={{ display: 'flex', gap: 2, background: 'var(--line-2)', padding: 3, borderRadius: 9 }}>
        {opts.map((o) => {
          const on = o.k === active;
          return (
            <span key={o.k} style={{
              fontSize: 12.5, fontWeight: 700, padding: '5px 11px', borderRadius: 7,
              background: on ? '#fff' : 'transparent',
              color: on ? accentVar : 'var(--muted)',
              boxShadow: on ? '0 1px 2px rgba(20,24,40,.08)' : 'none',
            }}>{o.label}</span>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { won, STATUS, needsPay, fillColor, PlanBadge, ActionBtn, PriceLine, SortBar });