// ============ Shared UI helpers ============
const MEMBER_STATUS = {
  pending:   { label:'승인대기', cls:'gold' },
  active:    { label:'활동중',   cls:'done' },
  suspended: { label:'정지',     cls:'danger' },
};
const REPORT_STATUS = {
  pending:{ label:'검토 대기', cls:'gold' },
  posted: { label:'게시중',   cls:'done' },
  hidden: { label:'숨김',     cls:'todo' },
};
const NOTICE_STATUS = {
  sent:      { label:'발송완료', cls:'done' },
  scheduled: { label:'예약',     cls:'blue' },
  draft:     { label:'임시저장', cls:'todo' },
};

function MentorImg({ id, alt }) {
  return <img src={`mentors/${id}.webp`} alt={alt||id} loading="lazy" />;
}

function StatusBadge({ map, value }) {
  const m = map[value] || { label:value, cls:'todo' };
  return <span className={`st ${m.cls}`}><span className="d"></span>{m.label}</span>;
}

// number with comma
const nf = (n) => n.toLocaleString('ko-KR');

// Card with header
function Panel({ title, sub, right, children, className='', pad=true }) {
  return (
    <section className={`card ${className}`}>
      {(title || right) && (
        <div className="spread" style={{padding:'18px 22px', borderBottom:'1px solid var(--line)'}}>
          <div>
            {title && <div className="sec-title">{title}</div>}
            {sub && <div className="sec-sub">{sub}</div>}
          </div>
          {right}
        </div>
      )}
      <div style={pad?{padding:'20px 22px'}:undefined}>{children}</div>
    </section>
  );
}

// Confirm modal
function Confirm({ open, icon='check', tone='gold', title, desc, confirmLabel='확인', cancelLabel='취소', onConfirm, onClose, danger }) {
  if (!open) return null;
  return (
    <div className="scrim" onClick={onClose}>
      <div className="modal" style={{maxWidth:440}} onClick={e=>e.stopPropagation()}>
        <div className="modal-head">
          <div style={{width:46,height:46,borderRadius:13,flex:'0 0 auto',display:'grid',placeItems:'center',
            background: danger?'var(--danger-bg)':'var(--gold-soft)', color: danger?'var(--danger)':'var(--gold-ink)'}}>
            <Icon name={icon} size={22}/>
          </div>
          <div style={{flex:1}}>
            <div style={{fontSize:18,fontWeight:900,letterSpacing:'-0.5px'}}>{title}</div>
            {desc && <div style={{fontSize:14,color:'var(--ink-2)',marginTop:6,lineHeight:1.55}}>{desc}</div>}
          </div>
        </div>
        <div className="modal-foot">
          <button className="btn ghost" onClick={onClose}>{cancelLabel}</button>
          <button className={`btn ${danger?'danger':'gold'}`} onClick={onConfirm}>{confirmLabel}</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { MEMBER_STATUS, REPORT_STATUS, NOTICE_STATUS, MentorImg, StatusBadge, nf, Panel, Confirm });