// cabinet.jsx — личный кабинет участника (CJM Насти, п. 3.1–3.3, 3.8):
//   Messages     — «Сообщения от Николая» на главной (новость, совет по цели, продление, «Что получилось?»)
//   TariffCard   — компактный «Мой тариф» на главной;   Tariff — экран ?view=tariff
//   ReferralCard — компактная рефералка на главной;     ReferralSection — на экране тарифа
// Оплат в LMS нет: все кнопки тарифа ведут в бота hakku.ai (?start=<action>), клик пишется в /api/track.
// Тексты сообщений, цены и условия — data/messages.json и data/tariffs.json на сервере.

const postJSON = (url, body) => fetch(url, { method:'POST', credentials:'same-origin',
  headers:{ 'Content-Type':'application/json' }, body: body ? JSON.stringify(body) : undefined })
  .then(r => r.json().catch(() => null).then(j => ({ ok: r.ok && j && j.ok, j })))
  .catch(() => ({ ok: false, j: null }));

// копирование с запасным путём для старых браузеров и http
async function copyText(text) {
  try { await navigator.clipboard.writeText(text); return true; } catch (e) {}
  try {
    const t = document.createElement('textarea');
    t.value = text; t.setAttribute('readonly', ''); t.style.position = 'fixed'; t.style.opacity = '0';
    document.body.appendChild(t); t.select(); const ok = document.execCommand('copy'); t.remove(); return ok;
  } catch (e) { return false; }
}
function CopyButton({ text, label = 'Скопировать ссылку', className = 'os-btn sm', onCopy }) {
  const [done, setDone] = React.useState(false);
  const go = async () => {
    if (await copyText(text)) { setDone(true); onCopy && onCopy(); setTimeout(() => setDone(false), 1800); }
  };
  return <button type="button" className={className} onClick={go}>{Icons.copy()} {done ? 'Скопировано' : label}</button>;
}

/* ---- Сообщения от Николая ------------------------------------- */
function NikolayAvatar({ author, size = 40 }) {
  const a = author || {};
  if (a.avatar) return <img className="cm-ava" src={a.avatar} alt="" style={{ width: size, height: size }}/>;
  return <span className="cm-ava" aria-hidden="true" style={{ width: size, height: size, fontSize: size * .36 }}>{a.initials || 'НП'}</span>;
}

// body — массив абзацев; «## …» — подзаголовок, \n — перенос строки
function MsgBody({ body }) {
  return (
    <div className="cm-msg-body">
      {(body || []).map((p, i) => p.startsWith('## ')
        ? <h4 key={i}>{p.slice(3)}</h4>
        : <p key={i}>{p.split('\n').map((l, j) => <React.Fragment key={j}>{j ? <br/> : null}{l}</React.Fragment>)}</p>)}
    </div>
  );
}
const msgPreview = (m) => (m.body || []).filter(p => !p.startsWith('## ')).join(' ').replace(/\n/g, ' ');

function AskForm({ m, onAnswered }) {
  const [text, setText] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState('');
  if (m.answer) return (
    <div className="cm-msg-answered">
      <div className="os-eyebrow" style={{ marginBottom: 6 }}>Твой ответ · команда его видит</div>
      <div style={{ whiteSpace:'pre-wrap' }}>{m.answer.answer}</div>
    </div>
  );
  const send = async (e) => {
    e.preventDefault();
    if (!text.trim()) return setErr('Напиши пару слов о том, что получилось.');
    setBusy(true); setErr('');
    const r = await postJSON(`/api/messages/${encodeURIComponent(m.id)}/answer`, { answer: text });
    setBusy(false);
    if (r.ok) onAnswered(m.id, r.j.answer); else setErr('Не удалось отправить, попробуй ещё раз.');
  };
  return (
    <form className="cm-msg-ask" onSubmit={send}>
      <textarea className="os-login-input cm-textarea" rows={3} maxLength={2000} value={text}
                onChange={e => { setText(e.target.value); setErr(''); }}
                placeholder="Например: собрала ассистента, который готовит еженедельный отчёт" aria-label="Что получилось"/>
      {err && <div className="os-login-err show" role="alert">{err}</div>}
      <div><button className="os-btn sm" type="submit" disabled={busy}>{Icons.send()} {busy ? 'Отправляем…' : 'Отправить'}</button></div>
    </form>
  );
}

