// points.jsx — баллы, бонусы и лидеры (CJM Насти, п. 3.4–3.5; решения Саши 02.10.2026).
//   Bonuses   — экран ?view=bonuses: витрина, «Как работают баллы», «Мои бонусы», история
//   Leaders   — экран ?view=leaders: месяц / за всё время, своя плашка, Топ-10, «не показывать меня»
//   PointsChips, BonusMini, TopMini — блоки главной
// Баллы только копятся: «Получить» бонус не тратит баланс, бонус открывается по порогу,
// каждый — один раз. Рейтинг считает те же накопленные баллы. Всё решает сервер (/api/points,
// /api/bonuses, /api/leaders), здесь только рисуем.

// GET с перезагрузкой: [data | undefined, reload]
function useApi(url, deps = []) {
  const [data, setData] = React.useState(undefined);
  const [n, setN] = React.useState(0);
  React.useEffect(() => {
    if (!url) return;
    let alive = true;
    fetch(url, { credentials: 'same-origin' }).then(r => r.json()).then(j => alive && setData(j && j.ok ? j : null))
      .catch(() => alive && setData(null));
    return () => { alive = false; };
  }, [url, n, ...deps]);
  return [data, () => setN(x => x + 1)];
}
const putJSON = (url, body) => fetch(url, { method: 'PUT', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(body) }).then(r => r.json().catch(() => null).then(j => ({ ok: r.ok && j && j.ok, j }))).catch(() => ({ ok: false, j: null }));
// свежий /api/auth/me — после «Недели PRO» меняется уровень доступа
const refreshMe = () => fetch('/api/auth/me', { credentials: 'same-origin' }).then(r => r.json())
  .then(j => { if (j && j.ok) { window.__ME = j; setPoints(j.points); } }).catch(() => {});

const MONTH_NOM = ['январь', 'февраль', 'март', 'апрель', 'май', 'июнь', 'июль', 'август', 'сентябрь', 'октябрь', 'ноябрь', 'декабрь'];
const MONTH_GEN = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря'];
const MONTH_PREP = ['январе', 'феврале', 'марте', 'апреле', 'мае', 'июне', 'июле', 'августе', 'сентябре', 'октябре', 'ноябре', 'декабре'];
const monthIdx = (period) => Number(String(period || '').slice(5, 7)) - 1;
const curPeriod = () => new Date(Date.now() + 3 * 3600000).toISOString().slice(0, 7);
const ballov = (n) => plural(n, 'балл', 'балла', 'баллов');
const fmtShortDay = (iso) => new Date(iso).toLocaleDateString('ru-RU', { day: 'numeric', month: 'short', timeZone: 'Europe/Moscow' }).replace('.', '');
const fmtUntil = (iso) => new Date(iso).toLocaleDateString('ru-RU', { day: 'numeric', month: 'long', timeZone: 'Europe/Moscow' });

/* ---- чипы приветствия: баллы и место ------------------------------ */
function PointsChips({ leaders, nav }) {
  const total = usePointsTotal();
  const me = leaders && leaders.me;
  const month = MONTH_PREP[monthIdx(leaders ? leaders.period : curPeriod())];
  let place;
  if (!leaders) place = null;
  else if (me && me.team) place = 'Команда вне рейтинга';
  else if (me && me.place) place = <><b>{me.place}</b> место в {month}</>;
  else place = 'Рейтинг: пока без места';
  return (
    <div className="cm-chips-row">
      <button type="button" className="cm-chip" onClick={() => nav('bonuses')}><span className="cm-dot"/> <b>{fmtNum(total)}</b> {ballov(total)}</button>
      {place && <button type="button" className="cm-chip" onClick={() => nav('leaders')}>{Icons.trophy()} {place}</button>}
    </div>
  );
}

