// texts.jsx — «Команда» → «Тексты» (CJM 3.1: «команда меняет тексты предложений и бонусов без
// разработчика»): сообщения Николая, карточки бонусов, подписи вариантов тарифа (без цен) и экран
// «Почему уходишь?». json в репо — исходный текст; правка хранится в базе поверх него и сразу видна
// участникам, «Вернуть исходный» удаляет правку. Внизу — журнал: кто и когда менял.
// Проверки — на сервере (/api/admin/texts), здесь те же правила для подсказки до отправки.

const TEXT_GROUPS = [['messages', 'Сообщения Николая'], ['bonuses', 'Подарки за баллы'], ['tariffs', 'Варианты тарифа'], ['churn', 'Экран ухода']];
const TEXT_ERR = {
  required: () => 'Заполни поле', too_long: (e) => `Не длиннее ${e.max} знаков`, not_int: () => 'Нужно целое число',
  out_of_range: (e) => `От ${fmtNum(e.min)} до ${fmtNum(e.max)}`, too_many: (e) => `Не больше ${e.max} строк`,
};
// значение поля → строка для формы и обратно
const toForm = (f, v) => f.type === 'paras' ? (v || []).join('\n\n') : f.type === 'lines' ? (v || []).join('\n') : v == null ? '' : String(v);
const fromForm = (f, s) => f.type === 'paras' ? s.split(/\n\s*\n/).map(x => x.trim()).filter(Boolean)
  : f.type === 'lines' ? s.split('\n').map(x => x.trim()).filter(Boolean) : f.type === 'int' ? (s.trim() === '' ? null : s.trim()) : s;
function checkField(f, s) {
  const v = s.trim();
  if (f.type === 'int') {
    if (!v) return f.nullable ? null : { error: 'required' };
    const n = Number(v.replace(/\s/g, ''));
    if (!Number.isInteger(n)) return { error: 'not_int' };
    if (n < f.min || n > f.max) return { error: 'out_of_range', min: f.min, max: f.max };
    return null;
  }
  if (f.required && !v) return { error: 'required' };
  if (f.type === 'lines') {
    const l = v.split('\n').filter(x => x.trim());
    if (f.maxItems && l.length > f.maxItems) return { error: 'too_many', max: f.maxItems };
    if (l.some(x => x.trim().length > f.max)) return { error: 'too_long', max: f.max };
    return null;
  }
  if (v.length > f.max) return { error: 'too_long', max: f.max };
  return null;
}

