const ChildComments = () => {
  const { parents } = useSession();
  const { days } = useRatings();
  const [filter, setFilter] = React.useState('all');
  const [author, setAuthor] = React.useState('all');

  const comments = days.filter(d => d.comment).reverse();
  const filtered = comments.filter(c => {
    if (filter === 'good' && c.rating < 4) return false;
    if (filter === 'bad' && c.rating >= 4) return false;
    if (author !== 'all' && c.authorId !== author) return false;
    return true;
  });

  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' }}>Что пишут родители</h1>
        <p style={{ color:'var(--fg-muted)', fontSize: 14, margin:'6px 0 0' }}>
          Все заметки — чтобы ты видел, что сделал классно, а что можно улучшить.
        </p>
      </header>

      <Card padded={false}>
        <div style={{ display:'flex', gap: 8, padding: 14, borderBottom:'1px solid var(--border)', flexWrap:'wrap', alignItems:'center' }}>
          <IconFilter size={14}/>
          {[
            { id:'all', label:'Все' }, { id:'good', label:'Похвала' }, { id:'bad', label:'Замечания' },
          ].map(f => (
            <button key={f.id} onClick={()=> setFilter(f.id)} style={{
              padding:'5px 10px', borderRadius: 8, border:'1px solid var(--border)',
              background: filter === f.id ? 'var(--fg)' : 'var(--surface)',
              color: filter === f.id ? '#fff' : 'var(--fg-muted)',
              fontSize: 12, cursor:'pointer'
            }}>{f.label}</button>
          ))}
          <div style={{ width: 1, height: 20, background:'var(--border)', margin:'0 4px' }}/>
          <button onClick={()=> setAuthor('all')} style={{
            padding:'5px 10px', borderRadius: 8, border:'1px solid var(--border)',
            background: author === 'all' ? 'var(--fg)' : 'var(--surface)',
            color: author === 'all' ? '#fff' : 'var(--fg-muted)', fontSize: 12, cursor:'pointer'
          }}>Все авторы</button>
          {parents.map(p => (
            <button key={p.id} onClick={()=> setAuthor(p.id)} style={{
              padding:'5px 10px', borderRadius: 8, border:'1px solid var(--border)',
              background: author === p.id ? 'var(--fg)' : 'var(--surface)',
              color: author === p.id ? '#fff' : 'var(--fg-muted)', fontSize: 12, cursor:'pointer',
              display:'inline-flex', alignItems:'center', gap: 5
            }}><span style={{ fontSize: 14 }}>{p.avatar}</span> {p.name}</button>
          ))}
          <div style={{ flex: 1 }}/>
          <span className="mono" style={{ fontSize: 11, color:'var(--fg-subtle)' }}>{filtered.length} ЗАПИСЕЙ</span>
        </div>
        <div style={{ padding: 14 }}>
          {filtered.length === 0 && <div style={{ color:'var(--fg-subtle)', padding:'20px 0', textAlign:'center' }}>Ничего не найдено.</div>}
          {filtered.map((d, i) => (
            <div key={i} style={{ display:'flex', gap: 12, padding:'14px 4px', borderBottom: i < filtered.length-1 ? '1px solid var(--border)' : 'none' }}>
              <Avatar emoji={d.authorAvatar} color={d.authorColor} size={36} ring/>
              <div style={{ flex:1, minWidth: 0 }}>
                <div style={{ display:'flex', alignItems:'center', gap: 10, marginBottom: 4, flexWrap:'wrap' }}>
                  <span style={{ fontWeight: 600, fontSize: 14 }}>{d.authorName || '—'}</span>
                  <span style={{ display:'inline-flex', gap: 1 }}>
                    {Array.from({length:5}).map((_,ii)=>(
                      <IconStar key={ii} size={12} filled={ii < d.rating} style={{ color: ii < d.rating ? 'var(--star)' : 'var(--border-strong)' }}/>
                    ))}
                  </span>
                  <span className="mono" style={{ fontSize: 11, color:'var(--fg-subtle)' }}>{fmtDateFull(d.date).toUpperCase()}</span>
                </div>
                <div style={{ fontSize: 15, lineHeight: 1.5, color:'var(--fg)' }}>{d.comment}</div>
              </div>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
};

Object.assign(window, { ChildComments });