const ParentHome = () => {
  const { user, 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 today = todayISO();
  const todayDay = days.find(d => d.date === today) || { date: today, rating: 5, isDefault: true, comment: null };

  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: 28 }}>
      <header>
        <div className="mono" style={{ fontSize: 11, color:'var(--fg-subtle)', letterSpacing:'.08em', textTransform:'uppercase', marginBottom: 6 }}>ДОБРЫЙ ДЕНЬ, {user?.name?.toUpperCase()}</div>
        <h1 style={{ margin: 0, fontSize: 28, fontWeight: 600, letterSpacing:'-.02em' }}>
          Как сегодня у {child.name}?
        </h1>
      </header>

      <RatingComposer day={todayDay} child={child}/>

      <div>
        <SectionTitle eyebrow="ЗА 30 ДНЕЙ" title="Обзор"/>
        <KpiGrid days={days}/>
      </div>

      <div className="home-grid" style={{ display:'grid', gridTemplateColumns:'2fr 1fr', gap: 20 }}>
        <style>{`@media (max-width: 900px){ .home-grid { grid-template-columns: 1fr !important; } }`}</style>
        <Card>
          <SectionTitle eyebrow="ПОСЛЕДНИЕ 6 МЕСЯЦЕВ" title="График дней" action={<Pill tone="neutral">GitHub-style</Pill>}/>
          <Heatmap days={days}/>
        </Card>
        <Card>
          <SectionTitle eyebrow="ТРЕНД" title="Средняя по неделям"/>
          <TrendChart points={weeks}/>
        </Card>
      </div>

      <Card>
        <SectionTitle eyebrow="ЛЕНТА" title="Последние комментарии" action={<Button variant="link" size="sm" trailing={<IconArrow size={14}/>}>Все</Button>}/>
        <ActivityFeed days={days}/>
      </Card>
    </div>
  );
};

Object.assign(window, { ParentHome });