// kpi.jsx — KPI card with sparkline + delta vs previous

function KPI({ label, value, unit, delta, prev, sparkSeed = 7, sparkBase = 100, sparkData, color = '#5B5BF0', icon, format = (v) => v.toLocaleString(), formatDelta }) {
  const I = icon ? Icons[icon] : null;
  const isPos = delta >= 0;
  const goodIsUp = !['cac', 'cpc', 'cpm'].includes(label?.toLowerCase?.());
  const isGood = goodIsUp ? isPos : !isPos;
  const data = (sparkData && sparkData.length > 1)
    ? sparkData
    : SilsalData.buildSeries(sparkSeed, sparkBase, sparkBase * 0.18, 14, isPos ? 0.05 : -0.04);
  const fmtDelta = formatDelta || ((d) => `${d >= 0 ? '+' : ''}${d.toFixed(1)}%`);
  return (
    <div className="kpi">
      <div className="kpi-label">
        {I && <span className="kpi-icon" style={{ background: color + '22', color }}><I size={12}/></span>}
        {label}
      </div>
      <div className="kpi-value">
        {unit === '$' && <span className="kpi-unit">$</span>}
        {typeof value === 'number' ? format(value) : value}
        {unit && unit !== '$' && <span className="kpi-unit">{unit}</span>}
      </div>
      <div className="kpi-meta">
        <span className={`kpi-delta ${isGood ? 'pos' : 'neg'}`}>
          {isPos ? <Icons.Up size={11}/> : <Icons.Down size={11}/>}
          {fmtDelta(delta)}
        </span>
        <span className="kpi-prev">prev: {typeof prev === 'number' ? format(prev) : prev}</span>
      </div>
      <div className="kpi-spark">
        <Sparkline data={data} color={color} height={36}/>
      </div>
    </div>
  );
}

window.KPI = KPI;