const ParentAnalytics = ({ readOnly = false }) => {
  const { children, selectedChildId } = useSession();
  const { days } = useRatings();
  const child = children.find(c => c.id === selectedChildId) || children[0] || null;

  if (!child) {
    return <Card><div style={{ padding: 20, color:'var(--fg-muted)' }}>Нет ребёнка для отображения.</div></Card>;
  }

  const last30 = days.slice(-30);
  const dist = [1,2,3,4,5].map(r => ({
    label: `${r}★`, value: last30.filter(d => d.rating === r).length,
    color: `var(--level-${r})`
  }));

  const wdNames = ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'];
  const byWd = wdNames.map((n, i) => {
    const sub = days.slice(-90).filter(d => new Date(d.date).getDay() === i);
    const avg = sub.length ? sub.reduce((s,d)=>s+d.rating,0)/sub.length : 0;
    return { label: n, value: parseFloat(avg.toFixed(1)), color: i===0 || i===6 ? 'var(--good-2)' : 'var(--accent)' };
  });
  const byWdMon = [...byWd.slice(1), byWd[0]];

  const allText = days.filter(d=>d.comment).map(d=>d.comment).join(' ').toLowerCase();
  const keywordSeeds = [
    { word:'домашк', tone:'bad' }, { word:'помог', tone:'good' }, { word:'истерик', tone:'bad' },
    { word:'спокойн', tone:'good' }, { word:'груб', tone:'bad' }, { word:'прочита', tone:'good' },
    { word:'прибра', tone:'good' }, { word:'поссор', tone:'bad' },
  ];
  const keywords = keywordSeeds
    .map(k => ({ ...k, count: (allText.match(new RegExp(k.word, 'g')) || []).length }))
    .filter(k => k.count > 0)
    .sort((a,b) => b.count - a.count);

  const weeks = [];
  for (let i = days.length - 84; i < days.length; i += 7) {
    if (i < 0) continue;
    const slice = days.slice(i, i+7);
    if (!slice.length) continue;
    weeks.push({ v: slice.reduce((s,d)=>s+d.rating,0)/slice.length, label: fmtDate(slice[0].date) });
  }

  return (
    <div style={{ display:'flex', flexDirection:'column', gap: 20 }}>
      <header>
        <div className="mono" style={{ fontSize: 11, color:'var(--fg-subtle)', letterSpacing:'.08em', textTransform:'uppercase', marginBottom: 6 }}>АНАЛИТИКА</div>
        <h1 style={{ margin: 0, fontSize: 28, fontWeight: 600, letterSpacing:'-.02em' }}>
          {readOnly ? 'Что происходит с тобой' : `Что происходит с ${child.name}`}
        </h1>
        <p style={{ color:'var(--fg-muted)', fontSize: 14, margin: '6px 0 0', maxWidth: 580 }}>
          Закономерности за последние 90 дней. Выходные часто лучше будней — это нормально.
        </p>
      </header>

      <KpiGrid days={days}/>

      <div className="analytics-grid" style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 20 }}>
        <style>{`@media (max-width: 900px){ .analytics-grid { grid-template-columns: 1fr !important; } }`}</style>
        <Card>
          <SectionTitle eyebrow="ЗА 30 ДНЕЙ" title="Распределение оценок"/>
          <BarChart data={dist}/>
        </Card>
        <Card>
          <SectionTitle eyebrow="ЗА 90 ДНЕЙ" title="Среднее по дням недели"/>
          <BarChart data={byWdMon}/>
        </Card>
      </div>

      <Card>
        <SectionTitle eyebrow="ДИНАМИКА" title="Среднее по неделям (12 недель)"/>
        <TrendChart points={weeks}/>
      </Card>

      <div className="kw-grid" style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr', gap: 20 }}>
        <style>{`@media (max-width: 900px){ .kw-grid { grid-template-columns: 1fr !important; } }`}</style>
        <Card>
          <SectionTitle eyebrow="ЧАСТЫЕ ТЕМЫ" title="Что чаще всего упоминается"/>
          {keywords.length === 0 ? (
            <div style={{ color:'var(--fg-subtle)', fontSize: 13, padding:'10px 0' }}>Пока мало данных.</div>
          ) : (
            <div style={{ display:'flex', flexWrap:'wrap', gap: 8 }}>
              {keywords.map(k => (
                <div key={k.word} style={{
                  display:'inline-flex', alignItems:'center', gap: 8,
                  padding:'8px 12px', borderRadius: 999,
                  background: k.tone === 'good' ? 'var(--good-1)' : 'var(--accent-soft)',
                  color: k.tone === 'good' ? '#4A6E33' : 'var(--accent-hover)',
                  fontSize: 13
                }}>
                  <span style={{ fontWeight: 500 }}>{k.word}…</span>
                  <span className="mono" style={{ fontSize: 11, opacity: .7 }}>{k.count}</span>
                </div>
              ))}
            </div>
          )}
          <div style={{ fontSize: 12, color:'var(--fg-subtle)', marginTop: 14, lineHeight: 1.5 }}>
            Зелёные — позитивные темы, тёплые — требуют внимания.
          </div>
        </Card>
        <Card>
          <SectionTitle eyebrow="ПОДСКАЗКА" title="Инсайт недели"/>
          <div style={{
            padding: 16, borderRadius: 12, background: 'linear-gradient(135deg, var(--accent-soft), #FDF5F0)',
            border: '1px solid rgba(224,93,60,.15)'
          }}>
            <div style={{ display:'flex', alignItems:'center', gap: 8, marginBottom: 10, color:'var(--accent-hover)' }}>
              <IconSparkle size={16}/> <span className="mono" style={{ fontSize: 11, letterSpacing:'.08em', textTransform:'uppercase' }}>АВТО-НАБЛЮДЕНИЕ</span>
            </div>
            <div style={{ fontSize: 15, lineHeight: 1.5, color:'var(--fg)' }}>
              По средам оценки в среднем на <b>0.8★ ниже</b>, чем в другие будни. Возможно, стоит поговорить о расписании в середине недели.
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
};

Object.assign(window, { ParentAnalytics });