// team.jsx — экран «Команда» (?view=team) для founder/moderator. Минимально и функционально:
//   Кейсы  — очередь на проверке: опубликовать (+баллы автору) / скрыть (баллы снимаются) /
//            вернуть с комментарием; флажок «на сайт» — только если автор дал согласие
//   Эфиры  — отметить пришедших (+50) и ведущего (+100) по событию из data/events.json
//            + флажок «Показывать на сайте» (неделя 3: уходит в GET /api/public/events)
//   Подписки — у кого заканчивается подписка (3/7/14 дней) и истекла за 14 дней, ответ «Почему уходишь?», CSV
//   Бонусы — кто что получил (manual — связаться самим)
//   Ответы — «Почему уходишь?» и «Что получилось?» из сообщений Николая
//   Тексты — сообщения Николая, бонусы, подписи тарифа, экран ухода (texts.jsx)
//   Вошли без доступа — кто вошёл через Hakku ID без подписки: «Выдать доступ» дописывает строку в таблицу
//            участников (источник lms-grant) и сразу синкает; Getplat: активные и «требует проверки» (сумма не из маппинга)
// Права проверяет сервер (/api/admin/*), здесь только кнопки.

const CONSENT_LABEL = { name: 'с именем и фото', anon: 'без имени', no: 'нет, только в сообществе' };
const fmtDT = (iso) => iso ? new Date(iso).toLocaleString('ru-RU', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit', timeZone: 'Europe/Moscow' }) : '';

function TeamCase({ c, onChanged, nav }) {
  const [open, setOpen] = React.useState(false);
  const [comment, setComment] = React.useState('');
  const [site, setSite] = React.useState(!!c.on_site);
  const [busy, setBusy] = React.useState(false);
  const [msg, setMsg] = React.useState('');
  const canSite = c.consent === 'name' || c.consent === 'anon';
  const act = async (action) => {
    if (action === 'return' && !comment.trim()) return setMsg('Напиши автору, что поправить.');
    setBusy(true); setMsg('');
    const r = await postJSON('/api/admin/cases/' + encodeURIComponent(c.id), { action, comment, on_site: canSite ? site : false });
    setBusy(false);
    if (!r.ok) return setMsg('Не получилось: ' + ((r.j && r.j.error) || 'ошибка сервера'));
    const p = r.j.points;
    toast(action === 'publish' ? `Опубликован${p ? `, автору +${p}` : p === 0 ? ', сверх лимита: 0 баллов' : ''}`
      : action === 'hide' ? `Скрыт${p ? `, снято ${Math.abs(p)}` : ''}` : action === 'return' ? 'Вернули автору' : 'Сохранено');
    onChanged();
  };
  const s = CASE_STATUS[c.status] || ['', ''];
  return (
    <div className="os-card cm-tcase">
      <div className="cm-tcase-h">
        <div style={{ minWidth: 0 }}>
          <div className="cm-ccard-meta"><TypeBadge type={c.type}/><span className={`os-badge ${s[1]}`}>{s[0]}</span><span>{fmtDT(c.created_at)}</span></div>
          <div className="cm-tcase-t">{c.title}</div>
          <div className="cm-fine">{c.author.name} · {c.author.email} · сайт: {CONSENT_LABEL[c.consent] || '—'}{c.on_site ? ' · на сайте' : ''}</div>
        </div>
        <button type="button" className="cm-linkbtn" onClick={() => setOpen(o => !o)}>{open ? 'Свернуть' : 'Читать кейс'}</button>
      </div>
      {open && <div className="cm-tcase-body"><CaseBody c={c} nav={nav}/></div>}
      {c.team_comment && <div className="cm-fine">Комментарий: {c.team_comment}</div>}
      <div className="cm-tcase-act">
        {c.status !== 'published' && (
          <label className={`cm-check sm${canSite ? '' : ' off'}`} title={canSite ? '' : 'Автор не дал согласия'}>
            <input type="checkbox" checked={site && canSite} disabled={!canSite} onChange={e => setSite(e.target.checked)}/>
            <span>На сайт{canSite ? '' : ' (нет согласия)'}</span>
          </label>
        )}
        {c.status === 'published' && canSite && (
          <label className="cm-check sm"><input type="checkbox" checked={!!c.on_site} disabled={busy}
            onChange={async e => { setBusy(true); const r = await postJSON('/api/admin/cases/' + c.id, { action: 'site', on_site: e.target.checked }); setBusy(false); if (r.ok) onChanged(); }}/>
            <span>На сайт</span></label>
        )}
        {c.status !== 'published' && <button type="button" className="os-btn tg sm" disabled={busy} onClick={() => act('publish')}>Опубликовать</button>}
        {c.status !== 'hidden' && <button type="button" className="os-btn ghost sm" disabled={busy} onClick={() => act('hide')}>Скрыть</button>}
        {c.status === 'pending' && <button type="button" className="os-btn ghost sm" disabled={busy} onClick={() => act('return')}>Вернуть с комментарием</button>}
      </div>
      {c.status !== 'published' && (
        <textarea className="os-login-input cm-textarea sm" rows={2} value={comment} onChange={e => setComment(e.target.value)}
                  placeholder="Комментарий автору (обязателен, если возвращаешь)"/>
      )}
      {msg && <div className="os-login-err show">{msg}</div>}
    </div>
  );
}

function TeamCases({ nav }) {
  const [status, setStatus] = React.useState('pending');
  const [data, reload] = useApi('/api/admin/cases?status=' + status);
  return (
    <section className="cm-sec">
      <div className="os-chips">
        {[['pending', 'На проверке'], ['published', 'Опубликованы'], ['returned', 'Вернули'], ['hidden', 'Скрыты']].map(([k, t]) => (
          <button key={k} className={status === k ? 'on' : ''} onClick={() => setStatus(k)}>{t}{status === k && data ? ` · ${data.cases.length}` : ''}</button>
        ))}
      </div>
      {data === undefined && <div className="cm-empty">Загружаем…</div>}
      {data && !data.cases.length && <div className="cm-soon">{status === 'pending' ? 'Очередь пуста: новых кейсов на проверке нет.' : 'Здесь пусто.'}</div>}
      {data && data.cases.map(c => <TeamCase key={c.id + c.status} c={c} nav={nav} onChanged={reload}/>)}
    </section>
  );
}

function TeamEvent({ e, members, onChanged }) {
  const [editing, setEditing] = React.useState(false);
  const [role, setRole] = React.useState('attended');
  const [site, setSite] = React.useState(!!e.show_on_site);
  const toggleSite = async (v) => {
    setSite(v);
    const r = await postJSON(`/api/admin/events/${encodeURIComponent(e.id)}/site`, { show_on_site: v });
    if (!r.ok) { setSite(!v); return toast('Не сохранилось'); }
    toast(v ? 'Событие уйдёт в расписание на сайте' : 'Событие убрано с сайта');
  };
  const upcoming = e.date >= new Date(Date.now() + 3 * 3600000).toISOString().slice(0, 10);
  const [emails, setEmails] = React.useState('');
  const [res, setRes] = React.useState(null);
  const [busy, setBusy] = React.useState(false);
  const nameOf = (em) => ((members || []).find(m => m.email === em) || {}).name || em;
  const add = (em) => { if (em) setEmails(x => (x.trim() ? x.trim() + '\n' : '') + em); };
  const mark = async () => {
    setBusy(true);
    const r = await postJSON(`/api/admin/events/${encodeURIComponent(e.id)}/mark`, { role, emails });
    setBusy(false);
    if (!r.ok) return setRes([{ email: '', ok: false, error: 'ошибка сервера' }]);
    setRes(r.j.results); setEmails(''); onChanged();
  };
  const annUrl = `${location.origin}/os/?view=schedule&id=${encodeURIComponent(e.id)}`;
  const hide = async () => { const r = await postJSON(`/api/admin/events/${encodeURIComponent(e.id)}/hide`); if (r.ok) { toast('Эфир убран из расписания'); onChanged(); } };
  if (editing) return <EventForm e={e} onDone={() => { setEditing(false); onChanged(); }} onCancel={() => setEditing(false)}/>;
  return (
    <div className="os-card cm-tcase">
      <div className="cm-evtools">
        {upcoming && <CopyButton text={annUrl} label="Ссылка для анонса" className="os-btn ghost sm"/>}
        <button type="button" className="os-btn ghost sm" onClick={() => setEditing(true)}>Изменить</button>
        <button type="button" className="os-btn ghost sm" onClick={hide}>Скрыть</button>
      </div>
      <div className="cm-tcase-h">
        <div style={{ minWidth: 0 }}>
          <div className="cm-ccard-meta"><span className="os-badge">{EV_KIND_LABEL[e.kind] || 'Событие'}</span>{e.access === 'pro' && <span className="os-badge mag">PRO</span>}<span>{fmtDay(e.date)} · {e.time || ''} МСК</span>{e.link ? <span>есть ссылка «Войти в эфир»</span> : <span>без ссылки</span>}</div>
          <div className="cm-tcase-t">{e.title}</div>
          <div className="cm-fine">Пришли ({e.attended.length}): {e.attended.length ? e.attended.map(nameOf).join(', ') : 'пока никого'}</div>
          <div className="cm-fine">Ведущий: {e.hosts.length ? e.hosts.map(nameOf).join(', ') : 'не отмечен'}</div>
        </div>
        {upcoming && (
          <label className="cm-check sm cm-tsite" title="Дата, время, тип, название, ведущий и ссылка на регистрацию. Ссылка на эфир на сайт не уходит.">
            <input type="checkbox" checked={site} onChange={x => toggleSite(x.target.checked)}/>
            <span>Показывать на сайте<small>{e.register_url ? 'регистрация по своей ссылке' : 'регистрация через бота'}</small></span>
          </label>
        )}
      </div>
      <div className="cm-tcase-act">
        <div className="cm-segm sm">{[['attended', 'Пришли · +50'], ['host', 'Ведущий · +100']].map(([k, t]) => (
          <button key={k} type="button" className={role === k ? 'on' : ''} onClick={() => setRole(k)}>{t}</button>))}</div>
        <label className="cm-select"><select value="" onChange={x => add(x.target.value)} aria-label="Добавить участника">
          <option value="">Добавить из таблицы…</option>
          {(members || []).map(m => <option key={m.email} value={m.email}>{m.name || m.email} · {m.email}</option>)}
        </select></label>
      </div>
      <textarea className="os-login-input cm-textarea sm" rows={2} value={emails} onChange={x => setEmails(x.target.value)} placeholder="Почты через запятую или с новой строки"/>
      <div><button type="button" className="os-btn sm" disabled={busy || !emails.trim()} onClick={mark}>Отметить</button></div>
      {res && <div className="cm-fine">{res.map(r => r.ok ? `${r.email}: ${r.already ? 'уже отмечен' : '+' + r.points}` : `${r.email}: ${r.error === 'not_member' ? 'нет в таблице' : r.error}`).join(' · ')}</div>}
    </div>
  );
}
// Форма анонса (правки Насти 23.10): добавить или поправить эфир без разработчика. Ссылка на Zoom наружу не уходит —
// участник получает её кнопкой «Войти в эфир» (проверка тарифа и +50 за присутствие).
const EV_ERR = { bad_date: 'Укажи дату', bad_time: 'Укажи время в формате 19:00', bad_title: 'Название — хотя бы 3 символа',
                 bad_link: 'Ссылка на эфир должна начинаться с https://', bad_register_url: 'Ссылка на регистрацию должна начинаться с https://', bad_kind: 'Выбери тип' };
function EventForm({ e, onDone, onCancel }) {
  const [f, setF] = React.useState(() => ({ date: '', time: '19:00', kind: 'webinar', access: 'all', title: '', host: '', note: '',
    link: '', register_url: '', duration_min: '', show_on_site: false, ...(e || {}) }));
  const [err, setErr] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const set = (k) => (x) => setF({ ...f, [k]: x.target.type === 'checkbox' ? x.target.checked : x.target.value });
  const save = async () => {
    setBusy(true); setErr('');
    const url = e ? `/api/admin/events/${encodeURIComponent(e.id)}` : '/api/admin/events';
    const r = await fetch(url, { method: e ? 'PUT' : 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(f) })
      .then(async x => ({ ok: x.ok, j: await x.json().catch(() => ({})) }));
    setBusy(false);
    if (!r.ok) return setErr(EV_ERR[r.j.error] || 'Не сохранилось. Попробуй ещё раз.');
    toast(e ? 'Эфир обновлён' : 'Эфир добавлен в расписание');
    onDone();
  };
  return (
    <div className="os-card cm-evform">
      <div className="cm-evform-grid">
        <label><span>Дата</span><input type="date" className="os-login-input" value={f.date} onChange={set('date')}/></label>
        <label><span>Время, МСК</span><input type="time" className="os-login-input" value={f.time} onChange={set('time')}/></label>
        <label><span>Тип</span><select className="os-login-input" value={f.kind} onChange={set('kind')}>
          {Object.entries(EV_KIND_LABEL).map(([k, t]) => <option key={k} value={k}>{t}</option>)}</select></label>
        <label><span>Для кого</span><select className="os-login-input" value={f.access} onChange={set('access')}>
          <option value="all">Все участники</option><option value="pro">Только PRO</option></select></label>
        <label className="wide"><span>Название</span><input className="os-login-input" maxLength={160} value={f.title} onChange={set('title')} placeholder="Вебинар с…"/></label>
        <label><span>Ведущий</span><input className="os-login-input" maxLength={160} value={f.host} onChange={set('host')}/></label>
        <label><span>Длительность, мин</span><input type="number" min="15" max="600" className="os-login-input" value={f.duration_min} onChange={set('duration_min')} placeholder="60"/></label>
        <label className="wide"><span>Описание (одна строка)</span><input className="os-login-input" maxLength={400} value={f.note} onChange={set('note')}/></label>
        <label className="wide"><span>Ссылка на эфир (Zoom) — участник получит её кнопкой «Войти в эфир»</span><input className="os-login-input" value={f.link} onChange={set('link')} placeholder="https://zoom.us/j/…"/></label>
        <label className="wide"><span>Ссылка на регистрацию для сайта (необязательно)</span><input className="os-login-input" value={f.register_url} onChange={set('register_url')} placeholder="https://…"/></label>
        <label className="cm-check sm wide"><input type="checkbox" checked={!!f.show_on_site} onChange={set('show_on_site')}/><span>Показывать в расписании на hakku.ai</span></label>
      </div>
      {err && <div className="os-login-err show" style={{ marginTop: 8 }}>{err}</div>}
      <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
        <button type="button" className="os-btn sm" disabled={busy} onClick={save}>{e ? 'Сохранить' : 'Добавить эфир'}</button>
        <button type="button" className="os-btn ghost sm" onClick={onCancel}>Отмена</button>
      </div>
    </div>
  );
}
function TeamEvents() {
  const [data, reload] = useApi('/api/admin/events');
  const [mem] = useApi('/api/admin/members');
  const [adding, setAdding] = React.useState(false);
  if (data === undefined) return <div className="cm-empty">Загружаем…</div>;
  if (!data) return <div className="cm-soon">Не получилось загрузить. Обнови страницу.</div>;
  const restore = async (id) => { const r = await postJSON(`/api/admin/events/${encodeURIComponent(id)}/restore`); if (r.ok) { toast('Эфир вернулся в расписание'); reload(); } };
  return (
    <section className="cm-sec">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, flexWrap: 'wrap', marginBottom: 12 }}>
        <p className="cm-fine" style={{ margin: 0 }}>Анонс в Telegram давай ссылкой на эфир в LMS — она под каждым эфиром. Так LMS сама проверит тариф и отметит пришедших (+50).</p>
        {!adding && <button type="button" className="os-btn sm" onClick={() => setAdding(true)}>+ Добавить эфир</button>}
      </div>
      {adding && <EventForm onDone={() => { setAdding(false); reload(); }} onCancel={() => setAdding(false)}/>}
      {!data.events.length && !adding && <div className="cm-soon">Эфиров пока нет. Нажми «Добавить эфир».</div>}
      {data.events.map(e => <TeamEvent key={e.id} e={e} members={mem && mem.members} onChanged={reload}/>)}
      {data.hidden && data.hidden.length > 0 && (
        <div className="cm-fine" style={{ marginTop: 16 }}>
          Скрыты: {data.hidden.map(h => <span key={h.id}>{h.title} ({fmtDay(h.date)}) <button type="button" className="cm-linkbtn" onClick={() => restore(h.id)}>вернуть</button>{' '}</span>)}
        </div>
      )}
    </section>
  );
}
function TeamClaims() {
  const [data] = useApi('/api/admin/bonus-claims');
  if (data === undefined) return <div className="cm-empty">Загружаем…</div>;
  if (!data || !data.claims.length) return <div className="cm-soon">Подарки ещё никто не получал.</div>;
  return (
    <div className="os-card cm-hist">
      {data.claims.map((c, i) => (
        <div key={i} className="cm-hist-row">
          <span className="cm-hist-d">{fmtShortDay(c.claimed_at)}</span>
          <span className="cm-hist-t"><b>{c.title}</b> · {c.name || c.email} · {c.email}{c.code ? ` · код ${c.code}` : ''}{c.type === 'manual' ? ' · связаться' : ''}</span>
          <span className="cm-hist-p zero">{c.expires_at ? 'до ' + fmtShortDay(c.expires_at) : ''}</span>
        </div>
      ))}
    </div>
  );
}
// Баллы вручную (правки Насти 23.10): итоги месяца +30, баг/идея +30, встреча участников +350, консультация +300.
// Кто писал в Службу заботы — вставить почты (через запятую или с новой строки), выбрать за что, комментарий.
function TeamPoints() {
  const [cfg] = useApi('/api/admin/points/actions');
  const [action, setAction] = React.useState('');
  const [emails, setEmails] = React.useState('');
  const [comment, setComment] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [res, setRes] = React.useState(null);
  if (cfg === undefined) return <div className="cm-empty">Загружаем…</div>;
  if (!cfg) return <div className="cm-soon">Не получилось загрузить. Обнови страницу.</div>;
  const act = cfg.actions.find(a => a.id === action) || null;
  const send = async () => {
    setBusy(true); setRes(null);
    const r = await postJSON('/api/admin/points/award', { action, emails, comment });
    setBusy(false);
    if (!r.ok) { toast('Не получилось начислить'); return; }
    setRes(r.j.results);
    const got = r.j.results.filter(x => x.ok && x.points > 0).length;
    toast(got ? `Начислено: ${got}` : 'Новых начислений нет');
    if (got) setEmails('');
  };
  return (
    <div className="os-card cm-pts-form">
      <p className="cm-fine" style={{ marginTop: 0 }}>Участник увидит начисление в «Подарки» → «История». Итоги месяца засчитываются один раз в месяц.</p>
      <div className="cm-pts-acts" role="radiogroup" aria-label="За что начисляем">
        {cfg.actions.map(a => (
          <button key={a.id} type="button" role="radio" aria-checked={action === a.id} className={`cm-chip${action === a.id ? ' on' : ''}`} onClick={() => setAction(a.id)}>
            {a.label} · +{a.points}
          </button>
        ))}
      </div>
      {act && <p className="cm-fine">{act.rule}</p>}
      <label className="cm-field-l" htmlFor="pts-emails">Почты участников</label>
      <textarea id="pts-emails" className="os-login-input cm-pts-ta" rows={3} value={emails} onChange={e => setEmails(e.target.value)}
                placeholder="anna@example.com, ivan@example.com"/>
      <label className="cm-field-l" htmlFor="pts-comment" style={{ marginTop: 10 }}>Комментарий (увидит участник)</label>
      <input id="pts-comment" className="os-login-input" maxLength={200} value={comment} onChange={e => setComment(e.target.value)}
             placeholder="Например: идея про промпт недели"/>
      <div style={{ marginTop: 12 }}>
        <button type="button" className="os-btn sm" disabled={busy || !action || !emails.trim()} onClick={send}>Начислить</button>
      </div>
      {res && (
        <div className="cm-pts-res">
          {res.map((x, i) => (
            <div key={i} className="cm-pts-row">
              <span>{x.email}</span>
              <span className={x.ok && x.points > 0 ? 'ok' : 'muted'}>{!x.ok ? (x.error === 'not_member' ? 'нет среди участников' : 'ошибка') : x.already ? 'уже начислено в этом месяце' : `+${x.points}`}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
// Рефералы: кто кого пригласил (по ссылке или кодом), статус и кнопки начисления бонуса.
// «Можно начислять» — приглашённый оплатил и прошёл срок возврата. Лимит — бонусов в месяц на пригласившего.
const REF_ST = { joined: ['перешёл', ''], paid: ['оплатил · ждём срок возврата', 'blue'], ready: ['можно начислять', 'green'], bonus: ['бонус начислен', 'mag'] };
function TeamReferrals() {
  const [data, reload] = useApi('/api/admin/referrals');
  const [busy, setBusy] = React.useState('');
  if (data === undefined) return <div className="cm-empty">Загружаем…</div>;
  if (!data || !data.referrals.length) return <div className="cm-soon">Пока никто не пришёл по реферальной ссылке.</div>;
  const give = async (r, kind) => {
    setBusy(r.referred);
    const res = await postJSON('/api/admin/referrals/bonus', { referred: r.referred, kind });
    setBusy('');
    if (res.ok) { toast(`Бонус отмечен: ${r.referrer_name || r.referrer}`); reload && reload(); }
    else toast(res.j && res.j.error === 'already' ? 'Бонус уже был отмечен' : 'Не получилось сохранить');
  };
  const order = { ready: 0, paid: 1, joined: 2, bonus: 3 };
  const list = [...data.referrals].sort((a, b) => (order[a.status] - order[b.status]) || String(b.at).localeCompare(String(a.at)));
  return (<>
    <p className="cm-fine" style={{ margin: '0 0 12px' }}>
      Бонус начисляете вы: месяц бесплатно или скидку пригласившему — в боте или Getplat, потом отметка здесь.
      Срок возврата — {data.hold_days} дней с оплаты. Лимит — {data.monthly_limit} в месяц на пригласившего.
    </p>
    <div className="os-card cm-hist">
      {list.map(r => {
        const [label, tone] = REF_ST[r.status] || [r.label, ''];
        return (
          <div key={r.referred} className="cm-hist-row cm-refrow">
            <span className="cm-hist-d">{fmtShortDay(r.at)}</span>
            <span className="cm-hist-t">
              <b>{r.referrer_name || r.referrer}</b> пригласил(а) {r.referred_name || r.referred}
              <span className="cm-fine"> · {r.referrer} → {r.referred} · {r.source === 'manual' ? 'ввёл код' : 'по ссылке'}
                {r.paid_since ? ` · оплата ${fmtShortDay(r.paid_since)}` : ''}{r.status === 'paid' && r.ready_at ? ` · начислять с ${fmtShortDay(r.ready_at)}` : ''}
                {r.bonus_kind ? ` · ${r.bonus_kind}` : ''}{r.status === 'ready' && r.limit_reached ? ' · лимит месяца исчерпан' : ''}</span>
            </span>
            <span className="cm-refrow-act">
              <span className={`os-badge ${tone}`}>{label}</span>
              {r.status === 'ready' && (data.bonus_kinds || []).map(k => (
                <button key={k} type="button" className="os-btn ghost sm" disabled={busy === r.referred} onClick={() => give(r, k)}>{k}</button>
              ))}
            </span>
          </div>
        );
      })}
    </div>
  </>);
}
// «Почему уходишь?»: причина, комментарий, что предложили, по чему кликнул, отказался ли
function churnLine(c) {
  if (!c) return '';
  return [c.offer_titles && c.offer_titles.length ? 'предложили: ' + c.offer_titles.join(', ') : '',
          c.clicked_title ? `выбрал «${c.clicked_title}»` : '', c.declined ? 'всё равно не продлевает' : ''].filter(Boolean).join(' · ');
}
function TeamChurn() {
  const [data] = useApi('/api/admin/churn');
  if (data === undefined) return <div className="cm-empty">Загружаем…</div>;
  if (!data || !data.answers.length) return <div className="cm-soon">На «Почему уходишь?» пока никто не отвечал.</div>;
  return (
    <div className="os-card cm-answers">
      {data.answers.map(a => (
        <div key={a.id} className="cm-answer">
          <div className="cm-fine">{fmtDT(a.created_at)} · {a.name || 'без имени'} · {a.email}{a.paid_until ? ` · оплачено до ${fmtDateShort(a.paid_until)}` : ''}</div>
          <div className="cm-answer-t"><b>{a.reason_label}</b>{a.comment ? ` — ${a.comment}` : ''}</div>
          <div className="cm-fine">{churnLine(a) || 'пока не выбрал предложение'}</div>
        </div>
      ))}
    </div>
  );
}
function TeamAnswers() {
  return (
    <section className="cm-sec">
      <h3 className="cm-h3">Почему уходишь?</h3>
      <TeamChurn/>
      <h3 className="cm-h3" style={{ marginTop: 10 }}>Что получилось?</h3>
      <TeamAsk/>
    </section>
  );
}
function TeamAsk() {
  const [data] = useApi('/api/admin/answers');
  if (data === undefined) return <div className="cm-empty">Загружаем…</div>;
  if (!data || !data.answers.length) return <div className="cm-soon">Ответов на «Что получилось?» пока нет.</div>;
  return (
    <div className="os-card cm-answers">
      {data.answers.map((a, i) => (
        <div key={i} className="cm-answer">
          <div className="cm-fine">{fmtDT(a.created_at)} · {a.name || 'без имени'} · {a.email}</div>
          <div className="cm-answer-t">{a.answer}</div>
        </div>
      ))}
    </div>
  );
}

// «У кого заканчивается подписка»: ближайшие 3/7/14 дней и истёкшие за 14 дней, по дате
const daysLabel = (n) => n > 0 ? `через ${daysText(n)}` : n === 0 ? 'сегодня' : `${daysText(-n)} назад`;
function TeamExpiring() {
  const [days, setDays] = React.useState(7);
  const [data] = useApi('/api/admin/expiring?days=' + days);
  const soon = data ? data.rows.filter(r => !r.expired) : [], gone = data ? data.rows.filter(r => r.expired) : [];
  const row = (r) => (
    <div key={r.email} className={`cm-xrow${r.expired ? ' gone' : ''}`}>
      <span className="cm-xrow-n"><b>{r.name || r.email}</b><small>{r.email}</small></span>
      <span className="cm-xrow-tg">{r.telegram || <span className="cm-fine">—</span>}</span>
      <span className="cm-xrow-tier">{TIER_LABEL[r.tariff] || r.tariff}{r.status && r.status !== 'active' ? <small>{STATUS_LABEL[r.status] || r.status}</small> : null}</span>
      <span className="cm-xrow-d">{fmtDateShort(r.paid_until)}<small className={r.expired ? 'neg' : r.days <= 3 ? 'warn' : ''}>{daysLabel(r.days)}</small></span>
      <span className="cm-xrow-c">{r.churn
        ? <><b>{r.churn.reason_label}</b>{r.churn.comment ? <small>«{r.churn.comment}»</small> : null}<small>{churnLine(r.churn) || 'не выбрал предложение'}</small></>
        : <span className="cm-fine">не отвечал</span>}</span>
    </div>
  );
  return (
    <section className="cm-sec">
      <div className="cm-xbar">
        <div className="cm-segm sm" role="tablist" aria-label="Период">
          {[3, 7, 14].map(n => <button key={n} type="button" role="tab" aria-selected={days === n} className={days === n ? 'on' : ''} onClick={() => setDays(n)}>{n} {plural(n, 'день', 'дня', 'дней')}</button>)}
        </div>
        <a className="os-btn ghost sm" href={`/api/admin/expiring.csv?days=${days}`} download>Скачать CSV</a>
      </div>
      {data === undefined && <div className="cm-empty">Загружаем…</div>}
      {data === null && <div className="cm-soon">Список не загрузился. Обнови страницу через минуту.</div>}
      {data && (
        <>
          <h3 className="cm-h3">Заканчивается в ближайшие {daysText(days)} · {soon.length}</h3>
          {soon.length ? <div className="os-card cm-xtable">
            <div className="cm-xrow head"><span>Участник</span><span>Telegram</span><span>Тариф</span><span>Оплачено до</span><span>Почему уходишь?</span></div>
            {soon.map(row)}</div> : <div className="cm-soon">Ни у кого не заканчивается.</div>}
          <h3 className="cm-h3" style={{ marginTop: 6 }}>Закончилась за последние {data.past} дней · {gone.length}</h3>
          {gone.length ? <div className="os-card cm-xtable">
            <div className="cm-xrow head"><span>Участник</span><span>Telegram</span><span>Тариф</span><span>Оплачено до</span><span>Почему уходишь?</span></div>
            {gone.map(row)}</div> : <div className="cm-soon">Никто не ушёл за две недели.</div>}
          <p className="cm-fine">Даты — из таблицы участников, обновляются раз в 5 минут. Ответ «Почему уходишь?» показываем, если он про этот срок оплаты.</p>
        </>
      )}
    </section>
  );
}

// ---- «Вошли без доступа» --------------------------------------------------------------------
const GP_STATE = { none: 'в Getplat не найден', expired: 'в Getplat есть, подписка закончилась', active: 'в Getplat активна', off: 'Getplat не подключён' };
const PERIOD_SHORT = { month: 'мес', year: 'год' };
const GRANT_ERR = { already_member: 'У этой почты уже есть доступ.', bad_until: 'Дата «до» — не раньше сегодняшней.', sheet: 'Таблица не ответила — строка не записана. Попробуй ещё раз.',
                    bad_email: 'Странная почта.', bad_tariff: 'Выбери тариф.' };

function TeamGrant({ r, defUntil, onDone }) {
  const [tariff, setTariff] = React.useState('enthusiast');
  const [until, setUntil] = React.useState(defUntil);
  const [forever, setForever] = React.useState(false);
  const [comment, setComment] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState('');
  const grant = async () => {
    setBusy(true); setErr('');
    const x = await postJSON('/api/admin/access/grant', { email: r.email, tariff, until, forever, comment });
    setBusy(false);
    if (!x.ok) return setErr(GRANT_ERR[x.j && x.j.error] || 'Не получилось: ошибка сервера.');
    toast(x.j.active ? `Доступ открыт: ${TIER_LABEL[tariff]}${forever ? ', бессрочно' : ' до ' + fmtDateShort(until)}` : 'Строка записана, доступ появится после синка таблицы');
    onDone();
  };
  return (
    <div className="cm-grant">
      <div className="cm-grant-row">
        <div className="cm-segm sm" role="radiogroup" aria-label="Тариф">
          {[['enthusiast', 'Enthusiast'], ['pro', 'PRO']].map(([k, t]) => (
            <button key={k} type="button" role="radio" aria-checked={tariff === k} className={tariff === k ? 'on' : ''} onClick={() => setTariff(k)}>{t}</button>))}
        </div>
        <label className="cm-grant-until">
          <span>до</span>
          <input className="os-login-input sm" type="date" value={forever ? '' : until} disabled={forever}
                 onChange={e => setUntil(e.target.value)} aria-label="Доступ до"/>
        </label>
        <label className="cm-check sm"><input type="checkbox" checked={forever} onChange={e => setForever(e.target.checked)}/>
          <span>Бессрочно<small>команда, гости</small></span></label>
      </div>
      <div className="cm-grant-row">
        <input className="os-login-input sm cm-grant-c" value={comment} onChange={e => setComment(e.target.value)} maxLength={200}
               placeholder="Комментарий в таблицу: за что или откуда" aria-label="Комментарий"/>
        <button type="button" className="os-btn sm" disabled={busy || (!forever && !until)} onClick={grant}>{busy ? 'Записываем…' : 'Выдать доступ'}</button>
      </div>
      {err && <div className="os-login-err show" role="alert">{err}</div>}
    </div>
  );
}

function TeamDenied({ r, defUntil, onDone }) {
  const granted = !!r.granted_at;
  return (
    <div className="os-card cm-tcase">
      <div className="cm-tcase-h">
        <div style={{ minWidth: 0 }}>
          <div className="cm-ccard-meta">
            <span className={`os-badge${r.getplat === 'expired' ? ' orange' : ''}`}>{GP_STATE[r.getplat] || 'в Getplat не найден'}</span>
            {r.state === 'expired' && <span>в таблице, срок истёк</span>}
            <span>{r.visits} {plural(r.visits, 'заход', 'захода', 'заходов')}</span>
          </div>
          <div className="cm-tcase-t">{r.name || r.email}</div>
          <div className="cm-fine">{r.email}{r.aliases && r.aliases.length ? ` · почты оплаты: ${r.aliases.join(', ')}` : ''}</div>
          <div className="cm-fine">Первый вход {fmtDT(r.first_at)} · последний {fmtDT(r.last_at)}</div>
        </div>
      </div>
      {granted
        ? <div className="cm-grant-done">{Icons.check()}<span>Доступ выдан: <b>{TIER_LABEL[r.granted_tariff] || r.granted_tariff}</b>
            {r.granted_until === '2099-12-31' ? ', бессрочно' : r.granted_until ? ` до ${fmtDateShort(r.granted_until)}` : ''} · {r.granted_by} · {fmtDT(r.granted_at)}
            {r.has_access ? '' : ' · ждём синка таблицы'}</span></div>
        : <TeamGrant r={r} defUntil={defUntil} onDone={onDone}/>}
    </div>
  );
}

function GpRow({ s }) {
  return (
    <div className="cm-xrow cm-gprow">
      <span className="cm-xrow-n"><b>{s.email || '—'}</b><small>{s.offer || 'без названия'}</small></span>
      <span className="cm-xrow-tier">{TIER_LABEL[s.tariff] || s.tariff}{s.review ? <small className="warn">проверить</small> : null}</span>
      <span className="cm-xrow-a">{fmtRub(s.amount)}{PERIOD_SHORT[s.period] ? <small>за {PERIOD_SHORT[s.period]}</small> : <small>{s.period}</small>}</span>
      <span className="cm-xrow-d">{fmtDateShort(s.paid_until)}<small className={s.is_active ? '' : 'warn'}>{s.is_active ? 'автопродление' : 'отменена, дослуживает'}</small></span>
    </div>
  );
}
function GpTable({ rows, limit = 0 }) {
  const [all, setAll] = React.useState(false);
  const list = limit && !all ? rows.slice(0, limit) : rows;
  return (
    <>
      <div className="os-card cm-xtable">
        <div className="cm-xrow cm-gprow head"><span>Почта · предложение</span><span>Тариф</span><span>Сумма</span><span>Оплачено до</span></div>
        {list.map(s => <GpRow key={s.deal_id} s={s}/>)}
      </div>
      {limit > 0 && rows.length > limit && <button type="button" className="cm-linkbtn" onClick={() => setAll(a => !a)}>{all ? 'Свернуть' : `Показать все ${rows.length}`}</button>}
    </>
  );
}

function TeamAccess() {
  const [data, reload] = useApi('/api/admin/access');
  const [syncing, setSyncing] = React.useState(false);
  const sync = async () => {
    setSyncing(true);
    const r = await postJSON('/api/admin/getplat/sync');
    if (!r.ok) { setSyncing(false); return toast('Синк не запустился'); }
    toast('Синк Getplat запущен — список обновится через минуту');
    setTimeout(() => { setSyncing(false); reload(); }, 15000);
  };
  if (data === undefined) return <div className="cm-empty">Загружаем…</div>;
  if (!data) return <div className="cm-soon">Список не загрузился. Обнови страницу через минуту.</div>;
  const gp = data.getplat;
  const waiting = data.denied.filter(r => !r.granted_at), done = data.denied.filter(r => r.granted_at);
  return (
    <section className="cm-sec">
      <div className="os-card cm-gpbar">
        <div className="cm-gpbar-n"><b>{gp.enabled ? gp.active_count : '—'}</b><span>Getplat: активные</span></div>
        <div className="cm-gpbar-n"><b className={gp.review.length ? 'warn' : ''}>{gp.enabled ? gp.review.length : '—'}</b><span>требует проверки</span></div>
        <div className="cm-gpbar-s">
          <span className="cm-fine">{!gp.enabled ? 'Getplat не подключён: нет GETPLAT_API_KEY.' : gp.running ? 'Синк идёт…'
            : gp.synced_at ? `Синк ${fmtDT(gp.synced_at)}${gp.error ? ' · последний с ошибкой' : ''}${gp.mock ? ' · мок' : ''}` : 'Синка ещё не было.'}</span>
          {gp.enabled && <button type="button" className="os-btn ghost sm" disabled={syncing || gp.running} onClick={sync}>{syncing ? 'Синкаем…' : 'Синхронизировать'}</button>}
        </div>
      </div>

      <h3 className="cm-h3" style={{ marginTop: 10 }}>Вошли без доступа · {waiting.length}</h3>
      {waiting.length ? waiting.map(r => <TeamDenied key={r.email} r={r} defUntil={data.default_until} onDone={reload}/>)
        : <div className="cm-soon">Все, кто входил, уже с доступом.</div>}
      <p className="cm-fine">«Выдать доступ» дописывает строку в таблицу участников (источник lms-grant, комментарий «выдал …») и сразу её перечитывает. Бессрочно — «оплачено до» 31.12.2099, роль member: команду назначают в таблице.</p>

      {done.length > 0 && <>
        <h3 className="cm-h3" style={{ marginTop: 10 }}>Выдали за 2 недели · {done.length}</h3>
        {done.map(r => <TeamDenied key={r.email} r={r} defUntil={data.default_until} onDone={reload}/>)}
      </>}

      <h3 className="cm-h3" style={{ marginTop: 10 }}>Getplat: требует проверки · {gp.review.length}</h3>
      {gp.review.length ? <GpTable rows={gp.review}/> : <div className="cm-soon">Все суммы активных подписок есть в маппинге.</div>}
      {gp.review.length > 0 && <p className="cm-fine">Сумма не из data/getplat_tariffs.json — доступ открыт по тарифу из столбца (по умолчанию Enthusiast, «ПРО» в названии — PRO). Проверь и допиши сумму в маппинг.</p>}

      <h3 className="cm-h3" style={{ marginTop: 10 }}>Getplat: активные · {gp.active.length}</h3>
      {gp.active.length ? <GpTable rows={gp.active} limit={15}/> : <div className="cm-soon">Активных подписок нет.</div>}
    </section>
  );
}

const TEAM_TABS = [['cases', 'Кейсы'], ['events', 'Эфиры'], ['expiring', 'Подписки'], ['access', 'Вошли без доступа'], ['claims', 'Подарки'], ['points', 'Баллы'], ['referrals', 'Рефералы'], ['answers', 'Ответы'], ['texts', 'Тексты']];
function Team({ nav, params = {} }) {
  const [tab, setTab] = React.useState(TEAM_TABS.some(([k]) => k === params.tab) ? params.tab : 'cases');
  const go = (k) => { setTab(k); try { history.replaceState(history.state, '', '/os/?view=team&tab=' + k); } catch (e) {} };
  return (
    <div className="os-frame">
      <Sidebar active="team" 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 }}>Проверка кейсов, эфиры и расписание на сайте, у кого заканчивается подписка, кто вошёл без доступа, бонусы, ответы участников и тексты.</p>
          </div>
          <div className="cm-segm cm-segm-scroll" role="tablist">
            {TEAM_TABS.map(([k, t]) => (
              <button key={k} type="button" role="tab" aria-selected={tab === k} className={tab === k ? 'on' : ''} onClick={() => go(k)}>{t}</button>
            ))}
          </div>
          {tab === 'cases' && <TeamCases nav={nav}/>}
          {tab === 'events' && <TeamEvents/>}
          {tab === 'expiring' && <TeamExpiring/>}
          {tab === 'access' && <TeamAccess/>}
          {tab === 'claims' && <TeamClaims/>}
          {tab === 'referrals' && <TeamReferrals/>}
          {tab === 'points' && <TeamPoints/>}
          {tab === 'answers' && <TeamAnswers/>}
          {tab === 'texts' && <TeamTexts/>}
        </div>
      </div>
    </div>
  );
}
window.Team = Team;