/* ---- получение бонуса --------------------------------------------- */
function useClaim(onDone) {
  const [b, setB] = React.useState(null);
  const modal = b ? <ClaimModal b={b} onClose={() => setB(null)} onDone={(res) => { setB(null); onDone && onDone(res); }}/> : null;
  return [setB, modal];
}
function ClaimModal({ b, onClose, onDone }) {
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState('');
  const total = getPoints();
  React.useEffect(() => {
    const k = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', k);
    return () => document.removeEventListener('keydown', k);
  }, []);
  const go = async () => {
    setBusy(true); setErr('');
    const r = await postJSON(`/api/bonuses/${encodeURIComponent(b.id)}/claim`);
    setBusy(false);
    if (!r.ok) {
      const e = r.j && r.j.error;
      return setErr(e === 'soldout' ? 'Этот подарок только что закончился.' : e === 'already' ? 'Ты уже получил этот бонус.'
        : e === 'not_enough' ? `Не хватает ${r.j.need} ${ballov(r.j.need)}.` : 'Не получилось, попробуй ещё раз.');
    }
    if (b.type === 'pro_week') await refreshMe();
    const until = r.j.bonus.expires_at ? ` до ${fmtUntil(r.j.bonus.expires_at)}` : '';
    toast(`«${b.title}» твой${until}`, { label: 'Мои подарки', onClick: () => window.__NAV && window.__NAV('bonuses', { tab: 'mine' }) });
    onDone(r.j.bonus);
  };
  return (
    <div className="cm-modal-bg" onClick={onClose}>
      <div className="cm-modal" role="dialog" aria-modal="true" aria-labelledby="claim-h" onClick={e => e.stopPropagation()}>
        <div className="cm-modal-h">
          <h3 id="claim-h">Забрать подарок?</h3>
          <button type="button" className="cm-iconbtn" aria-label="Закрыть" onClick={onClose}>{Icons.x()}</button>
        </div>
        <div className="cm-modal-b">
          <div className="cm-modal-t">{b.title}</div>
          <p>{b.gives}{b.type === 'pro_week' ? ' Неделя начнётся сразу.' : b.type === 'manual' ? ' Команда свяжется с тобой сама.' : ''}</p>
          <div className="cm-modal-sum"><span>Баллов останется</span><b>{fmtNum(total)}</b></div>
          <p className="cm-fine">Баллы не тратятся: подарок открылся, потому что ты набрал {fmtNum(b.threshold)}. Место в рейтинге не изменится.</p>
          {err && <div className="os-login-err show" role="alert">{err}</div>}
        </div>
        <div className="cm-modal-f">
          <button type="button" className="os-btn ghost sm" onClick={onClose}>Отмена</button>
          <button type="button" className="os-btn sm" disabled={busy} onClick={go}>{busy ? 'Получаем…' : 'Получить'}</button>
        </div>
      </div>
    </div>
  );
}

const STATE_BADGE = { available: ['Доступно', 'green'], claimed: ['Получено', 'ink'], soldout: ['Закончились', ''], included: ['В тарифе', 'mag'] };
function Bar({ value, max }) {
  const p = Math.max(0, Math.min(100, max ? (value / max) * 100 : 0));
  return <div className="cm-bar" role="progressbar" aria-valuenow={Math.round(p)} aria-valuemin="0" aria-valuemax="100"><span style={{ width: p + '%' }}/></div>;
}
const leftText2 = (b) => b.left == null ? 'Без ограничений' : b.limit != null ? `Осталось ${b.left} из ${b.limit}` : `Осталось ${b.left}`;

function BonusCard({ b, total, onClaim, onHow }) {
  const badge = STATE_BADGE[b.state];
  return (
    <div className={`cm-bcard s-${b.state}`}>
      <div className="cm-bcard-h">
        <span className="cm-bicon">{(Icons[b.icon] || Icons.gift)()}</span>
        {badge && <span className={`os-badge ${badge[1]}`}>{badge[0]}</span>}
      </div>
      <div className="cm-bcard-t">{b.title}</div>
      <p className="cm-bcard-d">{b.gives}</p>
      <div className="cm-bcard-p"><span><b>{fmtNum(b.threshold)}</b> {ballov(b.threshold)}</span><span className="cm-bcard-left">{leftText2(b)}</span></div>
      {b.state === 'available' && <button type="button" className="os-btn tg sm block" onClick={() => onClaim(b)}>Получить</button>}
      {b.state === 'locked' && (
        <div className="cm-bcard-need">
          <div className="cm-bcard-need-r"><span>Ещё <b>{fmtNum(b.need)}</b> {ballov(b.need)}</span><span>{fmtNum(total)} / {fmtNum(b.threshold)}</span></div>
          <Bar value={total} max={b.threshold}/>
        </div>
      )}
      {b.state === 'claimed' && <div className="cm-bcard-foot">Получено · <button type="button" className="cm-linkbtn" onClick={onHow}>Как использовать</button></div>}
      {b.state === 'soldout' && <div className="cm-bcard-foot muted">Закончились. Новые добавим в начале месяца.</div>}
      {b.state === 'included' && <div className="cm-bcard-foot muted">Уже входит в твой тариф PRO.</div>}
    </div>
  );
}

