// month.jsx — неделя 3, блоки главной и профиля:
//   MonthSummary — «Итоги месяца» (CJM 3.1): за прошлый календарный месяц по МСК — материалы, эфиры,
//                  записи, кейсы, баллы и место в рейтинге месяца. На главной — первые 7 дней нового
//                  месяца, карточку можно скрыть; в профиле — всегда, с листанием месяцев.
//                  Правка 05.10.2026: пока у участника нет ни одного прошлого месяца с баллами,
//                  на главной вместо итогов — велкам (текст из «Команда» → «Тексты»), скрывается крестиком.
//   People       — «С кем пообщаться» (онбординг 2.5): до 3 участников по цели, сфере, городу;
//                  «Показать других» — следующая тройка. В профиле — переключатель показа себя.
// Считает и подбирает сервер (/api/summary, /api/people), здесь только рисуем.

const sumNoun = { materials: ['материал', 'материала', 'материалов'], events: ['эфир', 'эфира', 'эфиров'],
  recordings: ['запись', 'записи', 'записей'], cases: ['кейс', 'кейса', 'кейсов'] };
// глагол согласуем с числом: 1 материал дочитан, 2 материала дочитано
const SUM_TILES = [['materials', 'дочитан', 'дочитано'], ['events', 'посещён', 'посещено'], ['recordings', 'просмотрена', 'просмотрено'], ['cases', 'опубликован', 'опубликовано']];
const verbOf = (n, one, many) => (Math.abs(n) % 10 === 1 && Math.abs(n) % 100 !== 11 ? one : many);

function SummaryBody({ s, nav }) {
  const mon = MONTH_PREP[monthIdx(s.period)];
  if (s.empty) return (
    <div className="cm-sum-empty">
      <p>В {mon} ты только присматривался к сообществу, и это нормально. Начни с одного материала по цели или приходи на ближайший эфир: в следующих итогах будет что посчитать.</p>
      <div className="cm-row-btns">
        <button type="button" className="os-btn sm" onClick={() => nav('kb')}>Открыть базу знаний</button>
        <button type="button" className="os-btn ghost sm" onClick={() => nav('schedule')}>Расписание</button>
      </div>
    </div>
  );
  const place = s.team ? 'Команда вне рейтинга' : s.place ? <><b>{s.place}</b> место из {s.ranked} в рейтинге {MONTH_GEN[monthIdx(s.period)]}</> : null;
  return (
    <>
      <div className="cm-sum-big">
        <span><b>{fmtNum(s.stats.points)}</b> {ballov(s.stats.points)} за {MONTH_NOM[monthIdx(s.period)]}</span>
        {place && <button type="button" className="cm-chip" onClick={() => nav('leaders')}>{Icons.trophy()} {place}</button>}
      </div>
      <div className="cm-sum-tiles">
        {SUM_TILES.map(([k, one, many]) => (
          <div key={k} className={`cm-sum-tile${s.stats[k] ? '' : ' zero'}`}>
            <b>{s.stats[k]}</b>
            <span>{plural(s.stats[k], ...sumNoun[k])} {verbOf(s.stats[k], one, many)}</span>
          </div>
        ))}
      </div>
      {s.stats.hosted > 0 && <p className="cm-fine" style={{ marginTop: 10 }}>И ещё {s.stats.hosted} {plural(s.stats.hosted, 'эфир', 'эфира', 'эфиров')} ты провёл сам. Спасибо!</p>}
    </>
  );
}

// Велкам новичку: материал по цели (первый недочитанный из рекомендаций) и ближайший эфир
function WelcomeCard({ w, nav, rec, onHide }) {
  const next = (rec || []).find(r => !r.locked && !r.done) || (rec || []).find(r => !r.locked) || null;
  const ev = w.event;
  return (
    <section className="os-card cm-sum cm-welcome" aria-label={w.title}>
      <div className="cm-sum-h">
        <h2 className="cm-welcome-h">{w.title}</h2>
        <button type="button" className="cm-iconbtn" aria-label="Скрыть" title="Скрыть" onClick={onHide}>{Icons.x()}</button>
      </div>
      <p className="cm-welcome-t">{w.text}</p>
      <div className="cm-row-btns">
        <button type="button" className="os-btn sm" onClick={() => next ? nav('kb', { m: next.slug }) : nav('kb')}>{w.material_button}</button>
        <button type="button" className="os-btn ghost sm" onClick={() => nav('schedule', ev ? { id: ev.id } : {})}>
          {ev ? `${w.event_button} · ${fmtDay(ev.date)}` : w.schedule_button}
        </button>
      </div>
    </section>
  );
}

