const KpiGrid = ({ days }) => {
  const last30 = days.slice(-30);
  const nonDefault = last30.filter(d => !d.isDefault);
  const avg = (last30.reduce((s,d)=> s + d.rating, 0) / Math.max(last30.length, 1)).toFixed(1);
  const fives = last30.filter(d => d.rating === 5).length;

  let streak = 0;
  for (let i = days.length - 1; i >= 0; i--) { if (days[i].rating >= 4) streak++; else break; }

  const prev30 = days.slice(-60, -30);
  const prevAvg = prev30.length ? (prev30.reduce((s,d)=>s+d.rating,0)/prev30.length) : 0;
  const delta = (parseFloat(avg) - prevAvg).toFixed(1);
  const spark = last30.map(d => d.rating);

  const items = [
    { label:'Средняя оценка', value: avg, sub: `за 30 дней · ${delta > 0 ? '+' : ''}${delta} к прошлому`, spark },
    { label:'Отличных дней', value: `${fives}`, sub: `из ${last30.length} · ${Math.round(fives/Math.max(last30.length,1)*100)}%` },
    { label:'Серия 4★+', value: `${streak}`, sub: streak > 0 ? `дней подряд` : 'прервалась' },
    { label:'Отмечено лично', value: `${nonDefault.length}`, sub: `из ${last30.length} дней · ${last30.length-nonDefault.length} по умолч.` },
  ];

  return (
    <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(200px, 1fr))', gap: 12 }}>
      {items.map((it, i) => (
        <Card key={i} style={{ padding: 16 }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom: 10 }}>
            <div className="mono" style={{ fontSize: 10, color:'var(--fg-subtle)', letterSpacing:'.08em', textTransform:'uppercase' }}>{it.label}</div>
            {it.spark && <Sparkline values={it.spark} w={60} h={22}/>}
          </div>
          <div style={{ fontSize: 30, fontWeight: 600, letterSpacing:'-.02em', lineHeight: 1 }}>{it.value}</div>
          <div style={{ fontSize: 12, color:'var(--fg-muted)', marginTop: 6 }}>{it.sub}</div>
        </Card>
      ))}
    </div>
  );
};

Object.assign(window, { KpiGrid });