// onboarding.jsx — анкета первого входа (CJM Насти, п. 3.2, на «ты»): имя и фамилия, сфера,
// компания, страна и город, о себе (до 300 знаков), цель (7 из data/goals.json + свой вариант).
// Сохраняется в app.profiles (PUT /api/profile). В ответ — 3 материала под цель и промокод
// на Хакку-коворк, если для участника есть свободный код. Экран «Спасибо!» — тут же.

const ERR_TEXT_PROFILE = {
  bad_first_name: 'Напиши имя.', bad_last_name: 'Напиши фамилию.',
  bad_sphere: 'Выбери, чем ты занимаешься.', bad_country: 'Укажи страну.', bad_city: 'Укажи город.',
  about_too_long: 'Расскажи о себе короче — до 300 знаков.',
  bad_goal: 'Выбери, чего хочешь достичь с помощью ИИ.', goal_custom_required: 'Опиши свою цель в паре слов.',
};
const ABOUT_MAX = 300;
const ABOUT_EXAMPLE = 'Я маркетолог, веду соцсети небольшого бренда. С ИИ пишу тексты и придумываю идеи. Хочу собрать ассистента для отчётов.';

// Имя из Hakku ID часто = начало почты (OTP-вход отдаёт пустое имя) — такое не предзаполняем
function nameParts(user) {
  const n = String((user && user.name) || '').trim();
  const local = String((user && user.email) || '').split('@')[0];
  if (!n || n === local) return ['', ''];
  const p = n.split(/\s+/);
  return [p[0] || '', p.slice(1).join(' ')];
}

function CoworkingCode({ c }) {
  if (!c) return null;
  return (
    <div className="cm-promo">
      <div className="cm-promo-ic">{Icons.gift()}</div>
      <div style={{ minWidth: 0, flex: 1 }}>
        <div className="cm-promo-h">Держи промокод на Хакку-коворк</div>
        <div className="cm-promo-row">
          <code className="cm-promo-code">{c.code}</code>
          <CopyButton text={c.code} label="Скопировать" className="os-btn ghost sm" onCopy={() => track('cowork:copy')}/>
        </div>
        <div className="cm-promo-d">
          Личный и одноразовый{c.expires ? `, действует до ${fmtDateShort(c.expires)}` : ''}. Промокод останется в профиле.
        </div>
      </div>
    </div>
  );
}
window.CoworkingCode = CoworkingCode;

function Thanks({ nav, goalId, goalCustom, rec, coworking }) {
  const g = goalOf(goalId);
  const title = goalId === 'other' ? goalCustom : g && g.title;
  const proHint = g && g.pro_hint && ME().member.tier !== 'pro';
  return (
    <div className="os-frame">
      <Sidebar active="home" 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 }}>
              Твоя цель — <b style={{ color:'var(--ink)' }}>{title}</b>. Николай уже написал тебе совет по ней, он на главной.
              Ниже три материала, с которых стоит начать.
            </p>
          </div>

          <CoworkingCode c={coworking}/>

          <div className="cm-grid-3">{rec.map(r => <MatCard key={r.slug} it={r} nav={nav}/>)}</div>

          <div className="os-card tight cm-tg">
            <div className="cm-tg-t">
              <div style={{ fontWeight: 600, fontSize: 14.5 }}>Подключи Telegram</div>
              <div style={{ fontSize: 13, color:'var(--ink-55)', lineHeight: 1.5, marginTop: 3 }}>
                Уведомления о сообщениях и эфирах от бота hakku.ai. Без бота пришлём на почту.
              </div>
            </div>
            <a className="os-btn tg sm" href={CFG().bot_url} target="_blank" rel="noopener noreferrer"
               onClick={() => track('tg:connect')} style={{ textDecoration:'none' }}>Подключить Telegram ↗</a>
          </div>

          {proHint && (
            <div className="os-card tight cm-note">
              <div style={{ fontWeight: 600, fontSize: 14 }}>Под твою цель хорошо подходит PRO</div>
              <div style={{ fontSize: 13, color:'var(--ink-55)', lineHeight: 1.5, marginTop: 4 }}>
                Q&A с основателями, гость с сетапом, мастермайнд раз в месяц и офлайн-встречи.
                {ME().member.tier === 'enthusiast' ? ' Для участников Enthusiast — 4 500 ₽/мес вместо 4 900 ₽.' : ''}
              </div>
              <button className="os-btn ghost sm" style={{ marginTop: 12 }} onClick={() => nav('tariff')}>Сравнить тарифы →</button>
            </div>
          )}

          <div><button className="os-btn" onClick={() => nav('home')}>На главную →</button></div>
        </div>
      </div>
    </div>
  );
}

