// churn.jsx — экран «Почему уходишь?» (?view=churn, CJM Насти, п. 3.8).
//   Открывается из «Мой тариф» («Не буду продлевать») и сам — на главной, если подписка закончилась
//   без оплаты и идут 3 дня grace (churn_pending в /api/auth/me; «Не сейчас» — до конца сессии).
//   Вопрос «Что повлияло на решение?» → вариант + «Дополнить ответ» → карточка-предложение
//   (кнопка ведёт в бота ?start=<action>) или «Всё равно не продлевать» → благодарность и дата,
//   до которой можно вернуться по прежней цене. Ответ, клик и отказ сохраняет сервер (/api/churn),
//   их видит команда. Тексты — data/churn.json + правки в «Команда» → «Тексты».

function ChurnOffer({ o, answerId, onClicked }) {
  const click = () => {
    postJSON(`/api/churn/${encodeURIComponent(answerId)}/click`, { offer: o.id });
    onClicked && onClicked(o.id);
  };
  return (
    <div className="os-card cm-offer">
      <div className="cm-offer-t">{o.title}</div>
      <p className="cm-offer-d">{o.text}</p>
      <a className="os-btn tg sm" href={o.url} target="_blank" rel="noopener noreferrer" onClick={click}>{o.button} ↗</a>
    </div>
  );
}