/* ---- превью витрины на главной ------------------------------------ */
function BonusMini({ data, nav, onClaimed }) {
  const total = usePointsTotal();
  const [claim, modal] = useClaim(onClaimed);
  if (!data) return null;
  const items = data.items.slice(0, 3);
  return (
    <div className="os-card cm-bmini">
      <div className="cm-bmini-big"><b>{fmtNum(total)}</b> <span>{ballov(total)}</span></div>
      {total > 0
        ? <div className="cm-bmini-d">Доступно сейчас: <b>{data.available} из {data.count}</b></div>
        : <div className="cm-bmini-d">Первые баллы дают дочитанный материал (+5–15) и эфир (+{(CFG().points || {}).attend || 50}).</div>}
      <div className="cm-bmini-list">
        {items.map(b => (
          <div key={b.id} className="cm-bmini-row">
            <span className="cm-bicon sm">{(Icons[b.icon] || Icons.gift)()}</span>
            <div className="cm-bmini-main">
              <div className="cm-bmini-t">{b.title}</div>
              {b.state === 'locked' && <><Bar value={total} max={b.threshold}/><div className="cm-bmini-s">Ещё {fmtNum(b.need)} {ballov(b.need)}</div></>}
              {b.state === 'claimed' && <div className="cm-bmini-s">Получено</div>}
              {b.state === 'soldout' && <div className="cm-bmini-s">Закончились</div>}
              {b.state === 'included' && <div className="cm-bmini-s">В твоём тарифе</div>}
              {b.state === 'available' && <div className="cm-bmini-s">{fmtNum(b.threshold)} {ballov(b.threshold)}</div>}
            </div>
            {b.state === 'available' && <button type="button" className="os-btn tg sm" onClick={() => claim(b)}>Получить</button>}
          </div>
        ))}
      </div>
      <button type="button" className="os-btn ghost sm block" onClick={() => nav('bonuses')}>Все подарки →</button>
      {modal}
    </div>
  );
}

/* ---- строки рейтинга ------------------------------------------------ */
function LeaderRow({ r, wide = false, period }) {
  return (
    <div className={`cm-lrow${r.me ? ' me' : ''}`}>
      <span className={`cm-lplace${wide && r.place <= 3 ? ' top t' + r.place : ''}`}>{r.place}</span>
      <Avatar name={r.name} initials={r.initials} url={r.avatar_url} size={wide ? 34 : 26} me={r.me}/>
      <span className="cm-lname">
        <span className="cm-lname-t">{r.me ? (wide ? `Ты · ${r.name}` : 'Ты') : r.name}</span>
        {wide && r.sphere && <span className="cm-lsphere-m">{r.sphere}</span>}
      </span>
      {wide && <span className="cm-lsphere">{r.sphere}</span>}
      <span className="cm-lpts">{fmtNum(r.points)}</span>
    </div>
  );
}
function meLine(me, period) {
  if (!me) return '';
  if (me.team) return 'Команда и основатели в рейтинг не входят.';
  if (me.hidden && me.place) return 'Ты скрыт из рейтинга, место видно только тебе.';
  if (!me.place) return 'Тебя пока нет в рейтинге. Первые баллы, и появится твоё место.';
  if (me.place === 1) return 'Ты на первом месте. Так держать.';
  return `Ещё ${fmtNum(me.need)} ${ballov(me.need)}, и ты на ${me.next_place}-м`;
}

/* ---- Топ-5 месяца на главной ----------------------------------------- */
function TopMini({ data, nav, n = 5 }) {
  if (!data) return null;
  const top = data.top.slice(0, n);
  const meIn = top.some(r => r.me);
  const meRow = !meIn && data.me && data.me.place ? { place: data.me.place, points: data.me.points, me: true, name: ME().user.name, initials: null } : null;
  return (
    <div className="os-card cm-topmini">
      {top.length ? top.map(r => <LeaderRow key={r.place} r={r}/>) : <div className="cm-fine" style={{ padding: '4px 0 8px' }}>Месяц только начался: первые баллы ещё впереди.</div>}
      {meRow && <><div className="cm-ldots">· · ·</div><LeaderRow r={meRow}/></>}
      <div className={`cm-topmini-f${data.me && !data.me.place ? ' box' : ''}`}>{meLine(data.me)}</div>
    </div>
  );
}