function MessageItem({ m, author, open, onToggle, onAnswered, nav }) {
  return (
    <div className={`cm-msg${m.read ? '' : ' unread'}${open ? ' open' : ''}`}>
      <NikolayAvatar author={author} size={36}/>
      <div style={{ minWidth: 0, flex: 1 }}>
        <div className="cm-msg-meta">
          <span>{(author && author.name) || 'Николай'}</span><span>·</span><span>{fmtDay(m.date)}</span>
          {!m.read && <span className="os-badge blue cm-msg-new">новое</span>}
        </div>
        <div className="cm-msg-t">{m.title}</div>
        {open ? (
          <>
            <MsgBody body={m.body}/>
            {m.ask && <AskForm m={m} onAnswered={onAnswered}/>}
            {m.cta && m.cta.view && (
              <button className="os-btn tg sm" style={{ marginTop: 4 }} onClick={() => nav(m.cta.view)}>{m.cta.label} →</button>
            )}
            <div><button type="button" className="cm-linkbtn" onClick={onToggle}>Свернуть</button></div>
          </>
        ) : (
          <>
            <div className="cm-msg-prev">{msgPreview(m)}</div>
            <button type="button" className="cm-linkbtn" onClick={onToggle}>{m.ask && !m.answer ? 'Ответить' : 'Читать'}</button>
          </>
        )}
      </div>
    </div>
  );
}

// compact — главная недели 2: одно сообщение строкой (первое непрочитанное, иначе последнее)
// и «Все · N»; «Читать/Ответить» или «Все» разворачивают обычный список.
function MessageLine({ m, author, count, onOpen, onAll }) {
  return (
    <div className={`os-card cm-msgline${m.read ? '' : ' unread'}`}>
      <NikolayAvatar author={author} size={40}/>
      <div className="cm-msgline-main">
        <div className="cm-msg-meta"><span>Сообщение от {((author && author.name) || 'Николая').split(' ')[0].replace(/й$/, 'я')}</span><span>·</span>
          <span>{m.date === new Date().toISOString().slice(0, 10) ? 'сегодня' : fmtDay(m.date)}</span>{!m.read && <span className="os-badge blue cm-msg-new">новое</span>}</div>
        <div className="cm-msg-t">{m.title}</div>
        <div className="cm-msgline-prev">{msgPreview(m)}</div>
      </div>
      <div className="cm-msgline-act">
        <button type="button" className="os-btn ghost sm" onClick={onOpen}>{m.ask && !m.answer ? 'Ответить' : 'Читать'}</button>
        <button type="button" className="cm-linkbtn cm-msgline-all" onClick={onAll}>Все · {count}</button>
      </div>
    </div>
  );
}

function Messages({ nav, compact = false }) {
  const [data, setData] = React.useState(null);
  const [openId, setOpenId] = React.useState(null);
  const [all, setAll] = React.useState(false);
  const [expanded, setExpanded] = React.useState(!compact);
  React.useEffect(() => {
    let alive = true;
    fetch('/api/messages', { credentials:'same-origin' }).then(r => r.json()).then(j => alive && setData(j && j.ok ? j : { messages: [] }))
      .catch(() => alive && setData({ messages: [] }));
    return () => { alive = false; };
  }, []);
  if (!data || !data.messages.length) return null;
  const list = data.messages;
  const shown = all ? list : list.slice(0, 2);
  const unread = list.filter(x => !x.read).length;
  const toggle = (m) => {
    const next = openId === m.id ? null : m.id;
    setOpenId(next);
    if (next && !m.read) {
      setData(d => ({ ...d, messages: d.messages.map(x => x.id === m.id ? { ...x, read: true } : x) }));
      postJSON(`/api/messages/${encodeURIComponent(m.id)}/read`);
    }
  };
  const answered = (id, answer) => setData(d => ({ ...d, messages: d.messages.map(x => x.id === id ? { ...x, answer } : x) }));
  if (!expanded) {
    const m = list.find(x => !x.read) || list[0];
    return <MessageLine m={m} author={data.author} count={list.length}
                        onOpen={() => { setExpanded(true); toggle(m); }} onAll={() => { setExpanded(true); setAll(true); }}/>;
  }
  return (
    <section aria-label="Сообщения от Николая">
      <div className="cm-h2row">
        <h2 className="os-h2">Сообщения от Николая{unread ? <span className="cm-count">{unread}</span> : null}</h2>
        {list.length > 2 && (
          <button type="button" className="cm-more cm-linkbtn" onClick={() => setAll(a => !a)}>
            {all ? 'Свернуть' : `Все сообщения (${list.length}) →`}
          </button>
        )}
      </div>
      <div className="os-card cm-msgs">
        {shown.map(m => <MessageItem key={m.id} m={m} author={data.author} nav={nav} open={openId === m.id}
                                     onToggle={() => toggle(m)} onAnswered={answered}/>)}
      </div>
    </section>
  );
}

