const ChildHome = () => {
  const { user } = useSession();
  const { days } = useRatings();

  const today = todayISO();
  const todayDay = days.find(d => d.date === today) || { date: today, rating: 5, isDefault: true, comment: null };
  const last7 = days.slice(-7);
  const avg7 = last7.length ? (last7.reduce((s,d)=>s+d.rating,0)/last7.length).toFixed(1) : '5.0';
  let streak = 0;
  for (let i = days.length - 1; i >= 0; i--) { if (days[i].rating >= 4) streak++; else break; }
  const last30 = days.slice(-30);
  const fives = last30.filter(d => d.rating === 5).length;

  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: 24 }}>
      <Card style={{
        padding: 28, background: 'linear-gradient(135deg, #FDF5F0 0%, #F4E7DB 100%)',
        border: '1px solid rgba(224,93,60,.15)'
      }}>
        <div style={{ display:'flex', alignItems:'center', gap: 20, flexWrap:'wrap' }}>
          <div style={{
            width: 96, height: 96, borderRadius: 28,
            background: 'var(--surface)', border:'1px solid var(--border)',
            display:'grid', placeItems:'center', fontSize: 48, boxShadow:'var(--shadow-md)',
            position:'relative'
          }}>
            {user?.avatar || '🐻'}
            {streak > 0 && (
              <div style={{
                position:'absolute', bottom:-6, right:-6, background:'var(--accent)', color:'#fff',
                padding:'4px 10px', borderRadius: 999, fontSize: 12, fontWeight: 600, boxShadow:'var(--shadow-sm)'
              }}>{streak}🔥</div>
            )}
          </div>
          <div style={{ flex: 1, minWidth: 240 }}>
            <div className="mono" style={{ fontSize: 11, color:'var(--accent-hover)', letterSpacing:'.08em', textTransform:'uppercase', marginBottom: 6 }}>
              ПРИВЕТ, {user?.name?.toUpperCase()}!
            </div>
            <h1 style={{ margin:'0 0 8px', fontSize: 28, fontWeight: 600, letterSpacing:'-.02em' }}>
              {streak === 0
                ? 'Сегодня новый день — начни серию'
                : `У тебя серия из ${streak} ${streak === 1 ? 'отличного дня' : 'отличных дней'} подряд`}
            </h1>
            <p style={{ margin: 0, color:'var(--fg-muted)', fontSize: 15, lineHeight: 1.5 }}>
              {fives > 0 ? `За 30 дней ты получил${user?.age && user.age < 10 ? 'а' : ''} ${fives} пятёрок — это здорово.` : 'Пока нет пятёрок в этом месяце, но всё впереди!'}
            </p>
          </div>
        </div>
      </Card>

      <Card>
        <div className="mono" style={{ fontSize: 11, color:'var(--fg-subtle)', letterSpacing:'.08em', textTransform:'uppercase', marginBottom: 8 }}>
          СЕГОДНЯ · {fmtDateFull(today).toUpperCase()}
        </div>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap: 16, flexWrap:'wrap' }}>
          <div>
            <StarRating value={todayDay.rating} readOnly size={34}/>
            <div style={{ fontSize: 13, color:'var(--fg-muted)', marginTop: 8 }}>
              {todayDay.isDefault
                ? 'Родители пока не поставили оценку — день засчитывается как 5★.'
                : `Оценка дня: ${todayDay.rating}/5`}
            </div>
          </div>
          {todayDay.comment && (
            <div style={{ maxWidth: 340, padding: 14, background:'var(--surface-2)', borderRadius: 12, borderLeft:'3px solid var(--accent)' }}>
              <div style={{ fontSize: 14, lineHeight: 1.5 }}>{todayDay.comment}</div>
              {todayDay.authorName && (
                <div style={{ display:'flex', alignItems:'center', gap: 6, fontSize: 12, color:'var(--fg-muted)', marginTop: 8 }}>
                  <Avatar emoji={todayDay.authorAvatar} color={todayDay.authorColor} size={20}/> {todayDay.authorName}
                </div>
              )}
            </div>
          )}
        </div>
      </Card>

      <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(180px, 1fr))', gap: 12 }}>
        {[
          { label:'Средняя за неделю', value: avg7, sub:'из 5 возможных' },
          { label:'Пятёрок в месяце', value: fives, sub:`из ${last30.length} дней` },
          { label:'Серия 4★ и выше', value: streak, sub:'дней подряд' },
        ].map((it, i) => (
          <Card key={i} style={{ padding: 16 }}>
            <div className="mono" style={{ fontSize: 10, color:'var(--fg-subtle)', letterSpacing:'.08em', textTransform:'uppercase' }}>{it.label}</div>
            <div style={{ fontSize: 30, fontWeight: 600, letterSpacing:'-.02em', lineHeight: 1, marginTop: 8 }}>{it.value}</div>
            <div style={{ fontSize: 12, color:'var(--fg-muted)', marginTop: 6 }}>{it.sub}</div>
          </Card>
        ))}
      </div>

      <Card>
        <SectionTitle eyebrow="ПОСЛЕДНИЕ 6 МЕСЯЦЕВ" title="Твой календарь дней"/>
        <Heatmap days={days}/>
      </Card>

      <Card>
        <SectionTitle eyebrow="КАК МЕНЯЛОСЬ" title="Твой прогресс по неделям"/>
        <TrendChart points={weeks}/>
      </Card>
    </div>
  );
};

Object.assign(window, { ChildHome });