// home — карточка на главной (сама решает, показываться ли); иначе — блок профиля с листанием
function MonthSummary({ nav, home = false, rec = null }) {
  const [period, setPeriod] = React.useState(null);
  const [s] = useApi('/api/summary' + (period ? '?period=' + period : ''));
  const [gone, setGone] = React.useState(false);
  if (!s || gone) return null;
  if (home && s.welcome) return <WelcomeCard w={s.welcome} nav={nav} rec={rec}
    onHide={() => { setGone(true); postJSON('/api/summary/welcome/hide'); }}/>;
  if (home && !s.home) return null;
  const mon = MONTH_NOM[monthIdx(s.period)];
  const hide = () => { setGone(true); postJSON('/api/summary/hide', { period: s.period }); toast('Итоги скрыты. Они всегда есть в профиле', { label: 'Профиль', onClick: () => nav('profile') }); };
  const i = s.periods.indexOf(s.period);
  const prev = i > 0 ? s.periods[i - 1] : null, next = i >= 0 && i < s.periods.length - 1 ? s.periods[i + 1] : null;
  if (home) return (
    <section className="os-card cm-sum" aria-label={`Итоги: ${mon}`}>
      <div className="cm-sum-h">
        <span className="os-eyebrow">Итоги месяца · {mon}</span>
        <button type="button" className="cm-iconbtn" aria-label="Скрыть итоги" title="Скрыть" onClick={hide}>{Icons.x()}</button>
      </div>
      <SummaryBody s={s} nav={nav}/>
    </section>
  );
  return (
    <div className="os-card" style={{ padding: 22 }} id="summary">
      <div className="cm-h2row" style={{ marginBottom: 12 }}>
        <h2 className="os-h2" style={{ fontSize: 20 }}>Итоги месяца</h2>
        <div className="cm-sum-nav">
          <button type="button" className="cm-iconbtn" disabled={!prev} aria-label="Предыдущий месяц" onClick={() => setPeriod(prev)}>{Icons.back()}</button>
          <span>{mon} {s.period.slice(0, 4)}</span>
          <button type="button" className="cm-iconbtn" disabled={!next} aria-label="Следующий месяц" onClick={() => setPeriod(next)}>{Icons.chev()}</button>
        </div>
      </div>
      <SummaryBody s={s} nav={nav}/>
    </div>
  );
}

/* ---- «С кем пообщаться» ------------------------------------------------- */
const MATCH_LABEL = { goal: 'та же цель', sphere: 'та же сфера', city: 'тот же город' };
function PersonCard({ p }) {
  return (
    <div className="os-card cm-person">
      <div className="cm-person-h">
        <Avatar name={p.name} initials={p.initials} url={p.avatar_url} size={42}/>
        <div style={{ minWidth: 0 }}>
          <div className="cm-person-n">{p.name}</div>
          <div className="cm-person-s">{[p.sphere, p.city].filter(Boolean).join(' · ')}</div>
        </div>
      </div>
      <div className="cm-person-m">{p.match.map(k => <span key={k} className="cm-tag">{MATCH_LABEL[k]}</span>)}</div>
      {p.goal && <div className="cm-person-g">Цель: {p.goal}</div>}
      {p.about ? <p className="cm-person-a">{p.about}</p> : <p className="cm-person-a muted">Пока ничего не рассказал о себе.</p>}
      {p.telegram_url
        ? <a className="os-btn ghost sm" href={p.telegram_url} target="_blank" rel="noopener noreferrer" onClick={() => track('people:tg')}>{Icons.send()} Написать в Telegram</a>
        : <span className="cm-fine">Telegram не указан. Найди в общем чате сообщества.</span>}
    </div>
  );
}

function People({ nav, profile = false }) {
  const [page, setPage] = React.useState(0);
  const [d, reload] = useApi('/api/people?page=' + page);
  const [vis, setVis] = React.useState(null);
  React.useEffect(() => { if (d) setVis(d.visible); }, [d]);
  if (!d) return null;
  if (!profile && (!d.has_profile || !d.people.length)) return null;
  const toggle = async (v) => {
    setVis(v);
    const r = await putJSON('/api/prefs/match', { visible: v });
    if (!r.ok) setVis(!v); else toast(v ? 'Тебя снова видно в рекомендациях' : 'Тебя больше не показываем в рекомендациях');
  };
  const more = d.pages > 1 && (
    <button type="button" className="cm-more cm-linkbtn" onClick={() => setPage(p => p + 1)}>Показать других →</button>
  );
  const grid = d.people.length
    ? <div className="cm-pgrid">{d.people.map(p => <PersonCard key={p.id} p={p}/>)}</div>
    : <div className="cm-soon">{d.has_profile ? 'Пока не нашли участников с похожей целью, сферой или городом. Загляни через неделю.' : 'Заполни анкету: по цели, сфере и городу подберём, с кем пообщаться.'}</div>;
  if (!profile) return (
    <section>
      <div className="cm-h2row"><h2 className="os-h2">С кем пообщаться</h2>{more}</div>
      <p className="cm-fine" style={{ margin: '-6px 0 12px' }}>Участники с похожей целью, сферой или из твоего города. Подборка обновляется по понедельникам.</p>
      {grid}
    </section>
  );
  return (
    <div className="os-card" style={{ padding: 22 }} id="people">
      <div className="cm-h2row" style={{ marginBottom: 12 }}><h2 className="os-h2" style={{ fontSize: 20 }}>С кем пообщаться</h2>{more}</div>
      <label className="cm-check" style={{ marginBottom: 14 }}>
        <input type="checkbox" checked={!!vis} disabled={vis === null} onChange={e => toggle(e.target.checked)}/>
        <span><b>Показывать меня в рекомендациях участникам</b><small>Видны имя, сфера, город, «о себе» и кнопка Telegram. Почту не показываем никому.</small></span>
      </label>
      {grid}
    </div>
  );
}

Object.assign(window, { MonthSummary, People });