/* ---- Мой тариф -------------------------------------------------- */
const useTariff = () => {
  const [t, setT] = React.useState(undefined);
  React.useEffect(() => {
    let alive = true;
    fetch('/api/tariff', { credentials:'same-origin' }).then(r => r.json()).then(j => alive && setT(j && j.ok ? j.tariff : null))
      .catch(() => alive && setT(null));
    return () => { alive = false; };
  }, []);
  return t;
};
const leftText = (n) => n == null ? '' : n < 0 ? 'срок оплаты прошёл' : n === 0 ? 'последний день' : `${plural(n, 'остался', 'осталось', 'осталось')} ${daysText(n)}`;
const PERIOD_LABEL = { month: 'помесячно', year: 'за год' };

function FixedPrice({ t, compact }) {
  if (!t || !t.fixed_active) return null;
  return (
    <div className={`cm-fixed${compact ? ' compact' : ''}`}>
      Твоя цена зафиксирована до {fmtDateShort(t.price_fixed_until)}{compact ? '' : `: ${fmtRub(t.price)}/мес`}
    </div>
  );
}

// noHead — заголовок «Мой тариф» снаружи карточки (правая колонка главной)
function TariffCard({ nav, noHead = false }) {
  const t = useTariff();
  if (!t || t.admin) return null;
  const soon = t.days_left != null && t.days_left <= t.other_options_days;
  return (
    <div className={`os-card cm-mini${soon ? ' soon' : ''}`}>
      {(!noHead || soon) && <div className="cm-mini-h">
        {!noHead ? <span className="os-eyebrow">Мой тариф</span> : <span/>}
        {soon && <span className="os-badge orange">{leftText(t.days_left)}</span>}
      </div>}
      <div className="cm-mini-big">{TIER_LABEL[t.tier] || t.tariff}</div>
      <div className="cm-mini-d">
        {t.paid_until ? <>До <b>{fmtDateShort(t.paid_until)}</b>{!soon && t.days_left != null ? ` · ${leftText(t.days_left)}` : ''}</> : 'Без срока'}
        {t.price ? <> · {fmtRub(t.price)}/мес</> : null}
      </div>
      <FixedPrice t={t} compact/>
      <button className={`os-btn sm ${soon ? 'tg' : 'ghost'}`} style={{ marginTop: 'auto' }} onClick={() => nav('tariff')}>
        {soon ? 'Продлить →' : 'Продлить или сменить →'}
      </button>
    </div>
  );
}

const trackClick = (what) => track('tariff:' + what);

function OptionCard({ o, current }) {
  return (
    <div className={`cm-topt${o.action === 'upgrade_pro' ? ' accent' : ''}`}>
      <div className="cm-topt-l">{o.label}</div>
      {o.price != null && (
        <div className="cm-topt-p">
          <b>{fmtRub(o.price)}</b><span>/{o.per}</span>
          {o.was ? <s>{fmtRub(o.was)}</s> : null}
        </div>
      )}
      <div className="cm-topt-d">
        {o.action === 'upgrade_pro' && <>Цена для участников Enthusiast. Год — {fmtRub(o.year)}.</>}
        {o.action === 'pay_year' && o.save && <>Экономия {o.save}{current ? `, ${current}` : ''}</>}
        {o.action === 'pay_year_duo' && <>{o.sub}{o.save ? ` · экономия ${o.save}` : ''}</>}
        {o.action === 'renew_month' && 'Своя цена, как сейчас'}
        {!['upgrade_pro', 'pay_year', 'pay_year_duo', 'renew_month'].includes(o.action) && o.sub}
      </div>
      {o.adds && o.adds.length > 0 && (
        <ul className="cm-topt-adds" aria-label="Что добавится"><li className="cm-topt-adds-h">Что добавится</li>{o.adds.map((a, i) => <li key={i}>{Icons.check()}<span>{a}</span></li>)}</ul>
      )}
      <a className={`os-btn sm block ${o.action === 'upgrade_pro' ? 'tg' : o.action === 'renew_month' ? '' : 'ghost'}`}
         href={o.url} target="_blank" rel="noopener noreferrer" onClick={() => trackClick(o.action)}>Выбрать</a>
    </div>
  );
}