/* ---- экран «Подарки» (баллы и витрина) ---------------------------------------------------- */
function PointsRules({ rules }) {
  if (!rules) return null;
  const pts = (r) => r.levels ? `+${r.levels.join(' / ')}` : `+${r.points}`;
  return (
    <div className="os-card cm-rules">
      <div className="cm-rules-row head"><span>За что</span><span>Условие</span><span>Баллы</span></div>
      {rules.map(r => (
        <div key={r.action} className="cm-rules-row"><b>{r.label}</b><span>{r.rule}</span><span className="cm-rules-p">{pts(r)}</span></div>
      ))}
    </div>
  );
}
// Пояснение под таблицей (правка Насти 05.10.2026): текст и строка про сгорание — из data/points.json
function PointsNote({ pts }) {
  if (!pts) return null;
  return (
    <div className="cm-rules-note">
      {pts.note && <p className="cm-fine">{pts.note}</p>}
      {pts.expire_note && <p className="cm-fine">{pts.expire_note}</p>}
    </div>
  );
}
function History({ list }) {
  if (!list || !list.length) return (
    <div className="cm-empty-box"><div className="cm-empty-h">История пустая</div>
      <p>Здесь будет каждое начисление: за что, когда и сколько.</p></div>
  );
  return (
    <div className="os-card cm-hist">
      {list.map((x, i) => (
        <div key={i} className="cm-hist-row">
          <span className="cm-hist-d">{fmtShortDay(x.created_at)}</span>
          <span className="cm-hist-t">{x.label}{x.note ? ' ' + x.note : ''}</span>
          <span className={`cm-hist-p${x.points < 0 ? ' neg' : x.points === 0 ? ' zero' : ''}`}>{x.points > 0 ? '+' : x.points < 0 ? '−' : ''}{Math.abs(x.points)}</span>
        </div>
      ))}
    </div>
  );
}
function MyBonuses({ list, nav, compact = false }) {
  if (!list || !list.length) return (
    <div className="cm-empty-box"><div className="cm-empty-h">Пока ни одного подарка</div>
      <p>Подарки открываются, когда набираешь их порог. Быстрее всего: эфир (+50) и кейс по шаблону (+100).</p>
      {!compact && <button type="button" className="os-btn ghost sm" onClick={() => nav('kb')}>Открыть базу знаний</button>}</div>
  );
  return (
    <div className="cm-mine">
      {list.map(b => (
        <div key={b.id} className="os-card cm-mine-i" id={'mine-' + b.id}>
          <span className="cm-bicon">{(Icons[b.icon] || Icons.gift)()}</span>
          <div style={{ minWidth: 0, flex: 1 }}>
            <div className="cm-mine-t">{b.title}</div>
            <div className="cm-mine-d">Получен {fmtUntil(b.claimed_at)}{b.expires_at ? ` · действует до ${fmtUntil(b.expires_at)}` : ''}</div>
            {b.code && (
              <div className="cm-mine-code"><span>{b.code}</span>
                <CopyButton text={b.code} label="Скопировать" className="cm-linkbtn cm-copy"/></div>
            )}
            {b.how && <p className="cm-mine-how">Как использовать: {b.how}</p>}
          </div>
        </div>
      ))}
    </div>
  );
}

