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

  const [curDate, setCurDate] = React.useState(() => {
    const t = new Date(todayISO());
    return { y: t.getFullYear(), m: t.getMonth() };
  });
  const [selected, setSelected] = React.useState(todayISO());

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

  const sel = days.find(d => d.date === selected) || { date: selected, rating: 5, isDefault: true, comment: null };
  const monthName = ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'][curDate.m];
  const prev = () => setCurDate(cd => cd.m === 0 ? { y: cd.y-1, m: 11 } : { y: cd.y, m: cd.m-1 });
  const next = () => setCurDate(cd => cd.m === 11 ? { y: cd.y+1, m: 0 } : { y: cd.y, m: cd.m+1 });

  const monthDays = days.filter(d => {
    const dt = new Date(d.date);
    return dt.getFullYear() === curDate.y && dt.getMonth() === curDate.m;
  });
  const monthAvg = (monthDays.reduce((s,d)=>s+d.rating,0)/Math.max(monthDays.length,1)).toFixed(1);

  return (
    <div className="cal-grid" style={{ display:'grid', gridTemplateColumns:'1.5fr 1fr', gap: 20 }}>
      <style>{`@media (max-width: 900px){ .cal-grid { grid-template-columns: 1fr !important; } }`}</style>
      <Card>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 18 }}>
          <div>
            <div className="mono" style={{ fontSize: 11, color:'var(--fg-subtle)', letterSpacing:'.08em', textTransform:'uppercase', marginBottom: 4 }}>КАЛЕНДАРЬ</div>
            <h2 style={{ margin: 0, fontSize: 22, fontWeight: 600 }}>{monthName} {curDate.y}</h2>
          </div>
          <div style={{ display:'flex', gap: 6, alignItems:'center' }}>
            <Pill tone="neutral">Ср. {monthAvg}</Pill>
            <Button variant="ghost" size="sm" onClick={prev}><IconBack size={14}/></Button>
            <Button variant="ghost" size="sm" onClick={next}><IconArrow size={14}/></Button>
          </div>
        </div>
        <MonthCalendar days={days} month={curDate.m} year={curDate.y} onPick={setSelected} selectedDate={selected}/>
      </Card>

      <div style={{ display:'flex', flexDirection:'column', gap: 16 }}>
        <Card>
          <div className="mono" style={{ fontSize: 11, color:'var(--fg-subtle)', letterSpacing:'.08em', textTransform:'uppercase', marginBottom: 4 }}>
            ВЫБРАНО · {weekdayShort(selected).toUpperCase()}
          </div>
          <div style={{ fontSize: 20, fontWeight: 600, letterSpacing:'-.01em', marginBottom: 16 }}>
            {fmtDateFull(selected)}
          </div>

          <div style={{ display:'flex', alignItems:'center', gap: 12, marginBottom: 16 }}>
            <StarRating value={sel.rating} readOnly size={26} showLabel/>
            {sel.isDefault && <Pill tone="warn">ПО УМОЛЧ.</Pill>}
          </div>
          {sel.comment ? (
            <div style={{ padding: 14, background:'var(--surface-2)', borderRadius: 12, borderLeft:'3px solid var(--accent)', marginBottom: 14 }}>
              <div style={{ fontSize: 14, lineHeight: 1.5, color:'var(--fg)', marginBottom: 8 }}>{sel.comment}</div>
              {sel.authorName && (
                <div style={{ display:'flex', alignItems:'center', gap: 6, fontSize: 12, color:'var(--fg-muted)' }}>
                  <Avatar emoji={sel.authorAvatar} color={sel.authorColor} size={20}/>{sel.authorName}
                </div>
              )}
            </div>
          ) : !readOnly && (
            <div style={{ fontSize: 13, color:'var(--fg-subtle)', marginBottom: 14, padding:'8px 0' }}>
              Комментария нет.
            </div>
          )}
          {!readOnly && (
            <RatingComposer key={selected} day={sel} child={child}/>
          )}
        </Card>
      </div>
    </div>
  );
};

Object.assign(window, { ParentCalendar });