/* Clear Mint — shared page building blocks (depends on cm-charts + cm-components) */
const Ick = window.CMIcon;
const CMC = {
  G:'#10915F', G2:'#0E8D66', PU:'#7848C0', AM:'#FBA834', BL:'#3B82F6',
  SL:'#94A3B8', RD:'#E04044', TEAL:'#0E9F8E', PINK:'#E0568A', INDIGO:'#5B6CF0'
};
window.CMC = CMC;

/* tint helper for icon chips */
const TINT = {
  [CMC.G]:'var(--mint-100)', [CMC.G2]:'var(--mint-100)', [CMC.PU]:'#EDE7F9',
  [CMC.AM]:'#FEF1DD', [CMC.BL]:'#E7EEFE', [CMC.SL]:'#EEF1F4', [CMC.RD]:'var(--red-100)',
  [CMC.TEAL]:'#DCF3F0', [CMC.PINK]:'#FBE3EE', [CMC.INDIGO]:'#E7E9FD'
};
const tintFor = c => TINT[c] || 'var(--mint-100)';
window.tintFor = tintFor;

/* KPI row + grids */
function KpiRow({ children }) { return <div className="cm-grid-4 cm-mb-24">{children}</div>; }
window.KpiRow = KpiRow;

/* ChangeCell — MoM up/down */
function ChangeCell({ dir, pct, amt }) {
  const col = dir==='neg' ? CMC.RD : CMC.G;
  return (
    <div className="cm-change" style={{color:col}}>
      <div className="pct num">{dir==='neg'?<Ick.ArrowDown size={13}/>:<Ick.ArrowUp size={13}/>}{pct}</div>
      {amt && <div className="amt num">{amt}</div>}
    </div>
  );
}
window.ChangeCell = ChangeCell;

/* StatusPill */
function StatusPill({ tone='green', icon, children }) {
  return <span className={`cm-pill cm-pill-${tone}`}>{icon}{children}</span>;
}
window.StatusPill = StatusPill;

/* CategoryBar list row */
function CategoryBar({ icon, color, label, value, pct, width }) {
  return (
    <div className="cm-catbar">
      <div className="name">{icon && <span style={{color}}>{icon}</span>}{label}</div>
      <div className="track"><div className="fill" style={{width:`${width}%`, background:color}}/></div>
      {value!=null && <div className="val num">{value}</div>}
      {pct!=null && <div className="pct num">{pct}</div>}
    </div>
  );
}
window.CategoryBar = CategoryBar;

/* Activity list */
function ActivityList({ items, footer }) {
  return (
    <>
      <div>
        {items.map((a,i)=>(
          <div className="cm-act" key={i}>
            <div className="cm-act-ic" style={{background:a.tint||tintFor(a.color), color:a.color||CMC.G}}>{a.icon}</div>
            <div className="cm-act-body">
              <div className="cm-act-title">{a.title}</div>
              {a.sub && <div className="cm-act-sub">{a.sub}</div>}
            </div>
            <div className="cm-act-right">
              {a.date && <div className="cm-act-date num">{a.date}</div>}
              {a.amt && <div className="cm-act-amt num" style={{color:a.dir==='neg'?CMC.RD:(a.amtColor||CMC.G)}}>{a.amt}</div>}
              {a.right}
            </div>
          </div>
        ))}
      </div>
      {footer && <button className="cm-btn cm-btn-soft" style={{width:'100%',justifyContent:'center',marginTop:14}}>{footer}</button>}
    </>
  );
}
window.ActivityList = ActivityList;

/* Tabs (stateful) */
function Tabs({ tabs, value, onChange, right }) {
  return (
    <div className="cm-tabs" style={{position:'relative'}}>
      {tabs.map(t => <div key={t} className={`cm-tab ${t===value?'active':''}`} onClick={()=>onChange&&onChange(t)}>{t}</div>)}
      {right && <div style={{position:'absolute', right:0, top:-6}}>{right}</div>}
    </div>
  );
}
window.Tabs = Tabs;

/* Vertical bar chart */
function VBars({ data, height=160 }) {
  const max = Math.max(...data.map(d=>d.value));
  return (
    <div className="cm-vbars" style={{height}}>
      {data.map((d,i)=>(
        <div className="cm-vbar" key={i}>
          <div className="col" style={{height:`${(d.value/max)*100}%`, background:d.color||CMC.G}}/>
          <div className="lbl">{d.label}</div>
        </div>
      ))}
    </div>
  );
}
window.VBars = VBars;

/* EmptyState — muted icon + serif headline + guiding CTA (styles: .cm-empty-state).
   Usage: <EmptyState icon={<Ick.Goals/>} title="No goals yet"
            body="Create your first goal to start tracking progress."
            cta="New goal" onCta={fn} /> */
function EmptyState({ icon, title, body, cta, onCta }) {
  return (
    <div className="cm-empty-state">
      {icon && <div className="es-ic">{icon}</div>}
      {title && <h3>{title}</h3>}
      {body && <p>{body}</p>}
      {cta && <button className="cm-btn cm-btn-primary" onClick={onCta}>{cta}</button>}
    </div>
  );
}
window.EmptyState = EmptyState;

/* Section heading helper used inside cards is just cm-card-head */
window.fmt = n => '$'+n.toLocaleString('en-US');