function Bonuses({ nav, params = {} }) {
  window.__NAV = nav;
  const [data, reload] = useApi('/api/bonuses');
  const [pts, reloadPts] = useApi('/api/points');
  const [lead] = useApi('/api/leaders?limit=1&prev=0');
  const [tab, setTab] = React.useState(params.tab === 'mine' ? 'mine' : params.tab === 'history' ? 'history' : 'shop');
  const [claim, modal] = useClaim(() => { reload(); reloadPts(); setTab('mine'); });
  const total = usePointsTotal();
  React.useEffect(() => { if (pts && pts.total !== getPoints()) setPoints(pts.total); }, [pts]);
  React.useEffect(() => {
    if (params.tab === 'rules') setTimeout(() => { const el = document.getElementById('rules'); el && el.scrollIntoView(); }, 80);
  }, [data]);
  const frame = (body, rail) => (
    <div className="os-frame">
      <Sidebar active="bonuses" nav={nav}/>
      <div className="os-main">
        <Topbar crumbs={['Сообщество', 'Подарки']}/>
        <div className="os-content cm-wide">{body}</div>
      </div>
    </div>
  );
  if (data === undefined) return frame(<div className="cm-empty">Загружаем витрину…</div>);
  if (!data) return frame(<div className="cm-soon">Витрина не загрузилась. Обнови страницу через минуту.</div>);
  const me = lead && lead.me;
  const showHow = (id) => { setTab('mine'); setTimeout(() => { const el = document.getElementById('mine-' + id); el && el.scrollIntoView({ block: 'center' }); }, 60); };
  return frame(<>
    <div className="cm-pagehead">
      <div style={{ minWidth: 0 }}>
        <div className="os-eyebrow" style={{ marginBottom: 10 }}>Баллы и подарки</div>
        <h1 className="os-h1">У тебя {fmtNum(total)} {ballov(total)}</h1>
        <p className="os-sub" style={{ marginTop: 8 }}>
          Получай баллы за активности в сообществе и забирай подарки: подарок открывается, когда набираешь его порог,
          а баллы при этом не списываются. Доступно сейчас: <b style={{ color: 'var(--ink)' }}>{data.available} из {data.count}</b>.
        </p>
      </div>
      {me && me.place && !me.team && (
        <button type="button" className="cm-chip" onClick={() => nav('leaders')}>{Icons.trophy()} <b>{me.place}</b> место в {MONTH_PREP[monthIdx(lead.period)]}</button>
      )}
    </div>

    <details className="cm-howrow cm-howtop" id="rules" open={window.innerWidth > 820 || params.tab === 'rules'}>
      <summary><span className="ic">{Icons.info()}</span><span><b>Как работают баллы</b><small>За что начисляем и сколько</small></span></summary>
      <PointsRules rules={pts && pts.rules}/>
      <PointsNote pts={pts}/>
    </details>

    <div className="cm-segm only-mobile" role="tablist">
      {[['shop', 'Подарки'], ['mine', `Мои${data.mine.length ? ' · ' + data.mine.length : ''}`], ['history', 'История']].map(([k, t]) => (
        <button key={k} type="button" role="tab" aria-selected={tab === k} className={tab === k ? 'on' : ''} onClick={() => setTab(k)}>{t}</button>
      ))}
    </div>

    <section className={`cm-tabpane${tab === 'shop' ? ' on' : ''}`}>
      <div className="cm-h2row">
        <h2 className="os-h2">Подарки за баллы</h2>
        <span className="cm-fine">Сначала доступные · {data.note ? data.note.toLowerCase() : 'подарки обновляем в начале месяца'}</span>
      </div>
      {data.items.length
        ? <div className="cm-bgrid">{data.items.map(b => <BonusCard key={b.id} b={b} total={total} onClaim={claim} onHow={() => showHow(b.id)}/>)}</div>
        : <div className="cm-soon">Подарков пока нет. Они появятся в начале месяца.</div>}
    </section>

    <div className="cm-bonus-2">
      <section className={`cm-tabpane${tab === 'mine' ? ' on' : ''}`}>
        <div className="cm-h2row"><h2 className="os-h2 cm-h2m">Мои подарки</h2>{data.mine.length > 0 && <span className="cm-fine">{data.mine.length}</span>}</div>
        <MyBonuses list={data.mine} nav={nav}/>
      </section>
      <section className={`cm-tabpane${tab === 'history' ? ' on' : ''}`}>
        <div className="cm-h2row"><h2 className="os-h2 cm-h2m">История</h2></div>
        <History list={pts && pts.history}/>
      </section>
    </div>
    {modal}
  </>);
}

