/* Reusable KPI card. Renders label, formatted value, sparkline, two delta lines (MoM/YoY), and source. */
function KPI({ label, value, mom, yoy, sparkline, source, format = 'number', lowerIsBetter = false, deltaMode = 'percent' }) {
  const formatValue = (v) => {
    if (v === null || v === undefined) return '—';
    if (format === 'currency') return '$' + Math.round(v).toLocaleString();
    if (format === 'percent') return v.toFixed(1) + '%';
    if (format === 'decimal') return v.toFixed(1);
    if (typeof v === 'number' && v >= 10000) return (v / 1000).toFixed(1) + 'k';
    return Math.round(v).toLocaleString();
  };

  const formatDelta = (d) => {
    if (d === null || d === undefined) return null;
    const sign = d > 0 ? '+' : '';
    const suffix = deltaMode === 'percent' ? '%' : '';
    return sign + d.toFixed(1) + suffix;
  };

  // Decide if a delta is "good": positive normally, negative when lowerIsBetter, neutral when zero.
  const stateFor = (d) => {
    if (d === null || d === undefined) return null;
    if (d === 0) return 'flat';
    const good = lowerIsBetter ? d < 0 : d > 0;
    return good ? 'up' : 'down';
  };

  const renderDeltaLine = (d, periodLabel) => {
    if (d === null || d === undefined) return null;
    const cls = stateFor(d);
    const arrow = d > 0 ? 'arrowUp' : d < 0 ? 'arrowDown' : null;
    return (
      <span className={`delta-row ${cls}`}>
        {arrow && <Icon name={arrow} size={10}/>} {periodLabel} {formatDelta(d)}
      </span>
    );
  };

  return (
    <div className="kpi">
      <span className="label">{label}</span>
      <span className="value">{formatValue(value)}</span>
      <div className="delta-stack">
        {renderDeltaLine(mom, 'prev mo')}
        {renderDeltaLine(yoy, 'prev yr')}
      </div>
      {sparkline && sparkline.length > 0 && (
        <Spark values={sparkline} w={120} h={28} color="var(--gold)"/>
      )}
      {source && <span className="source">{source}</span>}
    </div>
  );
}

window.KPI = KPI;