/* KPI Ribbon ======================================================== */

function KPICard({ def, value, delta, sparkData, tone, format, live }){
  const [hover, setHover] = useState(false);
  const positive = delta > 0;
  const goodIsUp = def.good === 'up';
  const deltaGood = goodIsUp ? positive : !positive;
  const deltaColor = deltaGood ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400';

  return (
    <div
      onMouseEnter={()=>setHover(true)}
      onMouseLeave={()=>setHover(false)}
      className="group relative rounded-xl border border-ink-200/80 dark:border-white/10 bg-white dark:bg-ink-900/60 shadow-card p-4 transition hover:shadow-float hover:border-ink-300/80 dark:hover:border-white/20 cursor-default overflow-hidden">
      {/* Top: label + live dot */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-1.5 text-[11px] uppercase tracking-wide text-ink-500 dark:text-ink-300 font-semibold">
          {def.label}
        </div>
        {live && <LiveDot tone={tone}/>}
      </div>
      {/* Value */}
      <div className="mt-2 flex items-end gap-2">
        <div className="text-[28px] font-semibold leading-none tracking-tight">
          <Ticker value={value} format={format}/>
        </div>
        <div className={`text-[12px] font-medium tabular flex items-center gap-0.5 mb-1 ${deltaColor}`}>
          <Icon name={positive?'arrow-up':'arrow-down'} size={12}/>
          {Math.abs(delta).toFixed(1)}%
        </div>
      </div>
      {/* Sparkline that appears on hover (slides in) */}
      <div className={`mt-3 transition-all duration-300 ${hover?'opacity-100 translate-y-0':'opacity-60 translate-y-0.5'}`}>
        <Sparkline data={sparkData} tone={tone} width={224} height={42} />
        <div className="mt-1 flex items-center justify-between text-[10px] text-ink-400 dark:text-ink-400">
          <span>24h</span>
          <span className="font-mono">{def.label.split(' ').slice(-1)[0]}</span>
        </div>
      </div>
      {/* Hover overlay accent */}
      <div className="pointer-events-none absolute -right-12 -top-12 w-32 h-32 rounded-full transition-opacity"
        style={{ background: `radial-gradient(closest-side, ${tone}26, transparent 70%)`, opacity: hover?1:0 }}/>
    </div>
  );
}

function KPIRibbon({ accountId, platformId, customCols=[], onAddCustomCol }){
  const snap = useMemo(()=>kpiSnapshot(accountId, platformId), [accountId, platformId]);


  const tone = (PLATFORMS.find(p=>p.id===platformId)||PLATFORMS[0]).tone;
  const colors = ['#8351ff', '#06b6d4', '#10b981', '#f59e0b', '#ec4899', '#3b82f6'];

  /* Real values only — no synthetic drift. */
  const liveValues = snap;

  return (
    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
      {KPI_DEFS.map((def, i) => (
        <KPICard
          key={def.id}
          def={def}
          value={liveValues[def.id]}
          delta={def.delta}
          sparkData={snap.spark[def.id]}
          tone={colors[i % colors.length]}
          format={def.format}
          live={true}
        />
      ))}
      {/* Custom column add slot */}
      <button onClick={onAddCustomCol}
        className="rounded-xl border border-dashed border-ink-300 dark:border-white/15 hover:border-accent-400 hover:bg-accent-50/40 dark:hover:bg-accent-500/5 text-ink-500 dark:text-ink-300 hover:text-accent-700 dark:hover:text-accent-200 transition flex items-center justify-center gap-2 text-[12px] font-medium">
        <Icon name="plus" size={14}/> Custom metric
      </button>
    </div>
  );
}

Object.assign(window, { KPIRibbon });