function Churn({ nav }) {
  const [data, reload] = useApi('/api/churn');
  const [reason, setReason] = React.useState('');
  const [comment, setComment] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState('');
  const [answer, setAnswer] = React.useState(null);
  const [edit, setEdit] = React.useState(false);
  React.useEffect(() => { if (data && data.answer) setAnswer(data.answer); }, [data]);
  const skip = () => { try { sessionStorage.setItem('cm_churn_skip', '1'); } catch (e) {} nav('home'); };
  const { member } = ME();
  const frame = (body) => (
    <div className="os-frame">
      <Sidebar active="tariff" nav={nav}/>
      <div className="os-main">
        <Topbar crumbs={['Сообщество', 'Мой тариф', 'Почему уходишь?']}/>
        <div className="os-content cm-churn">{body}</div>
      </div>
    </div>
  );
  if (data === undefined) return frame(<div className="cm-empty">Загружаем…</div>);
  if (!data) return frame(<div className="cm-soon">Экран не загрузился. Обнови страницу через минуту.</div>);

  const send = async (e) => {
    e.preventDefault();
    if (!reason) return setErr('Выбери вариант, который ближе всего.');
    setBusy(true); setErr('');
    const r = await postJSON('/api/churn', { reason, comment });
    setBusy(false);
    if (!r.ok) return setErr(r.j && r.j.error === 'comment_too_long' ? 'Комментарий длинноват: до 1 000 знаков.' : 'Не получилось отправить, попробуй ещё раз.');
    setAnswer(r.j.answer); setEdit(false);
    try { sessionStorage.setItem('cm_churn_skip', '1'); } catch (x) {}
    if (window.__ME) window.__ME.churn_pending = false;
  };
  const decline = async () => {
    setBusy(true);
    await postJSON(`/api/churn/${encodeURIComponent(answer.id)}/decline`);
    setBusy(false);
    setAnswer(a => ({ ...a, declined: true }));
  };
  const label = (id) => (data.reasons.find(r => r.id === id) || {}).label || id;
  const hint = (data.reasons.find(r => r.id === reason) || {}).comment_hint || '';

  const head = (
    <div>
      <div className="os-eyebrow" style={{ marginBottom: 10 }}>Продление</div>
      <h1 className="os-h1">Почему уходишь?</h1>
      <p className="os-sub" style={{ marginTop: 8, maxWidth: 620 }}>
        {data.in_grace
          ? <>Подписка закончилась {fmtDateShort(data.paid_until)}. Доступ держится ещё несколько дней, до {fmtDateShort(member.grace_until)}. </>
          : data.paid_until ? <>Подписка действует до {fmtDateShort(data.paid_until)}. </> : null}
        {answer && !edit ? (answer.declined ? 'Жаль расставаться.' : 'Спасибо за ответ. Вот что может подойти.') : 'Ответ займёт минуту и поможет нам стать лучше. А мы предложим вариант, который может подойти.'}
      </p>
    </div>
  );

  // благодарность после «Всё равно не продлевать»
  if (answer && answer.declined && !edit) return frame(<>
    {head}
    <div className="os-card cm-churn-bye">
      <span className="cm-bicon">{Icons.check()}</span>
      <div style={{ minWidth: 0 }}>
        <div className="cm-offer-t">{data.decline.title}</div>
        <p className="cm-offer-d">{data.decline.text}</p>
        <div className="cm-row-btns" style={{ marginTop: 14 }}>
          <button type="button" className="os-btn sm" onClick={() => nav('home')}>На главную</button>
          <button type="button" className="os-btn ghost sm" onClick={() => nav('tariff')}>Мой тариф</button>
        </div>
      </div>
    </div>
  </>);

  // ответ есть — предложения по причине
  if (answer && !edit) return frame(<>
    {head}
    <div className="cm-churn-ans">
      <span className="cm-fine">Твой ответ: <b>{label(answer.reason)}</b>{answer.comment ? ` · «${answer.comment}»` : ''}</span>
      <button type="button" className="cm-linkbtn" onClick={() => { setReason(answer.reason); setComment(answer.comment || ''); setEdit(true); }}>Изменить ответ</button>
    </div>
    {answer.offers.length > 0 && (
      <section>
        <div className="cm-h2row"><h2 className="os-h2">Может подойти</h2></div>
        <div className={`cm-offers n${answer.offers.length}`}>
          {answer.offers.map(o => <ChurnOffer key={o.id} o={o} answerId={answer.id} onClicked={() => toast('Открываем Службу заботы')}/>)}
        </div>
      </section>
    )}
    {data.return_until && <p className="cm-fine">Если всё же уйдёшь: вернуться по прежней цене можно до {fmtDateShort(data.return_until)}.</p>}
    <div className="cm-row-btns">
      <button type="button" className="os-btn ghost" disabled={busy} onClick={decline}>{data.decline.button}</button>
    </div>
  </>);

  return frame(<>
    {head}
    <form className="os-card cm-churn-form" onSubmit={send}>
      <fieldset className="cm-q" style={{ border: 0, padding: 0, margin: 0 }}>
        <legend className="cm-field-l">{data.question}</legend>
        <div className="cm-radios cm-churn-reasons">
          {data.reasons.map(r => (
            <label key={r.id} className={`cm-radio${reason === r.id ? ' on' : ''}`}>
              <input type="radio" name="reason" value={r.id} checked={reason === r.id} onChange={() => { setReason(r.id); setErr(''); }}/>
              <span><b>{r.label}</b></span>
            </label>
          ))}
        </div>
      </fieldset>
      <div>
        <label className="cm-field-l" htmlFor="churn-c">{data.comment_label} <span className="cm-fine">по желанию</span></label>
        <textarea id="churn-c" className="os-login-input cm-textarea" rows={3} maxLength={1000} value={comment}
                  onChange={e => setComment(e.target.value)} placeholder={hint || 'Что могли бы сделать лучше?'}/>
        <div className="cm-field-f"><span/><span className="cm-counter">{comment.length} / 1000</span></div>
      </div>
      {err && <div className="os-login-err show" role="alert">{err}</div>}
      <div className="cm-row-btns">
        <button type="submit" className="os-btn" disabled={busy}>{busy ? 'Отправляем…' : 'Ответить'}</button>
        {edit
          ? <button type="button" className="os-btn ghost" onClick={() => setEdit(false)}>Отмена</button>
          : <button type="button" className="os-btn ghost" onClick={data.in_grace ? skip : () => nav('tariff')}>{data.in_grace ? 'Не сейчас' : 'Назад к тарифу'}</button>}
      </div>
    </form>
  </>);
}

Object.assign(window, { Churn });