// schedule.jsx — «Расписание» (?view=schedule, план Насти 2.5 «Планирование»): события текущего и
// следующего месяца по неделям, время МСК, PRO-замок, «Войти в эфир» в окне эфира и
// «Добавить в календарь» (.ics с сервера: /api/events/:id/ics, без ссылки на эфир — только страница
// события здесь, ?view=schedule&id=). Данные — /api/schedule.

// «5–11 октября»; неделя из одного дня — «1 октября»
const rangeText = (from, to) => (from === to ? fmtDay(from) : `${Number(from.slice(8, 10))}–${fmtDay(to)}`);
const weekday = (iso) => new Date(iso + 'T00:00:00').toLocaleDateString('ru-RU', { weekday: 'short' });

function SchedEvent({ e, attend, focus, nav }) {
  const tier = accessTier();
  const closed = e.access === 'pro' && tier !== 'pro';
  const ref = React.useRef(null);
  React.useEffect(() => { if (focus && ref.current) setTimeout(() => ref.current.scrollIntoView({ block: 'center' }), 120); }, [focus]);
  return (
    <div ref={ref} id={'ev-' + e.id} className={`cm-ev cm-sev${e.past ? ' past' : ''}${focus ? ' focus' : ''}`}>
      <div className="cm-ev-d">
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 15 }}>{fmtDay(e.date).replace(/^(\d+ [а-я]{3}).*$/, '$1')}</div>
        <div style={{ fontSize: 11.5, color: 'var(--ink-40)' }}>{weekday(e.date)} · {e.time} МСК</div>
      </div>
      <div style={{ minWidth: 0, flex: 1 }}>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
          <span className={`os-badge ${e.access === 'pro' ? 'mag' : 'blue'}`}>{EV_KIND_LABEL[e.kind] || 'Событие'}</span>
          {e.access === 'pro' && <LockBadge lock="pro"/>}
          {e.past && <span className="os-badge">прошло</span>}
        </div>
        <div className="cm-sev-t">{e.title}</div>
        <div className="cm-sev-d">
          {[e.host, e.note].filter(Boolean).join(' · ')}{!e.past && (closed ? ' · в тарифе PRO' : ` · +${attend} ${ballov(attend)} за эфир`)}
        </div>
        {/* правка Насти 23.10: анонс в TG ведёт сюда (?view=schedule&id=…); участнику Enthusiast — мягко, без «доступ запрещён» */}
        {closed && !e.past && (
          <div className="cm-sev-pro">
            Этот эфир — для участников PRO: живой разбор в небольшой группе. Запись появится в базе знаний.{' '}
            <a href="/os/?view=tariff" onClick={(ev) => { ev.preventDefault(); track('pro:from_event:' + e.id); nav ? nav('tariff') : (location.href = '/os/?view=tariff'); }}>Перейти на PRO →</a>
          </div>
        )}
      </div>
      {!e.past && (
        <div className="cm-sev-act">
          {e.has_link && !closed && e.join_open && <button type="button" className="os-btn tg sm" onClick={() => joinEvent(e)}>Войти в эфир</button>}
          {!closed && !e.join_open && <span className="cm-fine">Ссылка на эфир появится здесь за 15 минут до начала</span>}
          <a className="os-btn ghost sm" href={`/api/events/${encodeURIComponent(e.id)}/ics`} download onClick={() => track('ics:' + e.id)}>{Icons.cal()} В календарь</a>
        </div>
      )}
    </div>
  );
}

function Schedule({ nav, params = {} }) {
  const [d] = useApi('/api/schedule');
  const total = d ? d.months.reduce((n, m) => n + m.weeks.reduce((k, w) => k + w.events.length, 0), 0) : 0;
  return (
    <div className="os-frame">
      <Sidebar active="schedule" nav={nav}/>
      <div className="os-main">
        <Topbar crumbs={['Сообщество', 'Расписание']}/>
        <div className="os-content">
          <div>
            <div className="os-eyebrow" style={{ marginBottom: 10 }}>Расписание</div>
            <h1 className="os-h1">Расписание на месяц вперёд</h1>
            <p className="os-sub" style={{ marginTop: 8, maxWidth: 620 }}>
              Эфиры, Q&amp;A и встречи этого и следующего месяца. Время московское. «В календарь» скачивает событие
              для Google, Apple или Outlook, ссылка на эфир появится здесь за 15 минут до начала.
            </p>
          </div>
          {d === undefined && <div className="cm-empty">Загружаем расписание…</div>}
          {d === null && <div className="cm-soon">Расписание не загрузилось. Обнови страницу через минуту.</div>}
          {d && !total && <div className="cm-soon">Событий на ближайшие два месяца пока нет. Как только появятся, они будут здесь.</div>}
          {d && total > 0 && d.months.map(m => (
            <section key={m.period} className="cm-sched-m">
              <h2 className="os-h2">{m.title}</h2>
              {m.weeks.length ? m.weeks.map(w => (
                <div key={w.from} className="cm-sched-w">
                  <div className="cm-sched-wh">{rangeText(w.from, w.to)}{w.current && <span className="os-badge orange">эта неделя</span>}</div>
                  <div className="os-card" style={{ padding: 0, overflow: 'hidden' }}>
                    {w.events.map((e, i) => <SchedEvent key={e.id} e={e} attend={d.attend_points} focus={params.id === e.id} nav={nav}/>)}
                  </div>
                </div>
              )) : <div className="cm-fine">В {MONTH_PREP[monthIdx(m.period)]} событий пока нет.</div>}
            </section>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Schedule });