function TextEntry({ e, onSaved }) {
  const [open, setOpen] = React.useState(false);
  const init = () => Object.fromEntries(e.fields.map(f => [f.name, toForm(f, e.value[f.name])]));
  const [form, setForm] = React.useState(init);
  const [errs, setErrs] = React.useState({});
  const [busy, setBusy] = React.useState(false);
  React.useEffect(() => { setForm(init()); setErrs({}); }, [e]);
  const dirty = e.fields.some(f => form[f.name] !== toForm(f, e.value[f.name]));
  const save = async () => {
    const bad = {};
    for (const f of e.fields) { const x = checkField(f, form[f.name]); if (x) bad[f.name] = x; }
    setErrs(bad);
    if (Object.keys(bad).length) return;
    setBusy(true);
    const value = Object.fromEntries(e.fields.map(f => [f.name, fromForm(f, form[f.name])]));
    const r = await putJSON('/api/admin/texts/' + encodeURIComponent(e.key), { value });
    setBusy(false);
    if (!r.ok) {
      if (r.j && r.j.field) return setErrs({ [r.j.field]: r.j });
      return toast('Не сохранилось: ошибка сервера');
    }
    toast('Сохранено, участники уже видят новый текст');
    onSaved();
  };
  const reset = async () => {
    if (!window.confirm('Вернуть исходный текст из файла? Твоя правка удалится, в журнале останется запись.')) return;
    setBusy(true);
    const r = await fetch('/api/admin/texts/' + encodeURIComponent(e.key), { method: 'DELETE', credentials: 'same-origin' }).then(x => x.json()).catch(() => null);
    setBusy(false);
    if (r && r.ok) { toast('Вернули исходный текст'); onSaved(); }
  };
  const preview = e.fields.map(f => toForm(f, e.value[f.name])).filter(Boolean).join(' · ').replace(/\n+/g, ' ');
  return (
    <div className={`os-card cm-txt${open ? ' open' : ''}`}>
      <button type="button" className="cm-txt-h" aria-expanded={open} onClick={() => setOpen(o => !o)}>
        <span style={{ minWidth: 0, flex: 1 }}>
          <span className="cm-txt-t">{e.title}</span>
          {!open && <span className="cm-txt-p">{preview}</span>}
        </span>
        {e.changed
          ? <span className="os-badge blue" title={`${e.updated_by} · ${fmtDT(e.updated_at)}`}>изменено</span>
          : <span className="os-badge cm-txt-def">исходный</span>}
        <span className="cm-row-chev">{Icons.chev()}</span>
      </button>
      {open && (
        <div className="cm-txt-b">
          {e.changed && <div className="cm-fine">Изменил {e.updated_by} · {fmtDT(e.updated_at)}</div>}
          {e.fields.map(f => {
            const err = errs[f.name];
            const multi = f.type === 'long' || f.type === 'paras' || f.type === 'lines';
            const len = f.type === 'int' ? null : (form[f.name] || '').trim().length;
            return (
              <div key={f.name} className={`cm-field${err ? ' bad' : ''}`}>
                <label className="cm-field-l" htmlFor={`${e.key}-${f.name}`}>{f.label}{!f.required && <span className="cm-fine">по желанию</span>}</label>
                {f.hint && <div className="cm-field-h">{f.hint}</div>}
                {multi
                  ? <textarea id={`${e.key}-${f.name}`} className="os-login-input cm-textarea" rows={f.type === 'paras' ? 8 : 3} value={form[f.name]}
                              onChange={x => { setForm({ ...form, [f.name]: x.target.value }); setErrs({ ...errs, [f.name]: null }); }}/>
                  : <input id={`${e.key}-${f.name}`} className={`os-login-input${f.type === 'int' ? ' cm-txt-num' : ''}`} inputMode={f.type === 'int' ? 'numeric' : undefined}
                           value={form[f.name]} onChange={x => { setForm({ ...form, [f.name]: x.target.value }); setErrs({ ...errs, [f.name]: null }); }}/>}
                <div className="cm-field-f">
                  <span className="cm-field-err">{err ? (TEXT_ERR[err.error] || (() => 'Проверь поле'))(err) : ''}</span>
                  {len != null && f.type !== 'lines' && <span className={`cm-counter${len > f.max ? ' over' : len > f.max * 0.9 ? ' near' : ''}`}>{len} / {f.max}</span>}
                </div>
              </div>
            );
          })}
          {e.note && <p className="cm-fine">{e.note}</p>}
          {e.changed && (
            <details className="cm-details">
              <summary>Исходный текст из файла</summary>
              {e.fields.map(f => <p key={f.name}><b>{f.label}:</b> {toForm(f, e.default[f.name]) || '—'}</p>)}
            </details>
          )}
          <div className="cm-row-btns">
            <button type="button" className="os-btn sm" disabled={busy || !dirty} onClick={save}>{busy ? 'Сохраняем…' : 'Сохранить'}</button>
            {dirty && <button type="button" className="os-btn ghost sm" disabled={busy} onClick={() => { setForm(init()); setErrs({}); }}>Отменить правки</button>}
            {e.changed && <button type="button" className="os-btn ghost sm" disabled={busy} onClick={reset}>Вернуть исходный</button>}
          </div>
        </div>
      )}
    </div>
  );
}

function TeamTexts() {
  const [data, reload] = useApi('/api/admin/texts');
  const [log, reloadLog] = useApi('/api/admin/texts-log');
  const [group, setGroup] = React.useState('messages');
  if (data === undefined) return <div className="cm-empty">Загружаем тексты…</div>;
  if (!data) return <div className="cm-soon">Тексты не загрузились. Обнови страницу через минуту.</div>;
  const titleOf = (key) => (data.entries.find(x => x.key === key) || {}).title || key;
  const list = data.entries.filter(x => x.group === group);
  const changed = (g) => data.entries.filter(x => x.group === g && x.changed).length;
  return (
    <section className="cm-sec">
      <p className="cm-fine" style={{ margin: 0 }}>Правка сразу видна участникам. Исходные тексты лежат в файлах репозитория, «Вернуть исходный» откатывает к ним. Цены меняются только в файле тарифов.</p>
      <div className="os-chips">
        {TEXT_GROUPS.map(([k, t]) => (
          <button key={k} className={group === k ? 'on' : ''} onClick={() => setGroup(k)}>{t}{changed(k) ? ` · ${changed(k)} изм.` : ''}</button>
        ))}
      </div>
      {list.map(e => <TextEntry key={e.key + (e.updated_at || '')} e={e} onSaved={() => { reload(); reloadLog(); }}/>)}
      <h3 className="cm-h3" style={{ marginTop: 10 }}>Журнал изменений</h3>
      {log && log.log.length ? (
        <div className="os-card cm-hist">
          {log.log.slice(0, 30).map(x => (
            <div key={x.id} className="cm-hist-row">
              <span className="cm-hist-d">{fmtShortDay(x.created_at)}</span>
              <span className="cm-hist-t">{x.action === 'reset' ? 'Вернул исходный' : 'Изменил'}: <b>{titleOf(x.key)}</b> · {x.email}</span>
              <span className="cm-hist-p zero">{new Date(x.created_at).toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit', timeZone: 'Europe/Moscow' })}</span>
            </div>
          ))}
        </div>
      ) : <div className="cm-soon">Тексты ещё никто не менял.</div>}
    </section>
  );
}

Object.assign(window, { TeamTexts });