/* Clear Mint — V6 page kit: shared header, tabs, rings, grade bar, icon chips.
   Used by the new Debt Center / Family Hub / Estate Vault / Financial Health /
   Roadmap / Opportunities pages. Depends on cm-charts (CMIcon) + cm-app-kit (CMC). */
(function(){
const I = window.CMIcon;
const { CMC, tintFor } = window;
const money = n => '$'+Math.round(n).toLocaleString('en-US');
window.cmMoney = money;

/* ---- Page header (title + subtitle + right-side actions) ---- */
function PageHead({ title, sub, actions, badge }) {
  return (
    <div className="v6-head">
      <div className="v6-head-l">
        <h1 className="v6-title">{title}</h1>
        {sub && <p className="v6-sub">{sub}</p>}
      </div>
      <div className="v6-head-r">
        {badge}
        {actions}
      </div>
    </div>
  );
}
window.PageHead = PageHead;

/* ---- Underlined tab bar ---- */
function V6Tabs({ tabs, value, onChange }) {
  return (
    <div className="v6-tabs">
      {tabs.map(t=>{
        const id = typeof t==='string'?t:t.id;
        const label = typeof t==='string'?t:t.label;
        return (
          <button key={id} className={`v6-tab ${id===value?'active':''}`} onClick={()=>onChange&&onChange(id)}>
            {label}{t.caret && <I.Chevron size={14}/>}
          </button>
        );
      })}
    </div>
  );
}
window.V6Tabs = V6Tabs;

/* ---- Full circular progress ring ---- */
function Ring({ pct, size=72, stroke=8, color='var(--green-500)', track='var(--line)', children }) {
  const r=(size-stroke)/2, C=2*Math.PI*r, off=C*(1-Math.min(100,Math.max(0,pct))/100);
  return (
    <div style={{position:'relative',width:size,height:size,flex:`0 0 ${size}px`}}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={track} strokeWidth={stroke}/>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={color} strokeWidth={stroke}
          strokeLinecap="round" strokeDasharray={C} strokeDashoffset={off}
          transform={`rotate(-90 ${size/2} ${size/2})`}/>
      </svg>
      <div style={{position:'absolute',inset:0,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',lineHeight:1}}>
        {children!=null ? children : <span className="num" style={{fontWeight:800,fontSize:size*0.26,color:'var(--ink-900)'}}>{pct}%</span>}
      </div>
    </div>
  );
}
window.Ring = Ring;

/* ---- Rounded icon chip ---- */
function Chip({ ic, color=CMC.G, size=40, radius=12, tint }) {
  return (
    <span style={{width:size,height:size,flex:`0 0 ${size}px`,borderRadius:radius,
      background:tint||tintFor(color),color,display:'inline-flex',alignItems:'center',justifyContent:'center'}}>{ic}</span>
  );
}
window.Chip = Chip;

/* ---- Horizontal grade bar (red→amber→green) with marker ---- */
function GradeBar({ pos=0.85, height=8, showTicks=false, ticks=['0','25','50','75','100'] }) {
  return (
    <div>
      <div style={{position:'relative',height,borderRadius:999,
        background:'linear-gradient(90deg,#C35B5B 0%,#D4A95D 45%,#2E8B57 100%)'}}>
        <div style={{position:'absolute',top:'50%',left:`${pos*100}%`,transform:'translate(-50%,-50%)',
          width:height+8,height:height+8,borderRadius:999,background:'#fff',border:'2px solid var(--ink-700)'}}/>
      </div>
      {showTicks && <div className="num" style={{display:'flex',justifyContent:'space-between',marginTop:7,fontSize:11,color:'var(--ink-400)'}}>
        {ticks.map((t,i)=><span key={i}>{t}</span>)}</div>}
    </div>
  );
}
window.GradeBar = GradeBar;

/* ---- Thin labelled progress line ---- */
function Bar({ pct, color='var(--green-500)', height=7, track='var(--line)' }) {
  return <div style={{height,borderRadius:999,background:track,overflow:'hidden'}}>
    <div style={{width:Math.min(100,pct)+'%',height:'100%',borderRadius:999,background:color}}/></div>;
}
window.Bar = Bar;

/* ---- Small KPI metric card matching the V6 screens (icon top-right) ---- */
function StatCard({ label, value, valueColor='var(--ink-900)', icon, iconColor=CMC.G, delta, deltaDir='pos', deltaNote, foot, spark, right }) {
  return (
    <div className="cm-card cm-card-pad v6-stat">
      <div className="v6-stat-top">
        <div className="v6-stat-label">{label}</div>
        {icon && <Chip ic={icon} color={iconColor} size={38} radius={11}/>}
      </div>
      <div className="v6-stat-val num" style={{color:valueColor}}>{value}</div>
      {delta && <div className="v6-stat-delta num" style={{color:deltaDir==='neg'?'var(--red-500)':'var(--green-400)'}}>
        {deltaDir==='neg'?<I.ArrowDown size={13}/>:<I.ArrowUp size={13}/>}{delta}{deltaNote && <span className="v6-stat-note">{deltaNote}</span>}</div>}
      {foot && <div className="v6-stat-foot">{foot}</div>}
      {spark}
      {right}
    </div>
  );
}
window.StatCard = StatCard;

/* ---- Canonical KPI strip: ONE source of truth for metric rows ----
   Replaces the per-page KpiStrip / KpiTile / inline kpi() implementations.
   items: [{ label, value, valueColor, icon, iconColor, delta, deltaDir, deltaNote, foot, spark }]
   cols: how many across on desktop (default = items.length, capped 2..6).        */
function MetricStrip({ items = [], cols, gap = 16, minWidth = 150 }) {
  const n = Math.max(2, Math.min(6, cols || items.length || 4));
  return (
    <div style={{ display:'grid', gridTemplateColumns:`repeat(auto-fit, minmax(${minWidth}px, 1fr))`, gap, marginBottom:24 }}
         data-metric-strip data-cols={n}>
      {items.map((it, i) => <StatCard key={i} {...it} />)}
    </div>
  );
}
window.MetricStrip = MetricStrip;

})();