/* ---- экран «Лидеры» ------------------------------------------------------ */
function MePlaque({ data, period }) {
  const me = data.me || {};
  const mon = MONTH_PREP[monthIdx(data.period)];
  const scope = period === 'all' ? 'за всё время' : `в ${mon}`;
  if (me.team) return (
    <div className="cm-plaque"><span className="cm-plaque-n">—</span>
      <div><div className="cm-plaque-t">Команда в рейтинг не входит</div><div className="cm-plaque-d">Основатели и модераторы видят рейтинг, но в нём не участвуют.</div></div></div>
  );
  if (!me.place) return (
    <div className="cm-plaque"><span className="cm-plaque-n">—</span>
      <div><div className="cm-plaque-t">Пока без места</div>
        <div className="cm-plaque-d">Набери первые баллы, и появишься в рейтинге. Эфир сразу даёт +{(CFG().points || {}).attend || 50}.</div></div></div>
  );
  if (me.hidden) return (
    <div className="cm-plaque light"><span className="cm-plaque-n">{me.place}</span>
      <div><div className="cm-plaque-t">{Icons.eyeoff()} Ты скрыт из рейтинга</div>
        <div className="cm-plaque-d">Другие тебя не видят. Место и баллы видны только тебе, баллы копятся как обычно.</div></div></div>
  );
  const above = me.place > 1 ? me.points + me.need - 1 : me.points;
  return (
    <div className="cm-plaque">
      <span className="cm-plaque-n">{me.place}</span>
      <div style={{ minWidth: 0, flex: 1 }}>
        <div className="cm-plaque-t">Ты на {me.place} месте · {fmtNum(me.points)} {ballov(me.points)} {scope}</div>
        <div className="cm-plaque-d">{meLine(me)}</div>
      </div>
      {me.place > 1 && (
        <div className="cm-plaque-bar"><Bar value={me.points} max={above}/><span>{fmtNum(me.points)} / {fmtNum(above)}</span></div>
      )}
      <a className="os-btn sm cm-plaque-btn" href="/os/?view=bonuses&tab=rules"
         onClick={(e) => { e.preventDefault(); window.__NAV('bonuses', { tab: 'rules' }); }}>Как набрать →</a>
    </div>
  );
}