function Onboarding({ nav }) {
  const cfg = CFG();
  const prev = ME().profile;
  const [fn0, ln0] = nameParts(ME().user);
  const [firstName_, setFirst] = React.useState((prev && prev.first_name) || fn0);
  const [lastName, setLast] = React.useState((prev && prev.last_name) || ln0);
  const [sphere, setSphere] = React.useState((prev && prev.sphere) || '');
  const [sphereCustom, setSphereCustom] = React.useState((prev && prev.sphere_custom) || '');
  const [company, setCompany] = React.useState((prev && prev.company) || '');
  const [country, setCountry] = React.useState((prev && prev.country) || '');
  const [city, setCity] = React.useState((prev && prev.city) || '');
  const [about, setAbout] = React.useState((prev && prev.about) || '');
  // старая цель (до 10.2026) подставляется её новым аналогом
  const prevGoal = prev ? (prev.goal === 'other' ? 'other' : ((goalOf(prev.goal) || {}).id || '')) : '';
  const [goal, setGoal] = React.useState(prevGoal);
  const [goalCustom, setGoalCustom] = React.useState((prev && prev.goal_custom) || '');
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState('');
  const [done, setDone] = React.useState(null);
  const clr = (f) => (e) => { f(e.target.value); setErr(''); };

  const submit = async (e) => {
    e.preventDefault();
    if (busy) return;
    const E = ERR_TEXT_PROFILE;
    if (!firstName_.trim()) return setErr(E.bad_first_name);
    if (!lastName.trim()) return setErr(E.bad_last_name);
    if (!sphere) return setErr(E.bad_sphere);
    if (!country.trim()) return setErr(E.bad_country);
    if (!city.trim()) return setErr(E.bad_city);
    if (about.trim().length > ABOUT_MAX) return setErr(E.about_too_long);
    if (!goal) return setErr(E.bad_goal);
    if (goal === 'other' && !goalCustom.trim()) return setErr(E.goal_custom_required);
    setBusy(true); setErr('');
    try {
      const r = await fetch('/api/profile', { method:'PUT', credentials:'same-origin', headers:{ 'Content-Type':'application/json' },
        body: JSON.stringify({ first_name: firstName_, last_name: lastName, sphere, sphere_custom: sphereCustom, company,
                               country, city, about, goal, goal_custom: goalCustom }) });
      const j = await r.json().catch(()=>null);
      if (r.ok && j && j.ok) {
        window.__ME = { ...ME(), profile: j.profile };
        setDone({ rec: j.recommended || [], coworking: j.coworking || null });
        window.scrollTo(0, 0);
      } else setErr(ERR_TEXT_PROFILE[j && j.error] || 'Не удалось сохранить, попробуй ещё раз.');
    } catch (e2) { setErr('Сервер не ответил, попробуй через минуту.'); }
    setBusy(false);
  };
  const skip = () => { try { sessionStorage.setItem('cm_onboarding_skip', '1'); } catch (e) {} nav('home'); };

  if (done) return <Thanks nav={nav} goalId={goal} goalCustom={goalCustom} rec={done.rec} coworking={done.coworking}/>;

  const Opt = ({ children }) => <span className="cm-q-opt">{children}</span>;
  return (
    <div className="os-frame">
      <Sidebar active="home" nav={nav}/>
      <div className="os-main">
        <Topbar crumbs={['Сообщество', 'Анкета']}/>
        <form className="os-content cm-form" onSubmit={submit} noValidate>
          <div>
            <div className="os-eyebrow" style={{ marginBottom: 10 }}>{prev ? 'Анкета участника' : 'Первый вход · 2 минуты'}</div>
            <h1 className="os-h1">Давай познакомимся</h1>
            <p className="os-sub" style={{ marginTop: 8, maxWidth: 620 }}>
              По ответам подберём материалы, познакомим с участниками рядом и подскажем, с чего начать.
            </p>
          </div>

          <fieldset className="cm-q">
            <legend><span className="cm-q-n">1</span>Как тебя зовут?</legend>
            <div className="cm-pair">
              <input className="os-login-input" type="text" maxLength={60} autoComplete="given-name" placeholder="Имя"
                     value={firstName_} onChange={clr(setFirst)} aria-label="Имя"/>
              <input className="os-login-input" type="text" maxLength={60} autoComplete="family-name" placeholder="Фамилия"
                     value={lastName} onChange={clr(setLast)} aria-label="Фамилия"/>
            </div>
          </fieldset>

          <fieldset className="cm-q">
            <legend><span className="cm-q-n">2</span>Чем ты занимаешься?</legend>
            <div className="os-chips cm-chips-lg">
              {(cfg.spheres || []).map(s => (
                <button type="button" key={s.id} className={sphere === s.id ? 'on' : ''} aria-pressed={sphere === s.id}
                        onClick={() => { setSphere(s.id); setErr(''); }}>{s.title}</button>
              ))}
            </div>
            {sphere === 'other' && (
              <input className="os-login-input" style={{ marginTop: 10 }} type="text" maxLength={120}
                     placeholder="Чем именно? (по желанию)" value={sphereCustom} onChange={clr(setSphereCustom)} aria-label="Своя сфера"/>
            )}
          </fieldset>

          <fieldset className="cm-q">
            <legend><span className="cm-q-n">3</span>Где ты работаешь? <Opt>по желанию</Opt></legend>
            <input className="os-login-input" type="text" maxLength={120} autoComplete="organization" placeholder="Компания"
                   value={company} onChange={clr(setCompany)} aria-label="Компания"/>
          </fieldset>

          <fieldset className="cm-q">
            <legend><span className="cm-q-n">4</span>Откуда ты?</legend>
            <div className="cm-pair">
              <input className="os-login-input" type="text" maxLength={80} autoComplete="country-name" placeholder="Страна"
                     value={country} onChange={clr(setCountry)} aria-label="Страна"/>
              <input className="os-login-input" type="text" maxLength={80} autoComplete="address-level2" placeholder="Город"
                     value={city} onChange={clr(setCity)} aria-label="Город"/>
            </div>
            <div className="cm-hint">Так мы знакомим с участниками рядом и зовём на офлайн-встречи</div>
          </fieldset>

          <fieldset className="cm-q">
            <legend><span className="cm-q-n">5</span>Расскажи о себе в трёх предложениях <Opt>по желанию</Opt></legend>
            <textarea className="os-login-input cm-textarea" rows={4} maxLength={ABOUT_MAX} placeholder={ABOUT_EXAMPLE}
                      value={about} onChange={clr(setAbout)} aria-label="О себе" aria-describedby="about-hint"/>
            <div className="cm-hint cm-hint-row" id="about-hint">
              <span>Чем занимаешься и как уже используешь ИИ</span>
              <span className={about.length >= ABOUT_MAX ? 'cm-count-max' : ''}>{about.length} / {ABOUT_MAX}</span>
            </div>
          </fieldset>

          <fieldset className="cm-q">
            <legend><span className="cm-q-n">6</span>Чего хочешь достичь с помощью ИИ?</legend>
            <div className="cm-goals">
              {(cfg.goals || []).map(g => (
                <label key={g.id} className={`cm-opt${goal === g.id ? ' on' : ''}`}>
                  <input type="radio" name="goal" value={g.id} checked={goal === g.id} onChange={() => { setGoal(g.id); setErr(''); }}/>
                  <span className="cm-opt-t">{g.title}</span>
                  {g.hint && <span className="cm-opt-d">{g.hint}</span>}
                </label>
              ))}
              <label className={`cm-opt${goal === 'other' ? ' on' : ''}`}>
                <input type="radio" name="goal" value="other" checked={goal === 'other'} onChange={() => { setGoal('other'); setErr(''); }}/>
                <span className="cm-opt-t">Свой вариант</span>
                <span className="cm-opt-d">Напиши своими словами</span>
              </label>
            </div>
            {goal === 'other' && (
              <input className="os-login-input" style={{ marginTop: 10 }} type="text" maxLength={300} autoFocus
                     placeholder="Например: научить отдел продаж готовить КП с ИИ" value={goalCustom}
                     onChange={clr(setGoalCustom)} aria-label="Своя цель"/>
            )}
          </fieldset>

          {err && <div className="os-login-err show" role="alert">{err}</div>}
          <div style={{ display:'flex', gap: 12, alignItems:'center', flexWrap:'wrap' }}>
            <button className="os-btn tg" type="submit" disabled={busy} style={{ height: 48 }}>
              {busy ? 'Сохраняем…' : prev ? 'Сохранить' : 'Готово →'}
            </button>
            {!prev && <button type="button" className="os-btn ghost" onClick={skip}>Заполнить позже</button>}
            {prev && <button type="button" className="os-btn ghost" onClick={() => nav('profile')}>Отмена</button>}
          </div>
        </form>
      </div>
    </div>
  );
}
window.Onboarding = Onboarding;