function CompareTable({ t }) {
  const rows = (t.compare && t.compare.rows) || [];
  const mark = (on) => on ? <span className="cm-yes" aria-label="входит">{Icons.check()}</span> : <span className="cm-no" aria-label="не входит">{Icons.dash()}</span>;
  return (
    <div className="cm-cmp" role="table" aria-label="Что входит в тарифы">
      <div className="cm-cmp-row head" role="row">
        <span role="columnheader">Что входит</span>
        <span role="columnheader" className={t.tier === 'enthusiast' ? 'cur' : ''}>Enthusiast</span>
        <span role="columnheader" className={t.tier === 'pro' ? 'cur' : ''}>PRO</span>
      </div>
      {rows.map((r, i) => (
        <div key={i} className={`cm-cmp-row${r.enthusiast ? '' : ' pro-only'}`} role="row">
          <span role="cell">{r.t}</span>
          <span role="cell" className={t.tier === 'enthusiast' ? 'cur' : ''}>{mark(r.enthusiast)}</span>
          <span role="cell" className={t.tier === 'pro' ? 'cur' : ''}>{mark(r.pro)}</span>
        </div>
      ))}
    </div>
  );
}

function Tariff({ nav, params = {} }) {
  const t = useTariff();
  const [cmp, setCmp] = React.useState(false);
  React.useEffect(() => {
    if (t && params.s === 'ref') setTimeout(() => { const el = document.getElementById('ref'); el && el.scrollIntoView(); }, 50);
  }, [t]);
  const frame = (body) => (
    <div className="os-frame">
      <Sidebar active="tariff" nav={nav}/>
      <div className="os-main">
        <Topbar crumbs={['Сообщество', 'Мой тариф']}/>
        <div className="os-content">{body}</div>
      </div>
    </div>
  );
  if (t === undefined) return frame(<div className="cm-empty">Загружаем тариф…</div>);
  if (!t) return frame(<div className="cm-soon">Не нашли твой тариф в списке участников. Напиши в Службу заботы — разберёмся.</div>);
  if (t.admin) return frame(<>
    <div><div className="os-eyebrow" style={{ marginBottom: 10 }}>Мой тариф</div><h1 className="os-h1">Команда сообщества</h1>
      <p className="os-sub" style={{ marginTop: 8 }}>Доступ ко всем материалам без срока оплаты.</p></div>
    <ReferralSection/>
  </>);

  const yearCur = t.tier === 'pro' && t.fixed_active ? 'цена зафиксирована' : '';
  const othersLabels = t.others.map(o => o.label.toLowerCase().replace('только база знаний', '«Только База знаний»'));
  return frame(<>
    <div>
      <div className="os-eyebrow" style={{ marginBottom: 10 }}>Мой тариф</div>
      <h1 className="os-h1">Мой тариф: {TIER_LABEL[t.tier] || t.tariff}</h1>
      <p className="os-sub" style={{ marginTop: 8, maxWidth: 640 }}>
        {t.paid_until ? <>Оплачено до <b style={{ color:'var(--ink)' }}>{fmtDateShort(t.paid_until)}</b>, {leftText(t.days_left)}</> : 'Без срока оплаты'}
        {t.price ? <> · {fmtRub(t.price)}/мес</> : null}
        {t.period && PERIOD_LABEL[t.period] ? <> · оплата {PERIOD_LABEL[t.period]}</> : null}
        {t.status === 'trial' ? ' · пробный период' : ''}.
      </p>
    </div>

    <FixedPrice t={t}/>

    <div>
      <div className="cm-h2row">
        <h2 className="os-h2">Продлить или сменить</h2>
        {(t.tier === 'pro' || t.tier === 'enthusiast') && (
          <button type="button" className="os-btn ghost sm" aria-expanded={cmp}
                  onClick={() => { setCmp(c => !c); if (!cmp) trackClick('compare'); }}>
            {cmp ? 'Скрыть сравнение' : 'Сравнить тарифы'}
          </button>
        )}
      </div>
      {cmp && <div style={{ marginBottom: 16 }}><CompareTable t={t}/></div>}
      <div className={`cm-topts n${t.options.length}`}>{t.options.map(o => <OptionCard key={o.action} o={o} current={yearCur}/>)}</div>
    </div>

    {t.others.length > 0 && (t.others_open ? (
      <div>
        <h3 className="cm-h3">Другие варианты</h3>
        <div className="os-card cm-others">
          {t.others.map(o => (
            <a key={o.action} className="cm-other" href={o.url} target="_blank" rel="noopener noreferrer" onClick={() => trackClick(o.action)}>
              <span style={{ minWidth: 0 }}>
                <span className="cm-other-t">{o.label}</span>
                {o.sub && <span className="cm-other-d">{o.sub}</span>}
              </span>
              <span className="cm-other-p">{o.price != null ? `${fmtRub(o.price)}/${o.per}` : ''} {Icons.ext()}</span>
            </a>
          ))}
        </div>
      </div>
    ) : (
      <details className="cm-details">
        <summary>Другие варианты</summary>
        <p>Откроются за {daysText(t.other_options_days)} до конца оплаты: {othersLabels.join(', ')}. Если хочешь поменять что-то раньше, напиши в Службу заботы.</p>
      </details>
    ))}

    <div className="cm-care">
      <span>{t.care.label || 'Корпоративный тариф от 3 человек'}</span>
      <a className="cm-more" href={t.care.url} target="_blank" rel="noopener noreferrer" onClick={() => trackClick('care')}>{t.care.button || 'Написать в Службу заботы'} ↗</a>
    </div>
    <p className="cm-fine">{t.note}</p>

    <ReferralSection/>
  </>);
}