function Leaders({ nav, params = {} }) {
  window.__NAV = nav;
  const [period, setPeriod] = React.useState(params.period === 'all' ? 'all' : 'month');
  const [d, reloadLeaders] = useApi('/api/leaders?period=' + period);
  const [pts, reloadPts] = useApi('/api/points');
  const [ev] = useApi('/api/events');
  const [hidden, setHidden] = React.useState(null);
  React.useEffect(() => { if (pts) setHidden(pts.rating_hidden); }, [pts]);
  const toggle = async (v) => {
    setHidden(v);
    const r = await putJSON('/api/prefs', { rating_hidden: v });
    if (!r.ok) setHidden(!v); else { reloadLeaders(); reloadPts(); }
  };
  const mon = d ? MONTH_GEN[monthIdx(d.period === 'all' ? curPeriod() : d.period)] : '';
  const nextEv = ev && ev.events && ev.events.find(e => e.access !== 'pro' || accessTier() === 'pro');
  return (
    <div className="os-frame">
      <Sidebar active="leaders" nav={nav}/>
      <div className="os-main">
        <Topbar crumbs={['Сообщество', 'Лидеры']}/>
        <div className="os-content">
          <div className="cm-pagehead">
            <div style={{ minWidth: 0 }}>
              <div className="os-eyebrow" style={{ marginBottom: 10 }}>Лидеры</div>
              <h1 className="os-h1">{period === 'all' ? 'Лидеры за всё время' : `Лидеры ${mon}`}</h1>
              <p className="os-sub" style={{ marginTop: 8, maxWidth: 560 }}>
                {period === 'all' ? 'Баллы за последние 12 месяцев: начисленные раньше сгорают.' : 'Рейтинг месяца обнуляется 1-го числа.'} Основатели и команда в рейтинг не входят.
              </p>
            </div>
            <div className="cm-segm sm" role="tablist" aria-label="Период">
              {[['month', 'Месяц'], ['all', 'За всё время']].map(([k, t]) => (
                <button key={k} type="button" role="tab" aria-selected={period === k} className={period === k ? 'on' : ''}
                        onClick={() => setPeriod(k)}>{t}</button>
              ))}
            </div>
          </div>
          {d === undefined && <div className="cm-empty">Считаем рейтинг…</div>}
          {d === null && <div className="cm-soon">Рейтинг не загрузился. Обнови страницу через минуту.</div>}
          {d && <MePlaque data={d} period={period}/>}
          {d && (d.top.length ? (
            <div className="os-card cm-ltable">
              <div className="cm-lrow head"><span>Место</span><span/><span>Участник</span><span className="cm-lsphere">Сфера</span><span className="cm-lpts">Баллы</span></div>
              {d.top.map(r => <LeaderRow key={r.place} r={r} wide/>)}
              {d.around.length > 0 && <><div className="cm-ldots">· · ·</div>{d.around.map(r => <LeaderRow key={r.place} r={r} wide/>)}</>}
            </div>
          ) : (
            <div className="cm-empty-box"><div className="cm-empty-h">{period === 'all' ? 'Рейтинг пока пустой' : 'Месяц только начался'}</div>
              <p>Первые баллы за материалы, эфиры и кейсы появятся здесь. {d.prev && d.prev.top.length ? 'Лидеры прошлого месяца справа.' : ''}</p></div>
          ))}
          {d && !(d.me && d.me.team) && (
            <div className="cm-lfoot">
              <label className="cm-check">
                <input type="checkbox" checked={!!hidden} disabled={hidden === null} onChange={e => toggle(e.target.checked)}/>
                <span><b>Не показывать меня в рейтинге</b><small>Баллы продолжат копиться, место будет видно только тебе.</small></span>
              </label>
              <p className="cm-fine cm-lfoot-n">Лидерам месяца пишет Николай, хвалим в чате. По желанию подарок от партнёра. Рейтинг виден только в сообществе, на сайт не выводим.</p>
            </div>
          )}
        </div>
      </div>
      <MemberRail hideMember>
        <div className="os-rail-block">
          <div className="os-rail-h">Как подняться выше</div>
          <div className="os-card tight cm-uplist">
            {nextEv && (
              <a className="cm-up" href="/os/" onClick={(e) => { e.preventDefault(); nav('home'); }}>
                <span className="cm-bicon sm">{Icons.cal()}</span>
                <span className="cm-up-t"><b>{EV_KIND_LABEL[nextEv.kind] || 'Эфир'} {fmtDay(nextEv.date)}</b><small>в эфире, по кнопке «Войти в эфир»</small></span>
                <span className="cm-up-p">+{(ev && ev.attend_points) || 50}</span>
              </a>
            )}
            <a className="cm-up" href="/os/?view=case_new" onClick={(e) => { e.preventDefault(); nav('case_new'); }}>
              <span className="cm-bicon sm">{Icons.spark()}</span>
              <span className="cm-up-t"><b>Кейс по шаблону</b><small>{pts && pts.case_limit.limit != null ? `в этом месяце ${pts.case_limit.used} из ${pts.case_limit.limit} с баллами` : 'после проверки командой'}</small></span>
              <span className="cm-up-p">+{(CFG().points || {}).case || 100}</span>
            </a>
            <a className="cm-up" href="/os/?view=kb" onClick={(e) => { e.preventDefault(); nav('kb'); }}>
              <span className="cm-bicon sm">{Icons.book()}</span>
              <span className="cm-up-t"><b>Материал по цели</b><small>дочитать до конца</small></span>
              <span className="cm-up-p">+5–15</span>
            </a>
          </div>
        </div>
        {d && d.prev && (
          <div className="os-rail-block">
            <div className="os-rail-h">Прошлый месяц</div>
            <div className="os-card tight cm-topmini">
              {d.prev.top.length ? d.prev.top.map(r => <LeaderRow key={r.place} r={r}/>) : <div className="cm-fine">В {MONTH_PREP[monthIdx(d.prev.period)]} рейтинга ещё не было.</div>}
              {d.prev.me && d.prev.me.place && <div className="cm-topmini-f">Ты в {MONTH_PREP[monthIdx(d.prev.period)]}: {d.prev.me.place} место</div>}
            </div>
          </div>
        )}
      </MemberRail>
    </div>
  );
}

Object.assign(window, { useApi, putJSON, refreshMe, MONTH_NOM, MONTH_GEN, MONTH_PREP, monthIdx, curPeriod, ballov, fmtUntil, fmtShortDay,
  PointsChips, useClaim, BonusCard, BonusMini, TopMini, LeaderRow, meLine, Bar, MyBonuses, History, PointsRules, PointsNote, Bonuses, Leaders });