/* ---- Реферальная программа ------------------------------------ */
const useReferral = () => {
  const [r, setR] = React.useState(undefined);
  React.useEffect(() => {
    let alive = true;
    fetch('/api/referral', { credentials:'same-origin' }).then(x => x.json()).then(j => alive && setR(j && j.ok ? j : null))
      .catch(() => alive && setR(null));
    return () => { alive = false; };
  }, []);
  return r;
};
const INV_BADGE = { joined: '', paid: 'blue', bonus: 'mag' };

function ReferralCard({ nav, noHead = false }) {
  const r = useReferral();
  if (!r) return null;
  const paid = r.invited.filter(x => x.status !== 'joined').length;
  return (
    <div className="os-card cm-mini">
      {!noHead && <div className="cm-mini-h"><span className="os-eyebrow">Пригласи друга</span><span className="cm-mini-ic">{Icons.gift()}</span></div>}
      <div className="cm-mini-t">Месяц бесплатно или −50% на год — за каждого, кто оплатит</div>
      <div className="cm-ref-link compact"><span>{r.link.replace(/^https:\/\//, '')}</span></div>
      <div className="cm-mini-foot">
        <CopyButton text={r.link} className="os-btn sm" onCopy={() => track('ref:copy')}/>
        <button type="button" className="cm-linkbtn" onClick={() => nav('tariff', { s: 'ref' })}>
          {r.invited.length ? `Приглашено ${r.invited.length}, оплатили ${paid}` : 'Условия'} →
        </button>
      </div>
    </div>
  );
}

function ReferralSection() {
  const r = useReferral();
  if (!r) return null;
  return (
    <section id="ref" className="os-card cm-ref" aria-label="Реферальная программа">
      <div className="cm-h2row" style={{ marginBottom: 8 }}><h2 className="os-h2" style={{ fontSize: 22 }}>Пригласи друга в сообщество</h2></div>
      <p className="os-sub" style={{ margin: '0 0 14px', fontSize: 14 }}>
        Бонус за каждого приглашённого: {r.bonuses.map(b => b.charAt(0).toLowerCase() + b.slice(1)).join(' или ')}.
      </p>
      <div className="cm-ref-row">
        <div className="cm-ref-link"><span>{r.link}</span></div>
        <CopyButton text={r.link} onCopy={() => track('ref:copy')}/>
      </div>
      <ul className="cm-ref-rules">
        {r.rules.map((x, i) => <li key={i}>{x}</li>)}
        <li>Не больше {r.monthly_limit} {plural(r.monthly_limit, 'бонуса', 'бонусов', 'бонусов')} в месяц.</li>
      </ul>
      <h3 className="cm-h3" style={{ marginTop: 18 }}>Приглашённые</h3>
      {r.invited.length ? (
        <div className="cm-inv">
          {r.invited.map((x, i) => (
            <div key={i} className="cm-inv-row">
              <span>{x.name}</span>
              <span className={`os-badge ${INV_BADGE[x.status] || ''}`}>{x.label}</span>
            </div>
          ))}
        </div>
      ) : <div className="cm-soon">Пока никого. Отправь ссылку другу, и он появится здесь со статусом.</div>}
      <p className="cm-fine" style={{ marginTop: 12 }}>Статусы: перешёл → оплатил → бонус начислен. Обновляются в течение дня.</p>
    </section>
  );
}

Object.assign(window, { Messages, TariffCard, Tariff, ReferralCard, ReferralSection, CopyButton, copyText, postJSON, NikolayAvatar });